Criar uma aplicação Web básica

TUTORIAL

Módulo 5: Adicionar interatividade à aplicação Web

Neste módulo, você modificará o site estático para invocar a API e exibir o texto personalizado.

Visão geral

Neste módulo, você atualizará o site estático criado no Módulo 1 para invocar a API REST criada no Módulo 3. Esse processo adicionará uma funcionalidade para exibir texto com base na sua entrada.

O que você aprenderá

Neste módulo, você irá:
  • Chamar uma API do API Gateway de uma página HTML
  • Fazer upload de uma nova versão de uma aplicação Web ao console do Amplify

Principais conceitos

Implantar um site: tornar um site disponível para usuários.

Ambiente: um estágio como "prod", "dev" ou "staging" em que uma aplicação ou um site pode ser executado.

Invocar uma API: enviar um evento para uma API acionar um comportamento específico.

 Tempo mínimo para conclusão

5 minutos

 Serviços usados

 Data da última atualização

4 de abril de 2023

Implementação

    1. Abra o arquivo index.html que você criou no Módulo 1.
    2. Substitua o código existente pelo seguinte:
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>Hello World</title>
        <!-- Add some CSS to change client UI -->
        <style>
        body {
            background-color: #232F3E;
            }
        label, button {
            color: #FF9900;
            font-family: Arial, Helvetica, sans-serif;
            font-size: 20px;
            margin-left: 40px;
            }
         input {
            color: #232F3E;
            font-family: Arial, Helvetica, sans-serif;
            font-size: 20px;
            margin-left: 20px;
            }
        </style>
        <script>
            // define the callAPI function that takes a first name and last name as parameters
            var callAPI = (firstName,lastName)=>{
                // instantiate a headers object
                var myHeaders = new Headers();
                // add content type header to object
                myHeaders.append("Content-Type", "application/json");
                // using built in JSON utility package turn object to string and store in a variable
                var raw = JSON.stringify({"firstName":firstName,"lastName":lastName});
                // create a JSON object with parameters for API call and store in a variable
                var requestOptions = {
                    method: 'POST',
                    headers: myHeaders,
                    body: raw,
                    redirect: 'follow'
                };
                // make API call with parameters and use promises to get response
                fetch("YOUR-API-INVOKE-URL", requestOptions)
                .then(response => response.text())
                .then(result => alert(JSON.parse(result).body))
                .catch(error => console.log('error', error));
            }
        </script>
    </head>
    <body>
        <form>
            <label>First Name :</label>
            <input type="text" id="fName">
            <label>Last Name :</label>
            <input type="text" id="lName">
            <!-- set button onClick method to call function we defined passing input values as parameters -->
            <button type="button" onclick="callAPI(document.getElementById('fName').value,document.getElementById('lName').value)">Call API</button>
        </form>
    </body>
    </html>

    3. Adicione o URL de invocação da API à linha 41 (do Módulo 3). Observação: se você não tem o URL da API, pode consegui-lo no Console do API Gateway clicando na API e em estágios.

    4. Salve o arquivo.

    5. Compacte (no formato .zip) somente o arquivo HTML.

    6. Abra o console do Amplify.

    7. Clique na aplicação Web criada no Módulo 1.

    8. Clique no botão branco Escolher arquivos.

    9. Selecione o arquivo ZIP criado na etapa 5.

    10. Quando o arquivo for carregado, um processo de implantação começará automaticamente. Quando a barra verde aparecer, a implantação estará concluída.

    1. Clique no URL abaixo de Domínio.
    2. A aplicação Web atualizada deve ser carregada no navegador.
    3. Preencha seu nome (ou o nome que preferir) e clique no botão Chamar API.
    4. Uma mensagem que começa com Hello from Lambda será exibida, seguida do texto que você preencheu.
     
    Parabéns! Parabéns! Agora você tem uma aplicação Web implantada pelo console do Amplify capaz de chamar uma função do Lambda por meio do API Gateway!

Arquitetura da aplicação

Agora que todos os módulos foram concluídos, esta é a arquitetura do que você criou:

Diagrama de arquitetura mostrando servi&ccedil;os hospedados na Nuvem AWS, com conex&otilde;es mostradas de usu&aacute;rios externos a servi&ccedil;os interconectados da AWS.

Todos os serviços da AWS que você configurou podem se comunicar entre si com segurança. Quando um usuário escolhe um botão na aplicação Web, o cliente faz uma chamada à API, que aciona a função do Lambda. A função do Lambda grava em um banco de dados e retorna uma mensagem ao cliente por meio do API Gateway. O IAM gerencia todas as permissões.

Parabéns!

Você criou uma aplicação Web na AWS com êxito! No próximo módulo, limparemos os recursos usados neste tutorial para que você não incorra em cobranças indesejadas em sua conta.

Esta página foi útil para você?

Limpar os recursos