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

Neste vídeo será criado uma página Lista de pedidos no LumisXP que irá consumir os pedidos da API criada anteriormente

Passos de execução

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

<section class="main__container container">
  <h1 class="main__title">Meus pedidos</h1>
  <table class="table">
    <thead class="js-table-header">
      <tr class="table__header">
        <th>Id do pedido</th>
        <th>Nome do pedido</th>
        <th>Informação adicional</th>
      </tr>
    </thead>
    <tbody id="lista-pedidos">
      <!--recuperado client-side-->
    </tbody>
  </table>
  <script src="scripts/components/table.js" defer></script>
</section>
<script>
  // Faz uma solicitação HTTP para o endpoint fornecido
  fetch("${environment.properties['api-url'][0]}/pedidos").then(response => response.json()) // Converte a resposta em um objeto JSON
    .then(data => {
      // Itera sobre a lista de pedidos e gera um HTML simples para cada um
      data.forEach(pedido => {
        const html = `
        <tr class="table__body js-table-body">
            <td>` + pedido.id + `</td>
            <td class="table__title">
                <strong>` + pedido.nome_pedido + `</strong>
            </td>
            <td>` + pedido.info_adicional + `</td>
            <td class="table__button">
                <a href="#">Ver pedido</a>
            </td>
        </tr>`;
          
        // Adiciona o HTML gerado ao DOM da página
        document.getElementById("lista-pedidos").innerHTML += html;
      });
    }).catch(error => console.error(error));
</script>