/be-the-hero

Um projeto para cadastrar heróis que poderão contribuir acessando o perfil.

Primary LanguageJavaScript

Be The Hero

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. Executado npm 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 em endereç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