A rebuild of the serverless website WildRydes Workshop in Vue.js with AWS Amplify CLI.
Clique aqui para acessar o projeto final
Esse projeto foi feito como parte do processo seletivo do Nexo Jornal.
Trilha escolhida: Crie uma aplicação Web sem servidor
Nas minhas experiências recentes, tenho com frequência participado de projetos atuando no front-end. Soma isso ao fato de que nunca tive um contato direto com os recursos da AWS, e chego à escolha do projeto.
Como se trata de uma vaga para full stack, entendi que percorrer esse tutorial seria uma ótima forma de desenvolver outros conceitos e habilidade, e me preparar para a oportunidade de uma forma mais completa.
Atualmente, trabalho como desenvolvedor front-end, utilizando principalmente as tecnologias React e React Native.
Nesse documento, pretendo registrar com comentários e printscreens o meu percurso nesse tutorial.
Sobre o projeto: Se trata da implementação de uma aplicação utilizando os serviços da AWS para configurar o backend Serveless. A aplicação é um "Uber de Unicórnios"
Ferramenta utilizada: AWS Amplify
Antes, eu havia utilizado o Netlify e o próprio github pages para deploy do front-ent. Primeiro passo: conta na AWS, criação do repositório, configuração do ambiente.
Primeiro problema enfrentado: não tenho configurado o CLI da AWS. E infelizmente, o tutorial não especifica muito bem como seguir quais passos seguir nesse sentido.
Minha solução foi buscar tutoriais auxiliares:
- https://webapp.serverlessworkshops.io/staticwebhosting/repository/
- https://webapp.serverlessworkshops.io/setup/
Mensagens de erro no terminal, que diz que eu não tenho as credenciais.
-
Processo de Deploy do Site Estático na AWS Amplify
-
Configuração do ambiente de Deploy
-
Deploy feito com Sucesso
Serviço utilizado: Amazon Cognito
Novamente, aqui enfrentei alguns problemas com algumas instruções do tutorial original. Por isso, acabei me guiando à partir daqui principalmente pela outra versão do tutorial que encontrei.
Tive que instalar o CLI da AWS
-
Configurando o ambiente CLI do ampify no meu terminal
-
Teste do processo de Cadastro no Site
-
Página Login Feito com Sucesso
A partir dessa etapa, todo o processo se deu de forma bem tranquila. A maior parte do trabalho foi feita no ambiente da AWS, acessando a página dos produtos e os configurando.
Nessa etapa, utilizei as ferramentas AWS Lambda e Amazon DynamoDB para configurar o ambiente de Backend Serveless da aplicação.
Primeiro, foi configurada uma nova tabela no DynamoDB para armazenar as corridas do App. Após isso, foi criada uma função Lambda através do AWS Lambda Console, em que foi implementado um código pronto.
-
Implementação da Função Lambda
-
Criação do teste da função Lambda
-
Mensagem de sucesso da função Lambda
Por fim, o tutorial me levou a criação de uma Restful API que permita realizar as requisiçoes da aplicação (no caso, o pedido de carona de um unicórnio). A ferramenta utilizada foi o Amazon API Gateway Console
Essa parte em específica achei extremamente interessante. Ao fim de um bootcamp que recentemente terminei pela Ironhack, havia desenvolvido uma aplicação de e-commerce fullstack, em que desenvolvi uma Rest API utilizando NodeJS, Express e MongoDB. Utilizar o serviço da AWS me impressionou muito, tanto pela nova forma de se realizar quanto pela incrível facilidade do processo.
A tela para fazer o "pedido" da carona pode ser acessada através desse link
-
Criação de uma API Restful
-
Mesagem de sucesso do teste de Integração da API recém-criada com o App
-
Execução da Aplicação: Clicar em algum lugar do mapa e pedir um unicórnio com sucesso
