Skip to content

Instantly share code, notes, and snippets.

@TiagoWinehouse
Last active February 11, 2017 14:33
Show Gist options
  • Save TiagoWinehouse/71f7e4eebd218f0f9906da9daf28c79c to your computer and use it in GitHub Desktop.
Save TiagoWinehouse/71f7e4eebd218f0f9906da9daf28c79c to your computer and use it in GitHub Desktop.
Estudos!

Criando sites estáticos com Jekyll

Ao som Davi Sacer do Spotify.

Jeky é um gerador de sites estático

Instalando:

sudo gem install jekyll
  • pronto já temos o Jekyll instalando em nossa maquina..

Comandos básicos

Executando o comando jekyll --help, vai ser listado todos os comandos cli do jekyll, vamos abordar os mais importantes.

  • jekyll <subcommand> [options]
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
Subcommand
  • import: Permiti com que você importe informação de outros sistemas para o formato do jekyll
  • build, b: Gera os arquivos estático
  • clean: 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;

Criando um projeto com o jekyll cli

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

Como são organizadas as pastas
  • _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;
Gerando o build e subindo um servidor

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.

Configurando o _config.yml

Jest na prática - instalação e configuração

Ao som Top hits pra estudar do Spotify.

Vamos de Jest na prática junto com o curso de react ninja:

  • 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', () => {})

Conhecendo as funções para teste e asserção

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)
})

Code coverage

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

Integração com ES6/2015

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.

Watch interativo

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"
  }
}

JSON-Server Fake REST API

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.
Instalação:

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 comando cd json-fake, em seguida criei um arquivo com o comandoecho {} >> package.json aonde fica gravada as dependêcia do projeto, depois com o comando npm i -D json-server instalei o json-server como dependência de desenvolvimento e criei o arquivo aonde vai ficar o nosso JSON-FAKE touch 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
Concluímos que com um arquivo db.json podemos fazer um REST webservice. Também podemos fazer URIs personalizadas com um arquivo de mapeamento.

Instalando o Mysql

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.

Usando o mysql com o node.js

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!! =)

Agora vamos criar um sistema básico de autenticação de login de e-mail usando Node.js e o Mysql

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'})
            }
        }
    })
}

Agora vamos criar nosso frontend com React

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);
            });
    }

Notificação Desktop com Node.js

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.

Promises no JS

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.

Encadeamento

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').
Métodos estáticos
  • 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.
Concluindo o estudo

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment