Semana focada em desenvolver um aplicação Web, do back ao front-end e com mobile utilizando a stack JavaScrip.
- React Uma biblioteca interativa para criar interfaces com o usuário.
-
React Native Com o lema: "Learn once, write anywhere", utiliza os mesmos conceitos do React para criar interfaces nativas para dispositivos móveis. Com um código e uma linguagem é possível criar apps para Android e iOS.
-
Expo É um framework e uma plataforma universal para aplicação React, definindo ferramentas construídas em React Native e plataformas nativas que ajudam o desenvolvedor a construír, lançar e interagir rapidamente no iOS e Android a partir do mesmo código JavaScript/TypeScript.
-
NodeJs Node.js® é um runtime JavaScript desenvolvido com o Chrome's V8 JavaScript engine. Basicamente.
-
SQLite Este é o nosso banco de dados. Do tipo SQL, onde a estrutura é bem definida.
Uma aplicação para que ONG's possam divulgar seus casos e conseguir financiamento voluntário para cada um deles.
Foi apresentado o projeto, cujo mockup do layout foi construído no figma. Também fizemos o ritual do "Hello World" em cada tecnologia utilizada. É possível acessar esses tutoriais aqui:
No segundo dia construímos o back-end da aplicação com as seguintes tecnologias:
-
NodeJS Utilizamos o nodejs como base da aplicação para gerenciar a conexão entre o front-end e o banco de dados. Foram utilizadas as seguintes bibliotecas:
- Express => Utilizado para gerenciar as requisições, rotas e URLS. As configurações de conexão podem ser acessadas aqui e aqui
- Nodemon => Utilzado para monitorar as alterações em todos os arquivo e dar "restart" no servidor.
- SQLite => Para o banco de dados.
- Knex => Para gerenciar o banco de dados, com o CRUD completo. O banco de dados foi instalado através do Knex conforme mostrado aqui.
- CORS => Para permitir o acesso do front-end e mobile à aplicação.
- Entidades:
- Funcionalidades
- Login/Logout da ONG
- Cadastro da ONG
- Deletar Casos
- Listar casos específicos de uma ONG
- Listar todos os casos
- Entrar em contato com a ONG
Nesse dia contruímos o front-end da aplicação, utilizando React e outras bibliotecas:
- Axios => cliente HTTP, onde é possível fazer request HTTP do nodeJs.
- React Icons => biblioteca que permite a inserção de ícones como componentes dentro da aplicação.
Nesse dia construímos o app mobile, utilizando o React Native e Expo.
Utlizamos a Stack Navigation para o nosso app.
Outras bibliotecas utilizadas nesse projeto mobile:
- expo-constants => Utilizado para estilizar o margin na parte de cima do smartphone para não ficar abaixo da barra de status.
- expo-mail-composer => Utilizado para a funcionalidade de envio de email para a ONG.
- deep-linking => Utilizado para acessar o What's app na funcionalidade de entrar em contato com a ONG.
- INTL => Utilizado para formatar os números na UI.
Nesse dia adicionamos validação e testes na nossa aplicação:
- celebrate => Utilizado para fazer as validações nos dados enviados ao banco de dados.
- Joi => Utilizado em conjunto com o celebrate para a validação dos dados.
- Jest => Utilizado para os testes unitários e de integração, implementados aqui
- [cross-env](- cross-env => Utilizado para utilizar variáveis de ambiente para os testes de integração. Veja mais
- supertest => Utilizado para os testes com HTTP.
Depois de uma semana intensa, tenho muito a agradecer a equipe da Rocketseat pelo empenho, dedicação e disponibilidade demonstradas nesse evento. Foi minha primeira participação e com certeza não será a última. Um agradecimento especial também ao Filipe Deschamps pelos e-mail diários com sua opinião sobre todas as aulas da semana.
Um salve de Santa Catarina e até a próxima!
Após o término da semana Omnistack e da conclusão do projeto, resolvi implementar alguma features para continuar evoluindo o que aprendi no curso.
- Inclusão do cadastro de voluntários
- Criação de dashboard do voluntário e da ong
- Incidents com status e prazo para arrecadação