Criação de soluções com integração

Neste vídeo será criado uma página que permite que o usuário crie novos pedidos através de um formulário. Este formulário realiza uma requisição POST para a API de pedidos

Passos de execução

• Criar um canal "Novo Pedido" com página "Novo pedido"
• Instanciar interface do serviço "Script" no page holder "main"
• Criar estilo "Novo pedido" com o seguinte HTML:

<section class="main__container container">
  <h1 class="main__title">Novo pedido</h1>
  <form class="form" id="form-novo-pedido">
    <div class="form-group">
      <label class="form__input-container">
        <input class="form__input" id="nome-pedido" minlength="3" name="nome-pedido" placeholder="Seu nome" type="text" />
        <span class="form__label">Nome do pedido</span>
      </label>
    </div>
    <div class="form-group">
      <label class="form__textarea-container">
        <textarea class="form__textarea" cols="30" id="info-adicional" minlength="3" name="info-adicional" placeholder="Digite as informações adicionais do pedido" rows="10"></textarea>
        <span class="form__label">Informações adicionais</span>
      </label>
    </div>
    <div class="form-group">
      <label class="form__textarea-container">
        <textarea class="form__textarea" cols="30" id="detalhes-pedido" minlength="3" name="detalhes-pedido" placeholder="Digite os detalhes do pedido" rows="10"></textarea>
        <span class="form__label">Detalhes do pedido</span>
      </label>
    </div>
    <button class="form__submit">Enviar</button>
  </form>
</section>
<script>
  const form = document.getElementById('form-novo-pedido');
  form.addEventListener('submit', function(event) {
    // Evitar o comportamento padrão do envio do formulário
    event.preventDefault();
    var headers = new Headers();
    headers.append("Content-Type", "application/json");
    var formData = JSON.stringify({
      "nome_pedido": document.getElementById('nome-pedido').value,
      "detalhes": document.getElementById('detalhes-pedido').value,
      "numero_pedido": gerarNumeroPedidoFake(),
      "info_adicional": document.getElementById('info-adicional').value
    });
    var requestOptions = {
      method: 'POST',
      headers: headers,
      body: formData
    };
    fetch("${environment.properties['api-url'][0]}/pedidos", requestOptions).then(response => response.json()) // Converte a resposta em um objeto JSON
      .then(data => {
        // Trata a resposta da solicitação POST
        console.log(data);
        alert('Pedido criado com sucesso!');
      }).catch(error => {
        console.error(error);
        alert('Ocorreu um erro ao criar o pedido');
      });
  });

  function gerarNumeroPedidoFake() {
    const numero = Math.floor(Math.random() * 100000000);
    return ('00000000' + numero).slice(-8);
  }
</script>

• Criar novo pedido
  • Nome do pedido: Solicitação de novo teclado
  • Informações adicionais: Sem fio
  • Detalhes:

Pedido de Teclado Logitech K400

Detalhes do Produto:
Produto: Teclado Logitech K400
Quantidade: 1
Cor: Preta
Outras Especificações: Sem fio