Conceitos básicos da AWS

Criar uma aplicação Web básica

Implantar uma aplicação Web e adicionar interatividade com uma API e um banco de dados

Módulo 5: Adicionar interatividade ao aplicativo Web

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

Introdução

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á

  • Chamar uma API do API Gateway de uma página HTML
  • Fazer upload de uma nova versão de um aplicativo 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 executada.

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

 Tempo para a conclusão

5 minutos

Implementação

  • Atualização de aplicativo Web App com o console do Amplify
    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 “stages” (estágios).

    4. Salve o arquivo.

    5. ZIP (compacte) somente o arquivo HTML.

    6. Abra o console do Amplify.

    7. Clique no aplicativo Web criado no Módulo 1.

    8. Clique no botão branco Choose files (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.

  • Testar o aplicativo Web atualizado
    1. Clique na URL abaixo de Domain (domínio).
    2. O aplicativo Web atualizado deve ser carregado no navegador.
    3. Preencha seu nome (ou o nome que preferir) e clique no botão “Call API” (Chamar API).
    4. Uma mensagem que começa com “Hello from Lambda” será exibida, seguida do texto que você preencheu.
    5. Parabéns! Agora você tem um aplicativo Web implantado 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:

full-stack amplify console arch diagram module 5

Todos os serviços da AWS que você configurou podem se comunicar entre si com segurança. Quando um usuário clica em um botão no aplicativo 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.

Este módulo foi útil?

Agradecemos a sua atenção
Gostaríamos de saber do que você gostou.
Fechar
Desculpe por ter desapontado
Encontrou algo desatualizado, confuso ou incorreto? Envie seus comentários para nos ajudar a melhorar este tutorial.
Fechar

Parabéns!

Você criou uma aplicação Web na AWS com êxito! Para continuar em grande estilo, aprofunde-se ainda mais nas funções sem servidor e nos bancos de dados e amplie seu conhecimento sobre a Nuvem AWS.