Neste guia prático, você aprenderá a criar um aplicativo com funcionalidade de compartilhamento de caronas (para unicórnios!), extraído do projeto de amostra Wild Rydes. Utilizaremos sete serviços diferentes – GitHub, Amplify, Cognito, Lambda, IAM, API Gateway e DynamoDB – explicando por que e onde usá-los, e como fazê-los trabalhar em conjunto. À medida que avançamos, construiremos cada serviço, dando a eles a funcionalidade de compartilhamento de caronas para o aplicativo. O objetivo é fornecer um passo a passo detalhado para que você possa implementar sua própria Web application na AWS.
Esta aplicação é implementada no Amazon Amplify, integrado com o repositório GitHub para o pipeline CI/CD. O user pool do Amazon Cognito é usado para autenticação de usuários para se inscreverem ou fazerem login no aplicativo usando nome de usuário ou e-mail, senha e confirmação de senha. O IAM é usado para dar ao Lambda o acesso de gravação à tabela DynamoDB, e o Lambda é usado para colocar itens (dados do usuário) nos logs da tabela DynamoDB. O API Gateway é usado como API Rest, o que ajuda o usuário a invocar a função Lambda para o Unicorn Ride.
Pré-requisitos para criar sua Web application na AWS
Para seguir este projeto, você precisará de:
- Um editor de texto (notepad) para anotar IDs, ARN, etc.
- Uma conta AWS, logada no Console AWS como um usuário IAM.
- Algum conhecimento básico de AWS é preferível, mas você ainda pode acompanhar se for um iniciante absoluto.
- Uma conta GitHub e o código do meu repositório GitHub: https://github.com/JosephHonpah/end-to-end-web-app
Visão arquitetural da aplicação: https://main.d2i8yld6dviyk2.amplifyapp.com/
Como copiar o código da aplicação do repositório GitHub
- Crie ou faça login na sua conta GitHub.
- Clique no link abaixo para acessar meu repositório GitHub. https://github.com/JosephHonpah/end-to-end-web-app
- Você pode usar o modelo criando um novo repositório no GitHub a partir do modelo ou clonando.
Criando uma nova Web app no AWS Amplify
- Navegue até o AWS Management Console e procure por Amplify e clique em AWS Amplify.
- Clique em Deploy an app abaixo para construir a aplicação web.
- Clique em GitHub, porque o código da aplicação está armazenado no repositório GitHub que você criou acima.
- Você precisa selecionar sua conta github, que é JosephHonpah para mim.
- Faça login na sua conta GitHub e clique em confirm.
- Após o login bem-sucedido, você precisa selecionar o repositório no qual armazenou seu código. Você pode enviar todos os repositórios para o Amplify e selecionar a partir do Amplify, mas é melhor clicar em Only select repositories e escolher o repositório que você deseja construir no Amplify.
- Role para baixo e clique em next.
- Nas configurações do aplicativo, deixe tudo como padrão e role para baixo, clique em next.
- Revise e clique em save and deploy.
- O Amplify está sendo implementado e pode levar 2 minutos ou mais, dependendo da largura de banda da rede.
- O Amplify foi implementado com sucesso e com um nome DNS para acessar a aplicação: https://main.d2i8yld6dviyk2.amplifyapp.com/
- A aplicação agora pode ser acessada a partir do repositório GitHub usando o nome de domínio Amplify fornecido acima. Ok, vamos lá…
Autenticação de usuários
Você precisa de usuários autenticados para se registrarem e fazerem login na sua aplicação de forma segura e bem-sucedida. Para isso, usaremos o user pool do Amazon Cognito com os seguintes passos abaixo:
- Navegue mais uma vez até a barra de pesquisa no management console, procure por cognito e abra em uma nova aba.
- Clique em create user pool.
- Coloque o nome do cognito user pool app client. Pode ser qualquer nome, mas certifique-se de ter um notepad para anotar.
- Selecione o tipo de configuração. Como você quer que os usuários se registrem e façam login na sua aplicação e selecionem os atributos. Role para baixo e clique em create.
- Clique em User pool e certifique-se de copiar o User pool ID para o notepad. Porque você precisa adicionar configurações ao seu código para autenticação à sua aplicação.
- No canto esquerdo da página, clique em App clients e copie o Client-ID e coloque no notepad.
- Navegue até seu repositório github no diretório js/config.js e adicione o user pool ID, o client ID e a região AWS que você copiou e colou no note pad.
- Uma vez feito isso, clique em commit changes no canto superior esquerdo e o Amplify irá implementar automaticamente as alterações feitas no seu código, já que é um serviço de pipeline CI/CD serverless.
- De volta à aplicação, clique em sign up e registre-se com e-mail e senha, clique em LET’S RYDE.
- Coloque o código no e-mail e clique em Verify. Você deverá ser capaz de obter o código do Amazon cognito e a mensagem de Verification successful do AWS Amplify, o que significa que o usuário está pronto para ir e fazer login na aplicação.
- Uma vez logado com as credenciais, você recebe um token e você copia e coloca isso no notepad também para uso futuro. Este token será necessário para invocar o API Gateway para que os usuários façam chamadas de API para corridas de qualquer local no mapa.
Armazenamento de credenciais com DynamoDB
Aqui vamos ver como usar o DynamoDB para armazenar as credenciais dos usuários, pedidos, etc. E o Lambda será um bom serviço para armazenar automaticamente esses detalhes no DynamoDB.
- Crie uma tabela dynamoDB digitando dynamodb na barra de pesquisa. Clique nela e crie uma tabela.
- Dê um nome à tabela e um nome de partion key, que será usado para recuperar itens da sua tabela e alocar dados entre os hosts para escalabilidade e disponibilidade. Role para baixo e crie a tabela.
- Uma vez criada a tabela, clique na tabela, role para baixo e clique em additional Info. Você precisa copiar e colar o ARN da tabela e colar no notepad.
- Você precisa dar ao Lambda a permissão para escrever no dynamoDB sempre que um usuário se inscreve, faz login, pede uma corrida, detalhes da corrida, etc. Isso será feito no AWS Identity Access Management (IAM). Abra o IAM em uma nova aba a partir do AWS Management Console.
- Clique em Roles e crie um role.
- O tipo de entidade confiável deve ser AWS service e o caso de uso deve ser lambda, role para baixo e clique em next.
- Adicione permissão ao role AWSLambdaBasicExecutionRole.
- Dê um nome ao lambda role e role para baixo, clique em create role.
- Após a criação do role, clique em role (webapp2025_lambda) e clique em Add permissions para criar uma Inline policy para o dynamoDB.
- O caso de uso deve ser DynamoDB e precisamos, para melhor prática, dar permissão para que o lambda coloque itens na tabela dynamodb criada acima.
- Role para baixo e clique em Add ARNs to restrict access.
- Clique em Text e cole o ARN da tabela dynamodb que você criou e copiou acima do notepad. Clique em Add ARNs e prossiga para Next.
- Revise e dê um nome à policy. Role para baixo e prossiga para criar a policy.
Função Lambda para a Web application na AWS
A função Lambda agora é necessária para realizar a mágica na aplicação. Então, mais uma vez, navegue até a barra de pesquisa, procure por lambda e abra em uma nova aba, clique em create function.
- Autorize a partir do zero e dê um nome à função lambda e eu vou com Node.js 20 x, porque meu código no repositório está configurado para Node.js 20 x e role para baixo.
- Adicione permissões à função lambda que foi criada acima no IAM. Clique em Use an existing role e selecione o role criado. Role para baixo e clique em create function.
- Uma vez criada a função, role para baixo, copie e cole o código lambda do repositório github criado desde o início no editor de código lambda e inclua o nome da tabela dynamodb que você criou acima no código, então proceda para Deploy.
- Na página esquerda, clique em create new event para testar se a função lambda está funcionando corretamente. Dê o nome do evento e role para baixo até o Event Json.
