Azure DevOps + Angular + GitHub Pages

Veja nesse artigo como criar uma pipeline no Azure DevOps para publicar o seu projeto Angular no GitHub Pages

Dando continuidade ao meu artigo anterior: Angular 8.3: publicando projeto com o Angular CLI em 5 passos, hoje eu irei demonstrar como criar uma pipeline no Azure DevOps para automatizar o processo de deploy demonstrado no artigo anterior.

Para os próximos passos sera necessário ter uma conta no Azure DevOps Service. Caso você ainda não tenha se cadastrado la, acesse o seguinte link para acessar o portal e criar uma conta: Azure DevOps.

Com o passo da conta OK, vamos a criação de uma nova pipeline. Para isso, siga os passos abaixo:

1- Clique em pipelines:

2 -Em seguida no canto superior direito, clique no botão New pipeline:

3- Selecione o repositório do seu código.

Para esse artigo, eu irei utilizar um repositório do meu GitHub.

4- Selecione a pipeline do Node.js:

Esse passo deve criar uma pipeline básica para projetos Node.js.

Caso seja necessário adicionar um novo step na sua pipeline, você pode utilizar o assistente no canto direito demonstrado na imagem abaixo:

Agora para ajustar pipeline para publicar o nosso projeto, altere o comando npm run build para npm run deploy.

Obs.: Esse comando e com base no meu arquivo package.json, nele eu adicionei o comando ng deploy da nova versão do Angular 8.3

Clique em Save and Run, de um nome para o seu commit e clique em Save and Run novamente.

Assim que o Job finalizar, acesse a sua página no GitHub pages e verifique as alterações que você subiu nessa nova release do seu projeto.

Link do meu projeto publicado em uma pagina do GitHub: Angular 8.3 DevOps.

Bom, a ideia desse artigo era demonstrar como automatizar o processo de deploy de um projeto angular, utilizando um arquivo .yml no Azure DevOps Service.

Espero que tenham gostado e até um próximo artigo pessoal 😉

Fonte: https://medium.com/xp-inc/azure-devops-angular-github-pages

Gostou desse artigo? Comente abaixo!

[Dica rápida]TypeScript: map()

Dando continuidade a minha série de artigos sobre TypeScript, hoje eu irei apresentar o map. Caso você tenha interesse em ler os primeiros artigos dessa serie, segue o link de cada um deles abaixo:

Bom, para quem não conhece o Map ele é uma das novidades do ES6, ele nos permite trabalhar com o conceito de coleção com chave e valor. Sua sintaxe é bem simples, basta instanciar ele e utilizar o get e o set para manipular os seus valores. Para ficar mais claro, vamos a alguns exemplos práticos:

Para criar um novo map basta utilizar o operador new:

let exMap = new Map();

E para popular ele nós devemos utilizar o operador set:

exMap.set("casa", 2);

Agora para resgatar um valor, nós podemos utilizar o get:

exMap.get('casa') // 2

Mas como eu passei acima, o map nos permite trabalhar com coleções. Abaixo você tem um trecho de código com um exemplo de um map com uma coleção.

let languages = new Map();
languages.set("C#", 1);
languages.set("JavaScript", 2);
languages.set("PHP", 3);


languages.forEach((value: string, key: number) => {
    console.log(key, value);
});

Resultado do código acima:

Além dos operadores get e set, map tem outros operadores que nos permitem: deletar uma chave, limpar todos os registros de uma coleção e verificar a quantidade de itens inseridos. Abaixo você tem um trecho de código demonstrando cada um deles:

Bem legal né?

Bom, a ideia desse artigo era demonstrar mais uma das funcionalidades do TS que podem nos ajudar no nosso dia dia 😉

Espero que tenham gostado e até um próximo artigo pessoal.

Fonte: https://medium.com/@programadriano/dica-r%C3%A1pida-typescript-conhecendo-o-ts-ignore

Gostou deste artigo? Deixe seu comentário abaixo!

Angular 7: novas funcionalidades

Veja nesse artigo como atualizar o seu ambiente de trabalho com a versão 7 do Angular e duas de suas novas funcionalidades

Já faz um bom tempo que eu estou focando os meus estudos no Angular, tive a oportunidade de participar de projetos com ele nas versões 2, 5 e 6. Hoje irei apresentar 2 novidades do que vieram nessa nova versão: o Drag and Drop e o Scrolling.

O primeiro passo será atualizar os nosso ambiente. Para isso, siga um dos passos abaixo de acordo com a versão que você tem instalada no seu computador:

Versão < 6

npm uninstall -g angular-cli
npm cache clean 
npm install -g @angular/cli@latest

Versão 6

ng update @angular/cli @angular/core

Para verificar se ele foi atualizado com sucesso, execute o comandong — versionno seu terminal. Abaixo você tem uma imagem demonstrando esse passo:

Atualizando o Angular para versão 7

Para ficar um passo a passo legal, vamos criar um novo projeto. Para isso, abra um terminal no seu computador e execute o comando ng new, note que você irá receber uma mensagem perguntando qual e o nome do seu projeto.

Essa é uma das novidades dessa nova versão. Abaixo você tem uma imagem demonstrando esse passo:

Novo projeto Angular versão 7

Informe o nome do seu projeto, em seguida note que você irá receber uma outra mensagem perguntando se deseja adicionar um arquivo de rotas. Eu irei informar Y para que ele adicione.

Adicionando rotas no Angular 7
O próximo passo será informar como você deseja trabalha com os estilos no seu projeto. Eu irei selecionar SCSS:

Adicionando rotas no Angular 7

Depois desse passo o seu projeto será criado. Para os próximos passos será necessário um editor de textos, eu irei utilizar o VS Code, mas você pode utilizar um de sua preferência.

Antes de nós começarmos a codar, vamos adicionar o Angular Material no nosso projeto. Para isso, execute o comando abaixo no seu terminal:

ng add @angular/material

Esse comando irá solicitar que você selecione um template para o seu projeto. Para esse artigo eu irei selecionar o indigo-pink.

Para as próximas perguntas eu irei informar N (não) para o HammerJS e Y (sim) para browser animations.

Com o projeto aberto no seu editor de textos, vamos conhecer as duas funcionalidades mencionadas no inicio desse artigo.

Drag and Drop

Nessa versão nós temos um módulo chamado DragDropModule. Para utilizar ele, basta adicionar a chamada abaixo no módulo que deseja utilizá-lo.

import {DragDropModule} from '@angular/cdk/drag-drop';

Em seguida atualize o arquivo app.component.html com o trecho de código abaixo:

<div class="example-box" cdkDrag>
  I can only be dragged using the handle

  <div class="example-handle" cdkDragHandle>
    <svg width="24px" fill="currentColor" viewBox="0 0 24 24">
      <path d="M10 9h4V6h3l-5-5-5 5h3v3zm-1 1H6V7l-5 5 5 5v-3h3v-4zm14 2l-5-5v3h-3v4h3v3l5-5zm-9 3h-4v3H7l5 5 5-5h-3v-3z"></path>
      <path d="M0 0h24v24H0z" fill="none"></path>
    </svg>
  </div>
</div>

E o arquivo app.component.scss com o trecho de código abaixo:

.example-box {
    width: 200px;
    height: 200px;
    padding: 10px;
    box-sizing: border-box;
    border: solid 1px #ccc;
    color: rgba(0, 0, 0, 0.87);
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    background: #fff;
    border-radius: 4px;
    position: relative;
    z-index: 1;
    transition: box-shadow 200ms cubic-bezier(0, 0, 0.2, 1);
    box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2),
                0 2px 2px 0 rgba(0, 0, 0, 0.14),
                0 1px 5px 0 rgba(0, 0, 0, 0.12);
  }
  
  .example-box:active {
    box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
                0 8px 10px 1px rgba(0, 0, 0, 0.14),
                0 3px 14px 2px rgba(0, 0, 0, 0.12);
  }
  
  .example-handle {
    position: absolute;
    top: 10px;
    right: 10px;
    color: #ccc;
    cursor: move;
    width: 24px;
    height: 24px;
  }

Abaixo você tem uma imagem demonstrando o resultado dessa implementação:

Scrolling

Um outro módulo que chegou nessa nova versão foi o ScrollDispatchModule, ele nos permite trabalhar com virtual scroll.

Para implementá-lo vamos criar um novo componente chamado VirtualScroll. Para isso, execute o comando abaixo no seu terminal:

ng g c virtualScroll

Em seguida atualize o seu arquivo app.component.html com o trecho de código abaixo:

<router-outlet></router-outlet>

E o novo componente no arquivo de rotas: app-routing.module.ts:

{ path: ‘scroll’, component: VirtualScrollComponent }

Agora para implementar o Virtual Scroll, vamos atualizar os arquivos: virtual-scroll.component.ts, virtual-scroll.component.scss e virtual-scroll.component.hml com os trechos de código abaixo:

virtual-scroll.component.ts

import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';

@Component({
  selector: 'app-virtual-scroll',
  templateUrl: './virtual-scroll.component.html',
  styleUrls: ['./virtual-scroll.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush,

})
export class VirtualScrollComponent implements OnInit {

  items = Array.from({length: 100000}).map((_, i) => `Item #${i}`);
  
  constructor() { }

  ngOnInit() {
  }

}

Analisando esse trecho de código nós temos:

  • 1: Estamos adicionando a chamada do ChangeDetectionStrategy para detectar as alterações no nosso componente
  • 12: estamos criando um array com 100000 itens para passar para nossa view

virtual-scroll.component.hml

<cdk-virtual-scroll-viewport itemSize="50" class="example-viewport">
  <div *cdkVirtualFor="let item of items" class="example-item">{{item}}</div>
</cdk-virtual-scroll-viewport>

virtual-scroll.component.scss

.example-viewport {
    height: 200px;
    width: 200px;
    border: 1px solid black;
  }
  
  .example-item {
    height: 50px;
  }

Abaixo você tem uma imagem demonstrando o resultado desse passo:

Os exemplos demonstrados nesse artigo foram retirados do site oficial do Angular. Caso tenham interesse em saber mais sobre essa nova versão, eu recomendo a leitura do seguinte link: Angular.io.

Fonte: medium.com/angularbr/angular-7-novas-funcionalidades

 

TypeScript: Named Parameters

Em uma das últimas atualizações do core do TypeScript, a equipe de desenvolvimento fez refactoring em uma funcionalidade chamada Named Parameters.

Para ficar mais claro como funciona essa funcionalidade, imagine o seguinte cenário: “Você tem uma model com algumas propriedades string, number … e precisa passar dados para ela:

function rolandGarros(
    typeMatch?: number,
    typeLabel?: string,
    round?: number,
    roundLabel?: string,
    courtName?: string,
    durationInMinutes?: number
) {
    return console.log(typeMatch, typeLabel, round, roundLabel, courtName, durationInMinutes);
};

Chamando a função rolandGarros:

rolandGarros(3, 'Draws', 1, 'First Round', 'Philippe-Chatrier Court', 10)

Nesse cenário é muito comum um dev passar o valor de uma propriedade no lugar da outra. Para resolver isso nós podemos utilizar o Named Parameters.

Veja abaixo como ficaria a nossa função:

function rolandGarros(
{ typeMatch, typeLabel, round, roundLabel, courtName, durationInMinutes }: { typeMatch?: number; typeLabel?: string; round?: number; roundLabel?: string; courtName?: string; durationInMinutes?: number; } = {}) {
    return console.log(typeMatch, typeLabel, round, roundLabel, courtName, durationInMinutes);
};

E como nós podemos fazer uma chamada:

rolandGarros({ typeMatch: 3, typeLabel: ‘Draws’, round: 1, roundLabel: ‘First Round’, courtName: ‘Philippe-Chatrier Court’, durationInMinutes: 10 })

Note que dessa forma nós podemos passar o nome da propriedade junto com o seu valor, dessa forma fica bem mais simples de olharmos e passar o valor de cada um dos parâmetros da nossa function.

E agora, como o TypeScript 3.4 ajuda nessa conversão?

A pedido de um dev da comunidade, o pessoal adicionou a funcionalidade “Convert parameters to destructured object“, onde com apenas um click ele já altera a nossa função e os locais onde nós estamos chamado ela. Abaixo você tem um vídeo demonstrando esse passo:

Bem legal né?

Essa é uma das funcionalidades que eu acredito ajudar muito no nosso dia dia.

Espero que tenham gostado e até o próximo artigo pessoal 😉

Node.js: monitorando APIs RESTful com o Application Insights

Dando continuidade aos meus artigos sobre Node.js no Azure, hoje eu irei demonstrar como monitorar uma API RESTful desenvolvida em node com TypeScript, utilizando o Application Insights.

Para aqueles que estão tendo o seu primeiro contanto com Application Insights nesse artigo, ele é um serviço de monitoramento de aplicações do Azure.

Com ele nós conseguimos medir a performance das nossas aplicações, extrair métricas de acesso por um range de tempo, detectar falhas … etc.

A ideia desse artigo será demonstrar como monitorar uma API RESTful desenvolvida em Node.js com TypeScript. Para isso, eu irei utilizar um gerador de APIs que eu desenvolvi utilizando essas tecnologias.

Caso tenha interesse em utilizar esse mesmo projeto, segue o seu link no portal NPM gerador-ts-api, e um vídeo passando alguns detalhes sobre essa estrutura:

Com o projeto OK, para os próximos passos será necessário ter uma conta no Azure. Caso você ainda não tenha uma, a Microsoft tem um programa chamado Visual Studio Dev Essentials que disponibiliza alguns benefícios como: créditos para serem utilizados no Azure, Visual Studio, acesso grátis por um período na Pluralsight… etc.

Caso tenha interesse em saber um pouco mais sobre esse programa, eu recomendo a leitura do seguinte artigo: Visual Studio Dev Essentials (Free).

Com o projeto criado e a sua subscription OK, vamos agora criar um novo serviço no Azure para monitorar a nossa aplicação. Para isso, acesse a sua conta, vá até-> Create resource -> Devops -> Application Insights e clique no botão Create.

Na próxima tela será necessário informar os dados da sua aplicação como: Nome, Resource Group … etc. Abaixo você tem uma imagem demonstrando como eu preenchi essa etapa para um evento presencial aqui em SP:

Clique em Create e aguarde a tela informando que o seu deploy está completo. Abaixo você tem uma imagem demonstrando essa etapa:

Agora clique no botão Go to resource -> vá até Overview e copie a sua instrumental Key:

Essa chave que irá vincular a nossa aplicação ao serviço no Azure.

Com a Key criada, vamos agora adicionar ela na nossa aplicação. Para isso, abra o seu projeto e siga os passos abaixo:

O primeiro passo será importar a biblioteca do applicationinsights para o nosso projeto. Para isso, abra um terminal, navegue até o seu projeto e execute o comando abaixo:

npm i applicationinsights --save

E no caso de estar seguindo esse passos em um projeto com TypeScript:

npm i @types/applicationinsights --save-dev

Agora abra o arquivo de inicialização do seu projeto, chame a biblioteca importada no passo anterior, em seguida inicialize ela com a sua instrumental Key:

const appInsights = require('applicationinsights'); 

appInsights.setup('<instrumentation_key>').start();

Caso esteja seguindo esses passos em um projeto gerado pelo o gerador-api-ts acima, basta abrir o arquivo startUp.ts e adicionar as linhas abaixo nele:

import * as appInsights from 'applicationinsights';
 // no inicio do arquivo
appInsights.setup('<instrumentation_key>').start();
 // no método middler

Monitorando a aplicação

Agora para que possamos monitorar a nossa aplicação, será necessário executar ela e abrir o serviço no Azure. Como eu estou utilizando a API gerado com o gerador mencionado acima, basta executar o comando npm run compile para gerar o dist do projeto e npm start para subir a aplicação.

Com o projeto rodando, vamos simular uma falha, uma chamada a uma rota/endpoint que não existe como por exemplo http://localhost:3050/api/v1/news.

Depois de alguns segundos acessando o portal conseguimos pegar o erro na chamada:

Como eu passei no inicio do artigo, nós podemos pegar métricas de acesso, performance … etc da nossa aplicação. Abaixo você tem um print demonstrando a performance da aplicação que eu estou utilizando nesse artigo:

Caso você tenha interesse em ver como retirar as outras métricas, como esse serviço funciona mais a fundo, eu recomendo a leitura do seguinte link na documentação da Microsoft: App-insights-overview.

Bom era isso pessoal, espero que tenham gostado e até um próximo artigo galera 😉

Angular 8.0

Veja nesse artigo as principais novidades dessa nova versão do Angular.

Já faz um tempo que eu estou brincando com essa versão do Angular em RC. Eu atualizei o meu ambiente para essa versão para testar a nova versão do TypeScript e indo já indo para primeira novidade do Angular 8, nesse update nós podemos trabalhar com o TS na versão 3.4 😉

Caso você não tenha visto nada dessa nova versão do TS 3.4, eu recomendo a leitura dos seguintes links abaixo:

E indo para a próxima novidade, nessa versão foi removido o pacote @angular/http. Esse pacote estava deprecated desde de a versão 5.0, desde de essa versão nós deveríamos estar utilizando o pacote @angular/common/http.

Novidades nos Forms

markAllAsTouched

Nessa versão foi adicionado um novo método dentro da class AbstractControl chamado markAllAsTouched. Esse método é parecido com o markAsTouched das versões anteriores, a diferença é que esse método marca todos controles do nosso form como touched.

Sintaxe

form.markAllAsTouched();

Caso você tenha interesse em saber mais sobre AbstractControl, eu recomendo a leitura do seguinte do seguinte link: Angular-AbstractControl.

clear

Para o pessoal que já trabalha com o Angular a um tempo, com certeza já deve ter feito algo como no exemplo abaixo para limpar um form.

while (formArray.length) {
  formArray.removeAt(0);
}

Nessa versão nós podemos utilizar o .clear() para limpar todos elementos de uma só vez 😉

Sintaxe

formArray.clear()

Rotas

Nessa versão foi adicionado uma nova sintaxe para declaração de rotas com lazy-loading.

Agora ao invés de declaramos assim:

loadChildren: './news/news.module#NewsModule'

Nós declaramos com o import:

loadChildren: () => import('./races/races.module').then(m => m.RacesModule)

Essa sintaxe com import() já é utilizada nas versões anteriores do TypeScript.

Ivy

Essa sem dúvidas foi uma das atualizações mais esperadas. Eu estou escrevendo um artigo focando nele, mas caso esse seja o seu primeiro contato com ele, o Ivy é o novo compilador do Angular 😉

Bom galera, esse foi um post rápido com foco em alguns dos updates dessa nova versão.

Referências

alligator.io

Node.js: importando dados de um arquivo .csv para o mongoDB

Quem nunca precisou abrir arquivo para importar o seus dados para uma base de dados? Esse é um processo simples que ajuda muito outras equipes como de RH, Financeiro … etc.

Hoje eu irei demonstrar como importar dados de um arquivo .csv com algumas das batalhas que ocorreram na serie GOT (Game of Thrones), utilizando o Node.js e uma base de dados mongoDB.

Para pular a etapa de criação de um novo projeto eu irei utilizar a versão final desse artigo. Caso tenha interesse em clonar esse projeto, segue o seu link no meu GitHub: node-csv-mongodb.

O projeto está bem simples, abaixo você tem uma breve explicação de cada um dos arquivos utilizados.

Analisando ela nós temos:

  • config/db: arquivo de conexão com a nossa base de dados
  • models/battles.js: model contendo os campos do arquivo .csv
  • repository/battleRepository: arquivo de mapeamento da model com a collection do banco de dados
  • battles.csv: arquivo contendo algumas das batalhas que ocorreram na série GOT
  • index.js: nós iremos explorar esse arquivo melhor, mas por hora ele é o responsável por abrir o arquivo .csv e importar os dados para o nosso banco de dados

Abra o projeto no seu editor de textos preferido, em seguida adicione a sua string de conexão no arquivo db.js. Com essa etapa OK, vamos analisar o arquivo index.js:

const db = require('./config/db');
const battleRepository = require('./repository/battleRepository');

const csv = require('csv-parser');
const fs = require('fs');

fs.createReadStream('./battles.csv')
    .pipe(csv())
    .on('data', (row) => {
        battleRepository.create(row);
    })
    .on('end', () => {
        console.log('CSV file successfully processed')
    });

Analisando esse trecho de código nós temos:

  • 01: estamos importando o arquivo db.js com a nossa conexão com o db
  • 02: estamos importando o nosso repository, ele será responsável pelas nossas queries.
  • 04 e 05: importando os pacotes (fs) e (csv-parser) para manipularmos o arquivo .csv
  • 07 até a 14: estamos passando o caminho do arquivo que iremos manipular -> abrindo ele -> passando os dados para o método .create do nosso repository para ele salvar os dados no db, assim que ele finalizar irá retornar a mensagem: ‘CSV file successfully processed’.

Para ficar mais clara essa etapa, comente a linha 11 do arquivo e adicione um console.log(row); no lugar, em seguida execute o comando node index.js. Abaixo você tem uma imagem demonstrando esse passo:

Note que ele passa por cada uma das linhas do arquivo e retorna cada uma deles na row. Agora descomente a linha 11 e execute o comando node index.js novamente.

Para verificar se os dados foram importados corretamente, eu irei utilizar o Robo 3T para conectar na minha base de dados. Abaixo você tem uma imagem demonstrando esse passo:

Note que todos os arquivos formam importados corretamente.

Bom, a ideia desse artigo era ser algo rápido para demonstrar como importar um arquivo .csv em um banco de dados mongoDB.

Espero que tenham gostado e até um próximo artigo pessoal.

RabbitMQ criando workers com Node.js

Introdução

Dando continuidade a minha serie de artigos sobre RabbitMQ, hoje irei apresentar uma de suas formas de implementação, os workers. Caso tenha interesse em saber um pouco mais sobre os Workers ou ler os primeiros artigos dessa série, eu recomendo a leitura dos artigos abaixo:

Para que você possa ter um melhor entendimento, eu irei criar um exemplo utilizando o Node.js e o RabbitMQ dentro de um container Docker.

O primeiro passo é ter o RabbitMQ instalado, como mencionado acima eu irei utilizar o RabbitMQ dentro de em um container Docker. Caso você ainda não tenha esse ambiente, eu recomendo a leitura do segundo link que eu passei acima, la eu demonstro como criar esse ambiente.

Criação do projeto

Abra um terminal no seu computador, em seguida escolha um local para criação do seu projeto. Navegue até ele via terminal e execute o comando abaixo:

npm init -y

Esse comando irá inicializar o seu projeto criando um arquivo chamado package.json. Agora vamos baixar o pacote do RabbitMQ. Para isso, execute o comando abaixo no seu terminal:

npm install amqplib --save

Com o projeto criado e a biblioteca do amqplib importada, vamos criar dois novos arquivos no nosso projeto.

O primeiro será o arquivo da nossa aplicação, para esse artigo eu irei chamar ele de app.js. Crie ele na raiz do seu projeto, em seguida atualize ele com o trecho de código abaixo:

var amqp = require('amqplib/callback_api');

amqp.connect('amqp://localhost:5672', function (err, conn) {
    conn.createChannel(function (err, ch) {
        var q = 'hello';
        var msg = 'Hello World 123!';
        ch.assertQueue(q, { durable: false });     
        ch.sendToQueue(q, new Buffer(msg));
        console.log(" [x] Sent %s", msg);
    });
    setTimeout(function () { conn.close(); process.exit(0) }, 500);
});

Analisando o código acima você tem:

Agora vamos criar os nossos Workers. Para isso, crie um novo arquivo chamado worker.js na raiz do seu projeto e atualize ele com o seguinte trecho de código:

var amqp = require('amqplib/callback_api');

amqp.connect('amqp://localhost:5672', function (err, conn) {
    conn.createChannel(function (err, ch) {
        var q = 'hello';

        ch.assertQueue(q, { durable: false });
        ch.prefetch(1);
        console.log(" [*] Waiting for messages in %s. To exit press CTRL+C", q);
        ch.consume(q, function (msg) {
            console.log(" [x] Received %s", msg.content.toString());
        }, { noAck: true });
    });
});

Analisando esse código você tem:

Testando o código

Agora para testar o nosso código, abra 3 terminais no seu computador, navegue até o seu projeto e siga os passos abaixo:

Terminal 01

Execute o comando abaixo para criar o seu primeiro worker:

node worker.js

Terminal 02

Execute o comando abaixo para criar o seu segundo worker:

node worker.js

Terminal 03

Execute o comando abaixo para criar a sua aplicação e enviar a primeira mensagem para sua fila.

Obs.: O RabbitMQ trabalha com o conceito de Round Robin, logo o worker 1 pode não ser o primeiro a consumir a sua fila

node app.js

Abaixo você tem um vídeo demonstrando esse passo:

O intuito desse artigo foi demonstrar como trabalhar com os Workers do RabbitMQ utilizando o Node.js. Caso tenha interesse em baixar o código desenvolvido nesse artigo, segue o seu link no meu GitHub: Node-RabbitMQ-Workers.

Espero que tenham gostado e até um próximo artigo pessoal.

Utilizando Async Await com Expressjs

Hoje eu irei demonstrar como nós podemos utilizar Async/Await em um projeto Node.js com express.js.

O Objetivo desse artigo não será abordar o que é async e nem o porque utilizar ele (caso não saiba veja o artigo ES8: Funções Assíncronas), será algo rápido para demonstrar como trabalhar com ele em um projeto node com o framework expressjs.


Para pular a etapa de criação de um novo projeto, eu irei utilizar um que eu desenvolvi em um artigo anterior sobre:Criando uma API Node com Express.js. Caso você tenha interesse em clonar ele, segue o seu link no meu GitHub: node-express.

Para que possamos ter um cenário mais próximo do nosso dia a dia, eu irei fazer uma requisicão a uma URL externa. Existem muitos pacotes para isso, mas nesse artigo eu irei utilizar o pacote resquest.

Abra um terminal no seu computador e execute o comando abaixo:

npm install request --save-dev

O próximo passo será atualizar a nossa rota GET para que ela possa requisitar uma API externa. Para isso, abra o seu arquivo /src/controllers/personController.js e atualize ele com o trecho de código abaixo:

var request = require("request");

exports.get = async (req, res, next) => {
  console.log("chamando");
  await request("http://www.google.com", function(error, response, body) {
    res.json(body);
  });
};

Em seguida, execute o comando npm start no seu terminal, esse comando ira executar o projeto no seguinte endereço: http://localhost:3000/person.

Abra esse endereço no seu navegador.

Caso tudo esteja OK, você irá receber o resultado da imagem abaixo:

resultado node com Async Await

Bem simples né?

O objetivo desse artigo foi demonstrar como utilizar o Async/Await com Node e o Express.js. Espero que tenham gostado e até um próximo artigo pessoal.

Criando uma API Node com Express.js

Para quem não conhece o Express.js ele é um excelente framework do Node.js que nos auxilia na construção das nossas aplicações Web. Ele é um framework muito simples de ser utilizado, por isso vem sendo adotado pelos desenvolvedores de todos os níveis. Para que possamos conhecer ele um pouco mais vejamos 10 passos a baixo para criação de um Web Site.

1. Instalação

Para esse artigo não iremos abordar a instalação do Node.js, iremos partir de uma maquina com ele já instalado e configurado. Crie um novo diretório no seu computador e crie uma nova pasta, nós iremos utilizar node-express, mas você pode escolher um outro nome de sua preferência. Feito isso execute o comando a baixo para baixar o nosso modulo.

npm install express

3. Estrutura do nosso projeto

Crie uma estrutura de pastas e arquivos conforme está na imagem a baixo:

4. Criando arquivo de Server

Vamos agora criar o arquivo de inicialização do nosso projeto, para quem vem do mundo php seria o nosso index.php ou HomeController.cs no MVC do .NET. Para isso, abra o seu arquivo server.js e cole o código a baixo nele:

const app = require('../src/app');
const port = normalizaPort(process.env.PORT || '3000');
function normalizaPort(val) {
    const port = parseInt(val, 10);
    if (isNaN(port)) {
        return val;
    }
if (port >= 0) {
        return port;
    }
return false;
}
app.listen(port, function () {
    console.log(`app listening on port ${port}`)
})

No código a cima nós estamos importando um modulo que iremos criar nos próximos passos, depois estamos definindo uma porta para que ele seja executado, no final estamos passando para o método app.listen a porta que queremos que ele escute o nosso projeto e de um console.log com ela.

5. Controller

Para que possamos organizar o nosso código, nós dividimos ele pensando em um padrão MVC, no código a baixo nós temos as nossas Actions das nossas Controllers.

exports.post = (req, res, next) => {
    res.status(201).send('Requisição recebida com sucesso!');
};
exports.put = (req, res, next) => {
    let id = req.params.id;
    res.status(201).send(`Requisição recebida com sucesso! ${id}`);
};
exports.delete = (req, res, next) => {
    let id = req.params.id;
    res.status(200).send(`Requisição recebida com sucesso! ${id}`);
};

6. Rotas

Agora vamos criar as nossas rotas, nessa parte nós temos dois arquivos: index.js e personRoute.js. O arquivo index.js seria para passar a versão que esta a nossa API ou para que possamos passar para um balanceador (Load Balancer) verificar se a nossa API está no ar, o personRoute.js contem as rotas que iremos utilizar para nossa PersonController.

Index.js

const express = require('express');
const router = express.Router();
router.get('/', function (req, res, next) {
    res.status(200).send({
        title: "Node Express API",
        version: "0.0.1"
    });
});
module.exports = router;

PersonRoute

const express = require('express');
const router = express.Router();
const controller = require('../controllers/personController')
router.post('/', controller.post);
router.put('/:id', controller.put);
router.delete('/:id', controller.delete);
module.exports = router;

7. Configurações.

O arquivo app.js é responsável pelas configurações do nosso projeto, nele que nós devemos configurar a nossa base de dados, rotas … etc. Pensando novamente no mundo .NET eu ousaria dizer que ele seria o nosso web.config.

const express = require('express');
const app = express();
const router = express.Router();

//Rotas
const index = require('./routes/index');
const personRoute = require('./routes/personRoute');
app.use('/', index);
app.use('/persons', personRoute);
module.exports = app;const express = require('express');
const app = express();
const router = express.Router();

//Rotas
const index = require('./routes/index');
const personRoute = require('./routes/personRoute');
app.use('/', index);
app.use('/persons', personRoute);
module.exports = app;

8. Nodemon

O pacote nodemon nós auxilia no momento do nosso desenvolvimento, com ele nós não precisamos dar stop e subir novamente a nossa APP, ele verifica que ocorreu uma alteração e já faz o refresh automaticamente. Para instalar ele, execute o comando a baixo na sua console.

npm install -g nodemon

9. Arquivo Package.config

Esse seria o arquivo inicial nos projetos Node, nele nós temos todas as dependências

{
  "name": "node-express",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "dependencies": {
    "express": "^4.15.4"
  },
  "devDependencies": {},
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "nodemon ./bin/server.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

10. Testes

Para que possamos testar o nosso projeto, digite o comando npm install na sua console para importar os pacotes necessários para a nossa aplicação, assim que ele finalizar execute o comando npm start. Caso tudo OK nos passos anteriores, você irá ver a mensagem a baixo na sua console.

Agora abra no seu navegador o endereço http://localhost:3000/. Ele deve apresentar a mensagem a baixo como retorno da nossa rota Index.
{
    "title": "Node Express API",
    "version": "0.0.1"
}

Segue o link do projeto completo que criamos nesse post Github.