GoStack-Bootcamp-11

Índice

1. Ambiente de desenvolvimento
2. NodeJS
   1. Comandos
   2. API REST
   3. Insomnia
   4. Métodos HTTP e requisições
   5. Middleware
3. ReactJS
   1. Comandos
   2. Babel / Webpack
   3. Conceitos do ReactJS
   4. CSS
   5. Usando a API
4. React Native
   1. Comandos
   2. Criando o projeto
   3. Diferenças do ReactJS
   4. Usando a API
5. Typescript
   1. Comandos
   2. Quando colocar tipagem?
   3. Tipagem de objetos

Ambiente de desenvolvimento

• NodeJS, Yarn
• Visual Studio Code (+ dracula theme, material icon theme)
• Git e Github
• Extensões: JSON viewer, React Dev Tools, Octotree
• Ferramentas: Notion, Whimsical, DevDocs, Insomnia

Módulo 3 - NodeJS

Comandos

Instalar todas as dependências (caso haver package.json):

yarn

Criar arquivo package.json:

yarn init -y

Express: micro framework com várias funcionalidades que facilitam o desenvolvimento, como por exemplo o gerenciamento de rotas:

yarn add express

const express = require('express');
const app= express();

Nodemon: Ferramenta para reiniciar o servidor a cada vez que há alteração do código:

-D: development

yarn add nodemon -D
or
yarn global add nodemon -D

Uuidv4: ferramenta que permite adicionar um ID único universal em alguma coisa:

yarn add uuidv4

const { uuid, isUuid }= require('uuidv4');

cors: permitir que o nosso front-end consiga acessar os recursos da api:

yarn add cors

app.use(cors());

API REST

A requisição é feita por um cliente/browser que tenta acessar uma URL, fazendo uma requisição AJAX, que faz a requisição sem recarregar a página e sem perder a conexão. A resposta do servidor vem por meio de uma estrutura de dados (JSON) e o cliente fica responsável por usar essa resposta para montar a aplicação.

Benefícios dessa API

• É possível ter vários front-end usando o mesmo back-end;
• Protocolo de comunicação padronizado utilizando JSON, diversos dispositivos conseguem usar os serviços da API com pouquíssimas alterações nos códigos.

Insomnia

O insomnia é um aplicativo que mostra os resultados das rotas que usam os métodos http

Após criar uma aba, o próximo passo é criar uma pasta com o mesmo nome do recurso (ex: '/projects', o recurso é projects), dentro dessa pasta ficará todas as requisições que utilizam esse recurso.

Para cada requisição é necessário passar a URL. Para facilitar a escrita, podemos criar atalhos dentro do insomnia. Digamos que não queremos digitar http://localhost:3333:

• No canto superior esquerdo, abra a aba "Manage Environment";
• Clica no + e selecione "Environment";
• Adiciona um nome para o seu atalho e edite o código JSON.

Métodos HTTP e requisições

Existem diferentes métodos HTTP para acessar rotas:

• GET: buscar informações do back-end;
• POST: criar uma informação no back-end;
• PUT/PATCH: alterar uma informação no back-end;
• DELETE: deletar uma informação no back-end.

Podemos usar o mesmo recurso, porém as rotas devem ser diferentes.

No navegador só é possível ver as rotas com o método get, mas uma forma de visualizar as outras rotas, inclusive o get, é através do Insomnia

Tipos de parâmetros

Os parametros são formas de receber informações do front-end através das requisições. Existe 3 principais tipos de parâmetros:

• Query Params: geralmente usado com filtros e paginação, podemos usar o .query para obter os dados
• Route Params: identificar recursos na hora de deletar ou atualizar (:id por exemplo), usamos o .params para obter os dados
• Request Body: conteudo na hora de criar ou editar um recurso, as informações são transmitidas pelo corpo da requisição usando o formato JSON

Request / Response

Request: informações que o front-end envia para o back-end

response: informações que o back-end envia para o front-end

HTTP Codes

Toda requisição exibirá um código HTTP com 3 dígitos numéricos indicando o que ocorreu:

• 1xx: É uma requisição informativa, praticamente nunca é usada
• 2xx: Requisição feita com sucesso, sem erros
  • 200: Success
  • 201: Created
• 3xx: redirecionamento
• 4xx: Erros no Cliente
  • 400: Bad request (faltou alguma informação)
  • 401: Unauthorized (sem autorização, sem login)
  • 404: Not Found
• 5xx: Erros no servidor

Middleware

• Middleware é uma função que é um interceptador de requisições, ele consegue interromper uma requisição e alterar os dados da requisição. Ele pode ser acionado em todas as requisições.

• Uma função middleware usa os parametros (request, response, next)

• Podemos dizer que as rotas também são middleware por conterem request e response.

• Os middlewares que não são rotas normalmente terão o argumento next, que executa uma rota depois de ter sido acionado.

• Seu principal objetivo é interceptar uma rota para verificar ou executar uma função essencial.

• Podemos usar os middleware passando a função nas rotas, mas tem uma forma mais fácil:

app.use('/projects/:id', validateProjectId) //Exemplo

Ao invés de adicionar o middleware nas rotas, podemos definir qual é o formato da rota, assim o middleware é executado somente nas rotas que tiverem aquele formato informado.

Módulo 4 - ReactJS

React é uma biblioteca para construção de interfaces, baseado no conceito de Single-Page-Applications, que permite trocar de tela sem recarregar uma nova página.

• React: biblioteca de construção de interfaces e componentização;
• ReactJS: React junto com a biblioteca do facebook que manipula o browser;
• React Native: React junto com a biblioteca que manipula elementos nativos.

Vantagens

• Organização do código usando componentes, que são todas as partes da página que não são influenciadas com outras áreas (ex: formulário, comentário, lista de comentários, header, footer, etc...), ou seja, se aquela parte for simplesmente removida e o site continuar funcionando, então pode-se transformar aquela parte em componente.
• Divisão de responsabilidades: O front-end é responsável apenas por construir a interface, as regras de negócio fica para o back-end.
• Uma API, múltiplos clientes: podemos usar a mesma API para diversos clientes, pois o back-end envia as informações para a construção do front-end usando um formato chamado JSON. Então um dispositivo mobile e um browser conseguem acessar a mesma API, o front-end então fica responsável por pegar o JSON fornecido pela API para construir a interface.

JSX

Permite escrever código HTML dentro do Javascript. O react permite criarmos nossos próprios componentes.

Babel / Webpack

• O browser não entende todo esse código (HTML, CSS dentro do javascript). O Babel converte esse código JS de uma forma que o browser entenda;
• O Webpack tem diversas função, entre elas:
  • Criação do Bundle, que contém todo o código javascript da aplicação, usando o código do Babel;
  • Ensinar o Javascript como importar arquivos CSS e outros através dos loaders (css loader, image loader, babel loader, etc...)
  • Live reload, atualiza a página com as novas alterações

Comandos

Instalar todas as dependências (caso haver package.json):

yarn

Criar arquivo package.json:

yarn init -y

Instalar o react e o react-dom, que é a integração do react com a DOM (arvore de elementos, HTML):

yarn add react react-dom

Comando referente ao babel / webpack:

yarn add @babel/core @babel/preset-env @babel/preset-react webpack webpack-cli

Interface de linha de comando babel:

yarn add @babel/cli

Babel-loader, converter código com o babel:

yarn add babel-loader

Live reload do webpack, toda vez que haver alteração no código, o bundle.js será recompilado automaticamente:

yarn add webpack-dev-server -D

yarn webpack serve --mode development

Style-loader e css-loader:

yarn add style-loader css-loader

File-loader:

yarn add file-loader

Axios:

yarn add axios

Ao utilizar funções Async, precisa instalar um plugin no babel, pois o "preset-env" sozinho não é capaz de interpretar essas funções:

yarn add @babel/plugin-transform-runtime -D

Babel / Webpack

Babel

Responsável por converter (transpilar) código javascript moderno para um código que o browser consiga interpretar.

Na imagem abaixo, está a configuração padrão do babel para projetos React:

Webpack

Responsável por converter os diferentes tipos de arquivos em um código que o browser entenda, para isso usa-se os Loaders;

ex: babel-loader, css-loader, img-loader, file-loader

Na imagem abaixo, está a configuração padrão do webpack para projetos React:

Conceitos do ReactJS

Componentes

O React é totalmente baseado na componentização. Componente é tudo aquilo que é possível separar na aplicação e que pode ser reaproveitado posteriormente.

• Os componentes são arquivos que sempre começam com letra maiúscula;
• Retornam uma função que contem todo o HTML, CSS e JS do componente.
• Para usa-lo, basta importar e usar como se fosse um componente HTML.

Fragment: Maneira de retornar múltiplos elementos sem adicionar nós na DOM, como por exemplo:

<div> <div/>

Então usa-se:

<> </> 
ou
<React.Fragment> <React.Fragment/>

Propriedades

É uma informação que é passado do elemento pai para o elemento filho. Resumidamente, é passar informações para um componente por dentro da tag ou pelos atributos.

Exemplo: passando o titulo como atributo e uma lista dentro da tag Header:

Ambas as informações chegam no componente Header em forma de um objeto chamado props, podendo ser desfragmentado.

• title: titulo;
• children: todas as informações dentro da tag.

Estado

Imutabilidade: nunca se altera o dado diretamente, deve-se criar uma cópia e daí sim fazer a alteração, observe o exemplo onde a alteração foi feita de forma INDIRETA:

const projects= ['text1', 'text2']

//errado
projects.push('Novo projeto') 

//correto
setProjects([...projects, 'Novo projeto'])

map( ): percorre uma variável retornando alguma informação;

Toda iteração no React precisa de uma propriedade chamada key, que dentro dele será informado alguma informação única para cada elemento percorrido, o mais comum é o ID

dica do Diego: quando há uma ação acionada pelo usuário, inicia-se o nome da function com "handle"

O estado permite que um componente se atualiza na tela quando há uma alteração nos dados, sem precisar recarregar a página toda.

CSS

Primeiramente, temos que configurar um novo Loader para arquivos CSS, no arquivo de configurações do Webpack.

Depois instale 3 pacotes: style-loader, css-loader e file-loader.

yarn add style-loader css-loader

yarn add file-loader

css-loader: Para interpretar arquivo css e importações.

style-loader: injeta o que foi interpretado pelo css-loader no HTML.

file-loader: carregar arquivos para dentro da aplicação.

Usando a API

O módulo "Axios" é responsável por fazer as chamadas na API.

yarn add axios

No React, temos a função useEffect() que será usada para disparar funções quando houver ou não alguma informação alterada. Ela usa 2 parâmetros:

1. A função a ser disparada
2. Quando disparar

Foi usado o método get para pegar os dados da rota 'projects'. Se der certo, jogue tudo no response e seta os projetos com os dados da API.

Teremos que instalar o módulo "cors" no back-end. O cors é um mecanismo de segurança que pode impedir que os dados do backend sejam compartilhados.

yarn add cors

app.use(cors());

Módulo 5 - React Native

• React Native é uma versão do React para desenvolvimento mobile.
• O mesmo código funciona em multiplataformas, podendo manipular cada plataforma de forma diferente.
• A interface roda de forma nativa, usando Java e Objective C.
• O código não é transpilado, é injetado no dispositivo uma dependência em que o dispositivo passa a interpretar javascript
• React Native tem uma sintaxe parecida com o ReactJS:

Ambiente de desenvolvimento

Se você tem MacOS, basta baixar e usar o xcode para emular um sistema iOS. Para windows e linux teremos que usar o sistema Android, com o AVD manager do Android Studio.

Utilize o site da rocketseat ou outra fonte para configurar o SDK: https://react-native.rocketseat.dev

Comandos

Criar projeto:

npx react-native init NomeDoProjeto

Instalar todas as dependências:

yarn

Iniciar projeto no emulador:

//Android
npx react-native run-android

//ios
npx react-native run-ios

Axios:

yarn add axios

Criando o projeto

OBS: Os comandos podem não funcionar corretamente por causa do tempo (anotações feitas em 10/04/2021), sempre é recomendado seguir a documentação: https://reactnative.dev/docs/environment-setup.

Como criar

Para criar um projeto React Native não precisa instalar o react-native-cli, basta criar um projeto usando o npx do Node:

npx react-native init NomeDoProjeto

Caso ocorrer um erro deste tipo:

npm ERR! código ENOLOCAL

npm ERR! Não foi possível instalar a partir de "seuNome \ AppData \ Roaming \ npm-cache_npx \ 8992" porque não contém um arquivo package.json.

Isso aconteceu por causa do espaço em branco no seu nome de usuário, use o seguinte comando para resolver e tente novamente o código anterior:

npm config set cache C:\tmp\nodejs\npm-cache --global

Como executar

Usarei o Android Studio já configurado conforme a documentação do React Native: https://reactnative.dev/docs/environment-setup.

1. Abre um dispositivo Android com o AVD Manager;
2. Abra um novo terminal dentro do projeto;
3. No terminal digite:

npx react-native run-android

Se tudo ocorreu bem, a aplicação será executada no dispositivo:

Diferenças do ReactJS

Ao comparar ReactJS com o React Native notamos algumas diferenças entre eles.

No React Native:

• Não trabalha-se com HTML, utilizamos elementos que o React Native exporta.
• Esses elementos não tem valor semântico, ou seja, uma por exemplo é usada como container para qualquer coisa.
• Não existe estilização própria nos elementos, qualquer estilo é feito por CSS (StyleSheet).
• Todos os componentes possuem por padrão "display: flex".
• Não tem herança de estilos. Ao aplicar um estilo em um container por exemplo, apenas o container será afetado, o que estiver dentro dele não será estilizado.

Usando a API

O módulo "Axios" é responsável por fazer as chamadas na API.

yarn add axios

Logo de cara percebemos um problema, qual é a baseURL já que não estamos trabalhando com páginas web? Observe a lista abaixo com os tipos de ambiente de desenvolvimento e suas URLs:

• iOS com emulador: localhost;
• iOS com físico: IP da máquina;
• Android com emulador: localhost (adb reverse)
• Android com emulador: 10.0.2.2 (Android Studio)
• Android com emulador: 10.0.3.2 (Genymotion)
• Android com físico: IP da máquina

No meu caso, estou usando Android com emulador com adb reverse. No prompt de comando digite:

adb reverse tcp:<porta do backend> tcp:<porta do backend>

Então a baseURL é a mesma do backend (http://localhost:xxxx)

Typescript

O typescript é uma linguagem de programação totalmente baseado em javascript. Ela adiciona a tipagem no código e dá acesso as atualizações mais modernas do javascript que o node e os browsers ainda não entendem, através da conversão de código, que nem acontece com o Babel.

Tanto os browsers como o node não entendem typescript, então é feito a conversão para javascript.

Com a adição da tipagem, o programador e o editor conhece o formato de uma variável que foi recebido como parâmetro de uma função por exemplo. Observe a imagem a seguir:

Comandos

Para usar typescript:

yarn add typescript -D

Será instalada como dependência de desenvolvimento, pois o typescript é desnecessário quando a aplicação está online.

O typescript será usado no backend, então instale o Express:

yarn add express

//declaração de tipagem do express, pois a IDE do vsCode não fornece auto-complete
yarn add -D @types/express

Gerar JSON de configurações do typescript:

yarn tsc --init

Para rodar, precisa converter o código typescript para javascript e depois executar com node:

yarn tsc

Forma eficiente de converter código typescript para javascript automaticamente:

yarn add ts-node-dev -D

Plugin para manter um padrão de código entre os desenvolvedores:

yarn add eslint -D 

yarn eslint --init

Prettier:

yarn add prettier eslint-config-prettier eslint-plugin-prettier -D 

Quando colocar tipagem?

Utilizado principalmente quando não há auto-complete ou quando o próprio Visual Studio Code avisa que a tipagem de algo é .

Quando é importado o express dentro de um arquivo por exemplo, haverá auto-complete nele, mas caso querermos manipular as funções do express sem importa-lo, não haverá auto-complete logo a tipagem é essencial.

Digamos que tenha, em um arquivo isolado, uma função que faz requisição e resposta, não basta importar o express, precisamos importar as tipagens (o tipo de variável). Observe a imagem abaixo:

Como foi colocado a tipagem das variáveis request e response do express, o auto-complete está habilitado:

Tipagem de objetos

Veja a imagem abaixo:

Esta função retorna os dados de um usuário, porém não foi definido a tipagem dos dados no parâmetro da função. Uma forma é definindo dentro do campo dos parâmetros:

Caso seja passado algum parâmetro que não segue a tipagem estabelecida, ocorre um erro.

Podemos definir a tipagem dos dados de um objeto usando o "interface":