š¦ FastFeet Ć© uma soluĆ§Ć£o simples ponta-a-ponta para gestĆ£o de encomendas. š¦
Abrangendo trĆŖs camadas ā server API (backend), interface web para gestĆ£o (frontend) e aplicativo mĆ³vel exclusivo para entregadores (mobile) ā, o projeto foi desafio final para avaliaĆ§Ć£o e emissĆ£o de certificado do treinamento online GoStack criado e lecionado pela Rocketseat.
Os requisitos e layouts de cada etapa do projeto podem ser encontrados em: backend [1] [2], frontend [3] e mobile [4].
Foco do bootcamp, a stack utilizada no desenvolvimento Ć© baseada na linguagem JavaScript e composta por Node.js, ReactJS e React Native.
A aplicaĆ§Ć£o mĆ³vel (
mobile) foi desenvolvida e testada apenas em sistemas Android ā via USB em dispositivo fĆsico e em emulador Genymotion da Genymobile. Nenhum teste foi feito para o iOS, logo, rodar em tal sistema pode demandar alguma adaptaĆ§Ć£o no cĆ³digo.
Se for do interesse utilizar a soluĆ§Ć£o em ambiente de produĆ§Ć£o, uma revisĆ£o e algumas alteraƧƵes na seguranƧa do projeto precisarĆ£o ser feitas.
Previamente, tenha instalado em seu ambiente o Node.js e o Yarn. Durante o desenvolvimento deste projeto, foram utilizadas as versƵes 10.16.3 do Node.js e 1.21.1 do Yarn.
Para os trĆŖs ambientes da aplicaĆ§Ć£o, backend, frontend e mobile, a instalaĆ§Ć£o Ć© feita pela execuĆ§Ć£o do comando yarn dentro de suas respectivas pastas.
O projeto conta com os SGBDs PostgreSQL e Redis no backend, portanto tambƩm precisam ser instalados. Respectivamente, as versƵes 11.6 e 5.0.5 foram as utilizadas durante o desenvolvimento, atravƩs de imagens oficiais para o Docker.
Mesmo desenvolvida em React Native, outras configuraƧƵes ainda precisam ser feitas para que uma aplicaĆ§Ć£o Android seja executada atravĆ©s do computador. Um guia completo de configuraĆ§Ć£o e resoluĆ§Ć£o de problemas foi feito pela equipe da Rocketseat e pode ser acessado aqui.
Primeiramente, crie um banco de dados no PostgreSQL para a aplicaĆ§Ć£o ā uma aplicaĆ§Ć£o com interface grĆ”fica como o Postbird pode ser utilizada. O enconding "UTF8" pode ser o utilizado para o banco de dados.
O backend utiliza a biblioteca dotenv para gerenciar algumas variĆ”veis do ambiente da aplicaĆ§Ć£o. Um arquivo .env (exatamente com este nome) deve ser disponibilizado na pasta raiz desta camada, seguindo como exemplo o arquivo .env.example disponĆvel na pasta. Todas as variĆ”veis devem ser preenchidas. As variĆ”veis sem valores atribuĆdos devem ser preenchidas conforme as configuraƧƵes locais do seu ambiente. Por exemplo, como valor da variĆ”vel DB_NAME, o nome dado ao banco de dados criado anteriormente deverĆ” ser preenchido. As variĆ”veis jĆ” preenchidas no arquivo de exemplo definem configuraƧƵes da aplicaĆ§Ć£o, mas tambĆ©m podem ser alteradas.
A aplicaĆ§Ć£o faz o envio de e-mails em algumas ocasiƵes ā o SGBD Redis Ć© utilizado exclusivamente na gestĆ£o das filas de e-mails a enviar. Entre as variĆ”vies de ambiente, as iniciadas com MAIL_ servem para a configuraĆ§Ć£o do servidor SMTP responsĆ”vel pelo envio. Nelas podem ser configurados serviƧos de teste de envio de e-mails como o Mailtrap, por exemplo. Ć comum que o Redis, variĆ”veis REDIS_, seja configurado para o host 127.0.0.1 (endereƧo local) e porta 6379.
Com todas as variƔveis de ambiente configuradas e salvas no arquivo .env na pasta backend/, na mesma pasta, execute o seguinte:
| Comando | FunĆ§Ć£o |
|---|---|
yarn sequelize db:migrate |
Executa as migrations (criaƧƵes/alteraƧƵes de tabelas) no BD. |
yarn sequelize db:seed:all |
Executa a seed que cria o usuƔrio administrador no BD. |
A soluĆ§Ć£o dotenv tambĆ©m Ć© utilizada no frontend em ReactJS. No arquivo .env, que tambĆ©m precisarĆ” ser disponibilizado na pasta raiz desta camada, a variĆ”vel REACT_APP_API_URL precisa estar configurada com o endereƧo e a porta onde a API da aplicaĆ§Ć£o (camada backend) estarĆ” rodando. JĆ” hĆ” um arquivo .env.example de exemplo disponĆvel.
Se for do interesse, para debugging do Redux, os estados de sua Store e de seus sagas pode ser usada a ferramenta Reactotron, jĆ” configurada na aplicaĆ§Ć£o.
Para o aplicativo mĆ³vel, o endereƧo e a porta onde a API estarĆ” rodando sĆ£o configurados diretamente no arquivo que exporta o serviƧo de chamadas Ć API (mobile/src/services/api.js).
O app mĆ³vel tambĆ©m estĆ” configurado para que se utilize o Reactotron na inspeĆ§Ć£o do Redux e, neste ambiente, a ferramenta ainda farĆ” a interceptaĆ§Ć£o das chamadas Ć API. A porta padrĆ£o utilizada pelo Reactotron Ć© a 9090 e provavelmente o redirecionamento dessa porta precisarĆ” ser feito com o comando adb reverse tcp:9090 tcp:9090. Dependendo de como a aplicaĆ§Ć£o serĆ” executada, em dispositivo fĆsico ou emulador, a chamada do mĆ©todo configure() no arquivo de configuraĆ§Ć£o do Reactotron (mobile/src/config/ReactotronConfig.js) pode precisar ser editada especificando o IP do computador na rede (um exemplo).
Os bancos PostgreSQL e Redis devem ser previamente iniciados.
| Comando | FunĆ§Ć£o |
|---|---|
yarn dev |
Inicia o nĆŗcleo da API. |
yarn queue |
Inicia o gerenciador de filas de e-mails. |
| Comando | FunĆ§Ć£o |
|---|---|
yarn start |
Inicia a aplicaĆ§Ć£o web (uma janela do navegador abrirĆ” automaticamente). |
Na tela de login, acesse o sistema com as credenciais do usuƔrio administrador criado anteriormente: e-mail admin@fastfeet.com e senha 123456.
| Comando | FunĆ§Ć£o |
|---|---|
npx react-native start --reset-cache |
Inicia o gerenciador do pacote da aplicaĆ§Ć£o. |
npx react-native run-android |
Monta e instala a aplicaĆ§Ć£o no dispositivo Android conectado ou emulado. |
Possivelmente um bug, mudar a ordem da execuĆ§Ć£o dos comandos acima resulta numa aplicaĆ§Ć£o "em branco" no dispositivo.
Ć provĆ”vel que o redirecionamento de portas, entre o dispositivo Android e o computador rodandos os serviƧos, precise ser realizado. Particularmente, o seguinte comando Ć© o que tem sido utilizado via terminal e que abrange todas as portas necessĆ”rias pelas configuraƧƵes originais: adb reverse tcp:3333 tcp:3333 && adb reverse tcp:8081 tcp:8081 && adb reverse tcp:9090 tcp:9090. Esse comando serĆ” fundamental se, no arquivo .env da camada backend, as variĆ”veis ambiente APP_URL estiver configurada como localhost e a PORT como 3333, conforme as configuraƧƵes originais de exemplo dada Ć quela camada.
Para acessar as funƧƵes do app, um entregador precisarĆ” ser criado pelo usuĆ”rio administrador no frontend web de gestĆ£o. Apenas o nĆŗmero identificador do entregador, gerado automaticamente, Ć© usado no login do app.
- TambĆ©m foram desenvolvidos os requisitos opcionais colocados nas etapas do projeto (paginaĆ§Ć£o das listagens, mĆ”scara de CEP, filtro na listagem de encomendas e scroll infinito).
- O desenvolvimento das interfaces visuais buscou ser fiel ao resultado esperado dos layouts entregues pela plataforma online da Adobe XD. Apenas assimetrias e dimensƵes "quebradas" foram sendo ajustadas durante a implementaĆ§Ć£o.
- Uma e outra decisĆ£o de design precisou ser tomada para contornar qualquer falta de especificaĆ§Ć£o (p. ex. funĆ§Ć£o de retirada da encomenda pelo app mĆ³vel).
- Por algum motivo, talvez limitaĆ§Ć£o na emulaĆ§Ć£o, o comportamento visual do componente de cĆ¢mera e seu container, na tela de confirmaĆ§Ć£o da entrega, Ć© diferente entre o dispositivo fĆsico e o emulado.
- Se interessou na soluĆ§Ć£o e quer usĆ”-la/estendĆŖ-la numa ideia similar (um serviƧo com tele-entregas, por exemplo)? Legal!!! Toca ficha! Use o cĆ³digo como quiser!
- Seguiu o passo-a-passo, estĆ” enfrentando problemas e acredita que hĆ” algo de errado no README ou no cĆ³digo da aplicaĆ§Ć£o, abra uma issue que lhe ajudarei.
- Gostou da implementaĆ§Ć£o e acredita que posso ajudar em projetos da sua equipe? Que massa!!! Abra uma issue por aqui para trocarmos uma ideia e contatos. :)
A ideia da aplicaĆ§Ć£o, os logotipos usados e os layouts originais das pĆ”ginas e telas do projeto foram todos concebidos pela equipe da Rocketseat š š š.