-
-
Save TiagoWinehouse/71f7e4eebd218f0f9906da9daf28c79c to your computer and use it in GitHub Desktop.
Ao som Davi Sacer do Spotify.
Instalando:
sudo gem install jekyll
- pronto já temos o Jekyll instalando em nossa maquina..
Executando o comando jekyll --help
, vai ser listado todos os comandos cli do jekyll, vamos abordar os mais importantes.
jekyll <subcommand> [options]
-s --source
: Você define aonde vão ficar os arquivos fonts do nosso jekyll;-d --destination
: Serve pra definir aonde o nosso arquivo gerado vão ficar ou seja aonde vão ficar o nosso HTML estático;--layout
: Podemos definir aonde vão ficar o nosso layout
import
: Permiti com que você importe informação de outros sistemas para o formato do jekyllbuild, b
: Gera os arquivos estáticoclean
: Que vai limpar a pasta _site ou a pasta do arquivo fonte;new
: Cria os arquivos para site;serve
: Cria um servidor local;docs
: Gera uma documentação;
jekyll new tiagowinehouse-blog
// aonde o tiagowinehouse-blog é o nome do projeto ou blog
Ele gerou uma pasta chamada de tiagowinehouse-blog
vamos entra dentro dessa pasta com o comando cd tiagowinehouse-blog
_includes
: São trecos que se repetem ao longo do site e podem ser incluido sem ter que digitar de novo;_layouts
: Define layout padrão para um tipo de página;_post
: Aonde vão ficar todos os posts;_sass
: Aonde vão ficar os arquivos do preprocessador sass;_config.yml
: Arquivo de configuração base de todo o sistema;about.md:
: Arquivo que irá gerenciar uma página /about;feed.xml
: Arquivo que gera o feed para o seu blog;index.html
: Página inicial do blog;
jekyll build
ele gera a pasta _site com os arquivos e em seguida com o comando jekyll serve
ele sobe um servidor local na porta 4000.
Ao som Top hits pra estudar do Spotify.
- O Jest é usado pelo Facebook para testar vários códigos em JavaScript e também aplicações em React.
Vamos criar um diretório para os nossos testes:
mkdir jest-in-practive && cd jest-in-practive
Dentro do diretório de trabalho, vamos criar nosso velho arquivo 'package.json'
echo {} >> package.json
Agora vamos instalar nossa dependêcia do projeto
npm i --save-dev jest-cli
- é uma ferramente de linha de comando que ela vai nós dar alguns comandos para utilizar e executar os nosso testes.
Vamos editar o nosso arquivo package.json e colocar o comando para rodar os testes
{
"scripts": {
"test": "jest"
},
"devDependencies": {
"jest-cli": "^18.1.0"
}
}
Agora podemos rodar os testes com o comando:
npm test
O Jest sempre procura por pastas que começam por:
__tests__ || arquivos com test.js || arquivos spec.js
Criando o nosso primeiro arquivo de teste e vamos chamar de sum.test.js
touch sum.test.js
E vamos escrever o nosso primeiro teste:
'use strict'
// primeiro parâmetro é sempre a descrição do nosso teste
// segundo parâmetro é uma função que vai ser rodado os testes
it('Testando o Jest na Prática', () => {})
Ao som Hora Acústica do Spotify.
Usando o arquivo sum.test.js como modelo, observamos que o segundo parâmentro é uma função, essa função é passada como describe('')
que vai criar um escopo para os nosso testes:
'use strict'
describe('# Escopo do nosso testes', () => {
it('Testando o Jest na Prática #1', () => {})
it('Testando o Jest na Prática #2', () => {})
});
Executando o nosso teste com o expect().toBe()
dentro da função do it()
:
'use strict'
it('Um é igual a 1', () => {
// espera que o valor recebido seja igual ao que foi passado
expect(1).toBe(1)
})
Criamos um arquivo sum.js
que vai ser a nossa cobertura de teste no Jest. Para cada arquivo tem que ter um arquivo de teste.
touch sum.js
Vamos alterar o nosso package.json
e colocar o script --coverage
{
"scripts": {
"test": "jest --coverage"
},
"devDependencies": {
"jest-cli": "^18.1.0"
}
}
Quando se usa TDD primeiro escrevemos os teste e depois a implementação:
'use strict'
const expect = require('chai').expect
const sum = require('./sum')
it('sum should be a function', () => {
expect(sum).to.be.a('function')
});
Agora a implementação do teste que é o arquivo sum.js
:
module.exports = () => {}
- o teste vai passar porque ele está esperando uma function
Instalando as dependência para programar com ES6/2015
:
npm i --save-dev babel-core babel-jest babel-preset-es2015 babel-preset-stage-0
- Criando também o arquivo
.babelrc
{
"presets": ["es2015", "stage-0"]
}
Agora é so executar o comando npm test -- --no-cache
com esse comando o jest irá limpar os caches dos teste e logo após passamos o comando npm test
.
Vamos adicionar uma nova entrada para o arquivo package.json
chamada teste:watch, nosso arquivo ficará assim:
{
"scripts": {
"test": "jest --coverage",
"test:watch": "npm test -- --watch"
},
"devDependencies": {
"babel-core": "^6.22.1",
"babel-jest": "^18.0.0",
"babel-preset-es2015": "^6.22.0",
"babel-preset-stage-0": "^6.22.0",
"chai": "^3.5.0",
"jest-cli": "^18.1.0"
}
}
Ao som de Manhã Traquila do Spotify.
JSON-Server:
- Ele simula um servidor back-end e uma API-REST muito simples com um arquivo JSON. Com ele podemos fazer uma falso API-REST. O JSON-SERVER é um pacote npm que você pode criar um serviço web REST JSON e tudo que é preciso é ter um arquivo JSON e esse será o nosso back-end Rest.
Aqui você tem 2 opções ou instala localmente no seu projeto ou gloabalmente. Vou criar um diretório para o projeto e vou instalar localmente no projeto com a flag --save-dev
ou -D
:
$ mkdir json-fake && cd json-fake && echo {} >> package.json && npm i -D json-server && touch db.json
- Esse comando acima eu criei uma pasta com o comando
mkdir json-fake
depois entrei na pasta com o comandocd json-fake
, em seguida criei um arquivo com o comandoecho {} >> package.json
aonde fica gravada as dependêcia do projeto, depois com o comandonpm i -D json-server
instalei o json-server como dependência de desenvolvimento e criei o arquivo aonde vai ficar o nosso JSON-FAKEtouch db.json
.
Editando o arquivo db.json
, passando os dados fake:
{
"WineSensores": [{
"id": 100023,
"status": true
}, {
"id": 100055,
"status": false
}, {
"id": 100121,
"status": false
}, {
"id": 100909,
"status": true
}]
}
Executando o comando json-server --watch db.json
:
➜ json-fake json-server --watch db.json
\{^_^}/ hi!
Loading db.json
Done
Resources
http://localhost:3000/WineSensores
Home
http://localhost:3000
Type s + enter at any time to create a snapshot of the database
Watching...
O servidor está rodando na porta 3000. Agora temos um servidor e a API em execução e podemos testar com o POSTMAN passando as operações de CRUD:
Rotas:
[GET] http://localhost:3000/WineSensores
[GET] http://localhost:3000/WineSensores/id
[POST] http://localhost:3000/WineSensores post params:!
[PUT] http://localhost:3000/WineSensores post params:!
[DELETE] http://localhost:3000/WineSensores/id
Ao som Eu escolhi Escutar Gospel do Spotify.
Instalando Mysql no Ubuntu:
sudo apt-get update
sudo apt-get install mysql-server
- Durante a instalação, você será solicitado a configurar a senha root.
Depois da instalação verifique a versão do mysql com o seguinte comando:
mysql --version
Você verá uma saída igual a essa no terminal:
mysql Ver 14.14 Distrib 5.7.17, for Linux (x86_64) using EditLine wrapper
- Verifique a versão após a instalação. Se ela for menor de que 5.7.6 você deve inicialr o diretório de dados com o seguinte comando:
sudo mysql_install_db
Em Seguida, verifique o status do serviço do mysql executando o seguinte comando:
service mysql status
- Você verá uma saída igual a essa no terminal:
● mysql.service - MySQL Community Server
Loaded: loaded (/lib/systemd/system/mysql.service; enabled; vendor preset: en
Active: active (running) since Qui 2017-02-09 11:29:22 BRT; 15min ago
- Agora se ele mostrar status: Unknown job: mysql. Inicie o serviço mysql executando o seguinte comando:
sudo service mysql start
Agora faça o login no mysql cli com o seguinte comando:
mysql -u root -p
- -u: é o Usuário
- -p: é a Senha
- Ele pedirá a senha de root que você configurou durante a instalação do mysql.
Agora com acesso ao mysql cli. Execute o seguinte comando para criar o banco de dados mysql:
create database dbnome;
- dbnome: é o nome do seu banco. No meu caso vou nomear de dbpelada
Para verificar se o seu banco foi criado, execute o seguinte comando:
show databases;
mysql> show databases;
+--------------------+
| Database |
+--------------------+
| information_schema |
| dbpelada |
| mysql |
| performance_schema |
| sys |
+--------------------+
5 rows in set (0,00 sec)
Para sair do mysql cli usando o comando ctrl + c.
Agora crie uma pasta no seu diretório favorito para seu projeto:
cd Workspace/
mkdir Pelada && cd Pelada && mkdir backend && cd backend
- cd: esse comando entra na pasta escolhida.
- mkdir: esse comando cria uma pasta no diretório presente.
Agora dentro da pasta do projeto vamos iniciar o npm:
npm init -f
- -f: esse comando irá forçar o npm a criar o package.json.
Agora vamos instalar os módulos de dependência do nosso projeto:
npm install express mysql --save
- --save: esse comando irá salva os pacotes como depedência de desenvolvimento do nosso projeto no package.json.
Agora vamos criar o arquivo server.js
- com o comando touch server.js irá criar o arquivo javascript
Com o arquivo criado vamos programar o server com o node.js
const express = require('express')
const mysql = require('mysql')
const PORTA = 3000
const app = express()
const conexao = mysql.createConnection({
host: 'localhost',
user: 'root',
password: '',
database: 'dbpelada'
})
conexao.connect(err => {
!err ? console.log('Database conectada!! =)') : console.log('Ops! Erro ao conectar com a database.. =(')
})
app.listen(`${PORTA}`)
Agora é só executar o seguinte comando para verificar a sua conexão com o banco de dados:
node server.js
Se você conseguir a conexão com o banco mysql irá aparecer o seguinte log no console do terminal:
➜ backend: node server.js
Database conectada!! =)
Ao som Acústico Para Relaxar do Spotify.
Vamos lá..
Primeiro, precisamos criar uma tabela no banco de dados para registrar novos usuários. Vamos usar o terminal do mysql com o seguinte comando:
mysql -u root -p
mysql> show databases;
+--------------------+
| Database |
+--------------------+
| information_schema |
| dbpelada |
| mysql |
| performance_schema |
| sys |
+--------------------+
5 rows in set (0,00 sec)
mysql> use dbpelada
Database changed
Agora que selecionamos o banco de dados, vamos criar a tabela de users executando o seguinte comando no shell no mysql:
mysql> CREATE TABLE `users` (
-> `id` int(11) NOT NULL AUTO_INCREMENT,
-> `first_name` varchar(100) COLLATE utf8_unicode_ci NOT NULL,
-> `last_name` varchar(100) COLLATE utf8_unicode_ci NOT NULL,
-> `email` varchar(100) COLLATE utf8_unicode_ci NOT NULL,
-> `password` varchar(255) COLLATE utf8_unicode_ci NOT NULL,
-> `created` datetime NOT NULL,
-> `modified` datetime NOT NULL,
-> PRIMARY KEY (`id`)
-> ) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;
Query OK, 0 rows affected (0,39 sec);
Com a tabela users criada vamos sair do mysql cli com o comando
mysql> exit
Agora vamos criar na pasta raiz do nosso projeto outra pasta chamada de router e dentro dela vamos criar um arquivo chamado loginroutes
- A pasta router conterá todos os manipuladores de rotas para as solicitações da API;
- O arquivo loginroutes conterá os manipuladores específicos para as tarefas de login e registro ao sistema;
mkdir router && cd router && touch loginroutes.js
Agora vamos instalar como dependência de desenvolvimento o módulo ''body-parser'', na raiz do projeto executeno terminal o seguinte comando:
npm install body-parser --save
Com o "Body Parser" instalando vamos alterar o nosso arquivo server.js
const express = require('express')
const login = require('./router/loginroutes')
const bodyParser = require('body-parser')
const PORTA = 5555
const app = express()
// estamos usando o EXPRESS e BODYPARSER como middleware
// para analisar as colicitações de entrada como 'JSON'
app.use(bodyParser.urlencoded({extended: true}))
app.use(bodyParser.json())
// os controles de acesso permitem que os cabeçalhos de origem sejam
// essenciais para que onosso servidor sirva pedidos de domínio cruzados
app.use((req, res, next) => {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
next();
})
const router = express.Router()
// testando uma rota
router.get('/', (req, res) => {
res.json({ mensagem: 'Seja Bem-vindo ao nosso módulo de API`s'})
})
// rotas para lidar com o registro de usúario
router.post('/register', login.register)
router.post('/login', login.login)
app.use('/api', router)
app.listen(`${PORTA}`)
Vamos desenvolver as funções de manipulação das rotas no arquivo loginroutes.js
- Vamos pegar a mesma conexão usada para conectar com o banco de dados mysql que estava no arquivo server.js
const mysql = require('mysql')
const express = require('express')
const app = express()
const conexao = mysql.createConnection({
host: 'localhost',
user: 'root',
password: '',
database: 'dbpelada'
})
conexao.connect(err => {
!err ? console.log('Database conectada!! =)') : console.log('Ops! Erro ao conectar com a database.. =(')
})
No mesmo arquivo loginroutes.js vamos criar um manipulador de rota para o registro do usuário:
exports.register = (req, res) => {
const hoje = new Date();
const user = {
"first_name": req.body.first_name,
"last_name": req.body.last_name,
"email": req.body.email,
"password": req.body.password,
"created": hoje,
"modified": hoje
}
// executamos uma simples consulta de inserção no mysql para adicionar
// novo usuário ao banco de dados
conexao.query('INSERT INTO users SET ?', user, (erro, result, fields) => {
if (erro) {
console.log(`Ops.. Ocorreu um erro ${erro}`)
return res.send({
'code':400,
'failed': 'Ocorreu um erro'
})
}
console.log(`Sucesso: ${result}`);
return res.send({
'code': 200,
'success': 'Usuário registrado com sucesso!'
})
})
}
No mesmo arquivo loginroutes.js vamos criar um manipulador de rota para o login do usuário e validação das credenciais:
exports.login = (req, res) => {
const email = req.body.email
const password = req.body.password
// verificamos se o email existe no banco de dados
conexao.query('SELECT * FROM users WHERE email = ?', [email], (error, result, fields) => {
if (error) {
res.send({
'code': 400,
'failed': 'Ops.. Ocorreu um erro'
})
}else{
if(result.length > 0) {
// verificamos a senha para permitir o login com sucesso
if(result[0].password === password){
res.send({
'code': 200,
'success': 'Login realizado com sucesso!'
})
}else{
res.send({
'code': 204,
'success': 'Email ou senha inválidos'
})
}
}else{
res.send({
'code': 204,
'success': 'Email não existe'
})
}
}
})
}
Para vefiricar podemos usar o POSTMAN:
- Subimos o servidor com o comando
nodemon server.js
- se não tiver instalado o nodemon na sua máquina é simples, com o comando
sudo npm -g nodemon
- ele instala em sua máquina globalmente
Para finalizar a nossa API vamos adicionar uma camada de criptografia simples para armazenar senhas com segurança. Para isso vamos usar o módulo "bcrrypt" que pode ser intalado pelo seguinte comando no projeto:
npm install bcrypt --save
Depois de instalado no projeto vamos alterar o arquivo loginroutes.js e vamos deixar assim:
const mysql = require('mysql')
const express = require('express')
const bcrypt = require('bcrypt')
const app = express()
const conexao = mysql.createConnection({host: 'localhost', user: 'root', password: '', database: 'dbpelada'})
conexao.connect(err => {
!err
? console.log('Database conectada!! =)')
: console.log('Ops! Erro ao conectar com a database.. =(')
})
exports.register = (req, res) => {
const hoje = new Date();
// usamos 5 salt para criptografar
bcrypt.hash(req.body.password, 5, (err, bcryptedPassword) => {
const user = {
"first_name": req.body.first_name,
"last_name": req.body.last_name,
"email": req.body.email,
"password": bcryptedPassword,
"created": hoje,
"modified": hoje
}
conexao.query('INSERT INTO users SET ?', user, (error, result, fields) => {
if (error) {
console.log(`Ops.. Ocorreu um erro ${error}`)
return res.send({'code': 400, 'failed': 'Ocorreu um erro'})
}
console.log(`Sucesso: ${result}`);
return res.send({'code': 200, 'success': 'Usuário registrado com sucesso!'})
})
})
}
exports.login = (req, res) => {
const email = req.body.email
const password = req.body.password
conexao.query('SELECT * FROM users WHERE email = ?', [email], (error, result, fields) => {
if (error) {
res.send({'code': 400, 'failed': 'Ops.. Ocorreu um erro'})
} else {
if (result.length > 0) {
// aqui é descriptografada a senha
bcrypt.compare(password, result[0].password, (err, doesMath) => {
if (doesMath) {
res.send({'code': 200, 'success': 'Login realizado com sucesso!'})
} else {
res.send({'code': 204, 'success': 'Email ou senha inválidos'})
}
})
} else {
res.send({'code': 204, 'success': 'Email não existe'})
}
}
})
}
Ao som Acústico Para Relaxar do Spotify.
React é uma biblioteca JavaScript para desenvolvimento de interfaces de usuário.
Primeiro de tudo tempo que instalar o react-app na nossa maquina globalmente:
sudo npm install -g create-react-app
Com o create-react-app instalado, vamos criar um novo projeto com o cli do create-react-app no terminal:
create-react-app frontend
- frontend é o nome do meu projeto. Depois é só:
cd frontend
Vamos instalar no nosso projeto frontend os seguintes módulos:
- axios: responsável em enviar solicitações ao nosso backend;
- material ui kit: responsável para criação dos componentes ui;
npm install --save material-ui axios react-tap-event-plugin
- e dentro do projeto frontend:
npm start
Em seguida vai abrir uma aba do seu navegador padrão com a url http://localhost:3000.
Vamos criar um arquivo chamado Login.js dentro do diretório src/ que contém os campos de nome de usuário e senha
import React, {Component} from 'react'
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'
import AppBar from 'material-ui/AppBar'
import RaisedButton from 'material-ui/RaisedButton'
import TextField from 'material-ui/TextField'
const style = {
margin: 15
}
class Login extends Component {
constructor() {
super()
this.state = {
username: '',
password: ''
}
}
render() {
return (
<div>
<MuiThemeProvider>
<div>
<AppBar title='Login'/>
<TextField
hintText='Coloque o seu email'
floatingLabelText='Email'
onChange={(event, newValue) => this.setState({username: newValue})}/>
<br/>
<TextField
hintText='Coloque a sua senha'
floatingLabelText='Senha'
onChange={(event, newValue) => this.setState({password: newValue})}/>
<br/>
<RaisedButton
label='Submit'
primary={true}
style={style}
onClick={(event) => this.handleClick(event)}/>
</div>
</MuiThemeProvider>
</div>
)
}
}
export default Login
- Estamos armazenando o email e a senha em variáveis de estado que podem ser mudadas a cada click no botão passando a função onClick. Agora precisamos enviar essas informações para o backend no click do botão que será executada pela função handleClick, vamos definir a função handleClick:
handleClick(event) {
const apiBaseUrl = 'http://localhost:5555/api/'
const info = {
'email': this.state.email,
'password': this.state.password
}
axios
.post(`${apiBaseUrl}login`, info)
.then(response => {
response.data.code === 200 ? console.log('Login sucesso!') : console.log(response.data.success)
})
.catch(error => (console.log(error)))
}
- Essa função pega os os state do email e password e passa para o axios com o método post para o nosso backend que dar uma resposta se o data.code da resposta for 200 se não ele envia a resposta que foi definida no backend. Pra começo só vamos fazer isso no arquivo Login.js, agora vamos para o arquivo Register.js que vamos criar no diretório src/:
cd src/
touch Register.js
- Vamos fazer a implementação do Register.js:
import React, {Component} from 'react'
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import AppBar from 'material-ui/AppBar';
import RaisedButton from 'material-ui/RaisedButton';
import TextField from 'material-ui/TextField';
import axios from 'axios';
const style = {
margin: 15
}
class Register extends Component {
constructor() {
super()
this.state = {
first_name: '',
last_name: '',
email: '',
password: ''
}
}
render() {
return (
<div>
<MuiThemeProvider>
<div>
<AppBar title='Register'/>
<TextField
floatingLabelText="Primeiro Nome"
onChange=
{(event,newValue) => this.setState({first_name:newValue})}/>
<br/>
<TextField
floatingLabelText="Último Nome"
onChange=
{(event,newValue) => this.setState({last_name:newValue})}/>
<br/>
<TextField
type="email"
floatingLabelText="Email"
onChange=
{(event,newValue) => this.setState({email:newValue})}/>
<br/>
<TextField
type="password"
floatingLabelText="Senha"
onChange=
{(event,newValue) => this.setState({password:newValue})}/>
<br/>
<RaisedButton
label="Submit"
primary={true}
style={style}
onClick={(event) => this.handleClick(event)}/>
</div>
</MuiThemeProvider>
</div>
)
}
}
export default Register
Guardamos em um state o firstname, lastname, email e a senha do usuário. Agora precisamos enviar esses detalhes para o backend no click do botão que é executado pela função handleClick, vamos definir a função handleClick:
handleClick(event) {
const apiBaseUrl = 'http://localhost:5555/api'
const self = this;
const info = {
"first_name": this.state.first_name,
"last_name": this.state.last_name,
"email": this.state.email,
"password": this.state.password
}
axios
.post(`${apiBaseUrl}/register`, info)
.then(response => (response.data.code === 200
? console.log('Cadastrado com sucesso')
: console.log('Erro realizar cadastro')))
.catch(error => {
console.log(error);
});
}
Ao som DProgramação do Spotify.
Vamos criar um diretório em nossa pasta de ./LabDev com o nome /NotificacaoNodeJs e já iniciar um package.json
para gravar a nossa dependência do projeto..
mkdir NotificacaoNodeJs && cd NotificacaoNodeJs && npm init -f && npm i --save node-notifier && touch index.js
Com o arquivo index.js criado, vamos começa a programar:
const notificacao = require('node-notifier')
notificacao.notify('Olá Notificação com NodeJs')
Muito fácil criar notificação.. Agora passando um objecto:
const notificacao = require('node-notifier')
notificacao.notify({
'title': 'WineTemp',
'subtitle': 'Arduino sem operação',
'message': 'O arduino não está conectado com o sistema.',
'icon': 'erro.arduino.png',
'contentImage': 'winetemp.png',
'sound': 'erro-arduino.mp3',
'wait': true
})
Aqui você pode fornecar notificações do básico ao avançado passando icone e até som.
Ao som GDG Aracaju do Spotify.
Promises:
- Promise é um objeto usado para processamento assíncrono. Um Promise (de "promessa") representa um valor que pode estar disponível agora, no futuro ou nunca.
As Promises vai ajudar a trabalhar com o código assíncrono mais organizado.
const promise = new Promise ((resolve, reject) => {})
As promises aceitam uma função por parâmetro. Essa função será executada e recebe duas novas funções em seus argumentos.. Uma para resolver a promise, outra para rejeitá-la. Obs: Caso aconteça um erro ela também será rejaitada.
Ela possui dois métodos principais:
- then: Executado quando a promise é resolvida;
- catch: Executa em caso de rejaição;
Podemos passar por parârametro um valor quando resolvemos uma promise e esse valor será recebido no método then e também se rejeitamos uma promise podemos passar um valor. As função resolve
e a reject
podem ser interpretadas como callback e podem ser executadas apenas uma vez dentro da promise. Já o método then tem uma peculiaridade que pode ser usada várias vezes na mesma promise. Enquanto a promise está sendo executada ela tem o seu estado de pending
depois ela passa para o estado de rejected
ou resolved
.
O encadeamento no uso das promises é algum muito interessante, isso porque no resolve
da sua promise ela pode receber outra promise. Então a sua promise será resolvida quando a segunda promise for resolvida.
function getPinMode() {
return new Promise((resolve, reject) => {
console.log('getPinMode')
setTimeout(resolve, 2000)
})
}
function getServe() {
return new Promise((resolve, reject) => {
console.log('getServe')
setTimeout(wineServe => resolve(getPinMode()), 1000)
})
}
getServe().then(info => console.log('Acabou!'))
//Chamamos aqui a função getServe(), ele retornará
//uma promise com status pendente e com isso o seu then só
//será executado depois de 3s ou seja depois que as promises 'getPinMode e getServe'
//forem resolvidas, terminando com um console.log('Acabou').
- all: Esse método irá retornar uma promise pendente e só será resolvida quando todas as promises passada por parâmetro dentro de um array forem resolvida e ela é rejeitada se qualquer uma das promise rejeitar.
function getStatusServerArduino() {
Promise.all([
new Promise((resolve, reject) => {
resolve(console.log('Conexão com Server OK!'))
}),
new Promise((resolve, reject) => {
resolve(console.log('Conexão o Arduino OK!'))
}),
new Promise((resolve, reject) => {
resolve(console.log('Conexão com WineTemp OK!'))
})
]).then(result => {
console.info('Teste do sistema OK!')
}).catch(error => {
console.warn('Falhou!', error)
})
}
getStatusServerArduino()
- race: Esse método irá retornar uma promise pendente, mas ela será resolvida assim que qualquer uma das promise enviadas seja resolvida, assim que a primeira delas for resolvida e ela é rejeitada se alguma delas falharem antes de ser resolvida.
function getApiServerArduino() {
Promise.race([
new Promise((resolve, reject) => {
setTimeout(function () {
resolve('API Servidor Firebase')
}, 500)
}),
new Promise((resolve, reject) => {
setTimeout(function () {
resolve('API Servidor Infonet')
}, 300)
}),
new Promise((resolve, reject) => {
setTimeout(function () {
resolve('API Servidor AWS')
}, 500)
})
]).then(result => {
console.info(result)
}).catch(error => {
console.warn('Falhou!', error)
})
}
getApiServerArduino()
//a função then será envocada assim que a primeira promise resolver e as demais serão //ignoradas. Um exemplo é quando temos varios servidores para retornar uma API de //dados, a primeira que for executada é retornada e o then será chamado uma única vez,
//já o catch será chamado caso alguma das promise falhar.
As promises são muito úteis e nos ajudam a organizar e repensar nosso código, além de ser um padrão bem definido, pensado e testado.