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: "[email protected]",
        whatsapp: "554700000000",
        city: "Gravatal",
        uf: "SC"
  });

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