Be The Hero
Projeto
Um projeto para cadastrar heróis que poderão contribuir acessando o perfil.
Tecnologias e Ferramentas
- Front-end: Reactjs, HTML, CSS, Javascript, Google Fonts, Link, Axios
- Back-end: Nodejs, Express, SQLite, Insomnia. Knex, crypto, Join, Cors, Migration, Routes, Nodemon
Back End
- 1. Back End - NodeJS
- 1.1. Node.js e Express
- 1.1.1. Rotas e recursos
- 1.1.2. Métodos HTTP
- 1.1.2.1. GET: buscar uma informação do back-end
- 1.1.2.2. POST: criar uma informação no back-end
- 1.1.2.3. PUT: alterar uma informação no back-end
- 1.1.2.4. DELETE: deletar uma informação no back-end
- 1.1.3. Tipos de Parâmetros
- 1.1.3.1 Query Params: parâmetros nomeados enviados na rota após "?" (filtros e paginação)
- 1.1.3.2 Route Params: parâmetros utilizados para identificar recursos
- 1.1.3.3 Request Body: o corpo da requisição
- 1.2. Nodemon:
npm install nodemon -D
. Executar:npm start
- 1.3. Insomnia :
http://localhost:3333/users
- 1.4. Banco de Dados
- 1.4.1. SQL: MySQL, SQLite, PostgreSQL, Oracle, Microsoft SQL Server
- 1.4.2. NoSQL: MongoDB, CouchDB
- 1.4.3. O projeto usará SQLite
- 1.5. Configuração do Back-end
- 1.5.1. Driver: SELECT * FROM users
- 1.5.2. Query Builder: table('users').select('*').where()
- 1.5.3. O projeto usará Query Builder, com a ferramenta
Knex.js
- 1.5.4. Instalação do Knex: npm install knex
- 1.5.5. Instalação do SQLite: npm install sqlite3
- 1.5.6. Configurar conexão: npx knex init : knexfile.js
- 1.6. Dado o layout da aplicação já construído
- 1.6.1. Pensar nas entidades da Aplicação (O que será salvo no bd)
- 1.6.1.1. ONG
- 1.6.1.2. Caso (incident)
- 1.6.2. Pensar nas funcionalidades da Aplicação
- 1.6.2.1. Login de ONG
- 1.6.2.2. Logout de ONG
- 1.6.2.3. Cadastro de ONG
- 1.6.2.4. Cadastrar novos casos
- 1.6.2.5. Deletar casos
- 1.6.2.6. Listar casos específicos de uma ONG
- 1.6.2.7. Listar todos os casos
- 1.6.2.7.1. paginação -
http://localhost:3333/incidents?page=3
- 1.6.2.8. Entrar em contato com a ONG (whatsapp e email)
- 1.7. Configurar as migrations
- 1.7.1. um controle de versão de db
- 1.7.2. criar a primeira migration:
npx knex migrate:make create_ongs
- 1.7.3. Warning: useNullAsDefault
- 1.8. Criar tabela com Knex na migrations
- 1.8.1. Configurar o arquivo
- 1.8.2.
npx knex migrate:latest
- 1.9. Criar a migration incidents
- 1.9.1.
npx knex migrate:make create_incidents
- 1.9.2.
npx knex migrate:latest
- 1.9.3.
npx knex migrate:rollback
: desfazer a criação da migration - 1.9.4.
npx knex migrate:state
: desfazer a criação da migration - 1.10. Cadastro de uma nova ong
- 1.10.1. routes
- 1.10.2. Insomnia: requisições
- 1.10.2.1. URL: http://localhost:3333/ongs
- 1.10.2.2. Corpo:
{
"name":"APAD",
"email":"contato@contato.com.br",
"whatsapp":"4700000000",
"city":"Rio de Janeiro",
"uf":"Rio de Janeiro"
}
- 1.10.2.3. Criar id: pacote crypto
- 1.10.2.4. Conexão com banco de dados
- 1.10.2.4.1. corrigindo a criação das migration
- 1.11. Rota para listar todas as ongs: /ongs
- 1.12. Controllers [ MVC ]: index (listar) e create (cadastrar) para as ongs
- 1.13.1. Cadastrar incidentes
- 1.13.2. Requisição: IncidentController.js
- 1.13.3. Routes: /incidents
- 1.13.4. Criando incidente a partir da rota
- 1.13.5. Listar incidentes
- 1.14. Routes para deletar incidente
- 1.15. ProfileController: Listar casos específicos de uma ONG
- 1.16. Routes de login da Ong: SessionController.js
- 1.17. Logout é apenas no front-end
- 1.18.1. Paginação de todos os incidentes
- 1.18.2. Exibição do número total de incidentes cadastrados
- 1.19. Join: relacionar dados de duas tabelas
- 1.20. Cors:
npm install cors
- 1.21. Subindo aplicação
Be The Hero
para o github
Front End
- 2. Front End - ReactJS
- 2.1.1. De um repositório raiz (omnistack-11),
npx create-react-app frontend
- 2.1.2.
npm start
:http://localhost:3000/
- 2.1.3. limpar a estrutura de pastas
- 2.2. Conceitos do ReactJS
- 2.2.1. componente
- 2.2.2. jsx
- 2.2.3. propriedades
- 2.2.4. estado
- 2.2.5. imutabilidade
- 2.3. Page Logon
- 2.3.1. Image and Logo
- 2.3.2. index.js e styles.css
- 2.3.3. Css Global - global.css
- 2.3.4. Google Fonts
- 2.3.5. Estrutura do design da tela
- 2.3.6. Feather icons
- 2.3.7.
npm install react-icons
- 2.3.8. Estilização page logon
- 2.4. configuração de rotas
- 2.4.1.1.
npm install react-router-dom
- 2.4.1.2. routes.js
- 2.4.1.3. configuração de rotas
- 2.4.2.1. Rota Logon
- 2.4.3.1. Rota Register
- 2.4.4. Component Link: não recarregar a página inteira, apenas em componentes
- 2.5. Page Register: cadastro de ongs
- 2.5.1. Estrutura HTML
- 2.5.2. CSS
- 2.5.2.1. section
- 2.5.2.2. form
- 2.6. Page Profile: listagem de casos: profile.js, styles.css
- 2.6.1. HTML e CSS header
- 2.6.2. HTML e CSS list
- 2.7. NewIncident: cadastro de novo caso
- 2.8. Conectar a aplicação frontend em Reactjs com o backend em Nodejs
- 2.8.1. frontend |
npm start
- 2.8.2. backend |
npm start
- 2.8.3. instalar cliente http - Axios |
npm install axios
- 2.8.4. configuração do frontend com o backend
- 2.8.4.1. armazenar cada valor dos inputs do frontend em um state
- 2.8.4.2. cadastrar informações no bd
- 2.8.4.3. enviar o usuário de volta para a página de login
- 2.9. Fazer Login na aplicação
- 2.9.1. criar session com usuário
- 2.9.2. localStorage para disponibilizar session a toda a aplicação
- 2.9.3. exibir os dados dinamicamente
- 2.9.4. formatar os dados de preços
- 2.10. Deletar um incidente
- 2.10.1. Deletar um incidente do backend
- 2.10.2. Deletar um incidente do frontend
- 2.11. Logout
- 2.12. Cadastrar Novo caso
- 2.12.1. Cadastrar novo caso
- 2.12.2. Retornar a rota
- 2.13. Enviar projeto ao Github
- 2.14. warning: não reconheceu
react-scripts
. Executadonpm install react-scripts --save
- 2.15. warning: cadastrar ong. Mensagem
erro no cadastro. tente novamente.
- UF deve ser somente de dois dígitos
Mobile
- 3. Mobile - React Native
- 3.1.1. Instalando Expo de forma Global (-g):
npm install -g expo-cli
- 3.1.2. Executar o Expo:
expo -h
- 3.2. Criando projeto React Native
- 3.2.1. Criar nosso projeto mobile:
expo init mobile
- 3.2.2. template:
blank
- 3.2.3. cd mobile ; rodar o projeto com
expo start
- 3.2.4.
http://localhost:19002/
- 3.3. Executando o projeto
- 3.3.1. No celular
- 3.3.2. Emuladores: Usamos o emulador Android Studio no Windows
- 3.3.2.1. Expo cli:
yarn global add expo-cli
- 3.3.2.2.1. Rodar
expo start
na aplicação - 3.3.2.2.2. Abrir o emulador do studio android
- 3.3.2.2.3. Rodar emulador no Expo/19002
- 3.3.3. Expo Snack
- 3.3.4. Executar o projeto depois da criação
- 3.3.4.1. Abrir studio android, rodar a aplicação, rodar o emulador no expo
- 3.4. Diferenças para o ReactJS
- 3.4.1. Elementos HTML
- 3.4.2. Semântica
- 3.4.3. Estilização
- 3.4.3.1. Flexbox
- 3.4.3.2. Propriedades
- 3.4.3.3. Herança de estilos
- 3.4.3.4. Estilização própria
- 3.5. Estrutura de pastas
- 3.6. Ícone e Splash screen
- 3.7. configurando navegação
- 3.7.1. criação de pastas
- 3.7.2. navegação no expo:
npm install @react-navigation/native
- 3.7.3. pacotes:
expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view
- 3.7.4. Tipos de navegação
- 3.7.4.1. Stack Navigation:
npm install @react-navigation/stack
- 3.7.5. Paginação: Incidents e Detail
- 3.7.6. Arquivo
routes.js
- 3.7.7. Warning:
npm install react-navigation-stack @react-native-community/masked-view react-native-safe-area-context
- 3.8. página de casos
- 3.8.1.
expo install expo-constants
- 3.8.2. incidents styles
- 3.8.3. listagem em tela dos casos, estaticamente, manualmente
- 3.8.4. estilizando os casos
- 3.8.5. listagem em tela dos casos com scroll com FlatList
- 3.8.6. retirar a barra vertical do scroll com showVerticalScrollIndicator
- 3.8.7. Warning:
Attempted import error: 'createStackNavigation' is not exported from '@react-navigation/stack'.
- 3.8.8. refatorar detalhes do código
- 3.8.9. link para "Ver mais detalhes" do caso com useNavigation
- 3.8.10. useNavigation realiza navegação com efeito visual deslizando
- 3.9. detalhe do caso
- 3.9.1. construir estrutura da tela
- 3.9.1.1. header
- 3.9.1.2. dados do incidente
- 3.9.2. estilizar tela
- 3.9.2.1. link de voltar para página anterior
- 3.10. abrindo whatsapp e e-mail
- 3.10.1. essas duas funcionalidades irão funcionar somente no smartphone
- 3.10.2. function sendMail
- 3.10.2.1. pacote do expo:
expo install expo-mail-composer
- 3.10.3. function sendWhatsapp
- 3.10.3.1. Deep linking para acessar o app que desejo
- 3.11. conexão com api
- 3.11.1. instalar o axios:
npm install axios
, o cliente http - 3.11.2. criar arquivo
src/services/api.js
- 3.11.3. atenção: usar ip que está sendo exibido no expo
- 3.11.3.1. ou digitar no terminal
ipconfig
, conferir emendereço ipv4
- 3.11.4. baseURL
http://192.168.25.52:3333
, sendo que 3333 é a porta que usamos no backend - 3.11.5. carregar lista de incidentes buscando da api
- 3.11.6. mostrar o preço como tipo valor de moeda
- 3.11.6.1. pacote
npm install intl
- 3.11.7. em detalhes, mostrar a informações correspondentes
- 3.11.8. total de casos dinamicamente
- 3.11.9. as informações do incidente no envio de whatsapp e e-mail
- 3.12. paginação/scroll infinita
- 3.13. enviar projeto para o Github pelo VSCode
Funcionalidades Avançadas
- 4. Funcionalidades Avançadas
- 4.1. Adicionar validação de dados
- 4.1.2. certificar que toda informação entre no banco de dados 100% correta
- 4.1.3.1. no backend,
npm install celebrate
- 4.1.3.2. a biblioteca celebrate para fazer validações
- 4.1.3.3. celebrate integra o joi com o express que estamos usando no nodejs
- 4.1.4. ongController na rota de create
- 4.1.4.1. configurar a validação no arquivo rotas
- 4.1.4.2. executar o servidor
npm start
- 4.1.4.3. tratar o erro da validação do create - BODY
- 4.1.4.4. tratar o erro da validação do edit - HEADERS
- 4.1.4.5. tratar o erro da validação do delete - PARAMS
- 4.1.4.6. tratar o erro da validação da paginação - QUERY
- 4.2. Adicionar testes
- 4.2.1. Porque fazer testes ?
- 4.2.1.1. garantir pleno funcionamento de toda aplicação a cada feature implementada
- 4.2.2. TDD - Test-Driven Development (desenvolvimento dirigido a testes)
- 4.2.2.1. desenvolve o código e depois implementa os testes
- 4.2.2.2. criar os testes e depois desenvolve o código
- 4.2.3. configurando Jest
- 4.2.3.1.
npm install jest
- 4.2.3.2. backend:
npx jest --init
- 4.2.3.2.1. configurações
- 4.2.4. Tipos de testes
- 4.2.4.1. unit:
generateUniqueId.spec.js
- 4.2.4.1.1. executar os testes
npm test
- 4.2.4.1.2. module.exports no lugar de export default
- 4.2.4.2. integration:
- 4.2.4.2.1. configurando banco de testes
- 4.2.4.2.2. db sqlite
- 4.2.4.2.3. npm install cross-env
- 4.2.4.2.4. variável ambiente do nodejs
- 4.2.4.2.5. ong.spec.js
- 4.2.4.2.6. testar nossa aplicação como um todo
- 4.2.4.2.7. instalando supertest
- 4.2.4.2.8. requisição para testes
- 4.2.4.2.9. npm install supertest
- 4.2.4.2.10. configurar em ong.spec.js
- 4.2.4.2.11. executar as migrations dentro do bd de teste
- 4.2.4.2.12. testando rota de criação de ong
- 4.3. Deploy
- 4.3.1. NodeJS: Heroku - aplicações de modelo
- 4.3.2. NodeJS: DigitalOcean - aplicação comercial
- 4.3.3. ReactJS: netlify - aplicação de modelo
- 4.3.4. React Native: criar o aplicativo e publicar nas lojas
- 4.4. Estudos daqui para frente ( Rocketseat - Youtube )
- 4.4.1. padrões de código: eslint, prettier
- 4.4.2. autenticação jwt
- 4.4.3. ferramenta de estilização - styled components
Considerações Finais
- 4.5. Dicas para aproveitar melhor
- 4.5.1. github - subir todos os projetos de estudo ou projetos pessoais
- 4.5.2. linkedin - o que desenvolver, o que aprendeu, gravar vídeo, gravar gif, quais tecnologias
- 4.6. Aprender a fazer perguntas sobre o desenvolvimento da aplicação
- 4.7. Ter desafios para serem marcações do nível do domínio do conhecimento
- 4.8. Prática e Comunidade devem andar juntos para acelerar o aprendizado
- 4.9. Ter um cronograma de estudos com recompensas a cada nível superado
- 4.10.1. Terminado o frontend mobile com React Native
- 4.10.2. Terminado o frontend web com ReactJS
- 4.10.3. Terminado o backend com NodeJS e SQLite
- 4.10.4. Implementado algumas funcionalidades avançadas de testes com Jest.
Por Douglas A B Novato - @douglasabnovato
:. De Diego Fernandes - Rocketseat - Semana Omnistack 11.0