Treinamento OmniStack
===
###### tags: `Estudos`
---
### Ambiente VsCode
pluggins VsCode:
- Dracula Official
- Color Highlight
- EditorConfig for VS Code
- ESLint
- Prettier - Code formatter
- Rocketseat React Native
- Rocketseat ReactJS
- vscode-icons
fonte **`fira code`**
no ubuntu para instalar fonte, `sudo apt install fonts-firacode`
ctrl+shift+p > preferences: open settings(json)
```jsonld=
{
"window.zoomLevel": -1,
"explorer.confirmDragAndDrop": false,
"workbench.colorTheme": "Dracula",
"editor.fontFamily": "'fira code', 'monospace', monospace, 'Droid Sans Fallback'",
"editor.fontLigatures": true,
"editor.fontSize": 18,
"editor.lineHeight": 24,
"workbench.iconTheme": "vscode-icons",
"editor.formatOnSave": true,
"editor.rulers": [80, 120],
"editor.tabSize": 2,
"editor.renderLineHighlight": "gutter",
"terminal.integrated.fontSize": 14,
"emmet.syntaxProfiles": {
"javascript": "jsx"
},
"emmet.includeLanguages": {
"javascript": "javascriptreact"
},
"javascript.updateImportsOnFileMove.enabled": "never",
"breadcrumbs.enabled": true,
"editor.parameterHints.enabled": false,
"prettier.eslintIntegration": true
}
```
### Ambiente Terminal Cli
#### Oh My Sh
instalação do [OhMySh](https://ohmyz.sh)
`sh -c "$(curl -fsSL https://raw.github.com/robbyrussell/oh-my-zsh/master/tools/install.sh)"`
#### Oh My Sh - Tema SpaceShio
Instalação do tema ***spacheship***
`git clone https://github.com/denysdovhan/spaceship-prompt.git "$ZSH_CUSTOM/themes/spaceship-prompt"`
`ln -s "$ZSH_CUSTOM/themes/spaceship-prompt/spaceship.zsh-theme" "$ZSH_CUSTOM/themes/spaceship.zsh-theme"`
editar configs no ==~/.zshrc==
```bash
# alterar parametro abaixo
ZSH_THEME="spaceship"
# incluír bloco ao final do arquivo
SPACESHIP_PROMPT_ORDER=(
user # Username section
dir # Current directory section
host # Hostname section
git # Git section (git_branch + git_status)
hg # Mercurial section (hg_branch + hg_status)
exec_time # Execution time
line_sep # Line break
vi_mode # Vi-mode indicator
jobs # Background jobs indicator
exit_code # Exit code section
char # Prompt character
)
SPACESHIP_PROMPT_ADD_NEWLINE=false
SPACESHIP_CHAR_SYMBOL="❯"
SPACESHIP_CHAR_SUFFIX=" "
```
instalação do plugin zplugin
`sh -c "$(curl -fsSL https://raw.githubusercontent.com/zdharma/zplugin/master/doc/mod-install.sh)"`
❯ sudo apt install libncurses5-dev libncursesw5-dev
editar configs no ==~/.zshrc==
```bash
# incluír bloco ao final do arquivo
zplugin light zsh-users/zsh-autosuggestions
zplugin light zsh-users/zsh-completions
zplugin light zdharma/fast-syntax-highlighting
```
sudo snap install insomnia
### Ambiente Navegador - Chrome
adicionado extensoes:
- react developer tools
- dracula devtools theme
### Ambiente ferramentas
#### insomnia
https://insomnia.rest
sudo snap install insomnia
#### DevDocs
:fireworks: Podemos utilizar online:
`https://devdocs.io/php/function.preg-match-all`
:top: Podemos baixar e ter tudo offline tambem!
```bash=
cd ~
git clone https://github.com/egoist/devdocs-desktop
cd devdocs-desktop
npm install
npm run app
```
---
---
---
# Modulo 02 - Iniciando back-end do GoBarber
## Configurando estrutura
criado pasta de desenvolvimento
`/home/ice/Documentos/treinamentoRocketSeat/modulo02/gobarber`
```bash=
nvm install 10.15.3
nvm use --delete-prefix v10.15.3
yarn init -y
yarn add express
```
:::info
[Commit da etapa](https://github.com/WoneyBranga/rocketseat-gobarber/commit/f5f793b0c1026a5d8827b2776aef7dd729c0b988)
:::
---
## Nodemon & Sucrase
para utilizar padrao de importação de modulos atual, mesmo que temos no react, vamos add sucrase que nos gera esta funcionalidade.
exemplo de alteracao:
```javascript=
\\ Antes
const { express } = require('express');
module.exports = new App().server;
\\ Depois
import express from "express";
export default new App().server;
```
```bash=
yarn add sucrase nodemon -D
```
uma vez com sucrase instalado, podemos chamar a nossa app com o comando:
```bash=
yarn sucrase-node src/server.js
```
podemos ajustear nodemon para chamar sucrase, para isto vamos realizar 2 ajustes:
no *package.json*
```jsonld=
"scripts": {
"dev": "nodemon src/server.js"
},
```
na raiz de nosso projeto add *nodemon.json*
```jsonld=
{
"execMap": {
"js": "sucrase-node"
}
}
```
a partir deste momento podemos chamar nodemon+sucrase com comando simplificado
```bash=
yarn dev
```
:::info
[Commit da etapa](https://github.com/WoneyBranga/rocketseat-gobarber/commit/aa0299dcf8720f79af41733a164822d5d5f34a8d)
:::
---
## Conceitos do Docker
apresentacao resumida do docker e suas funcionalidades:
- containers,
- imagens,
- volumes,
- Dockerfile
## Configurando Docker
instalar docker na maquina segundo receitas do site oficial...
```bash
curl -fsSL https://get.docker.com -o get-docker.sh
./docker.sh
```
criando primeiro container...
```bash=
docker run \
-d \
--name database \
-e POSTGRES_PASSWORD=docker \
-p 5432:5432 \
postgres
```
:+1: Dica: ***[postBird](https://github.com/Paxa/postbird)*** como client para bancos postgres
conectamos ao nosso container com user **postgres:docker** e criamos database **gobarber** que utilizaremos em nossa aplicacao.
---
## Sequelize & MVC
o *[sequelize](http://docs.sequelizejs.com/)* é um ORM que nos permite codar de modo uniforme para interagir com bancos Postgres, MySQL, MariaDB, SQLite e Microsoft SQL Server
### migrations
controle de versao para base de dados
** migrarion nao pode ser editada!
** migration interage sempre com uma unica tabela!
**Seeds**
para população de tabelas com dados fakes para testes...
nunca deve ser utilizado em prod.
---
### MVC
*un controler nao chama outro controller*
Controller pode ter 5 metodos ex:
```javascript=
class UserControlller {
index() { } // listagem dos users
show() { } // exibir um unico user
store() { } // cadastrar user
update() { } // aleterar user
delete() { } // remover user
}
```
---
## ESLint, Prettier & EditorConfig
utlizaremos padrao de codigo js da airbnb
---
### ESLINT
```bash=
yarn add eslint -D
yarn eslint --init
yarn add eslint -D
3 - To check syntax, find problems, and enforce code style
1 - JavaScript modules (import/export)
3 - None of these
2 - Node
1 - Use a popular style guide
1 - Airbnb (https://github.com/airbnb/javascript)
1 - JavaScript
# em nosso caso solicitou downgrade do eslint... vai!
The style guide "airbnb" requires eslint@^4.19.1 || ^5.3.0. You are currently using eslint@6.0.1.
yes
Would you like to install them now with npm?
Yes
```
por ter instalado com npm, gerou ==package-lock.json== vamos remover pois utilizamos yarn.
por fim rodar `yarn` para fazer mapeamentos e atualizar nosso ==package.json==
:::info
no vscode precisamos do plugin eslint instalado para estas funcionalidades!
:::
ctrl+shift+p "Preferences: Open Settings (JSON)"
adicionado seguinte bloco:
```jsonld=
"eslint.autoFixOnSave": true,
"eslint.validate": [
{ "language": "javascript", "autoFix": true },
{ "language": "javascriptreact", "autoFix": true },
{ "language": "typescript", "autoFix": true },
{ "language": "typescriptreact", "autoFix": true }
],
```
no arquivo .eslintrc.js iremos realziar nossos ajustes
```javascript=
module.exports = {
env: {
es6: true,
node: true,
},
extends: [
'airbnb-base',
],
globals: {
Atomics: 'readonly',
SharedArrayBuffer: 'readonly',
},
parserOptions: {
ecmaVersion: 2018,
sourceType: 'module',
},
rules: {
"class-methods-use-this": "off",
"no-param-reassign": "off",
"camlcase": "off",
"no-unused-vars": ["error", {"argsIgnorePattern": "next"}],
},
};
```
---
### Prettier
```bash=
yarn add prettier eslint-config-prettier eslint-plugin-prettier -D
```
no arquivo .eslintrc.js iremos realziar nossos ajustes
```javascript=
module.exports = {
env: {
es6: true,
node: true,
},
extends: [
'airbnb-base',
'prettier'
],
plugins: ['prettier'],
globals: {
Atomics: 'readonly',
SharedArrayBuffer: 'readonly',
},
parserOptions: {
ecmaVersion: 2018,
sourceType: 'module',
},
rules: {
"prettier/prettier": "error",
"class-methods-use-this": "off",
"no-param-reassign": "off",
"camlcase": "off",
"no-unused-vars": ["error", {"argsIgnorePattern": "next"}],
},
};
```
criar na raiz do projeto .prettierrc
```jsonld=
{
"singleQuote": true,
"trailingComma": "es5"
}
```
:::info
para corrigir a padronização de varios arquivos simultaneamente:
`yarn eslint --fix src --ext .js`
:::
:::info
bug a entender... e ajuste...
```bash=
nvm install 10.15.3
nvm use --delete-prefix v10.15.3
```
:::
---
### EditorConfig
responsável por fazer com que os editores dos programadores utilizem mesmo padrao de configuração.
no vlcode instalar **EditorConfig for VS Code**
na raiz do projeto, dentro do vscode segundo botao do mouse e "generate .editorconfig"
```bash=
root = true
[*]
indent_style = space
indent_size = 2
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true
```
---
## Configurando Sequilize
```bash=
yarn add sequelize
yarn add sequelize-cli -D
```
criar na raiz arquivo .sequelizerc e popular:
```javascript=
const { resolve } = require('path');
module.exports = {
config: resolve(__dirname,'src', 'config', 'database.js'),
'models-path': resolve(__dirname,'src', 'app', 'models'),
'migrations-path': resolve(__dirname,'src', 'database', 'migrations'),
'seeders-path': resolve(__dirname,'src', 'database', 'seeds'),
};
```
criar arquivo src/config/database.js e popular
```javascript=
module.exports = {
dialect: 'postgres',
};
```
instalar dependencias de acordo com base em uso http://docs.sequelizejs.com/manual/dialects.html:
```bash=
yarn add pg pg-hstore
```
popular database.js
```javascript=
module.exports = {
dialect: 'postgres',
host: 'localhost',
username: 'postgres',
password: 'docker',
database: 'gobarber',
define: {
timestamps: true, // cria em cada tabela coluna com info de criacao e update de cada registro, interessante
underscored: true, // forcando nome_nesse_padrao em vez de camelCase
underscoredAll: true, // forcando nome_nesse_padrao em vez de camelCase
},
};
```
---
## Migration de usuario
```bash=
yarn sequelize migration:create --name=create-users
```
com este comando teremos em nosso diretorio src/database/migrations/ um novo arquivo, vamos populá-lo:
```javascript=
module.exports = {
up: (queryInterface, Sequelize) => {
return queryInterface.createTable('users', {
id: {
type: Sequelize.INTEGER,
allowNull: false,
autoIncrement: true,
primaryKey: true,
},
name: {
type: Sequelize.STRING,
allowNull: false,
},
email: {
type: Sequelize.STRING,
allowNull: false,
unique: true,
},
password_hash: {
type: Sequelize.STRING,
allowNull: false,
},
provider: {
type: Sequelize.BOOLEAN,
defautValue: false,
allowNull: false,
},
created_at: {
type: Sequelize.DATE,
allowNull: false,
},
updated_at: {
type: Sequelize.DATE,
allowNull: false,
},
});
},
down: queryInterface => {
return queryInterface.dropTable('users');
},
};
```
para aplicar rodar:
```bash=
yarn sequelize db:migrate
yarn run v1.16.0
$ /home/ice/Documentos/treinamentoRocketSeat/modulo02/gobarber/node_modules/.bin/sequelize db:migrate
Sequelize CLI [Node: 10.15.3, CLI: 5.5.0, ORM: 5.9.4]
Loaded configuration file "src/config/database.js".
== 20190709133832-create-users: migrating =======
== 20190709133832-create-users: migrated (0.041s)
Done in 0.63s.
```
:::success
Para aplicar nossa Migration...
`yarn sequelize db:migrate`
:::
:::warning
para desfazer ultima migrarion:
`yarn sequelize db:migrate:undo`
:::
:::danger
para desfazer todas as migrations:
`yarn sequelize db:migrate:undo:all`
:::
---
# Model de usuário
app/models/User.js
```javascript=
import Sequelize, { Model } from 'sequelize';
class User extends Model {
static init(sequelize) {
super.init(
{
name: Sequelize.STRING,
email: Sequelize.STRING,
password_hash: Sequelize.STRING,
provider: Sequelize.BOOLEAN,
},
{
sequelize,
}
);
}
}
export default User;
```
database/index.js
```javascript=
import Sequelize from 'sequelize';
import databaseConfig from '../config/database';
import User from '../app/models/User';
const models = [User];
class Database {
constructor() {
this.init();
}
init() {
this.connection = new Sequelize(databaseConfig);
models.map(model => model.init(this.connection));
}
}
export default new Database();
```
---
# Cadastro de Usuários
gerado [commit](https://github.com/WoneyBranga/rocketseat-gobarber/commit/ea564744fc14f39db1a28f1d95c1dcbd1c01bb5b) com alterações..
# Gerando hash da senha
adicionar modulo bcryptjs
```shell=
yarn add bcryptjs
```
gerado [commit](https://github.com/WoneyBranga/rocketseat-gobarber/commit/e14799f4970e7ee8bdc4da1b51eb07c3b3099fa8) com alterações..
---
# Conceitos de JWT
exemplo de token
```shell
eyJhbGciOiJIUzI1NiIsCJ9.eyJpcY29tIiwiZXhwIjoJ1ZX0.yRQYnWzskCZUx7oWxAQK_ZXw
[ Header ].[ payload ].[ assinatura ]
```
Estrutura do token JWT
| Header | payload | assinatura |
| -------- | -------- | -------- |
| (tipo de token, algoritmo) | infos da nossa aplicacao(idUser, nomeUser...) | hash de validacao do token para evitar manipulação |
---
# Autenticação JWT
```shell=
yarn add jsonwebtoken
```
:::info
:information_source: Para gerar hash no jwt, usar site [MD5OnLine](https://www.md5online.org/)
:::
Para geração do token, utilizamos função sign do jwt sendo:
```javascript=
jwt.sign([PAYLOAD], [HASH_UNICO_DA_APLIC], [TEMPO_DE_VIDA_TOKEN]);
jwt.sign({ id }, 'c680d8ed019b9302b0fdc895b830d97a', {expiresIn: '7d' });
```
---
# Middleware de autenticação
gerado [commit ](https://github.com/WoneyBranga/rocketseat-gobarber/commit/04b705f3de1c6752eb20b348fd119b1d2a220266) com alterações...
:::info
:information_source: modulo **==promisify==** transforma funções formato callback em funções com tratamento async/await...
:::
---
# Update Usuário
gerado [commit ](https://github.com/WoneyBranga/rocketseat-gobarber/commit/6701dcaf17584ef1b0276c5b743c83cf7b0363e7) com alterações...
---
# Validando dados de entrada
```shell=
yarn add yup
```
gerado [commit ](https://github.com/WoneyBranga/rocketseat-gobarber/commit/7be7166d1a7a7dfdb575ae360258d05b8eae6ea6) com alterações...
---
---
# Módulo 03 - Continuando API do GoBarber
---
## Configurando Multer
Multer é uma dependencia para que possamos trabalhar com o envio de "multipart form data" em formulários html, este é o formato que utilizamos quando vamos realziar o UPLOAD de uma imagem.
```bash=
yarn add multer
mkdir ./tmp
mkdir ./tmp/uploads
```
commit OK
https://github.com/WoneyBranga/bootcamp-meetapp-backend/commit/2948c6f73614cafe723d7feb2628952cf4cb071c
---
## Avatar do usuário
Vamos criar um migration para o files criando uma nova tabela...
```bash=
yarn sequelize migration:create --name=create-files
```
populamos o arquivo criado com estrutura de nossa tabela:
```javascript=
module.exports = {
up: (queryInterface, Sequelize) => queryInterface.createTable('files', {
id: {
type: Sequelize.INTEGER,
allowNull: false,
autoIncrement: true,
primaruyKey: true,
},
name: {
type: Sequelize.STRING,
allowNull: false,
},
path: {
type: Sequelize.STRING,
allowNull: false,
unique: true,
},
created_at: {
type: Sequelize.DATE,
allowNull: false,
},
updated_at: {
type: Sequelize.DATE,
allowNull: false,
},
}),
down: queryInterface => queryInterface.dropTable('files'),
};
```
por fim carregamos migration...
```bash=
yarn sequelize db:migrate
```
precisamos criar uma associação entre tabela users e file, para isso criaremos uma migration para adicionar campo na tabela users
```bash=
yarn sequelize migration:create --name=add-avatar-field-to-users
```
Aqui teve uma viajada no commit, ações deste modulo/epata escritos nos 2 commits a seguir...
---
## Listagem de prestadores de serviço
---
## Migration e model de agendamento
---
## Agendamento de serviço
---
## Validações de agendamento
```bash=
yarn add date-fns@next
```
---
## Listando agendamentos do usuário
---
## Aplicando paginação
---
## Listando agenda do prestador
---
## Configurando MongoDB
```bash=
docker run --name mongobarber -p 27017:27017 -d -t mongo
```
```bash=
yarn add mongoose
```
Cliente mongodb para debugs
***mongodb compass community***
---
## Notificando novos agendamentos
---
## Listando notificações do usuário
---
## Marcar notificações como lidas
---
## Cancelamento de agendamento
---
## Configurando Nodemailer
```bash=
yarn add nodemailer
```
Servidores de email
- amazon ses
- mailgun
- sparkpost
- Mandril(mailchimp)
:::warning
:warning: gmail tem limite e bloqueia!
:::
---
mailtrap (apenas ambiente DEV)
mailtrap.io
## Configurando templates de e-mail
```bash=
yarn add express-handlebars nodemailer-express-handlebars
```
---
## Configurando fila com Redis
```bash=
docker run \
-dit \
--name redisbarber \
-p 6379:6379 \
redis:alpine
```
```bash=
yarn add bee-queue
```
---
## Monitorando falhas na fila
---
## Listando horários disponíveis
---
## Campos virtuais no agendamento
---
## Tratamento de exceções
sentry.io
bugsnag.com
maybe to php language => errbit.com
cula.io
por default o express nao captura erros nas chamadas async.
Para resolver este problema ,`yarn add express-async-errors`
`yarn add youch`
---
## Variáveis ambiente
criar na raiz do projeto .env
`yarn add dotenv`
---
Sign in with Wallet
Connect another wallet