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á
- 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
Implementação
-
Atualizar a aplicação 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 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.
- Abra o arquivo index.html que você criou no Módulo 1.
-
Teste a aplicação Web atualizada
- Clique no URL abaixo de Domínio.
- A aplicação Web atualizada deve ser carregada no navegador.
- Preencha seu nome (ou o nome que preferir) e clique no botão Chamar API.
- 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:
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.