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
adicionar interatividade ao aplicativo web
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
Serviços usados
Implementação
-
Atualização de aplicativo Web App com o console do Amplify
- Abra o arquivo index.html que você criou no Módulo 1.
- 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.
- Abra o arquivo index.html que você criou no Módulo 1.
-
Testar o aplicativo Web atualizado
- Clique na URL abaixo de Domain (domínio).
- O aplicativo Web atualizado deve ser carregado no navegador.
- Preencha seu nome (ou o nome que preferir) e clique no botão “Call API” (Chamar API).
- Uma mensagem que começa com “Hello from Lambda” será exibida, seguida do texto que você preencheu.
- 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:
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.
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.