01/04/2020
Técnicas de Aprendizado:
- Não pular etapas/aulas
- Foco em praticar
- Controlar ansiedade
- Nunca se comparar com outras pessoas
- "Não compare os seus bastidores, com o palco de alguém"
- Técnica de pomodoro. 25 min trabalho / 5 min descanço
Fixando o Conhecimento:
- Fazer anotações
- Ajudar/Ensinar outras pessoas
- Construir projetos pessoais
Obtendo resultados na carreira:
- Colocar projetos no GitHub, detalhar o README.md
- Posts semanais no Linkedin, destacando o que aprendeu
- Ver mentorias do CEO Rocketseat
Projetos Pessoais:
- Analisar pessoas próximas
- Tentar copiar outras aplicações
- Ideias de projetos: https://github.com/florinpop17/app-ideas
- Ferramenta para auxiliar na criação dos layouts da aplicação: Figma(https://www.figma.com/)
Cronograma:
- Notion: https://www.notion.so/onboarding
01/04/2020
Node
yarn
Visual Studio Code
Git/Github
Extensões Chrome: JSON Viewer, React Dev Tools, Octotree
Ferramentas:
- Notion: anotações...
- Whimsical: fluxos, diagramas...
- DevDocs: documentação offline
- Insomnia: GET, POST, PUT, DELETE...
06/04/2020
Desafios: irá testar um novo sistema de correção automatizada dos desafios
Recompensa: podem ser fisicas ou digitais. O prazo é de 16 semanas para finalizar o bootcamp, terá acesso vitalicio aos arquivos. Se finalizar o bootcamp dentro do periodo ira receber a recompensa.
Discord: duvidas não tecnicas é mais para bate-papo
Forum: duvidas tecnicas
Dia 09/04/2020 (quinta-feira) 20 hrs : live onde Diego vai codar os 3 desafios inteiros desta primeira semana
06/04/2020
Node.js: é uma plataforma para desenvolvimento back-end, não é uma linguagem, utiliza a linguagem javascript no back-end, rotas e integrações. Construido em cima da V8(Chrome).
Arquitetura Event-loop: baseada em eventos(rotas na maioria das vezes), call stack - pilha de eventos e o node processa através de um loop eterno.
- Single-thread: somente utiliza um core do processamento.
- Non-blocking I/O: input e output não bloqueante. Permite aplicações em tempo real, exemplo: chat.
NPM / yarn: permite instalar bibliotecas de terceiros, fornecer bibliotecas. yarn é mais rápido e mais completo que o NPM.
Frameworks:
ExpressJS: framework sem opnião, otimo para iniciar, micro-serviços.
Frameworks:
AdonisJS
NestJS
API REST:
- GET
- POST
- PUT
- DELETE
Multiplos clientes(front-end), utilizando o mesmo back-end.
JSON: estrutura do objeto dentro do javaScript. Comunicação entre front-end e back-end
Criando projeto Node:
Criado pasta backend
Inciando projeto JS:
yarn init -y
Sempre criar a pasta src e index.js
Instalar express:
yarn add express
Executando back-end:
node src/index.js
Configurando Nodemon:
Instalando nodemon:
yarn add nodemon -D
Configurando package.json: acesse a imagem
Executando back-end:
yarn dev
Métodos HTTP:
GET: Buscar/listar uma informação do back-end.
POST: Criar uma informação do back-end.
PUT/PATCH: Alterar uma informação do back-end.
DELETE: Deletar uma informação do back-end.
Instalar Insomnia
07/04/2020
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. (JSON)
Exemplo: POST http://localhost:3333/users
Imagem 05: Request Body 1
Imagem 06: Request Body 2
Aplicação Funcional:
Instalar biblioteca: serve para criação de id
yarn add uuidv4
Middlewares:
Interceptador de requisições, pode interromper totalmente a requisição ou alterar dados da requisição.
07/04/2020
React: biblioteca para construção de interfaces, utilizado para construção de Single-Page Applications, tudo fica dentro do Javascript.
React / ReactJS / React Native
Vantagens:
- Organização do código: componentização
- Divisão de responsabilidades: Back-end: regra de negócio / Front-end: interface
- Uma API, múltiplos clientes
- Programação declarativa
JSX: permite escrever HTML dentro do JavaScript
Babel / Webpack:
O browser não entende todo esse código, o babel converte o códigoJS de uma forma que browser entenda.
O webpack possui várias funções:
- Criação do bundle, arquivo com todo código da aplicação
- Ensinar ao JS como importar arquivos CSS, imagens e etc
- Live reload com Webpack Dev Server
Configurando projeto React:
yarn init -y
Criado pastas src e public
Instalando React e React dom:
yarn add react react-dom
Babel: converter o código do React para o código que o browser entenda.
Webpack: Para cada tipo de arquivo (.js, .css, .png) eu vou converter o código de uma maneira diferente.
Webpack utiliza estes loaders abaixo:
*Loaders: babel-loader, css-loader, image-loader
Instalando babel e webpack:
yarn add @babel/core @babel/preset-env @babel/preset-react webpack webpack-cli
yarn add @babel/cli
Finalizado configuração babel, testando para ver se ira converter:
yarn babel src/index.js --out-file public/bundle.js
Feito commit com as alterações que foram feitas
Configurando webpack:
yarn add babel-loader
Após feito ajustes no webpack.config.js:
yarn webpack --mode development
Instalando este pacote, servidor de desenvolvimento do webpack, serve para recarregar automaticamente caso tenha feito alterações no código:
yarn add webpack-dev-server -D
Apos ajustar dados no arquivo webpack.config.js:
Executando aplicação:
yarn webpack-dev-server --mode development
Componentização: dividir pedaços da aplicação em componentes.
Propriedade: passando informação de pai para filho.
Estado: useState: retorna um array com 2 posições/ 1. Variavel com o seu valor inicial/ 2. Função para atualizarmos esse valor.
Imutabilidade: é algo que não pode ser alterado, você tem que criar uma nova informação sem alterar.
Utilizando CSS:
yarn add style-loader css-loader
Arquivo webpack.config.js:
test: /\.css$/,
exclude: /node_modules/,
use: [
{ loader: 'style-loader' },//vai pegar o css que foi interpretado no css-loader e jogar dentro do HTML
{ loader: 'css-loader' },//ira ler o arquivo css e interpretar as importações que tem no arquivo css
]
Package.json:
"scripts": {
"dev": "webpack-dev-server --mode development",
"build": "webpack --mode production"
},
Instalar para ser possivel carregar arquivos dentro da aplicação:
yarn add file-loader
Arquivo webpack.config.js:
test: /.*\.(gif|png|jpe?g)$/i,
use: [
{ loader: 'file-loader' },
]
Conectando o front-end com o back-end:
Instalar no backend:
yarn add cors
Instalar axios no front-end:
yarn add axios
Instalar no front-end:
yarn add @babel/plugin-transform-runtime -D
arquivo babel.config.js:
plugins: [
'@babel/plugin-transform-runtime'
]
09/04/2020
React Native:
- Versão do React para desenvolvimento mobile
- Multiplataforma
- Podemos manipular cada plataforma de forma diferente
- Código não é transpilado
Expo:
SDK com um conjunto funcionalidades prontas para usar(camera, video, integrações). Não é necessário configurar emulador. Desvantagens: Limitação sobre o controle do código nativo, várias biblioteca não tem suporte para o Expo, o expo liberou seu conjunto de ferramentas prontas para serem utilizadas com projetos que não utilizam Expo. Não vamos utilizar o Expo nesta aplicação.
Configurando SDK: fazer todo o processo de instalação que esta nesta página
https://react-native.rocketseat.dev/android/windows
https://react-native.rocketseat.dev/android/emulador
Criando pasta com arquivos do react-native
react-native init mobile
adb devices
react-native run-android
10/04/2020
Executando mobile:
Abrir android studio e executar o emulador criado, rodar na pasta mobile:
react-native run-android
Criar arquivo src/index.js
Diferenças para o ReactJS:
Não possuem valor semantico(significado)
Não possuem estilização própria
Todos componentes possuem por padrao "display: flex"
View: div, footer, header, main, aside, section
Text: p, span, strong, h1, h2, h3
Styles: não pode conter hifens, tem que ser camelCase
Integrando react-native com o back-end:
Iniciar back-end:
yarn dev
Instalar no mobile:
yarn add axios
Criado arquivo src/services/api.js
Conexao opções:
- ios com emulador: localhost
- ios com fisico: IP da maquina
- android com emulador: localhost(terá que rodar o comando: adb reverse tcp:3333 tcp:3333)
- android com emulador: 10.0.2.2(Android Studio)
- android com emulador: 10.0.3.2(Genymotion)
- android com fisico: IP da maquina
10/04/2020
Adiciona inteligencia no editor para ver mais informações
O typescript é baseado no JavaScript: adiciona funcionalidades a mais no JS
Configurando projeto: criar pasta typescript
yarn init -y
yarn add typescript -D
Criar arquivo src/index.ts
yarn add express
yarn add -D @types/express
Convertendo arquivo typescript para javascript para que seja possivel executá-lo:
yarn tsc src/index.ts
yarn tsc --init
yarn tsc
Executando projeto:
node src/index.js
Descomentar função no arquivo tsconfig.json:
"outDir": "./dist",
Executando projeto:
node dist/index.js
13/04/2020
Iniciando projeto:
yarn init -y
yarn add express
yarn add typescript -D
yarn tsc --init
Arquivo tsconfig.json: descomentar linhas:
"outDir": "./dist",
"rootDir": "./src",
Executar comando abaixo:
yarn tsc
yarn add @types/express -D
Executando servidor:
yarn tsc
node dist/server.js
Excluir a pasta /dist e instalar ts-node-dev para atualizar após alguma alteração de forma automatica o código:
yarn add ts-node-dev -D
package.json:
"scripts": {
"build": "tsc",
"dev:server": "ts-node-dev --transpileOnly --ignore-watch node_modules src/server.ts"
},
Executando servidor:
yarn dev:server
EditorConfig baixar no visual code: botão direito na pasta do projeto e clicar em 'Generate .editorconfig'. Serve para que se caso estiver trabalhando em um grupo que usem diferentes editores de texto, todos sigam na mesma identação, assim diminuindo os erros.
ESLint: serve para automatizar os padrões de codigo do projeto.
yarn add eslint -D
yarn eslint --init
Perguntas / Respostas:
To check syntax, find problems, and enforce code style
JavaScript modules (import/export)> JavaScript modules (import/export)
None of these
Yes
Node
Use a popular style gui> Use a popular style guide
Airbnb: https://github.com/airbnb/jav
No
yarn add -D @typescript-eslint/eslint-plugin@latest eslint-config-airbnb-base@latest eslint@^5.16.0 || ^6.8.0 eslint-plugin-import@^2.20.1 @typescript-eslint/parser@latest
Instalar tambem ESLint no visual code.
settings.json: adicionar dados abaixo.
"[javascript]": {
"editor.codeActionsOnSave": {
"source.fixAll.esllint": true,
}
},
"[javascriptreact]": {
"editor.codeActionsOnSave": {
"source.fixAll.esllint": true,
}
},
"[typescript]": {
"editor.codeActionsOnSave": {
"source.fixAll.esllint": true,
}
},
"[typescriptreact]": {
"editor.codeActionsOnSave": {
"source.fixAll.esllint": true,
}
},
Importando arquivos Typescript:
yarn add -D eslint-import-resolver-typescript
Arquivo .eslintrc.json:
"rules": {
"import/extensions": [
"error",
"ignorePackages",
{
"ts": "never"
}
]
},
"settings": {
"import/resolver": {
"typescript": {}
}
}
Prettier: deixar o codigo melhor descrito.
yarn add prettier eslint-config-prettier eslint-plugin-prettier -D
Arquivo .eslintrc.json:
"extends": [
"airbnb-base",
"plugin:@typescript-eslint/recommended",
"prettier/@typescript-eslint",
"plugin:prettier/recommended"
],
"plugins": [
"@typescript-eslint",
"prettier"
],
"rules": {
"prettier/prettier": "error",
"import/extensions": [
"error",
"ignorePackages",
{
"ts": "never"
}
]
},
Criado arquivos prettier.config.js e .eslintignore, colocado informações necessárias nos arquivos.
Debugando NodeJS:
Acessa o Debug no visual code, faz as configurações no arquivo launch.json. E para testar execute o sistema e depois execute o debug, podendo utilizar debugs caso necessário.
Cadastro de agendamento:
Instalando pacote para o id e date-fns para lidar com datas e horarios
yarn add uuidv4
yarn add date-fns
Model: representação de como um dado é salvo dentro da aplicação, como o dado é composto, quais os campos dele...
Repository: responsavel por fazer as operações do banco de dados, funções(criar, ler, listar, buscar, alterar, deletar...)
Route: receber a requisição, chamar outro arquivos, devolver uma resposta.
SoC: Separation of Concerns(Separação de preocupações)
DTO (Data Transfer Object): transferindo dados de um objeto para outro.
Função Omit: recebe dois parametros e serve para excuir uma propriedade dentro de um tipo.
Services & SOLID: armazena as regras de negócio da aplicação
- Services: sempre contém um unico método, é onde fica a regra de negócio.
- Dependency Inversion(SOLID)
Iniciando Back-end do app: GoBarber
Banco de Dados: Postgres
Estratégias de abstração:
- node-postgres: driver nativo
- knex.js: query builder
- ORM(Object Relational Mapping): sequelize(javascript), TypeORM(typescript)
Docker:
Ajuda a controlar os serviços da aplicação
Funcionamento:
- Criação de ambientes isolados(container)
- Containers expõe portas para comunicação
Principais conceitos:
- Imagem
- Container
- Docker Registry(Docker Hub)
- Dockerfile: receita de uma imagem
Instalando Docker:
https://www.notion.so/Instalando-Docker-6290d9994b0b4555a153576a1d97bee2
https://docs.docker.com/toolbox/toolbox_install_windows/
Instalando docker postgres:
https://hub.docker.com/_/postgres
Verificando se a porta 5432 esta sendo utilizada:
netstat -o -n –a
Rodar no Docker Quickstart Terminal:
docker run --name gostack_postgres -e POSTGRES_PASSWORD=docker -p 5432:5432 -d postgres
Comando para ver se o container esta rodando:
docker ps
docker logs 526c717be274
Iniciar docker:
docker start 526c717be274
Instalar Dbeacer: gerencia banco de dados
https://dbeaver.io/download/
TypeORM:
https://typeorm.io/#/using-ormconfig
yarn add typeorm pg
Criando a tabela de agendamentos:
package.json:
"scripts": {
"build": "tsc",
"dev:server": "ts-node-dev --inspect --transpileOnly --ignore-watch node_modules src/server.ts",
"start": "ts-node src/index.ts",
"typeorm": "ts-node-dev ./node_modules/typeorm/cli.js"
},
Rodar comando:
yarn typeorm
yarn typeorm migration:create -n CreateAppointments
Migrations: controlam a versão do banco de dados e as alteracoes simultaneas dentro do banco de dados. A migration evita que quando mais devs estiverem trabalhando dentro de um mesmo projeto, evita que os banco de dados estejam em versões diferentes.
Após criado migration de appointments:
yarn typeorm migration:run
So pode alterar uma migration se ela não foi enviado ainda pra o sistema de controle de versão.
Desfazendo a migration:
yarn typeorm migration:revert
Mostrando as migrations que ja forma executadas:
yarn typeorm migration:show
Arquivo tsconfig.json: descomentar campos.
"experimentalDecorators": true,
"emitDecoratorMetadata": true,
"strictPropertyInitialization": false,
Instalar:
yarn add reflect-metadata
Cadastro de usuarios:
yarn typeorm migration:create -n CreateUsers
Alterando nome de uma tabela no banco utilizando migration:
yarn typeorm migration:create -n AlterProviderFieldToProviderId
O metodo down tem que sempre fazer ao contrario do metodo up
Relacionamentos:
- Um para Um (OneToOne)
- Um para Muitos (OneToMany)
- Muitos para Muitos (ManyToMany)
KISS - Keep It Simple & Stupid
Criptografia de senha:
yarn add bcryptjs
yarn add -D @types/bcryptjs
JWT (JSON Web Token): Autenticação
Acesso a imagem explicativa: https://github.com/leonardojcmay/gostack/blob/master/imagens/nivel%2002/03%20-%20Autentica%C3%A7%C3%A3o%20JWT.JPG?raw=true
Rota de autenticação do usuario
Gerando token JWT
yarn add jsonwebtoken
yarn add -D @types/jsonwebtoken
Site: https://www.md5online.org/
Gera-se um codigo de acordo com o que voce escrever
1c43ce7fcdd5ce0255b4d289bd3266d8
colocado no arquivo AuthenticateUserService.ts
Site para debuggar token: https://jwt.io/
Midleware de autenticação: vai evitar que usuarios não autenticadas possam acessar rotas especificas da aplicação
Upload de imagens
Se o usuario ja tiver uma imagem antiga, deletar a imagem antiga para que nao fique ocupando espaço na aplicação
Valida se o usuario realmente existe
Alterando o avatar do perfil
Adicionando migration:
yarn typeorm migration:create -n AddAvatarFieldToUsers
yarn typeorm migration:run
Instalar multer para lidar com o upload de arquivos:
yarn add multer
yarn add -D @types/multer
Ver arquivos que foram feitos uploads. Informando apos o files o nome da imagem ja ira aparecer na tela a imagem para você.
Rota para visualizar os arquivos:
http://localhost:3333/files/2be64fd0125056f45110-aula3.png
Tratando exceções
Exception Handling: lidando com erros dentro da aplicação
Global Exception Handler: middleware que vai captar todos os erros da aplicação
Instalar pacote:
yarn add express-async-errors
Iniciando aplicação: nesta aplicação será possivel localizar repositórios no github.
create-react-app primeiro-projeto-react --template=typescript
EditorConfig: botão direito e clicar em generate .editorconfig
ESlint:
yarn add eslint -D
package.json retirar eslintconfig
yarn eslint --init
Respostas: To check syntax, find problems, and enforce code style JavaScript modules (import/export) React Yes Browser Use a popular style guide Airbnb: https://github.com/airbnb/javascript JSON No
yarn add eslint-plugin-react@^7.19.0 @typescript-eslint/eslint-plugin@latest eslint-config-airbnb@latest eslint-plugin-import@^2.20.1 eslint-plugin-jsx-a11y@^6.2.3 eslint-plugin-react-hooks@^2.5.0 @typescript-eslint/parser@latest -D
Ajustado arquivos .eslintignore e .eslintrc.json
Pacote para fazer o eslint entender o typescript:
yarn add eslint-import-resolver-typescript -D
Prettier:
yarn add prettier eslint-config-prettier eslint-plugin-prettier -D
Ajustado arquivos .eslintignore e .eslintrc.json e criado arquivo prettier.config.js
Criando rotas:
yarn add react-router-dom
yarn add @types/react-router-dom -D
Styled Components: isola o css em componentes
yarn add styled-components
yarn add @types/styled-components -D
Fonte da letra: roboto
Pacote que permite trabalhar com as cores:
yarn add polished
Pacote para utilização de icones:
yarn add react-icons
Conectando a API:
Instalar axios:
yarn add axios
Acesso a api do github: https://api.github.com/
Tratando erros:
Dar enter sem tem nada digitado Informar repositório que não existe
Salvando no Storage:
Salvando dados cadastrados para que continuem em tela
Navegando entra rotas:
Indo para detalhes de cada repository utilizando o Link
Estilizando detalhes dos repositorios:
Tentar utilizar no maximo 2 niveis de estilização para cada tag
Conectando com a API github:
Listagem as issues dos repositorios
Iniciando Front-end do app: GoBarber
create-react-app gobarber-web --template=typescript
Configurado ferramentas: ESlint Editor config Prettier
Instalar styled components:
yarn add styled-components
yarn add @types/styled-components -D
Fonte: Roboto Slab
Página de login:
yarn add react-icons
yarn add polished
Página de cadastro:
Utilizando Unform: auxilia na performance de formulários no React
yarn add @unform/core @unform/web
Usabilidade do input:
useCallback: forma de criar funções dentro do componente que não são recriadas na memória toda vez que o componente atualiza, elas ficam memorizadas ficam salvas. Sempre que for utilizar um função dentro de um componente, utilize o useCallback
Validação do formulario de cadastro:
yarn add yup
yarn add @types/yup -D
Exibindo erros do input: useRef: para obter informações direto ao formulário
Criando tooltip de erros: Mensagem de erro ao passar mouse por cima do icone
Validação de login
Habilitando CORS na API: acessar o back-end da aplicação, Cors evita que alguns sites que não sejam confiaveis da aplicação possam acessar o site
yarn add cors
yarn add @types/cors
Ajustar configurações no server.ts
API de contexto: uma variavel que ficará acessivel de forma global ou não global dentro da aplicação
Login pelo contexto: metodo de autenticação
yarn add axios
Sempre que tornar um metodo em async, ele obrigatoriamente estara retornando uma Promise
Mantendo usuario no storage: Isso irá executar quando der F5 na pagina ou quando o usuario fechar o navegador e acessar novamente a aplicação
Criando hook useAuth
Logout da aplicação
Mensagens de Toasts: Estrutura de Toasts
Criando hook de toast: fazendo eles serem dinamicos, conseguindo acessa-los e remove-los de forma dinamica
Adicionando e removendo Toasts Utilizando id:
yarn add uuidv4
Exemplo caso queira internacinalizar a aplicação: https://github.com/i18next/react-i18next
Adionando toast Removendo toast no button Removendo toast depois de um determinado tempo
Animando Toasts Quando aparecer na pagina o toast vir do canto direito E quando sair da pagina voltar pelo canto direto
pacote para animação https://www.react-spring.io/
yarn add react-spring
Rotas da aplicação Configurando rotas:
yarn add react-router-dom
yarn add @types/react-router-dom
Rotas autenticadas:
Verificando se a rota for privada e o usuario nao esta autenticado, encaminha para rota de login
Verificando se a rota não for privada e o usuario esta autenticado, encaminha para rota de dashboard
Se não, mostrar o component da forma que é necessario mostrar