Criação do projeto:
mkdir backend
Criando projeto node:
npm init -y
npm install express
Criar manualmente o arquivo index.js
Comando para executar back-end:
node index.js
Imagem 01: back-end - Hello World
Imagem 02: back-end - JSON
Criando projeto React:
npx create-react-app frontend
Comando para executar front-end:
npm start
Imagem 03: front-end - Hello World
Comando para startar aplicação:
Back-end: npm start
Front-end: npm start
Mobile: yarn start
Utilizar o Insomnia para fazer requisições:
GET: Buscar/listar uma informação do back-end.
POST: Criar uma informação do back-end.
PUT: Alterar uma informação do back-end.
DELETE: Deletar uma informação do back-end.
Tipos de parametros:
Query Params: Parametros nomeados enviados na rota após "?", servem para filtros, paginação.
Exemplo: GET http://localhost:3333/users?page=2&nome=Leonardo&idade=22
Imagem 01: Query Params Exemplo 1
Imagem 02: Query Params Exemplo 2
Route Params: Parametros utilizados para identificar recursos.
Exemplo buscar pelo id: GET http://localhost:3333/users/1
Imagem 03: Route Params Exemplo 1
Imagem 04: Route Params Exemplo 2
Request Body: Corpo da requisição, utilizado para criar ou alterar recursos.
Exemplo: POST http://localhost:3333/users
Imagem 05: Request Body 1
Imagem 06: Request Body 2
Nodemon: instalar ferramenta Nodemon, auxilia para que não seja necessário toda vez que fizer uma modificação ter que restartar o back-end. Ele faz este serviço automaticamente.
npm install nodemon -D
Alterar no package.json:
"scripts": {
"start": "nodemon index.js"
}
Após isto rodar o comando abaixo para iniciar o back-end:
npm start
Banco de dados:
Exemplos:
SQL: MySQL, SQLite, PostgreSQL, Oracle, Microsoft SQL Server
NoSQL: MongoDB, CouchDB, etc
Nesta aplicação será utilizado o SQLite
Configurando SQLite:
Driver: SELECT * FROM users
Query Builder: table('users').select('*').where()
Vamos utilizar o Query Builder : KNEX.JS (http://knexjs.org/)
Intalando Knex:
npm install knex
npm install sqlite3
Conexão com o Bando de dados:
npx knex init
Estruturando backend, criando pasta src, arquivo routes.
Arquivo knexfile.js:
module.exports = {
development: {
client: 'sqlite3',
connection: {
filename: './src/database/db.sqlite'
}
},
Entidades:
- Ong
- Caso(incident)
Funcionalidades:
- Login de ONG
- Logout de ONG
- Cadastro de ONG
- Cadastrar novos casos
- Deletar casos
- Listar casos Eespecificos de uma ONG
- Listar todos os casos
- Entra em contato com a ONG
Criação das tabelas do banco:
http://knexjs.org/#Migrations
Arquivo knexfile.js:
module.exports = {
development: {
client: 'sqlite3',
connection: {
filename: './src/database/db.sqlite'
},
migrations: {
directory: './src/database/migrations'
},
useNullAsDefault: true,
},
Exemplo: criando migration create_ongs
npx knex migrate:make create_ongs
Após inserir todas as informações da tabela, exemplo create_ongs:
//Método up: o que você quer que seja feito
exports.up = function(knex) {
//Criação da tabela ONGs
return knex.schema.createTable('ongs', function (table) {
table.string('id').primary();
table.string('name').notNullable();
table.string('email').notNullable();
table.string('whatsapp').notNullable();
table.string('city').notNullable();
table.string('uf', 2).notNullable();//Limitando campo com 2 caracteres
})
};
//Método down: caso de algum erro, precisa desfazer o que fez, deletar a tabel
exports.down = function(knex) {
return knex.schema.dropTable('ongs');
};
Executar comando abaixo para criar a tabela no banco de dados:
npx knex migrate:latest
Comando para desfazer a ultima migration, caso tenha feito errado:
npx knex migrate:rollback
Comando para ver as migrations que foram já criadas:
npx knex migrate:status
Criação das rotas, controllers...
Código esta todo comentado explicando cada passo
Adicionando o CORS:
O cors determina quem poderá acessar a aplicação
npm install cors
Arquivo index.js:
const express = require('express');
const routes = require('./routes');
const cors = require('cors');
const app = express();
app.use(cors());
app.use(express.json());
app.use(routes);
app.listen(3333);
Limpando estrutura inicial: contém imagem de como ficou a estrutura.
Iniciando aplicação:
npm start
Conceitos do React:
React primeiro lê todas informações que estão no index.html e depois a partir index.js começa a ler os outros arquivos .js
Componente no React, é uma função que retorna HTML e também pode ter outras funcionalidades utilizando js, css...
JSX: é quando o arquivo HTML esta escrito dentro de um arquivo JavaScript
Propriedade e Estado
Exemplo: contador de números. Primeiro commit da Aula 03 - front-end.
Criando a primeira página:
Página de login: criado index.js, styles.css
Fonte letra utilizada: Roboto
Icons utilizados: https://feathericons.com/
Integrando pacote de icons com o frontend:
npm install react-icons
Configurando rotas da aplicação:
Instalar parte de rotas da aplicação:
npm install react-router-dom
Ordem de criação das páginas:
Login
Register: cadastro de ONGs
Listagem de casos
Cadastro de novos casos
Conectar o front-end com o back-end:
Ir na pasta do backend e iniciar o servidor
npm start
Conectando React com o Node.js:
Instalar client http:
npm install axios
Arquivo services/api.js
Importando pacote de conexão com banco de dados.
import axios from 'axios';
const api = axios.create({
baseURL: 'http://localhost:3333',
})
export default api;
React Native & Expo
Instalando Expo:
Irá instalar ele globalmente na máquina, assim poderá utilizá-lo em qualquer outro projeto.
npm install -g expo-cli
Verificando se foi instalado:
expo -h
Criando projeto mobile:
expo init mobile
Template: blank
Executando software no celular:
Iniciando aplicação:
yarn start
Acessando expo no celular
Site interessante: é possivel ver o resultado direto na web
https://snack.expo.io/
Configurando icone e Splash Screen:
Colocado imagens icons e splash dentro da pasta assets.
Criado pasta pages.
Definindo as rotas da aplicação.
Instalando routes/rotas no expo:
https://reactnavigation.org/docs/getting-started
npm install @react-navigation/native
expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view
Configurando as rotas:
Esta opção que vamos utilizar nesta aplicação, é utilizada quando se contém mais a navegação por botões.
https://reactnavigation.org/docs/hello-react-navigation
Instalando o stack navigation:
npm install @react-navigation/stack
Instalando pacote para que os dados da aplicação não fiquem em cima da status bar:
expo install expo-constants
Fazendo funções do E-mail e do Whatsapp:
E-mail:
Instalar pacote:
expo install expo-mail-composer
Documentação do mailComposer:
https://docs.expo.io/versions/latest/sdk/mail-composer/
Whatsapp: feito configurações utilizando o função Linking.
Conectando mobile com a API
Instalar axios:
npm install axios
Criado arquivo services/api.js
Instalando pacote para formatação em R$:
npm install intl
Código esta totalmente comentado, explicando todos os passos e informações que identifiquei importantes.
Validação de dados:
Instalar biblioteca: celebrate
Documentação: https://github.com/arb/celebrate
Celebrate integra o Joi(https://github.com/hapijs/joi) com o Express
npm install celebrate
Adicionando testes:
TDD(Test-driven Development):
Segundo esta técnica fazemos os testes antes mesmo de terminar o desenvolvimento das funcionalidades.
Configurando Jest:
https://jestjs.io/
npm install jest -D
npx jest --init
Y
node
N
y
Testes de integração: tests/integration
São testes que irão testar o fluxo de uma rota inteira da aplicação.
Teste unitário: tests/unit
Testa um pedaço da aplicação de uma forma muito isolada.
Para executar teste:
npm test
Configurando banco de dados para testes:
Arquivo knexfile.js: adicionado configurações abaixo:
test: {
client: 'sqlite3',
connection: {
filename: './src/database/test.sqlite'
},
migrations: {
directory: './src/database/migrations'
},
useNullAsDefault: true,
},
Instalar pacote:
npm install cross-env
Arquivo package.json:
"scripts": {
"start": "nodemon src/index.js",
"test": "cross-env NODE_ENV=test jest"
},
Verificar dados de conexão tambem no arquivo connection.js
Fazendo teste de integração
Instalar pacote supertest: auxilia nos logs. Instalando como depencia de desesenvolvimento
npm install supertest -D
Alterado no do src/index.js para src app.js. Criado arquivo server.js
Arquivo package.json:
"scripts": {
"start": "nodemon src/server.js",
"test": "cross-env NODE_ENV=test jest"
},
Após isto, fazer a criação dos arquivo de integração e executar o comando:
npm test
Exemplo para quando precisar do authorization, por exemplo na rota /profile:
//Testando se é possivel a listagem da Profile de uma ONG
it('should be able to create a new ONG', async () => {
const response = await request(app)
.get('/profile')
.set('Authorization', 'idValidoOng')
.send({
name: "APAD2",
email: "teste@apad.com",
whatsapp: "554700000000",
city: "Gravatal",
uf: "SC"
});
Indicação de onde hospedar a aplicação:
Node.js: back-end
Aplicações pequenas: Heroku
https://www.youtube.com/watch?v=-j7vLmBMsEU
Aplicações maiores/comercial: DigitalOcean
https://www.youtube.com/watch?v=ICIz5dE3Xfg
Aplicações muito maiores:
AWS
Google Cloud Platform
Microsoft Razor
React: front-end
Aplicações pequenas: netlify
https://www.netlify.com/
React Native: mobile
https://www.youtube.com/watch?v=wYMvzbfBdYI
Recomendações de estudo:
Padrões de código: ESLint, Prettier
Autenticação JWT
Styled Components