Tag: JavaScript

Publicado em

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

Publicado em

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.

Publicado em

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.

Publicado em

Conheça MelonJS, a biblioteca para criação de jogos JavaScript

Você conhece a biblioteca melonJS para criação de jogos em HTML5 e JavaScript?

Conheça o MelonJS, um mecanismo de desenvolvimento de jogos em HTML5 que capacita desenvolvedores e designers a se concentrarem no conteúdo.

A biblioteca fornece uma coleção de entidades compostas e suporte para ferramentas de terceiros, dando-lhe ima combinação poderosa que pode ser usada por atacado ou fragmentada.

O melonJS possui os seguintes recursos:

  • Um novo e leve mecanismo baseado em sprites 2D;
  • Biblioteca autônoma (não depende de mais nada, exceto de um navegador compatível com HTML5);
  • Compatível com a maioria dos principais navegadores (Chrome, Safari, Firefox, Opera, IE) e dispositivos móveis;
  • Renderização rápida de Canvas e WebGL em computadores e dispositivos móveis;
  • Resolução de alta DPI e dimensionamento automático de tela;
  • Suporte de áudio HTML5 multicanal e Web Audio em dispositivos suportados;
  • Leve implementação físic, garantindo baixos requisitos de cpu;
  • Algoritmo de colisão baseado em polígono (SAT) para detecção e respostas precisas;
  • Detecção rápida de colisão de fase ampla, usando particionamento espacial;
  • Suporte a ferramentas de terceiros para definição de corpo físico (PhysicEditor, Physic Body Editor);
  • API de matemática avançada para vetor e matriz;
  • Efeitos de interpolação;

Continue lendo “Conheça MelonJS, a biblioteca para criação de jogos JavaScript”

Publicado em

JavaScript Básico 15 – Projeto Calculadora (Parte 1)

Códigos necessários para o projeto:

Neste artigo, será disponibilizado para você os códigos que serão utilizados como base no nosso projeto de Calculadora, baseado em nossa Playlist do YouTube.

Para realização deste projeto, será necessário que você tenha conhecimentos básicos de HTML, e JavaScript. É Interessante que você tenha acompanhado a nossa Playlist no YouTube. Playlist JavaScript Básico

Copie o código HTML que será utilizado no projeto:

<!DOCTYPE html>
<html lang="pt-br">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Calculadora</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />
    <link rel="stylesheet" href="main.css" />
</head>

<body>
    <div class="container areaCalculadora">
        <div class="row">
            <input id="inputDisplayResultado" type="text" value="" readonly />
        </div>
        <div class="row justify-content-end">
            <div class="col-3">
                <button id="btnLimpar" type="button" class="btn btn-outline-warning">C</button>
            </div>
        </div>
        <div class="row">
            <div class="col-3">
                <button id="btnValor7" type="button" class="btn btn-outline-primary">7</button>
            </div>
            <div class="col-3">
                <button id="btnValor8" type="button" class="btn btn-outline-primary">8</button>
            </div>
            <div class="col-3">
                <button id="btnValor9" type="button" class="btn btn-outline-primary">9</button>
            </div>
            <div class="col-3">
                <button id="btnDividir" type="button" class="btn btn-outline-success">/</button>
            </div>
        </div>
        <div class="row">
            <div class="col-3">
                <button id="btnValor4" type="button" class="btn btn-outline-primary">4</button>
            </div>
            <div class="col-3">
                <button id="btnValor5" type="button" class="btn btn-outline-primary">5</button>
            </div>
            <div class="col-3">
                <button id="btnValor6" type="button" class="btn btn-outline-primary">6</button>
            </div>
            <div class="col-3">
                <button id="btnMultiplicar" type="button" class="btn btn-outline-success">*</button>
            </div>
        </div>
        <div class="row">
            <div class="col-3">
                <button id="btnValor1" type="button" class="btn btn-outline-primary">1</button>
            </div>
            <div class="col-3">
                <button id="btnValor2" type="button" class="btn btn-outline-primary">2</button>
            </div>
            <div class="col-3">
                <button id="btnValor3" type="button" class="btn btn-outline-primary">3</button>
            </div>
            <div class="col-3">
                <button id="btnSubtrair" type="button" class="btn btn-outline-success">-</button>
            </div>
        </div>
        <div class="row">
            <div class="col-3">
                <button id="btnValor0" type="button" class="btn btn-outline-primary">0</button>
            </div>
            <div class="col-3">
                <button id="btnPonto" type="button" class="btn btn-outline-success">.</button>
            </div>
            <div class="col-3">
                <button id="btnResultado" type="button" class="btn btn-outline-success">=</button>
            </div>
            <div class="col-3">
                <button id="btnSoma" type="button" class="btn btn-outline-success">+</button>
            </div>
        </div>
    </div>

    <script type="text/javascript" src="main.js"></script>
</body>

</html>

Você pode utilizar também este código CSS para formatar os botões e campo de preenchimento da sua calculadora:

#inputDisplayResultado{
    font-size: 24px;
    width: 100%;
    text-align: right;
}

.areaCalculadora{
    max-width: 600px;
    margin: 0 auto;
}

.row div{
    padding: 0
}

.row div button{
    width: 100%;
}

A partir deste código, você deverá criar um arquivo chamado main.js e nele será inserida a lógica necessária para o funcionamento da calculadora.

Dicas:

  • Você pode anexar eventos aos botões para que algo ocorra quando clicar neles;
  • Comece criando funções que realizam as operações aritméticas da calculadora;
  • Lembre que os números não podem ser divididos por zero;
  • Observe que quando você capturar valores do HTML, eles virão como STRINGS.

Bons estudos e confira nossa playlist para saber as respostas!

Calculadora (Parte 2)

 

Publicado em

Conheça o Sucrase, um compilador mais rápido que o Babel.

O Sucrase é uma alternativa ao Babel que permite um desenvolvimento muito rápido. O Sucrase assume que você está desenvolvendo em um navegador recente ou em uma versão recente do Node.js, acelerando a sua experiência em desenvolvimento.
Ele se concentra na compilação de extensões da linguagem não-padrão, como JSX, TypeScript e Flow.

  • O Sucrase não verifica se há erros no seu código, ele apenas produz código JS válido. Sempre verifique o código que você irá fornecer;
  • Ele também não produz código para navegadores antigos;
  • Não é um verificador de letras, ou seja, processa cada arquivo isoladamente.
  • É benéfico principalmente no desenvolvimento mas, às vezes, Babel será mais adequado para compilações de produção.

O Sucrase visa o desenvolvimento de builds. Obtém ganhos de velocidade significativos provenientes de uma redução no escopo dos objetivos do compilador.

Esses recursos JavaScript são levados em consideração ao compilar no Sucrase:

O Sucrase é licenciado pelo MIT. Uma grande parte do Sucrase é baseada em uma bifurcação do analisador Babel , que também é licenciado pelo MIT.

Confira as fontes:

https://github.com/alangpierce/sucrase

https://www.infoq.com/news/2019/06/sucrase-fast-babel-modern-js/

 

 

Publicado em

Exercício fácil: Unindo Arrays em JavaScript

Você sabe o que é um array?

Arrays são objetos semelhantes a listas. O tamanho de um array pode ser alterado a qualquer momento e os dados podem ser armazenados em posições não necessariamente seguindo uma ordem contínua. Eles possuem índices, que devem ser em números inteiros. Utilizando a notação de colchetes, você pode acessar ou definir os valores dos elementos dentro do array.

União de Arrays:

Requisitos:

Existem várias maneiras de adicionar novos elementos à um vetor em JavaScript. Neste exercício, serão utilizados as funções concat() e push().

Concat: Cria um novo array contendo uma cópia de si e dos argumentos passados.

arr.concat(valor1, valor2, ..., valorN)

// Onde: arr é o vetor que será concatenado
// Concat: função de concatenação
// Valores: argumentos

Push: Adiciona um ou mais elementos ao final do array e retorna o comprimento deste array.

arr.push(elemento1, ..., elementoN)

// Onde: arr é o vetor que será utilizado
// Push: função push para inserção de elementos no vetor
// Elementos: Argumentos/Elementos que serão inseridos no vetor

Para descobrir outras funções de união de vetores, acesse o artigo a seguir: Adicionando elementos em uma lista array JavaScript

Exercício:

Parte 1:

Crie três vetores, chamados vetorInteiro, vetorString e vetorDouble. Cada um destes vetores deverá conter quatro valores, sendo o primeiro com valores inteiros, o segundo com strings e o terceiro com valores decimais.

Declarados os vetores, utilize a função de união concat() de duas maneiras diferentes para unir os vetores, e mostre o resultado no console. Todos os elementos do vetor resultado deverão aparecer no console.

Se você não sabe quais são os modos de usar a função concat, acesse este artigo para descobrir: Duas maneiras de unir vetores em JavaScript

Parte 2:

Crie dois vetores chamados vetorPilha e vetorAdiciona. Utilize o método Push para adicionar elementos do vetorAdiciona ao vetorPilha. Inicialmente, o vetorPilha conterá cinco elementos inteiros: [1, 2, 3, 4, 5]. Você deverá adicionar os valores contidos no vetorAdiciona [6, 7, 8, 9,10] e mostrá-los no console. É importante lembrar que o método Push retorna somente o tamanho do Vetor, então, justifique por quê motivo isso acontece e imprima no console o vetor com os elementos adicionados.

Você pode fazer o download das respostas destes exercícios aqui: [download id=”2547″]

Gostou deste exercício? Comente os seus resultados abaixo!

 

Publicado em

PixiJS adiciona suporte a WebGL.

PixiJS é uma biblioteca que permite criar gráficos interativos sem precisar merhulhar na WebGL API e é despreocupada em lidar com a compatibilidade do navegador e dispositivo. Ela tem suporte completo ao WebGL e volta à tela do HTML5.

É uma ferramenta ideal para criação de conteúdo dinãmico e interativo. Ela possui compatibilidade para multiplataforma. Com o PixiJS você cria experiências refinadas de forma rápida, evitando dores de cabeça relacionadas à inconsistências de navegadores.

Ele possui:

  • Renderizador WebGL;
  • Gráfico de cena completo;
  • API fácil de usar;
  • Suporte para atlas de textura;
  • Carregador de assets/sprites;
  • Deteca automaticamente qual renderizador usar;
  • Interação com mouse e multitoque;
  • Texto;
  • BitmapFont;
  • Renderiza texturas;
  • Desenhor primitivos;
  • Mascaramento;
  • Filtros e
  • Plugins de usuário.

O PixiJS possui uma API amigável e rica em recursos, permitindo que você se concentre ne produção enquanto a API cuida dos fundamentos. Se tratando em renderização 2D, o PixiJS é o mais rápido que existe e sempre será de código aberto.

O WebGL é uma API utilizada para renderizar gráficos 3D e 2D sem o uso de plugins. Além do navegador, a própria GPU também precisa oferecer suporte ao recurso.

Você pode fazer o download com npm ou usando uma URL da CDN:

npm install pixi.js
<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/5.1.3/pixi.min.js"></script>

A maneira correta de importar o PixiJS é:

import * as PIXI from 'pixi.js'

Continue lendo “PixiJS adiciona suporte a WebGL.”

Publicado em

Aplicações nativas em JavaScript com Capacitor

Capacitor, o novo framework da Ionic.

Você sabe o que é o Ionic? É uma ferramenta para criar aplicativos mobile, utilizando HTML, CSS e JavaScript.

Capacitor é uma cross-plataform API que facilita chamar SDKs nativos a partir de código da Web e fornece suporte de progressive web apps. Criada pela Ionic, é uma alternativa ao Apache Cordova, que foi lançado em 2009. O Capacitor foi criado devido ao sistema de plugins desatualizados do Apache Cordova e pela restrição ao gerenciamento de plataformas nativas.

Ele foi projetado pela equipe do Ionic Framework como uma alternativa ao Cordova. O Capacitor pode ser usado sem o Ionic, mas em breve se tornará uma parte essencial do mesmo.

Continue lendo “Aplicações nativas em JavaScript com Capacitor”

Publicado em

Duas maneiras de unir vetores em JavaScript:

Você sabe como unir vetores?

Este artigo mostrará duas maneiras de unir vetores e retornar um novo vetor.

Serão utilizados os operadores Spread e Concat.

// Duas formas de unir vetores
const circ = [‘círculo’, ‘esfera’];
const quadr = [‘quadrado’, ‘cubo’];

// Usando o Concat para unir os vetores:
cons unirVet = [].concat(circ, quadr);

// Usando o Spread para unir os vetores:
const unirSpread = [...circ, ...quadr];

// E o resultado será:
console.log(unirSpread);

// [‘círculo’, ‘esfera’, ‘quadrado’, ‘cubo’]

Você também pode escrever o método Concat deste modo:

const circ = [‘círculo’, ‘esfera’];
const quadr = [‘quadrado’, ‘cubo’];

const unirVetor = circ.concat(quadr);
console.log(unirVetor);

E o resultado será:
// [‘círculo’, ‘esfera’, ‘quadrado’, ‘cubo’]

console.log(circ); // [‘círculo’, ‘esfera’];
console.log(quadr); // [‘quadrado’, ‘cubo’];

Este modo não altera o vetor existente.

Comparando os dois modos do concat:
// Versão 1
cons unirVet = [].concat(circ, quadr);

// Versão 2
const unirVetor = circ.concat(quadr);

A versão 1 cria uma nova matriz e não manipula uma matriz existente. Visualmente falando, a versão 2 parece adicionar a matriz de quadrados à matriz de círculos.

A diferença entre Spread e Concat:

Spread:

O Spread quebra um array ou uma string em múltiplos elementos. Se você possui um array e quer criar um array com o existente fazendo parte dele, você pode usar o Spread.

let umaString = "Olá Mundo";

console.log(umaString); // exibe a string

console.log(...umaString); // exibe cada caracter

let umVetor = [11,22,33,44,55,66]; //cria um vetor

console.log(umVetor); // mostra conteúdo o vetor

console.log(...umVetor); // mostra o conteúdo de cada índice do vetor

Concat:

Já o Concat cria um novo vetor unindo os elementos que foram passados como parâmetro, não alterando a si mesmo ou aos argumentos passados, mas criando um novo vetor contendo uma cópia de si e dos argumentos.

A cópia é uma referência aos objetos. Se o objeto original for modificado, as mudanças serão visíveis no original e na cópia.

Strings e numbers (diferente dos objetos String e Number), o concat copia os valores de strings e numbers para o novo vetor, mas qualquer alteração no novo vetor não refletirá no original.

// Cria uma função que concatenará
// o vetor e a variável
function combinaVetor(vetor1, vetor2){ 
    return [].concat(vetor1, vetor2);
} 

// Crie um vetor
const ehVetor = ['carro', 'moto', 'onibus'];

// Crie uma variável
const notVetor = 7;

// Chamada da função
combinaVetor(ehVetor, notVetor);

// [“carro”, “moto”, “onibus”, 7]

Unindo arrays com Push:

Quando você utilizar o método Push, você não criará um novo array, mas sim manipulando um existente:

const meninos = ["joao", "josé"];
const meninas = ["maria", "vanessa"];
const alunos = meninos.push(...meninas);

console.log(alunos); //Quando você usa o push, ele retornará o tamanho do vetor unido.
console.log(meninos); 
["joao", "josé", "maria", "vanessa"] // Retorna o vetor meninos modificado 

console.log(meninas);
 ["maria", "vanessa"]

Gostou deste artigo? Comente abaixo e compartilhe com seus amigos!