Escrito por: Adham El Banhawy

Desenvolvedores de back-end enfrentam desafios o tempo todo ao criar aplicações ou testar código. Por ser um desenvolvedor relativamente novo e que está recém se familiarizando com esses desafios, nunca me deparei com um desafio ou inconveniência com mais frequência — ou mais memorável — do que quando usei funções de callback.

Não vou me aprofundar muito nos detalhes das callbacks e seus prós e contras nem nas alternativas a elas, como promises e async/await. Para uma explicação mais detalhada, você pode conferir este artigo (em inglês) que as explica detalhadamente.

O inferno das callbacks

As callbacks são uma funcionalidade útil do JavaScript que permite realizar chamadas assíncronas. Elas são funções que geralmente são passadas como um segundo parâmetro para outra função que está buscando dados ou realizando uma operação de E/S que leva tempo para completar.

Um exemplo disso é ao tentar fazer uma chamada de API usando o módulo request ou ao se conectar a um banco de dados do MongoDB. Se ambas as chamadas dependerem uma da outra ou se a informação que você está buscando for o URL do MongoDB ao qual você precisa se conectar, o que você pode fazer?

Nesse caso, é preciso aninhar essas chamadas uma dentro da outra:

request.get(url, function(error, response, mongoUrl) {

  if(error) throw new Error("Erro ao buscar dados");

  MongoClient.connect(mongoUrl, function(error, client) {

    if(error) throw new Error("Erro de conexão com o MongoDB");

    console.log("Conectado com sucesso ao servidor");    
    const db = client.db("dbName");
    // Realizar alguma lógica da aplicação
    client.close();

  });

});

Certo... então, onde está o problema? Bem, por um lado, a legibilidade do código sofre com essa técnica.

Pode parecer aceitável no começo, quando a base de código é pequena, mas a escalabilidade disso não é das melhores, especialmente se você inserir mais camadas profundas nos callbacks aninhados.

Você acabará com muitos colchetes e chaves que confundirão você e outros desenvolvedores, não importando se o código está bem formatado ou não. Existe um site chamado callbackhell (em português, o "inferno das callbacks") que aborda essa questão específica.

Ouço alguns de vocês, incluindo meu eu passado ingênuo, me dizendo para envolver em uma função async e então await (em português, esperar) pela função de callback. Isso simplesmente não funciona.

Se houver qualquer bloco de código após a função que usa callbacks, aquele bloco de código será executado e NÃO esperará pela callback.

Aqui está o erro que cometi antes:

var request = require('request');

// ERRADO

async function(){

  let joke;
  let url = "https://api.chucknorris.io/jokes/random"

  await request.get(url, function(error, response, data) {

    if(error) throw new Error("Erro ao buscar dados");

    let content = JSON.parse(data);
    joke = content.value;

  });

  console.log(joke); // undefined

};

// Errado

async function(){

  let joke;
  let url = "https://api.chucknorris.io/jokes/random"

  request.get(url, await function(error, response, data) {

    if(error) throw new Error("Erro ao buscar dados");

    let content = JSON.parse(data);
    joke = content.value;

  });

  console.log(joke); // undefined

};

Alguns desenvolvedores mais experientes podem dizer "Basta usar uma biblioteca diferente que use promises para fazer a mesma coisa, como o axios, ou simplesmente usar o fetch". Claro, eu poderia fazer isso nesse cenário, mas é apenas fugir do problema.

Além disso, esse é apenas um exemplo. Às vezes, você pode estar preso a usar uma biblioteca que não suporta promises sem alternativas, como ao usar kits de desenvolvimento de software (SDKs) para se comunicar com plataformas como a Amazon Web Services (AWS), o Twitter ou o Facebook.

Às vezes, até mesmo usar um callback para fazer uma chamada muito simples com uma E/S rápida ou uma operação de CRUD está bem, já que nenhuma outra lógica depende de seus resultados. Você, no entanto, pode estar restrito pelo ambiente de execução, como em uma função Lambda (site em inglês) que mataria todos os processos uma vez que a thread principal terminasse, independentemente de qualquer chamada assíncrona que não tenha sido concluída.

Solução 1 (fácil): usar o módulo "util" do Node

A solução é surpreendentemente simples. Mesmo se você estiver um pouco desconfortável com a ideia de promises no JavaScript, você vai adorar como pode resolver esse problema usando-as.

Como apontado por Erop e Robin, as versões a partir da versão 8 do Node suportam transformar funções de callback em promises usando o módulo interno util.

const request = require('request');

const util = require('util');

const url = "https://api.chucknorris.io/jokes/random";

// Use o util para trasnformar em promise o método request

const getChuckNorrisFact = util.promisify(request);

// Use o novo método para chamar a API em um padrão moderno de then/catch

getChuckNorrisFact(url).then(data => {

   let content = JSON.parse(data.body);

   console.log('Piada: ', content.value);

}).catch(err => console.log('erro: ', err))

O código acima resolve o problema de maneira limpa usando o método util.promisify, disponível na biblioteca principal do Node.

Solução 2 (um pouco mais complicada): transformar a callback em uma promise

Às vezes, usar as bibliotecas request e util não é possível, seja por causa de um ambiente/código legado ou por realizar as requisições a partir do navegador do lado do client. Você precisaria encapsular uma promise em torno de sua função de callback.

Vamos pegar o exemplo do Chuck Norris acima e transformá-lo em uma promise.

var request = require('request');
let url = "https://api.chucknorris.io/jokes/random";

// Uma função que retorna uma promise para resolver os dados obtidos da API ou um erro
let getChuckNorrisFact = (url) => {
  return new Promise(
    (resolve, reject) => {
      request.get(url, function(error, response, data){
        if (error) reject(error);

let content = JSON.parse(data);
        let fact = content.value;
        resolve(fact);
      })
   }
 );
};

getChuckNorrisFact(url).then(
   fact => console.log(fact) // realmente exibe uma string
).catch(
   error => console.log(error)
);

No código acima, coloquei a função request baseada em callback dentro de uma promise que a envolve Promise((resolve, reject) => { //função de callback}). Isso nos permite chamar a função getChuckNorrisFact como uma promise com os métodos **.then()** e .catch(). Quando _getChuckNorrisFact_ é chamada, ela executa a requisição para a API e espera por uma declaração resolve() ou reject() para executar. Na função de callback, você simplesmente passa os dados recuperados para os métodos resolve ou reject.

Uma vez que os dados (nesse caso, um fato incrível sobre Chuck Norris) são obtidos e passados para o resolve, getChuckNorrisFact executa o método then(). Isso retornará o resultado que você pode utilizar dentro de uma função dentro do then() para realizar a lógica desejada — que, nesse caso, é exibir o fato no console.

Você pode ler mais sobre isso na documentação da web da MDN.

Escrito por: Ahmed Bouchefra

O Jasmine é a biblioteca do JS mais popular para testes unitários de aplicações para a web. Neste tutorial, projetado para iniciantes, apresentaremos um guia rápido e completo para testes com o Jasmine.

Você será apresentado ao Jasmine, um framework de testes popular orientado a comportamentos para o JavaScript. Também veremos um exemplo prático simples de como escrever testes unitários com o Jasmine, que pode ajudá-lo a verificar facilmente se há bugs em seu código.

Em resumo, veremos como escrever suítes de teste, especificações e expectativas, além de como aplicar matchers (comparadores) integrados do Jasmine ou criar seus próprios matchers personalizados.

Também veremos como você pode agrupar suítes para organizar seus testes para bases de código mais complexas.

Apresentando o Jasmine

O Jasmine é um framework de desenvolvimento orientado a comportamentos (em inglês, BDD ou behavior-driven development). Com ele, você escreve testes antes de escrever o código real. Ele é muito popular para testes unitários de aplicações em JavaScript. Ele fornece utilitários que podem ser usados para executar testes automatizados para código síncrono e assíncrono.

O Jasmine tem muitos recursos:

• Ele é rápido, tem baixa sobrecarga e nenhuma dependência externa.
• É uma biblioteca completa e oferece tudo o que você precisa para testar seu código.
• Está disponível para Node e para o navegador.
• Pode ser usado com outras linguagens, como Python e Ruby.
• Não requer o DOM.
• Fornece uma sintaxe limpa e fácil de entender e também uma API rica e direta.
• Podemos usar linguagem natural para descrever os testes e os resultados esperados.

O Jasmine é uma ferramenta de código aberto disponível sob a licença permissiva do MIT. No momento da redação deste artigo, a versão principal mais recente é a Jasmine 3.0, que fornece novos recursos e algumas mudanças significativas. A versão 2.99 do Jasmine fornecerá diferentes avisos de descontinuação para suítes que têm comportamento diferente na versão 3.0, o que facilitará a migração dos desenvolvedores para a nova versão.

Você pode ler sobre os novos recursos e mudanças significativas neste documento.

Usando o Jasmine

Você pode usar o Jasmine de várias maneiras diferentes:

• da maneira antiga, incluindo o núcleo do Jasmine e seus arquivos de teste usando uma tag <script>,
• como uma ferramenta da CLI usando o Node.js,
• como uma biblioteca no Node.js,
• como parte de um sistema de build, como Gulp.js ou Grunt.js via grunt-contrib-jasmine e gulp-jasmine-browser

Você também pode usar o Jasmine para testar seu código em Python com jasmine-py, que pode ser instalado a partir do PyPI usando o comando pip install jasmine. Este pacote contém um servidor para a web que serve e executa uma suíte do Jasmine para seu projeto e um script da CLI para executar testes e integrações contínuas.

O Jasmine também está disponível para projetos Ruby via jasmine-gem, que pode ser instalado adicionando gem 'jasmine' ao seu Gemfile e executando bundle install. Ele inclui um servidor para servir e executar testes, um script da CLI e também geradores para projetos Ruby on Rails.

Agora, vamos nos concentrar em como usar o Jasmine com JavaScript:

Usando o Jasmine Standalone

Comece baixando a versão mais recente do Jasmine na página de releases (lançamentos).

Em seguida, basta extrair o arquivo zip, de preferência dentro de uma pasta no projeto que você deseja testar.

A pasta conterá diversos arquivos e pastas padrão:

/src: contém os arquivos de código-fonte que você deseja testar. Essa pasta pode ser excluída se você já tiver a pasta do seu projeto configurada. Ela também pode ser usada quando for apropriado para hospedar seu código-fonte.

/lib: contém os arquivos principais do Jasmine.

/spec: contém os testes que você vai escrever.

SpecRunner.html: é um arquivo usado como um executor de testes. Você executa suas especificações simplesmente iniciando esse arquivo.

Este é o conteúdo de um arquivo SpecRunner.html padrão:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Jasmine Spec Runner v3.2.1</title>

  <link rel="shortcut icon" type="image/png" href="lib/jasmine-3.2.1/jasmine_favicon.png">
  <link rel="stylesheet" href="lib/jasmine-3.2.1/jasmine.css">

  <script src="lib/jasmine-3.2.1/jasmine.js"></script>
  <script src="lib/jasmine-3.2.1/jasmine-html.js"></script>
  <script src="lib/jasmine-3.2.1/boot.js"></script>

  <!-- include source files here... -->
  <script src="src/Player.js"></script>
  <script src="src/Song.js"></script>

  <!-- include spec files here... -->
  <script src="spec/SpecHelper.js"></script>
  <script src="spec/PlayerSpec.js"></script>

</head>
<body>
</body>
</html>

Lembre-se de que você precisa alterar os arquivos incluídos das pastas /src e /spec para conter seus arquivos de código-fonte e de teste reais.

Usando o Jasmine como uma biblioteca

Você também pode usar o Jasmine como uma biblioteca em seu projeto. Por exemplo, o código a seguir importa e executa o Jasmine:

var Jasmine = require('jasmine');
var jasmine = new Jasmine();

jasmine.loadConfigFile('spec/support/jasmine.json');

jasmine.execute();

Primeiro, solicitamos/importamos o Jasmine e usamos o método loadConfigFile() para carregar o arquivo de configuração disponível no caminho spec/support/jasmine.json e, finalmente, executamos o Jasmine.

Usando o Jasmine via CLI

Você também pode usar o Jasmine a partir da CLI (interface de linha de comando), o que permite executar facilmente os testes do Jasmine e, por padrão, gerar os resultados no terminal.

Seguiremos essa abordagem para executar nossos testes de exemplo neste guia, então, primeiro, execute o seguinte comando para instalar o Jasmine globalmente:

npm install -g jasmine

Você pode precisar executar sudo para instalar pacotes npm globalmente, dependendo da sua configuração do npm.

Agora, crie uma pasta para seu projeto e navegue para dentro dela:

$ mkdir jasmine-project $ cd jasmine-project

Em seguida, execute o seguinte comando para inicializar seu projeto para o Jasmine:

O comando simplesmente cria uma pasta spec e um arquivo de configuração JSON. Esta é a saída do comando dir:

.
└── spec
    └── support
        └── jasmine.json

2 directories, 1 file

Este é o conteúdo de um arquivo jasmine.json padrão:

{
  "spec_dir": "spec",
  "spec_files": [
    "**/*[sS]pec.js"
  ],
  "helpers": [
    "helpers/**/*.js"
  ],
  "stopSpecOnExpectationFailure": false,
  "random": true
}

• spec_dir: especifica onde o Jasmine procura arquivos de teste.
• spec_files: especifica os padrões de arquivos de teste. Por padrão, todos os arquivos JS que terminam com as strings Spec ou spec.
• helpers: especifica onde o Jasmine procura arquivos auxiliares. Os arquivos auxiliares são executados antes das especificações e podem ser usados para definir matchers personalizados.
• stopSpecOnExpectationFailure: quando definido como true, interromperá imediatamente uma especificação na primeira falha de uma expectativa (pode ser usado como uma opção CLI via --stop-on-failure).
• random: quando definido como true, o Jasmine executará os casos de teste de modo pseudoaleatório (pode ser usado como uma opção da CLI via --random).

Os arrays spec_files e helpers também podem conter padrões Glob (graças ao pacote node-glob) para especificar caminhos de arquivo que são padrões que você normalmente usa para especificar um conjunto de arquivos ao trabalhar no Bash (por exemplo, ls *.js).

Se você não usar o local padrão para o arquivo de configuração jasmine.json, basta especificar o local personalizado por meio da opção jasmine --config.

Você pode encontrar mais opções da CLI na documentação oficial.

Entendendo o Jasmine

Nesta seção, aprenderemos sobre os elementos básicos dos testes do Jasmine, como suítes, especificações, expectativas, matchers e spies etc.

Na pasta do projeto, ao executar o comando para inicializar um novo módulo do Node, npm init -y, você criará um arquivo package.json com informações padrão:

{
  "name": "jasmine-project",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

Em seguida, crie um arquivo index.js e adicione o seguinte código:

function fibonacci(n){

    if (n === 1) {
        return [0, 1];
    }
    else {
        var s = fibonacci(n - 1);
        s.push(s[s.length - 1] + s[s.length - 2]);
        return s;
    }
}
function isPrime(num){
    for (let i = 2; i < num; i++)
        if (num % i === 0) return false;
    return num !== 1 && num !== 0;
}
function isEven(n) {
    return n % 2 == 0;
}
function isOdd(n) {
    return Math.abs(n % 2) == 1;
}

function toLowerCase(str){
    return str.toLowerCase();
}
function toUpperCase(str){
    return str.toUpperCase();
}
function contains(str, substring, fromIndex){
    return str.indexOf(substring, fromIndex) !== -1;
}
function repeat(str, n){
    return (new Array(n + 1)).join(str);
}

module.exports = {
    fibonacci: fibonacci,
    isPrime: isPrime,
    isEven: isEven,
    isOdd: isOdd,
    toLowerCase: toLowerCase,
    toUpperCase: toUpperCase,   
    contains: contains,
    repeat: repeat
};

Suítes

Uma suíte agrupa um conjunto de especificações ou casos de teste. É usada para testar um comportamento específico do código em JavaScript que geralmente é encapsulado por um objeto/classe ou uma função. Ela é criada usando a função global do Jasmine describe(), que recebe dois parâmetros, o título da suíte de teste e uma função que implementa o código real da suíte de teste.

Vamos começar criando nossa primeira suíte de teste. Dentro da pasta spec, crie um arquivo MyJSUtilitiesSpec.js e adicione:

describe("MyJSUtilities", function() { /* ... */ });

MyJSUtilities é o nome da suíte de teste de nível superior.

Como agrupar e aninhar suítes

Para melhor organização e descrição precisa do nosso conjunto de testes, podemos aninhar suítes dentro da suíte de nível superior. Por exemplo, vamos adicionar duas suítes à suíte MyJSUtilities:

describe("String Utils", function() { /*...*/});describe("Math Utils", function() { /*...*/});

Dentro da suíte Math Utils, vamos também adicionar duas suítes aninhadas:

describe("Basic Math Utils", function() {   /* ... */ }); describe("Advanced Math Utils", function() {   /* ... */ });

Estamos agrupando testes relacionados em testes para String Utils, Basic Math Utils e Advanced Math Utils e aninhando-os dentro da suíte de nível superior MyJSUtilities. Isso comporá suas especificações como árvores semelhantes a uma estrutura de pastas.

A estrutura de aninhamento será mostrada no relatório, o que facilita a localização de testes com falha.

Como excluir suítes

Você pode desabilitar temporariamente uma suíte usando a função xdescribe(). Ela tem a mesma assinatura (parâmetros) de uma função describe(), o que significa que você pode desabilitar rapidamente suas suítes existentes simplesmente adicionando um x à função.

As especificações dentro de uma função xdescribe() serão marcadas como pendentes e não serão executadas no relatório.

Especificações

Uma especificação declara um caso de teste que pertence a uma suíte de teste. Isso é feito chamando a função global do Jasmine it(), que recebe dois parâmetros: o título da especificação (que descreve a lógica que queremos testar) e uma função que implementa o caso de teste real.

Uma especificação pode conter uma ou mais expectativas. Cada expectativa é simplesmente uma asserção que pode retornar true ou false. Para que a especificação seja aprovada, todas as expectativas pertencentes à especificação devem ser true. Caso contrário, a especificação falha.

Dentro da nossa suíte String Utils, adicione estas especificações:

describe("String Utils", function() {  it("should be able to lower case a string",function() {    /*...*/  });  it("should be able to upper case a string",function() {    /*...*/  });  it("should be able to confirm if a string contains a substring",function() {    /*...*/  });  it("should be able repeat a string multiple times",function() {    /*...*/  });});

Dentro da nossa suíte Basic Math Utils, vamos adicionar algumas especificações:

describe("Basic Math Utils", function() {  it("should be able to tell if a number is even",function() {    /*...*/  });     it("should be able to tell if a number is odd",function() {    /*...*/  });     });

Para Advanced Math Utils, vamos adicionar as especificações:

describe("Advanced Math Utils", function() {  it("should be able to tell if a number is prime",function() {    /*...*/  });   it("should be able to calculate the fibonacci of a number",function() {    /*...*/  }); });

Como excluir especificações

Assim como as suítes, você também pode excluir especificações individuais usando a função xit(), que desabilita temporariamente a especificação it() e a marca como pendente.

Expectativas

As expectativas são criadas usando a função expect() que recebe um valor chamado real (que pode ser valores, expressões, variáveis, funções, objetos etc.). As expectativas compõem a especificação e são usadas junto com funções matcher (via encadeamento) para definir o que o desenvolvedor espera que uma unidade específica de código execute.

Uma função matcher compara um valor real (passado para a função expect() com a qual está encadeada) e um valor esperado (passado diretamente como um parâmetro para o matcher) e retorna true ou false, o que passa ou falha a especificação.

Você pode encadear a função expect() com vários matchers. Para negar/inverter o resultado booleano de qualquer matcher, você pode usar a palavra-chave not antes de chamar o matcher.

Vamos implementar as especificações do nosso exemplo. Por enquanto, usaremos expect() com o matcher nothing(), que faz parte dos matchers integrados que veremos um pouco mais tarde. Isso passará em todas as especificações, pois não esperamos nada neste momento.

describe("MyJSUtilities", function() {describe(">String Utils", function() {  it("should be able to lower case a string",function() {    expect().nothing();  });  it("should be able to upper case a string",function() {    expect().nothing();  });  it("should be able to confirm if a string contains a substring",function() {    expect().nothing();  });  it("should be able repeat a string multiple times",function() {    expect().nothing();  });     });describe("Math Utils", function() { describe("Basic Math Utils", function() {  it("should be able to tell if a number is even",function() {    expect().nothing();  });     it("should be able to tell if a number is odd",function() {    expect().nothing();  });    }); describe("Advanced Math Utils", function() {  it("should be able to tell if a number is prime",function() {    expect().nothing();  });   it("should be able to calculate the fibonacci of a number",function() {    expect().nothing();  });     }); });});

Esta é uma captura de tela dos resultados neste ponto:

Você pode usar matchers integrados ou também criar seus próprios matchers personalizados para suas necessidades específicas.

Matchers integrados

O Jasmine fornece um rico conjunto de matchers integrados. Vamos ver alguns dos mais importantes:

• toBe() para testar identidade,
• toBeNull() para testar null,
• toBeUndefined()/toBeDefined() para testar undefined/não undefined,
• toBeNaN() para testar NaN (Not A Number)
• toEqual() para testar igualdade,
• toBeFalsy()/toBeTruthy() para testar falsidade/veracidade etc.

Você pode encontrar a lista completa de matchers na documentação.

Vamos agora implementar nossas especificações com alguns desses matchers quando apropriado. Primeiro, importe as funções que estamos testando em nosso arquivo MyJSUtilitiesSpec.js:

const utils = require("../index.js");

Em seguida, comece com a suíte String Utils e altere expect().nothing() com as expectativas apropriadas.

Por exemplo, para a primeira especificação, esperamos que o método toLowerCase() seja primeiro definido e, em segundo lugar, retorne uma string em minúsculas, ou seja:

it("should be able to lower case a string",function() {        expect(utils.toLowerCase).toBeDefined();        expect(utils.toLowerCase("HELLO WORLD")).toEqual("hello world");  });

Este é o código completo para a suíte:

describe(">String Utils", function() {  it("should be able to lower case a string",function() {    expect(utils.toLowerCase).toBeDefined();    expect(utils.toLowerCase("HELLO WORLD")).toEqual("hello world");  });  it("should be able to upper case a string",function() {    expect(utils.toUpperCase).toBeDefined();    expect(utils.toUpperCase("hello world")).toEqual("HELLO WORLD");  });  it("should be able to confirm if a string contains a substring",function() {    expect(utils.contains).toBeDefined();    expect(utils.contains("hello world","hello",0)).toBeTruthy();  });  it("should be able repeat a string multiple times",function() {    expect(utils.repeat).toBeDefined();    expect(utils.repeat("hello", 3)).toEqual("hellohellohello");  });     });

Matchers personalizados

O Jasmine fornece a capacidade de escrever matchers personalizados para implementar asserções não cobertas pelos matchers integrados ou apenas para tornar os testes mais descritivos e legíveis.

Por exemplo, vamos pegar a seguinte especificação:

it("should be able to tell if a number is even",function() {    expect(utils.isEven).toBeDefined();    expect(utils.isEven(2)).toBeTruthy();    expect(utils.isEven(1)).toBeFalsy();  });

Vamos supor que o método isEven() não esteja implementado. Se executarmos os testes, receberemos mensagens como a seguinte captura de tela:

A mensagem de falha que recebemos diz Expected undefined to be defined, o que não nos dá nenhuma pista do que está acontecendo. Então, vamos tornar essa mensagem mais significativa no contexto do nosso domínio de código (isso será mais útil para bases de código complexas). Para isso, vamos criar um matcher personalizado.

Criamos matchers personalizados usando o método addMatchers(), que recebe um objeto composto por uma ou várias propriedades que serão adicionadas como matchers. Cada propriedade deve fornecer uma função factory que recebe dois parâmetros: util, que possui um conjunto de funções utilitárias para os matchers usarem (consulte: MatchersUtil.js) e customEqualityTesters, que precisa ser passado se util.equals for chamado, devendo retornar um objeto com uma função compare, que será chamada para verificar a expectativa.

Precisamos registrar o matcher personalizado antes de executar cada especificação usando o método beforeEach():

describe("/Basic Math Utils", function () {beforeEach(function () {jasmine.addMatchers({hasEvenMethod:  function (util, customEqualityTesters) {return {compare:  function (actual, expected) {var  result  = { pass:  utils.isEven  !==  undefined };if (result.pass) {result.message  =  "Expected isEven() to be not defined."}else {result.message  =  "Expected isEven() to be defined."}return  result;}}}});});/*...*/});

Podemos então usar o matcher personalizado em vez de expect(utils.isEven).toBeDefined():

expect().hasEvenMethod();

Isso nos dará uma mensagem de falha melhor:

Usando beforeEach() e afterEach()

Para inicializar e limpar suas especificações, o Jasmine fornece duas funções globais, beforeEach() e afterEach():

• A função beforeEach é chamada uma vez antes de cada especificação na suíte onde é chamada.
• A função afterEach é chamada uma vez após cada especificação na suíte onde é chamada.

Por exemplo, se você precisar usar quaisquer variáveis em sua suíte de teste, pode simplesmente declará-las no início da função describe() e colocar qualquer código de inicialização ou instanciação dentro de uma função beforeEach(). Finalmente, você pode usar a função afterEach() para redefinir as variáveis após cada especificação, para que você possa ter testes unitários puros sem a necessidade de repetir o código de inicialização e limpeza para cada especificação.

A função beforeEach() também é perfeitamente combinada com muitas APIs do Jasmine, como o método addMatchers() para criar matchers personalizados ou também com a função done() para aguardar operações assíncronas antes de continuar o teste.

Falhando um teste

Você pode forçar um teste a falhar usando o método global fail() disponível no Jasmine. Por exemplo:

it("should explicitly fail", function () { fail('Forced to fail'); });

Você deve receber o seguinte erro:

Testando exceções

Quando você está testando seu código unitariamente, erros e exceções podem ser lançados, então você pode precisar testar esses cenários. O Jasmine fornece os matchers toThrow() e toThrowError() para testar quando uma exceção é lançada ou para testar uma exceção específica, respectivamente.

Por exemplo, se tivermos uma função que lança uma exceção TypeError:

function throwsError() { throw new TypeError("A type error"); }

Você pode escrever uma especificação para testar se uma exceção é lançada:

it('it should throw an exception', function () { expect(throwsError).toThrow(); });

Ou você também pode usar o teste para a exceção TypeError específica:

it('it should throw a TypeError', function () { expect(throwsError).toThrowError(TypeError); });

Entendendo spies

Muitas vezes, os métodos dependem de outros métodos. Isso significa que, ao testar um método, você pode acabar testando suas dependências também. Isso não é recomendado em testes, ou seja, você precisa garantir que está testando a função pura, isolando o método e vendo como ele se comporta, dado um conjunto de entradas.

O Jasmine fornece spies que podem ser usados para "espionar"/ouvir chamadas de método em objetos e relatar se um método é chamado e em qual contexto e argumentos.

O Jasmine fornece duas maneiras de espionar chamadas de método: usando os métodos spyOn() ou createSpy().

Você pode usar spyOn() quando o método já existe no objeto. Caso contrário, você precisa usar jasmine.createSpy(), que retorna uma nova função.

Por padrão, um spy apenas relatará se uma chamada foi feita sem chamar a função espionada (ou seja, a função parará de ser executada), mas você pode alterar o comportamento padrão usando estes métodos:

• and.callThrough(): chama a função original,
• and.returnValue(value): retorna o valor especificado,
• and.callFake(fn): chama a função falsa em vez da original,
• and.throwError(err): lança um erro,
• and.stub(): redefine o comportamento de stub padrão.

Você pode usar um spy para coletar estatísticas de tempo de execução na função espionada, por exemplo, se você quiser saber quantas vezes sua função foi chamada.

Digamos que queremos garantir que nosso método toUpperCase() esteja usando o método String.toUpperCase() integrado. Precisamos, simplesmente, espionar String.toUpperCase() usando:

it("should be able to upper case a string", function () { 

var spytoUpperCase = spyOn(String.prototype, 'toUpperCase') 

expect(utils.toUpperCase).toBeDefined(); expect(utils.toUpperCase("hello world")).toEqual("HELLO WORLD"); expect(String.prototype.toUpperCase).toHaveBeenCalled(); expect(spytoUpperCase.calls.count()).toEqual(1); });

O teste falhou devido à segunda expectativa, pois utils.toUpperCase("hello world") retornou undefined em vez do HELLO WORLD esperado. Isso ocorre porque, como mencionamos, anteriormente, após criar o spy em toUpperCase(), o método não é executado. Precisamos mudar esse comportamento padrão chamando callThrough():

Observe que uma função spy substitui a função espionada por um stub por padrão. Se você precisar chamar a função original, pode adicionar .and.callThrough() ao seu objeto spy.

var spytoUpperCase = spyOn(String.prototype, 'toUpperCase').and.callThrough();

Agora, todas as expectativas passam.

Você também pode usar and.callFake() ou and.returnValue() para falsificar a função espionada ou apenas o valor de retorno se você não quiser chamar a função real:

var spytoUpperCase = spyOn(String.prototype, 'toUpperCase').and.returnValue("HELLO WORLD"); 

var spytoUpperCase = spyOn(String.prototype, 'toUpperCase').and.callFake(function(){ return "HELLO WORLD"; });

Agora, se acabarmos não usando o String.toUpperCase() integrado em nossa própria implementação de utils.toUpperCase(), obteremos estas falhas:

As duas expectativas expect(String.prototype.toUpperCase).toHaveBeenCalled() expect(spytoUpperCase.calls.count()).toEqual(1) falharam.

Como lidar com assincronia no Jasmine

Se o código que você está testando contém operações assíncronas, você precisa de uma maneira de informar ao Jasmine quando as operações assíncronas forem concluídas.

Por padrão, o Jasmine espera que qualquer operação assíncrona, definida por uma callback, uma promise ou a palavra-chave async, seja concluída. Se o Jasmine encontrar uma callback, promise ou palavra-chave async em uma dessas funções: beforeEach, afterEach, beforeAll, afterAll e it, ele aguardará a conclusão da operação assíncrona antes de prosseguir para a próxima operação.

Usando done() com beforeEach()/it() ..

Vamos pegar nosso exemplo simulateAsyncOp(), que simula uma operação assíncrona usando setTimeout(). Em um cenário do mundo real, pode ser uma solicitação Ajax ou qualquer coisa semelhante que aconteça de maneira assíncrona:

function simulateAsyncOp(callback){ 

setTimeout(function () { callback(); }, 2000); }

Para testar esta função, podemos usar a função beforeEach() com a callback especial done(). Nosso código precisa invocar done() para informar ao Jasmine que a operação assíncrona foi concluída:

describe("/Async Op", function () {var  asyncOpCompleted  =  false;beforeEach(function (done) {utils.simulateAsyncOp(function(){  asyncOpCompleted  =  true;  done();});});it("should be able to tell if the async call has completed", function () {  expect(asyncOpCompleted).toEqual(true);});});

Podemos notar rapidamente uma desvantagem desse método, então precisamos escrever nosso código para aceitar a callback done(). No nosso caso, não codificamos o método done() em nosso simulateAsyncOp(fn), mas fornecemos um parâmetro de callback apenas para poder chamar done().

Usando as promises

Se você não quiser criar código que dependa de como você escreve seu teste, pode usar uma promise e chamar a callback done() quando a promise for resolvida. Ou melhor ainda, a partir do Jasmine 2.7+, se seu código retornar uma Promise, o Jasmine aguardará até que ela seja resolvida ou rejeitada antes de executar o próximo código.

Usando async/await

O Jasmine 2.7+ suporta chamadas a async e await em especificações. Isso o libera de colocar asserções em um bloco .then() ou .catch().

it("should work with async/await", async () => { let completed = false; completed = await utils.simulateAsyncOp(); expect(completed).toEqual(true); });

Esta é a implementação de simulateAsyncOp:

function simulateAsyncOp() { 

return new Promise(resolve => { setTimeout(() => { resolve(true); }, 1000); }); }

Usando o Jasmine Clock

O Jasmine Clock é usado para testar código assíncrono que depende de funções de tempo, como setTimeout(), da mesma maneira que testamos código síncrono, simulando APIs baseadas em tempo com métodos personalizados. Desse modo, você pode executar as funções testadas sincronicamente controlando ou avançando manualmente o relógio.

Você pode instalar o Jasmine Clock chamando a função jasmine.clock().install em sua especificação ou suíte.

Depois de usar o relógio, você precisa desinstalá-lo para restaurar as funções originais.

Com o Jasmine Clock, você pode controlar as funções setTimeout ou setInterval do JavaScript avançando o relógio para avançar no tempo usando a função jasmine.clock().tick, que recebe o número de milissegundos que você pode mover.

Você também pode usar o Jasmine Clock para simular a data atual.

beforeEach(function () {jasmine.clock().install();});afterEach(function() {jasmine.clock().uninstall();});it("should call the asynchronous operation synchronously", function() {var  completed  =  false;utils.simulateAsyncOp(function(){completed  =  true;});expect(completed).toEqual(false);jasmine.clock().tick(1001);expect(completed).toEqual(true);});

Esta é a função simulateAsyncOp:

function simulateAsyncOp(callback){ 

setTimeout(function () { callback(); }, 1000); }

Caso você não tenha especificado um horário para a função mockDate, ela usará a data atual.

Lidando com erros

Se o seu código assíncrono falhar devido a algum erro, você vai querer que suas especificações falhem da maneira certa. A partir do Jasmine 2.6+, quaisquer erros não tratados são enviados para a especificação atualmente executada.

O Jasmine também fornece uma maneira que você pode usar se precisar falhar explicitamente em suas especificações:

• usando a callback done() com beforeEach() chamando o método done.fail(err),
• simplesmente passando um erro para a callback done(err) (Jasmine 3+),
• chamando o método reject() de uma Promise.

Conclusão

Neste guia, apresentamos o Jasmine e vimos como começar a usá-lo para fazer testes unitários de seu código em JavaScript. Agradecemos pela leitura!

Este artigo foi publicado originalmente em techiediaries.

Este artigo fornece uma breve introdução ao conceito e uso de funções de callback na linguagem de programação JavaScript.

Funções são objetos

A primeira coisa que precisamos saber é que, em Javascript, as funções são objetos de primeira classe. Como tal, podemos trabalhar com elas da mesma maneira que trabalhamos com outros objetos. Podemos atribuí-los a variáveis e passá-los como argumentos para outras funções. Isso é importante, pois é a técnica que nos permite estender a funcionalidade de nossas aplicações.

Funções de callback

Uma função de callback é uma função que é passada como um argumento para outra função, para ser "chamada de volta" (em inglês, "called back") posteriormente. Uma função que aceita outras funções como argumentos é chamada de função de ordem superior, que contém a lógica para quando a função de callback é executada. É a combinação dessas duas que nos permite estender nossa funcionalidade.

Para ilustrar as funções de callback, vamos começar com um exemplo simples:

function criarFrase(frase, callback){ 
  var minhaFrase = "Como eu sempre digo, " + frase;
  callback(minhaFrase); // 2
}

function registrarFrase(frase){
  console.log(frase);
}

criarFrase("coma verduras!", registrarFrase); // 1

// Resultado no console: 
// Como eu sempre digo, coma verduras!

No exemplo acima, criarFrase é a função de ordem superior, que aceita dois argumentos – sendo o segundo a função de callback. A função registrarFrase é usada para passar nossa função de callback. Quando executamos a função criarFrase (1), perceba que não estamos adicionando parênteses a registrarFrase ao passá-la como argumento. Isso ocorre porque não queremos executar nossa função de callback imediatamente. Queremos apenas passar a definição da função para a função de ordem superior para que ela possa ser executada posteriormente.

Além disso, precisamos garantir que, se a função de callback que passamos espera argumentos, fornecemos esses argumentos ao executá-la (2). No exemplo acima, na instrução callback(minhaFrase);, sabemos que registrarFrase espera que uma frase seja passada para ela.

Também podemos passar uma função anônima como callback. A chamada abaixo a criarFrase teria o mesmo resultado do exemplo acima:

criarFrase("coma verduras!", function(frase){ 
  console.log(frase); 
});

Aliás, você não precisa usar a palavra "callback" como o nome do seu argumento, o JavaScript só precisa saber qual é o nome correto do argumento. Com base no exemplo acima, a função abaixo se comportará exatamente da mesma maneira.

function criarFrase(fraee, funcaoASerChamada) { 
  var minhaFrase = "Como eu sempre digo, " + frade;
  funcaoASerChamada(minhaFrase);
}

Por que usar funções de callback?

Na maioria das vezes, criamos programas e aplicações que operam de modo síncrono. Em outras palavras, algumas de nossas operações são iniciadas somente após a conclusão das anteriores. Muitas vezes, quando solicitamos dados de outras fontes, como uma API externa, nem sempre sabemos quando nossos dados serão fornecidos de volta. Nesses casos, queremos aguardar a resposta, mas nem sempre queremos que toda a nossa aplicação aguarde enquanto nossos dados são buscados. Essas situações são onde as funções de callback são mais úteis.

Vamos dar uma olhada em um exemplo que simula uma solicitação para um servidor:

function requisicaoAoServidor(consulta, callback){
  setTimeout(function(){
    var resposta = consulta + "cheio!";
    callback(resposta);
  },5000);
}

function obterResultados(resultados){
  console.log("Resposta do servidor: " + resultados);
}

requisicaoAoServidor("O copo está meio ", obterResultados);

// Resultado no console após um atraso de 5 segundos:
// Resposta do servidor: O copo está meio cheio!

No exemplo acima, fazemos uma simulação de solicitação para um servidor. Após 5 segundos, a resposta é modificada e, em seguida, nossa função de callback obterResultados é executada. Para ver isso em ação, você pode copiar/colar o código acima na ferramenta de desenvolvedor do seu navegador e executá-lo.

Além disso, se você já estiver familiarizado com setTimeout, saiba que já vem usando funções de callback há algum tempo. A função anônima passada no exemplo acima da chamada da função setTimeout também é uma função de callback! Assim, a função de callback original do exemplo é, de fato, executada por outra função de callback. Cuidado para não aninhar muitas callbacks. Evite isso, se possível, já que pode levar a algo chamado de "o inferno das callbacks" (em inglês, callback hell)! Como o próprio nome sugere, não é uma das melhores coisas com as quais desejaremos lidar.

Tipos de dados e verificação de tipos são aspectos fundamentais em qualquer linguagem de programação. Muitas delas, como o Java, têm verificação de tipos estrita. Isso significa que, se uma variável é definida com um tipo específico, ela pode conter valores somente daquele tipo.

O JavaScript, entretanto, é uma linguagem fracamente (ou dinamicamente) tipada. Isso quer dizer que uma variável pode conter valores de qualquer tipo. O código em JavaScript pode ser executado assim:

let one = 1;
one = 'um';
one = true;
one = Boolean(true);
one = String('É possível');

Com isso em mente, é fundamental conhecer o tipo da variável em qualquer momento dado.

O tipo de uma variável é determinado pelo tipo do valor atribuído a ela. O JavaScript tem um operador especial, chamado typeof, que permite que você obtenha o tipo de qualquer valor.

Neste artigo, aprenderemos sobre como typeof é utilizado, juntamente com alguns cuidados que você deve ter.

Tipos de dados em JavaScript

Vamos dar uma olhada rápida nos tipos de dados em JavaScript antes de entrarmos mais a fundo no operador typeof.

Em JavaScript, existem sete tipos primitivos. Um tipo primitivo é qualquer coisa que não seja um objeto. Esses tipos em JavaScript são:

1. String
2. Number (número)
3. BigInt (número inteiro "grande")
4. Symbol (símbolo)
5. Boolean (booleano)
6. undefined (variável de tipo não definido - pois o valor ainda não foi definido)
7. null (tipo nulo)

Todo o resto são objetos (em inglês, object) – incluindo array e function. Um objeto é uma coleção de pares chave-valor.

O operador typeof em JavaScript

O operador typeof recebe apenas um operando (é um operador unário). Ele avalia o tipo do operando e retorna o resultado como uma string. É assim que utilizamos o operador ao avaliar o tipo de um número, como, por exemplo, 007.

typeof 007;  // retorna 'number' - um número

Há uma sintaxe alternativa para o operador typeof, onde você pode usá-lo como uma function:

typeof(operando)

Essa sintaxe é útil quando você deseja avaliar uma expressão em vez de um valor único. Aqui temos um exemplo:

typeof(typeof 007); // retorna 'string'

No exemplo acima, a expressão typeof 007 é avaliada com o tipo number e retorna a string 'number'. typeof('number'), portanto, é o que resulta em uma 'string'.

Vamos ver outro exemplo para entender a importância dos parênteses com o operador typeof.

typeof(999-3223); // retorna "number"

Se você omitir os parênteses, no entanto, ele retornará, NaN (Not a Number – em português, "não é um número"):

typeof 999-3223; // retorna NaN

Isso ocorre porque, primeiramente, typeof 999 resultará na string "number". A expressão "number" - 32223 resultará em NaN, que é o que acontece quando você realiza uma operação de subtração entre uma string e um número.

Exemplos de uso de typeof em JavaScript

O trecho de código abaixo mostra o resultado da verificação de tipo para vários valores usando o operador typeof.

typeof 0;  //'number'
typeof +0;  //'number'
typeof -0;  //'number'
typeof Math.sqrt(2);  //'number'
typeof Infinity;  //'number'
typeof NaN;  //'number', mesmo que seja Not a Number
typeof Number('100');  //'number', depois da coerção de sucesso para número
typeof Number('freeCodeCamp');  //'number', apesar do fato de não poder fazer a coerção da string para um número
typeof true;  //'boolean'
typeof false;  //'boolean'
typeof Boolean(0);  //'boolean'
typeof 12n;  //'bigint'
typeof '';  //'string'
typeof 'freeCodeCamp';  //'string'
typeof `freeCodeCamp is awesome`;  //'string'
typeof '100';  //'string'
typeof String(100); //'string'
typeof Symbol();  //'symbol'
typeof Symbol('freeCodeCamp');  //'symbol'
typeof {blog: 'freeCodeCamp', author: 'Tapas A'};  //'object';
typeof ['This', 'is', 101]; //'object'
typeof new Date();  //'object'
typeof Array(4);  //'object'
typeof new Boolean(true);  //'object'; 
typeof new Number(101);  //'object'; 
typeof new String('freeCodeCamp');  //'object';
typeof new Object;  //'object'
typeof alert;  //'function'
typeof function () {}; //'function'
typeof (() => {});  //'function' – é uma arrow function. Assim, é necessário o parênteses
typeof Math.sqrt;  //'function'
let a;
typeof a;  //'undefined'
typeof b;  //'undefined'
typeof undefined;  //'undefined'
typeof null;  //'object'

A tabela abaixo mostra os valores de retorno da verificação de tipo com typeof:

Questões importantes com typeof

Há casos em que o operador typeof pode não retornar os tipos que se espera. Isso pode causar confusão e erros. Abaixo, veremos alguns desses casos:

O tipo de NaN é number

typeof NaN;  //'number', mesmo que ele seja Not a Number (não é um número)

typeof NaN retorna 'number'. Isso é estranho, já que não deveríamos detectar NaN usando typeof. Há maneiras melhores de se lidar com isso. Veremos essas maneiras em breve.

O tipo de null é object

  typeof null;  //'object'

Em JavaScript, typeof null retorna object, o que dá a impressão errada de que null é um objeto, embora ele seja um valor primitivo.

O resultado de typeof null é, na verdade, um bug na linguagem. Houve uma tentativa de consertá-lo no passado, mas foi rejeitada devido a um problema de compatibilidade com versões anteriores.

O tipo de uma variável não declarada é undefined

Antes da ES6, uma verificação de tipo de uma variável não declarada costumava resultar em 'undefined'. Esse, no entanto, não é um modo à prova de erros de se lidar com isso.

Com a chegada da ES6, podemos declarar variáveis com escopo de bloco com as palavras-chave let ou const. Se você as utilizar com o operador typeof antes de elas serem inicializadas, verá um ReferenceError (em português, "erro de referência").

 typeof cat; // ReferenceError
 let cat = 'brownie'; 

O tipo de uma função construtora é object

Todas as funções construtoras, com exceção do construtor de Function, sempre serão do tipo 'object'.

typeof new String('freeCodeCamp'); //'object'

Isso pode causar uma certa confusão, já que esperamos que elas sejam do tipo de fato (no exemplo acima, do tipo string).

O tipo de um array é object

Embora isso esteja tecnicamente correto, pode desapontar bastante. Queremos diferenciar entre arrays e objetos, mesmo quando um array, tecnicamente, seja um objeto em JavaScript.

typeof Array(4);  //'object'

Felizmente, há maneiras de se detectar um array corretamente. Veremos isso em breve.

Para além de typeof – uma verificação de tipos melhor

Agora que vimos algumas das limitações do operador typeof, vejamos como consertá-las para termos uma verificação de tipos melhor.

Como detectar NaN

Em JavaScript, NaN é um valor especial. O valor NaN representa o resultado de uma expressão aritmética que não pode, de fato, ser representada. Por exemplo,

let result = 0/0;
console.log(result);  // retorna NaN

Além disso, se realizarmos qualquer operação aritmética com NaN, o resultado sempre será NaN.

console.log(NaN + 3); // retorna NaN

A verificação de tipo de NaN usando o operador typeof não ajuda muito, pois ela retorna o tipo como 'number'. O JavaScript tem uma função global chamada isNaN() para detectar se um resultado é NaN.

isNaN(0/0); // retorna true

Porém, também temos um problema aqui.

isNaN(undefined); // retorna true para 'undefined'

Na ES6, o método isNaN() é adicionado ao objeto global Number. Esse método é muito mais confiável, sendo, portanto, o preferido.

Number.isNaN(0/0); // retorna true
Number.isNaN(undefined); // retorna false

Outro aspecto interessante de NaN é o fato de ser o único valor em JavaScript que nunca é igual a qualquer outro valor, incluindo ele mesmo. Então, há uma outra maneira de detectar NaN em ambientes onde não há suporte para a ES6:

function isNaN (input) {
  return input !== input;
}

Como detectar null em JavaScript

Como vimos anteriormente, detectar null usando o operador typeof é confuso. A maneira preferida de se verificar se algo é null é usando o operador de igualdade estrita (===).

function isNull(input) {
 return input === null;
}

Certifique-se de não usar == por engano. Se usar == no lugar de ===, você poderá ter como resultado uma detecção de tipo enganadora.

Como detectar um array em JavaScript

A partir da ES6, podemos detectar um array usando o método Array.isArray.

Array.isArray([]); // retorna true
Array.isArray({}); // retorna false

Antes da ES6, poderíamos usar o operador instanceof para determinar se algo era um array:

function isArray(input) {
  return input instanceof Array;
}

Uma solução genérica para a verificação de tipos em JavaScript

Existe uma forma de criarmos uma solução genérica para a verificação de tipos. Dê uma olhada no método Object.prototype.toString. Ele é muito poderoso e extremamente útil para se escrever um método utilitário para a verificação de tipos.

Quando Object.prototype.toString é chamado usando call() ou apply(), ele retorna o tipo do objeto no formato [object Tipo Correspondente]. A parte do Tipo Correspondente no valor de retorno é o tipo verdadeiro.

Vamos ver como isso funciona com alguns exemplos:

// retorna '[object Array]'
Object.prototype.toString.call([]); 

// retorna '[object Date]'
Object.prototype.toString.call(new Date()); 

// retorna '[object String]'
Object.prototype.toString.call(new String('freeCodeCamp'));

// retorna '[object Boolean]'
Object.prototype.toString.call(new Boolean(true));

// retorna '[object Null]'
Object.prototype.toString.call(null);

Isso quer dizer que, se simplesmente pegarmos a string de retorno e removermos a parte do object, teremos o tipo de fato. Aqui, vemos uma tentativa de se fazer isso:

function conferirTipo(valor) {
  const valor_de_retorno = Object.prototype.toString.call(valor);
  // também podemos usar uma regex para isso...
  const tipo = valor_de_retorno.substring(
           valor_de_retorno.indexOf(" ") + 1, 
           valor_de_retorno.indexOf("]"));

  return tipo.toLowerCase();
}

Agora, podemos usar a função conferirTipo para detectar os tipos:

conferirTipo([]); // 'array'
conferirTipo(new Date()); // 'date'
conferirTipo(new String('freeCodeCamp')); // 'string'
conferirTipo(new Boolean(true)); // 'boolean'
conferirTipo(null); // 'null'

Em resumo

Para resumir o que aprendemos neste artigo:

• A verificação de tipos em JavaScript não é tão estrita como em outras linguagens de programação.
• Use o operador typeof para a detecção de tipos.
• Existem duas sintaxes para o operador typeof: typeof e typeof(expressão).
• O resultado de um operador typeof pode, por vezes, ser enganoso. Precisamos confiar em outros métodos disponíveis (Number.isNaN,  Array.isArray, entre outros) nesses casos.
• Podemos usar Object.prototype.toString para criar um método de detecção de tipos genérico.

Antes de terminar...

Obrigado pela leitura até aqui! Conecte-se com o autor do texto pelo Twitter se quiser fazer comentários.

Você também pode gostar os seguintes artigos (em inglês):

• JavaScript undefined and null: Let's talk about it one last time!
• JavaScript: Equality comparison with ==, === and Object.is
• The JavaScript `this` Keyword + 5 Key Binding Rules Explained for JS Beginners

Por enquanto, é só. Até o próximo artigo. Cuide-se bem e bons estudos. 😉

O evento onclick no JavaScript permite que você, o programador, execute uma função quando se clica em um elemento.

Exemplo de onclick com um botão

<button onclick="minhaFuncao()">Clique aqui</button>

<script>
  function minhaFuncao() {
    alert('Alguém clicou no botão!');
  }
</script>

No exemplo simples acima, quando um usuário clica no botão, verá um alerta no navegador dizendo Alguém clicou no botão!.

Adicionando o onclick dinamicamente

O evento onclick também pode ser adicionado de modo programático a qualquer elemento usando o código do exemplo a seguir:

<p id="foo">Clique neste elemento.</p>

<script>
  var p = document.getElementById("foo"); // Encontre o elemento de parágrado na página
  p.onclick = mostrarAlerta; // Adicione a função de onclick ao elemento
    
  function mostrarAlerta(event) {
    alert("Evento do onclick acionado!");
  }
</script>

Observação

É importante observar que, ao usar o onclick, podemos adicionar apenas uma função/um evento de "escuta" (do inglês, listener). Se quiser adicionar mais de uma, use addEventListener(), que é o modo preferencial de se adicionar eventos desse tipo.

No exemplo acima, quando um usuário clica no elemento de parágrafo p , no html, ele verá um alerta dizendo Evento do onclick acionado!.

Evitando a ação padrão

No entanto, se adicionarmos onclick a links (elemento de âncora, a tag a no HTML), pode ser que desejemos evitar que a ação padrão ocorra:

<a href="https://guide.freecodecamp.org" onclick="meuAlerta()">Guias</a>

<script>
  function meuAlerta(event) {
    event.preventDefault();
    alert("Alguém clicou no link, mas a página não foi aberta.");
  }
</script>

No exemplo acima, evitamos o comportamento padrão de um elemento a (que é o de abrir o link) usando event.preventDefault() dentro da função de callback associada a onclick.

MDN

Outros recursos

Associando o manipulador de eventos .on() no jQuery (em inglês)

Introdução ao MERN

Neste artigo, construiremos e implantaremos uma aplicação criada com a stack MERN no Heroku.

MERN, que significa MongoDB, Express, React e Node.js, é uma stack (literalmente, em português, pilha – mas que podemos traduzir como "conjunto de tecnologias") popular usada na construção de aplicações para a web. Ela envolve trabalho de front-end (com React), trabalho de back-end (com Express e NodeJS) e um banco de dados (com MongoDB).

O Heroku, por outro lado, é uma plataforma como serviço (PaaS) que permite aos desenvolvedores criar, executar e operar aplicações inteiramente na nuvem.

Nota da tradução: até pouco tempo atrás, o Heroku dispunha de um espaço gratuito para essas implementações. Hoje em dia, mesmo a camada mais básica da plataforma vem com um custo.

Para o banco de dados, usaremos o MongoDB Atlas, que é um serviço global de banco de dados em nuvem para aplicações modernas. É mais seguro do que ter o MongoDB instalado localmente em nosso servidor e também nos dá espaço para mais recursos em nossos servidores.

Para o front-end, construiremos uma aplicação em React simples, que faz solicitações POST a uma API para adicionar um usuário, também podendo fazer solicitações GET para obter todos os usuários.

Você pode pular para qualquer etapa com o índice listado abaixo.

Índice

• Introdução ao MERN
• Vamos começar a criar
• Construindo a aplicação em React
• Criando o back-end
• Conectando o banco de dados do MongoDB Atlas
• Chamando APIs no front-end
• Implantando no Heroku
• Criando uma aplicação no Heroku
• Configurando o package.json
• Resumo

Vamos começar a criar

Construindo a aplicação em React

Nota: antes de começarmos nosso projeto, o node deve estar instalado em seu computador. O node também nos fornece o npm, que é usado para instalar pacotes.

Instalando o create-react-app

O create-react-app é usado para criar uma aplicação inicial em React.

Nota da tradução: mais recentemente, surgiram alternativas ao create-react-app que consomem menos espaço e são mais práticas para a criação de aplicações em React, como o Vite. O create-react-app, no entanto, segue sendo uma boa alternativa em termos didáticos para quem está começando a aprender.

Se você não tiver o create-react-app instalado, digite o seguinte na linha de comando:

npm i create-react-app -g

O parâmetro -g instala o pacote globalmente.

Criando o diretório do projeto

create-react-app my-project
cd my-project

O primeiro comando acima cria um diretório "my-project" e instala as dependências que serão usadas na aplicação inicial em React. Após terminar a instalação, o segundo comando muda para o diretório do projeto.

Iniciando a aplicação e fazendo as edições necessárias

npm start

O comando acima inicia a aplicação React, que fornece um URL onde você visualiza o projeto. Você pode, então, fazer as edições necessárias, como alterar imagens ou texto.

Instalando o axios

npm i axios --save

O axios é uma biblioteca do JavaScript usada para facilitar requisições HTTP. Ele será usado para enviar requisições do front-end (React) para as APIs fornecidas pelo back-end.

Criando o back-end

O back-end gerencia as APIs, lida com requisições e também se conecta ao banco de dados.

Instalando os pacotes de back-end

npm i express cors mongoose body-parser --save

1. express: "O Express é uma infraestrutura para aplicações da web em Node.js mínima e flexível, que fornece um conjunto robusto de recursos para essas aplicações para a web" – documentação do Express (em inglês)
2. cors: "O CORS é um pacote do Node.js para fornecer um middleware para Connect/Express que pode ser usado para habilitar o CORS com várias opções" – documentação do CORS (em inglês)
3. mongoose: "O Mongoose é uma ferramenta de modelagem de objetos para MongoDB projetada para funcionar em um ambiente assíncrono. O Mongoose suporta promises e funções de callback (retornos de chamada)" – documentação do Mongoose
4. body-parser: "O middleware de análise (e transformação dos dados) do body para o Node.js." – documentação do body-parser (em inglês)

Nota da tradução: body-parser foi descontinuado. A análise e a transformação dos dados, agora, pode ser feita diretamente pelo Express.

Criando a pasta de back-end

mkdir backend
cd backend

Configurando o back-end

Criando um ponto de entrada (entry point) server.js

Primeiro, crie um arquivo server.js, que será o ponto de entrada para o back-end.

touch server.js

No arquivo server.js, digite o seguinte:

const express = require('express');
const bodyParser = require('body-parser');
const cors = require('cors');
const path = require('path')
const app = express();
require('./database');
-----
app.use(bodyParser.json());
app.use(cors());
-----
// API
const users = require('/api/users');
app.use('/api/users', users);
-----
app.use(express.static(path.join(__dirname, '../build')))
app.get('*', (req, res) => {
    res.sendFile(path.join(__dirname, '../build'))
})
-----
const port = process.env.PORT || 5000;
app.listen(port, () => {
    console.log(`Server started on port ${port}`);
});

express.static fornece arquivos estáticos que são aqueles construídos quando npm run build é executado em um projeto do React. Lembre-se de que o arquivo compilado está na pasta build.

A partir da nossa configuração, qualquer requisição enviada para /api/users será enviada para a API users que estamos prestes a configurar.

Configurando a API users

mkdir api
touch api/users.js

No arquivo api/users.js, adicione o seguinte:

const express = require('express');
const router = express.Router()
-----
const User = require('../models/User');
-----
router.get('/', (req, res) => {
    User.find()
        .then(users => res.json(users))
        .catch(err => console.log(err))
})
-----
router.post('/', (req, res) => {
    const { name, email } = req.body;
    const newUser = new User({
        name: name, email: email
    })
    newUser.save()
        .then(() => res.json({
            message: "Created account successfully"
        }))
        .catch(err => res.status(400).json({
            "error": err,
            "message": "Error creating account"
        }))
})
module.exports = router 

No código acima, criamos um manipulador de requisições GET e POST, que busca todos os usuários e os publica. Buscar e adicionar um usuário ao banco de dados é auxiliado pelo modelo User que criaremos.

Criando o modelo User

mkdir models
touch models/user.js

No arquivo models/user.js, adicione o seguinte:

const mongoose = require('mongoose');
const Schema = mongoose.Schema;
-----
const userSchema = new Schema({
    name: {
        type: String,
        required: true
    },
    email: {
        type: String,
        required: true
    }
})
module.exports = mongoose.model("User", userSchema, "users")

No código acima, é criado um esquema para o usuário que contém os campos do usuário. Ao final do arquivo, o modelo ("User") é exportado com o esquema e a coleção ("users").

Conectando o banco de dados do MongoDB Atlas

De acordo com a documentação (em inglês), "o MongoDB Atlas é o serviço global de banco de dados em nuvem para aplicações modernas".

Primeiro, precisamos nos registrar no MongoDB Cloud. Consulte esta documentação (em inglês) para criar uma conta do Atlas e criar seu cluster.

Uma coisa que vale a pena observar é colocar o endereço IP de sua conexão na lista de permissões. Se você ignorar essa etapa, não terá acesso ao cluster, portanto preste atenção nessa parte.

O cluster é um pequeno servidor que gerenciará nossas coleções (semelhante às tabelas em bancos de dados do SQL). Para conectar seu back-end ao cluster, crie um arquivo database.js, que, como você pode ver, é necessário em server.js. Em seguida, digite o seguinte:

const mongoose = require('mongoose');
const connection = "mongodb+srv://username:<password>@<cluster>/<database>?retryWrites=true&w=majority";
mongoose.connect(connection,{ useNewUrlParser: true, useUnifiedTopology: true, useFindAndModify: false})
    .then(() => console.log("Database Connected Successfully"))
    .catch(err => console.log(err));

Na variável de conexão, insira seu nome de usuário (para o MongoDB Cloud), sua senha (senha do cluster), seu cluster (endereço do seu cluster) e o banco de dados (nome do seu banco de dados). Tudo isso pode ser facilmente descoberto se você seguir a documentação.

Chamando APIs no front-end

Todas as APIs estarão disponíveis localmente em localhost:5000, assim como configuramos no server.js. Quando implantado no Heroku, o servidor usará a porta fornecida pelo servidor (process.env.PORT).

Para facilitar as coisas, o React nos permite especificar um proxy para o qual as solicitações serão enviadas.

Abra o package.json e, logo antes da última chave, adicione o seguinte:

"proxy": "http://localhost:5000"

Desse modo, podemos enviar solicitações diretamente para api/users. Quando nosso site for implantado e criado, a porta padrão da nossa aplicação será usada com a mesma API.

Abra App.js para o React e adicione o seguinte:

import React, {useState, useEffect} from 'react'
import axios from 'axios';
-----
const App = function () {
	const [users, setUsers] = useState(null);

	const [username, setUsername] = useState("");
	const [email, setEmail] = useState("");
	useEffect(() => {
		axios
			.get("/api/users")
			.then((users) => setUsers(users))
			.catch((err) => console.log(err));
	}, []);

	function submitForm() {
		if (username === "") {
			alert("Please fill the username field");
			return;
		}
		if (email === "") {
			alert("Please fill the email field");
			return;
		}
		axios
			.post("/api/users", {
				username: username,
				email: email,
			})
			.then(function () {
				alert("Account created successfully");
				window.location.reload();
			})
			.catch(function () {
				alert("Could not creat account. Please try again");
			});
	}
	return (
		<>
			<h1>My Project</h1>
			{users === null ? (
				<p>Loading...</p>
			) : users.length === 0 ? (
				<p>No user available</p>
			) : (
				<>
					<h2>Available Users</h2>
					<ol>
						{users.map((user, index) => (
							<li key={index}>
								Name: {user.name} - Email: {user.email}
							</li>
						))}
					</ol>
				</>
			)}

			<form onSubmit={submitForm}>
				<input
					onChange={(e) => setUsername(e.target.value)}
					type="text"
					placeholder="Enter your username"
				/>
				<input
					onChange={(e) => setEmail(e.target.value)}
					type="text"
					placeholder="Enter your email address"
				/>
				<input type="submit" />
			</form>
		</>
	);
};
export default App

Os hooks useState e useEffect são usados ​​para manipular estados e efeitos colaterais (sideEffects). O que basicamente está acontecendo é que o primeiro estado dos usuários é null e 'Loading...' (carregando) é mostrado no navegador.

No useEffect[], [] é usado para especificar que, no estágio componentDidMount (quando o componente é montado), deve-se fazer uma solicitação do Axios para a API, que está sendo executada em localhost:5000. Se obtiver o resultado e não houver nenhum usuário, "No user available" (nenhum usuário disponível) será exibido. Caso contrário, será exibida uma lista numerada dos usuários.

Se você quiser saber mais sobre useState e useEffect, confira este artigo – O que diabos são React Hooks? (em inglês)

Implantando no Heroku

Para implantar sua aplicação no Heroku, você deve ter uma conta por lá.

Vá para a página do Heroku para criar uma conta. Em seguida, consulte a documentação sobre como criar uma aplicação no Heroku. Verifique também a documentação do Heroku CLI. (links em inglês)

Nota da tradução: reforçando, o Heroku não é mais gratuito. Caso seja sua intenção dar sequência a esse processo por lá, saiba que mesmo as alternativas iniciais agora são pagas.

Criando uma aplicação no Heroku

Primeiro, faça login no Heroku:

heroku login

Isso vai redirecionar você para um URL no navegador onde você poderá fazer login. Quando terminar, você poderá continuar no terminal.

No mesmo diretório do projeto em React, execute o seguinte:

heroku create

Isso criará uma aplicação no Heroku e também fornecerá o URL para acessar o aplicativo.

Configurando o package.json

O Heroku usa seu arquivo package.json para saber quais scripts executar e quais dependências instalar para que seu projeto seja executado com sucesso.

No seu arquivo package.json, adicione o seguinte:

{
    ...
    "scripts": {
        ...
        "start": "node backend/server.js",
        "heroku-postbuild": "NPM_CONFIG_PRODUCTION=false npm install npm && run build"
    },
    ...
    "engines": {
        "node": "10.16.0"
    }
}

O Heroku executa uma pós-compilação que, como você poderá ver, instalará suas dependências e executará uma compilação do seu projeto em React. Em seguida, ele iniciará seu projeto com o script start que, basicamente, inicia seu servidor. Depois disso, seu projeto deverá funcionar bem.

engines especifica as versões das engines, como node e npm, a serem instaladas.

Enviando para o Heroku

git push heroku master

O comando acima envia seu código para o Heroku. Lembre-se de incluir arquivos desnecessários em .gitignore.

Após alguns segundos, seu site estará pronto. Se houver algum erro, você pode verificar seu terminal ou acessar seu painel no navegador para visualizar os logs (registros) de criação (da build).

Agora, você pode visualizar seu site no URL que o Heroku enviou quando você executou heroku create.

Isso é tudo que há para fazer. Que bom que você chegou até aqui.

Resumo

É claro que há mais sobre aplicações da stack MERN.

Este artigo não se aprofundou em autenticações, login, sessões e tudo mais. Abordou apenas como implantar aplicações da stack MERN no Heroku e como trabalhar com MongoDB Atlas.

Você pode encontrar outros artigos como este no blog do autor: dillionmegida.com

Obrigado pela leitura.

Escrito por: Kalalau Cantrell

Se você vem aprendendo JavaScript, já deve ter ouvido falar de promises e de como elas são ótimas.

Então, você deve ter pensado em pesquisar o básico a respeito. Talvez, você já tenha visto a documentação da MDN sobre promises ou artigos muito legais como este, escrito pelo Eric Elliott (em inglês), ou este, escrito pelo Brandon Morelli (em inglês). Se você leu esses artigos ou outros mais, já deve ter visto o exemplo clássico de promises em ação.

/* Exemplo clássico de promises */
 
let p = new Promise((resolve) => {
    setTimeout(function() {
        resolve('delícia');
    }, 1000);
});
 
p.then((mensagem1) => {
    console.log(mensagem1);      //imprime 'delícia' depois de 1s
    return new Promise((resolve) => {
        setTimeout(function() {
            resolve('de molho');
        }, 1000);
    });
}).then((mensagem2) => {
    console.log(mensagem2);      //imprime 'de molho' depois de mais 1s
});

Depois de ver alguns desses exemplos, no entanto, você pode ter se perguntado se estava realmente entendendo promises. Nesse ponto, se você é como eu, entendeu conceitualmente o que as torna incríveis — elas permitem que você escreva código assíncrono em um padrão síncrono — mas deve estar se remoendo para ver um exemplo onde elas façam mais do que exibir uma série de linhas no console.log que disparem em tempos diferentes.

Então, o que foi que eu fiz? Criei um jogo simples de Pokemon, com uma batalha com base em turnos contra um Electabuzz (em inglês).

Este artigo assume que você entendeu o exemplo de promises referido acima. Confira os recursos nos links do parágrafo introdutório se precisar refrescar sua memória.

Funcionalidade básica

O Electabuzz e o jogador começam com uma certa quantidade de pontos de vida (HP – do inglês, hit points). A primeira coisa a acontecer é um ataque do Electabuzz, onde o jogador perde um pouco de HP. Em seguida, o jogo aguarda até que o jogador escolha um ataque e o utilize contra o Electabuzz.

Sim, o jogo simplesmente aguarda… e aguarda… essa é a parte onde eu comecei a de fato apreciar o valor do uso das promises. No momento em que o jogador opta por um ataque, o Electabuzz perde um pouco de HP e, em seguida, ataca novamente. Esse laço de repetição continua até que o HP do Electabuzz ou o HP do jogador chegue a zero.

O pseudocódigo

/* O Electabuzz e o jogador começam com uma certa quantidade de 
   pontos de vida (HP).
   A primeira coisa que acontece é um ataque do Electabuzz
   e o jogador perde um pouco de HP. */
 
function iniciarJogo() {
    //...define o HP da CPU e do jogador como 40
}
 
function vezDaCPU() {
    //...Electabuzz ataca! -5 HP para o jogador
}
 
/*
.
.
.
*/
 
iniciarJogo();
vezDaCPU();

Até aqui, é bastante simples. É o momento de ajustarmos isso um pouco, de maneira que o Electabuzz ataque em um tempo mais natural. Eu queria fazer parecer que ele estava "pensando" sobre qual movimento fazer.

//...
 
function vezDaCPU() {
    setTimeout(function() {
        //...Electabuzz ataca! -5 HP para o jogador
    }, 1000);       //o ataque acontece após 1 segundo
}
 
//...

Enquanto isso, vamos colocar um pouco da magia das promises aqui para que possamos encadear funções que serão disparadas quando o Electabuzz termina seu ataque e somente depois disso, nem um milissegundo antes. Afinal, esse é um jogo com base em turnos.

//...
 
function vezDaCPU() {
    return new Promise((resolve) => {
        setTimeout(function() {
            //...Electabuzz ataca! -5 HP para o jogador
            resolve();
        }, 1000);       //o ataque acontece após 1 segundo,
    });                 //que é o tempo que a promise leva para resolver
}
 
//...

Ótimo! A configuração acima nos permitirá, mais tarde, fazer o seguinte:

//...
 
vezDaCPU()
    .then(() => vezDoJogador());

Agora, passemos para o código do jogador.

/*O jogo aguarda até que o jogador selecione um ataque
  para usar no Electabuzz. Quando ele escolhe o ataque, 
  o Electabuzz perde um pouco de HP e ataca novamente.*/

//...
 
function vezDoJogador() {
 
    //....????....????
 
}
 
//...

Como escreveremos uma função que, ao ser chamada, aguardará pela entrada do usuário antes de terminar sua execução? Sabemos que isso precisa envolver de alguma maneira um event listener (em português, algo como "escutador" ou observador de eventos) para a parte da entrada do usuário. Também sabemos que deve poder usar promises de algum jeito para a parte assíncrona… como faremos, porém, para juntar as duas coisas?

O que descobri foi que você poder 1) criar uma promise, 2) dentro da promise, adicionar um event listener para, em nosso caso, um evento de clique de um botão e 3) se a função for chamada pelo event listener, a promise ser resolvida, o que fará com que você consiga o efeito de aguardar.

//...
 
function vezDoJogador() {
    return new Promise((resolve) => {                       // (1)
        botaoDoJogador.addEventListener('click', function() {    // (2)
            //...O jogador ataca! -5 HP para o Electabuzz
            resolve();                                      // (3)
        });
    });
}
 
//...

Aí está! Agora, conseguimos fazer isto:

//...
 
vezDaCPU()
    .then(() => vezDoJogador())
    .then(() => vezDaCPU())
    .then(() => vezDoJogador());

Observe que cada chamada de vezDoJogador() no código acima simplesmente aguardará… e aguardará um pouco mais… até que o jogador selecione seu ataque. Somente se a execução continuar o turno do Electabuzz chegará.

No entanto, por que devemos escrever assim quando o mesmo código pode ser obtido na forma equivalente em async/await, que parece muito mais limpa? Se você seguiu o que fiz com promises até aqui, não há uma grande diferença para aquilo que async/await faz. Compare o código abaixo com o código acima e verá que são equivalentes, mas o código abaixo parece mais bem organizado.

//...
 
async function sequenciaDeJogo() {
    await vezDaCPU();
    await vezDoJogador();
    await vezDaCPU();
    await vezDoJogador();
}
 
sequenciaDeJogo();

Se quiser saber mais sobre async/await, confira este artigo (em inglês) de Tiago Lopes Ferreira ou estes slides (em inglês) de Wes Bos.

Bem, nosso código agora consegue executar algumas rodadas de combate com base em turnos com o Electabuzz. Porém, ainda precisamos de um modo de fazer o jogo terminar.

//...
 
async function sequenciaDeJogo() {
    await vezDaCPU();
    if (/*HP do jogador é 0*/) {
        //...fim de jogo
    }
    await vezDoJogador();
    if (/*HP do Electabuzz é 0*/) {
        //...fim de jogo
    }
    await vezDaCPU();
    if (/*HP do jogador é 0*/) {
        //...fim de jogo
    }
    await vezDoJogador();
    if (/*HP do Electabuzz é 0*/) {
        //...fim de jogo
    }
 
    // poderíamos repetir essa lógica manualmente tanto quanto 
    // precisássemos..., mas não há um jeito mais inteligente?
}
 
sequenciaDeJogo();

Por fim, queremos que o programa continue a ser executado por conta própria até que as condições de fim de jogo sejam atendidas. Em vez de repetir manualmente as lógicas de cpuTurn() e playerTurn() como viemos fazendo, podemos fazer isso recursivamente, chamando a função gameLoop() até que uma das condições seja atendida.

//...
 
async function sequenciaDeJogo() {
    await vezDaCPU();
    if (/*HP do jogador é 0*/) {
        //...fim de jogo
    }
    await vezDoJogador();
    if (/*HP do Electabuzz é 0*/) {
        //...fim de jogo
    } else {
        sequenciaDeJogo();     //sequenciaDeJogo chama a si mesmo até que
    }                          //atenda as condições de fim de jogo
}
 
sequenciaDeJogo();

A função sequenciaDeJogo será executada e continuará a chamar a si mesma e a executar até que o HP do Electabuzz ou o HP do jogador chegue a zero. Se quiser saber mais sobre recursão, assista este vídeo no YouTube (em inglês), de MPJ. Enquanto estiver por lá, confira outros vídeos do canal dele, o Fun Fun Function. Ele explica muito bem tópicos complexos de um modo divertido.

Vamos agora olhar o pseudocódigo completo:

function iniciarJogo() {
    //...define o HP da CPU e do jogador como 40
}
 
function vezDaCPU() {
    return new Promise((resolve) => {
        setTimeout(function() {
            //...O Electabuzz ataca! -5 HP para o jogador
            resolve();
        }, 1000);       //o ataque acontece após 1 segundo,
    });                 //que é o tempo para a promise resolver
}
 
function vezDoJogador() {
    return new Promise((resolve) => {
        botaoDoJogador.addEventListener('click', function() {
            //...O jogador ataca! -5 HP para o Electabuzz
            resolve();      //essa promise não resolve até que
        });                 //a entrada do usuário desejada é recebida
    });
}
 
async function sequenciaDeJogo() {
    await vezDaCPU();
    if (/*HP do jogador é 0*/) {
        //...fim de jogo
    }
    await vezDoJogador();
    if (/*HP do Electabuzz é 0*/) {
        //...fim de jogo
    } else {
        sequenciaDeJogo();     //sequenciaDeJogo chama a si mesmo até que
    }                          //atenda as condições de fim de jogo
}
 
iniciarJogo();
sequenciaDeJogo();

O código

Agora que terminamos o pseudocódigo, veja neste Pen como eu implementei a lógica com JavaScript de verdade:

Conclusão

Obrigado pela leitura. Esse pequeno experimento com promises me fez ver que as promises simplificam muito no que se trata de compor código assíncrono. Embora o exemplo típico de promises com console.logs e setTimeouts ilustrasse bem o conceito, eu não me empolguei muito com ele, por isso decidi criar esse jogo simples para me empolgar com as promises de vez. Espero que você tenha captado um pouco dessa empolgação e ficado empolgado com elas como eu. Se houver algum especialista em código assíncrono lendo este artigo, seria ótimo saber sua opinião quanto a maneiras melhores de se obter a mesma funcionalidade (como generators, por exemplo). Se algo não ficou claro no artigo, mande mensagem e eu tentarei esclarecer.

Fique à vontade para entrar em contato pelo Twitter.

Você não vai acreditar; é muito fácil!

Se você já criou muitos módulos do npm, pode pular essa seção. Se não, vamos fazer uma rápida introdução.

Versão abreviada

Um módulo do npm necessita apenas de um arquivo package.json com as propriedades name e version.

Olá!

Aí está você, apenas um pequeno elefante com a vida toda pela frente. Você não é um mestre em fazer pacotes do npm, mas adoraria saber como, certo? Todos os grandes elefantes andam por aí com suas patas gigantes, fazendo pacotes após pacotes. Você pode pensar:

"Não consigo competir com isso".

Bem, estou aqui para dizer para você que você consegue! Não precisa duvidar da sua capacidade.

Vamos começar!

Você não é um elefante

Entenda o que eu disse como uma metáfora.

Você já se perguntou como elefantes bebês são chamados?

Com certeza, já. Um elefante bebê é um "bebê elefante", oras.

Eu acredito em você

A autossabotagem é real. Acaba ocorrendo que as pessoas deixam de fazer coisas muito legais. Você acha que você não será bem-sucedido. Então, você acaba não fazendo nada, mas exalta as pessoas que fazem coisas incríveis. Isso é muito irônico. Por isso, vou mostrar para você o menor módulo npm possível.

Em breve, você terá várias ideias de módulos npm ao seu alcance, código reutilizável até onde os olhos podem ver – tudo isso sem truques e sem instruções complexas.

As instruções complexas

Eu prometi que eu não usaria instruções complexas, mas usei. Elas, porém, não são tão complexas assim. Você vai me perdoar um dia.

Passo 1: conta do npm

Você vai precisar de uma. É parte do acordo. Crie a conta aqui.

Passo 2: login

Você fez a conta do npm? Já fez? Legal. Também vou assumir que você sabe usar linha de comando/console etc (textos em inglês). Eu vou chamar de terminal a partir de agora. Aparentemente, há uma diferença.

Vá no terminal e escreva:

npm adduser

Você também pode usar o comando:

npm login

Escolha o comando que agrade a você.

Você receberá uma mensagem pedindo seu nome de usuário, senha e e-mail.

A mensagem será parecida com esta:

Logged in as bamblehorse to scope @username on https://registry.npmjs.org/.

Vamos em frente!

Hora de fazer um pacote

Primeiramente, precisamos de uma pasta para colocar nosso código. Crie uma pasta da maneira que se sentir confortável. Eu vou chamar o meu pacote de tiny (palavra em inglês para minúsculo) porque o pacote será, de fato, muito pequeno. Eu adicionei alguns comandos de terminal para aqueles que não estão familiarizados com eles.

md tiny

Nessa pasta, vamos precisar de um arquivo package.json. Se você já usa Node.js, já viu esse arquivo antes. É um arquivo JSON que inclui informações sobre o seu projeto e possui uma infinidade de opções diferentes. Neste tutorial, vamos focar apenas em duas delas.

cd tiny && touch package.json

Qual deve ser o tamanho do pacote?

Muito pequeno.

Todos os tutoriais sobre fazer um pacote npm, inclusive o da documentação oficial, dizem para você adicionar determinados campos no seu package.json. Vamos tentar publicar nosso pacote com o mínimo possível até ele funcionar. Como se fosse um TDD para um pacote do npm mínimo.

Observação: eu estou mostrando isso para demonstrar que fazer um pacote do npm não precisa ser complicado. Para ser útil para a comunidade em geral, um pacote precisa de algumas coisas a mais – e vamos abordar isso mais adiante no artigo.

Publicação: primeira tentativa

Para publicar o seu pacote do npm, você deve executar um comando bem conveniente: npm publish.

Então, temos um package.json vazio na nossa pasta e vamos fazer uma tentativa:

npm publish

Opa!

Recebemos um erro:

npm ERR! file package.json
npm ERR! code EJSONPARSE
npm ERR! Failed to parse json
npm ERR! Unexpected end of JSON input while parsing near ''
npm ERR! File: package.json
npm ERR! Failed to parse package.json data.
npm ERR! package.json must be actual JSON, not just JavaScript.
npm ERR!
npm ERR! Tell the package author to fix their package.json file. JSON.parse

O npm não gostou muito do seu pacote.

Faz sentido.

Publicação: segunda tentativa

Vamos dar um nome para o nosso pacote no arquivo package.json:

{
"name": "@bamblehorse/tiny"
}

Você deve ter percebido que eu adicionei meu username do npm no começo.

Por que fazer isso?

Usando o nome @bamblehorse/tiny ao invés de apenas tiny, criamos um pacote sob o escopo do nosso username. Isso é chamado de scoped package (em português, pacote com escopo). Isso nos permite usar nomes curtos que talvez já foram usados. Por exemplo, o pacote tiny já existe no npm.

Você já deve ter visto isso em bibliotecas populares como a do framework Angular, da Google. Eles possuem alguns scoped packages, como @angular/core e @angular/http.

Bem legal, não?

Vamos tentar publicar uma segunda vez:

npm publish

O erro é menor dessa vez – tivemos um progresso.

npm ERR! package.json requires a valid "version" field

Cada pacote do npm precisa de uma versão para que os desenvolvedores saibam se eles podem atualizar com segurança para uma nova versão do nosso pacote sem quebrar o resto do código deles. O sistema de versionamento do npm é chamado de SemVer, que significa Semantic Versioning (em português, versionamento semântico).

Não se preocupe muito em entender os nomes mais complexos de versão, mas aqui está um resumo de como os mais básicos funcionam:

Dado um número de versão MAJOR.MINOR.PATCH, incremente o:

1. MAJOR quando você faz mudanças incompatíveis na API.

2. MINOR quando você adiciona uma funcionalidade de modo compatível com a versão anterior, e

3. PATCH quando você conserta erros de maneira compatível com a última versão.

Rótulos adicionais para pré-lançamento e metadados de build estão disponíveis como extensões do formato MAJOR.MINOR.PATCH.

https://semver.org

Publicando: terceira tentativa

Vamos colocar no nosso package.json a versão: 1.0.0 – o primeiro lançamento major.

{
"name": "@bamblehorse/tiny",
"version": "1.0.0"
}

Vamos publicar!

npm publish

Ah, droga.

npm ERR! publish Failed PUT 402
npm ERR! code E402
npm ERR! You must sign up for private packages : @bamblehorse/tiny

Permita-me explicar.

Scoped packages são automaticamente publicados de maneira privada, pois, além de serem úteis para usuários únicos como nós, eles também são utilizados por empresas para compartilhar código entre projetos. Se tivéssemos publicado um pacote normal, nossa jornada teria acabado aqui.

Tudo que precisamos mudar é dizer para o npm que, na verdade, queremos que todo mundo possa usar esse módulo – não o manter trancado nos cofres deles. Portanto, executamos o seguinte comando:

npm publish --access=public

De repente, o sucesso!

+ @bamblehorse/tiny@1.0.0

Recebemos um sinal de adição, o nome do nosso pacote e a versão.

Conseguimos — estamos no clube do npm.

Estou animado. Você deve estar animado também.

Você viu?

npm loves you (em português, o npm ama você)

Que fofo!

A primeira versão está disponível no npm!

Seguindo em frente

Se quisermos ser levados a sério como desenvolvedores e se quisermos que nosso pacote seja usado, precisaremos mostrar o código para as pessoas e dizer para elas como elas devem usar. Em geral, fazemos isso colocando nosso código em algum lugar público e adicionando um arquivo readme.

Também precisamos de algum código. É verdade, não temos código ainda.

O Github é um ótimo lugar para colocar o seu código. Vamos fazer um novo repositório.

README!

Eu me acostumei a escrever arquivos README (do inglês "read me" – em português, leia-me) ao invés de readme. Você não tem que fazer isso mais. É uma convenção divertida. Vamos adicionar algumas badges descoladas do shields.io para as pessoas saberem que somos superlegais e profissionais. Aqui está uma que permite as pessoas saberem a versão atual do nosso pacote:‌

A próxima badge é interessante. Ela falhou porque não temos nenhum código, na verdade. Deveríamos, realmente, escrever um pouco de código...

Licença para programar

O título é definitivamente uma referência a James Bond. Na verdade, eu me esqueci de adicionar uma licença. Uma licença permite que as pessoas saibam em quais situações elas podem usar seu código. Há várias licenças diferentes.

Existe uma página legal chamada insights em todo repositório do GitHub onde você pode checar várias estatísticas – incluindo os padrões da comunidade para o projeto. Vou adicionar minha licença por lá.

Então, você vai para esta página:

O código

Ainda não temos um código. Isso é um pouco constrangedor.

Vamos adicionar o código agora antes que percamos toda a credibilidade.

module.exports = function tiny(string) {
  if (typeof string !== "string") throw new TypeError("Tiny wants a string!");
  return string.replace(/\s/g, "");
};

Aí está. Uma função minúscula (do inglês, tiny) que remove todos os espaços de uma string.

Então, tudo que um pacote do npm exige é um arquivo index.js. Esse é o ponto de entrada do seu pacote. Você pode fazer isso de diferentes maneiras à medida que o seu pacote fica mais complexo. Por agora, porém, isso é tudo de que precisamos.

Já chegamos lá?

Estamos bem perto. Provavelmente, deveríamos atualizar nosso package.json minimalista e adicionar algumas instruções ao nosso readme.md. Senão, ninguém saberia como usar nosso belíssimo código.

package.json

{
  "name": "@bamblehorse/tiny",
  "version": "1.0.0",
  "description": "Removes all spaces from a string",
  "license": "MIT",
  "repository": "bamblehorse/tiny",
  "main": "index.js",
  "keywords": [
    "tiny",
    "npm",
    "package",
    "bamblehorse"
  ]
}

Adicionamos:

• description: uma descrição curta do pacote
• repository: compatível com o GitHub — então, você pode escrever username/repo
• license: a licença da MIT, neste caso
• main: o ponto de entrada do pacote, relativo à pasta raiz
• keywords: uma lista de palavras-chave usadas para descobrir seu pacote em uma pesquisa no npm.

readme.md

@bamblehorse/tiny

Removes all spaces from a string.

Install

$ npm install @bamblehorse/tiny

Usage

const tiny = require("@bamblehorse/tiny");

tiny("So much space!");
//=> "Somuchspace!"

tiny(1337);
//=> Uncaught TypeError: Tiny wants a string!
//    at tiny (<anonymous>:2:41)
//    at <anonymous>:1:1

Adicionamos instruções sobre como instalar e usar o pacote. Legal!

Se você quer um bom modelo para seu readme, é só conferir pacotes populares na comunidade de código aberto (do inglês, open source) e usar os formatos deles para começar.

Conclusão

Vamos publicar nosso pacote espetacular.

Versão

Primeiramente, vamos atualizar a versão com o comando npm version.

Esse é um lançamento major. Então, escrevemos:

npm version major

O que nos retorna:

v2.0.0

Publique!

Vamos rodar nosso novo comando favorito:

npm publish

Está pronto:

+ @bamblehorse/tiny@2.0.0

Coisas legais

A Package Phobia dá um ótimo resumo do seu pacote do npm. Você também pode verificar cada arquivo em sites como o Unpkg.

Agradecimento

Foi uma jornada maravilhosa que acabamos de fazer juntos. Espero que você tenha aproveitado tanto quanto eu. Se puder, deixe uma estrela para o pacote que nós acabamos de criar aqui:

★ Github.com/Bamblehorse/tiny ★

Siga o autor no Medium ou no próprio GitHub.

Tradução em português europeu

O JavaScript é uma das linguagens mais populares da web. Ainda que tenha sido inicialmente desenvolvida apenas para páginas da web, tem apresentado um crescimento exponencial nas duas últimas décadas.

Atualmente, o JavaScript é capaz de fazer quase tudo. Ele funciona com diferentes plataformas e dispositivos, incluindo o que é denominado como a Internet das Coisas. Com o recente lançamento do SpaceX Dragon, o JavaScript já chegou, inclusive, ao espaço.

Uma das razões para a popularidade do JavaScript é a disponibilidade de um grande número de frameworks e bibliotecas. Isso torna a programação mais fácil comparada à programação com JavaScript mais tradicional.

Existem bibliotecas para quase tudo. Todos os dias, são desenvolvidas muitas mais. Com tantas bibliotecas à escolha, porém, torna-se difícil estarmos atualizados relativamente a cada uma delas e a como elas podem estar ajustadas especificamente às nossas necessidades.

Neste artigo, vamos discutir as 10 bibliotecas de JS mais populares, e que poderás usar num próximo projecto.

Leaflet

A Leaflet é a melhor biblioteca open source para adicionar mapas interativos para telemóveis na tua aplicação.

O seu tamanho reduzido (39kB) torna-a uma boa alternativa a considerar, quando comparada com outras bibliotecas de mapas. Com eficiência quando utilizada em diferentes plataformas e uma API bem documentada, ela tem tudo o que é preciso para se apaixonar.

Aqui está uma amostra de código para criar um mapa com a Leaflet:

var map = new L.Map("map", {
    center: new L.LatLng(40.7401, -73.9891),
    zoom: 12,
    layers: new L.TileLayer("https://tile.openstreetmap.org/{z}/{x}/{y}.png")
});

Na Leaflet, temos de providenciar uma camada de mosaicos visto que não existe uma por definição. Isso também significa, contudo, que podemos escolher de uma ampla variedade de camadas (gratuitas e premium). Podes explorar as diferentes camadas de mosaicos aqui.

Se tiveres mais interesse, lê mais sobre a Leaflet e segue os tutoriais (página em inglês).

fullPage.js

Esta biblioteca open source ajuda-nos a criar sites com capacidade de rolagem em tela completa, como podes ver no GIF acima. É fácil de usar e tem várias opções de personalização. Por isso, não é uma grande surpresa que seja usada por milhares de programadores e que tenha 30 mil estrelas no GitHub.

Em baixo, tens uma demonstração no Codepen para poderes experimentar:

Podes usá-la com frameworks conhecidas como:

• react-fullpage
• vue-fullpage
• angular-fullpage

Encontrei a biblioteca há cerca de um ano atrás e, desde então, tem sido uma das minhas bibliotecas preferidas. É das poucas bibliotecas que uso em quase todos os meus projectos. Se ainda não começaste a usá-la, então experimenta-a. Não vais ficar desapontado.

anime.js

Uma das melhores bibliotecas de animação disponíveis, a Anime.js é flexível e simples de usar. É a ferramenta perfeita para te ajudar a adicionar alguma animação elegante ao teu projecto.

Anime.js funciona bem com propriedades CSS, SVG, atributos DOM e objetos do JavaScript e pode ser facilmente integrada nas tuas aplicações.

Como programador, é importante ter um bom portfolio. A primeira impressão que as pessoas têm do teu portfolio ajuda a decidir se és contratado ou não. Assim, que melhor ferramenta do que esta biblioteca para dar vida ao teu portfólio? Não só melhorará o teu site, mas também ajudará a demostrar habilidades reais.

Vê esta demonstração no Codepen para saber mais:

Também podes ver outros projetos fixes no Codepen ou ler a documentação aqui (em inglês).

Screenfull.js

Encontrei esta biblioteca enquanto procurava uma maneira de implementar uma característica de full-screen no meu projecto.

Se também precisares de uma característica de full-screen, recomendo usares esta biblioteca em vez da Fullscreen API devido à sua eficiência nos vários navegadores (ainda que seja construída sobre ela).

É tão pequena que nem vais reparar no seu tamanho – apenas cerca de 0.7kB zipada.

Experimenta a demo ou lê a documentação (em inglês), para saber mais.

Moment.js

Trabalhar com data e hora dá bastante trabalho, especialmente com chamadas de API, fusos horários diferentes, idiomas locais e assim por diante. Moment.js pode ajudar-te a resolver alguns problemas, seja a manipular, a validar, a analisar ou a formatar datas e tempo.

Existem vários métodos que podem ser úteis nos teus projetos. Por exemplo, eu usei o método .fromNow() num dos meus projetos do blog para mostrar a hora em que o artigo foi publicado.

const moment = require('moment'); 

relativeTimeOfPost = moment([2019, 07, 13]).fromNow(); 
// a year ago

Embora não o utilize com muita frequência, sou fã do seu apoio à internacionalização. Por exemplo, podemos personalizar o resultado acima usando o método .locale().

// Francês
moment.locale('fr');
relativeTimeOfPostInFrench = moment([2019, 07, 13]).fromNow(); 
//il y a un an

// Espanhol
moment.locale('es');
relativeTimeOfPostInSpanish = moment([2019, 07, 13]).fromNow(); 
//hace un año

Lê a documentação aqui (em inglês).

Nota: também podes querer explorar alternativas, como Day.js ou date-fns.

Hammer.js

Hammer.js é uma biblioteca do JavaScript que te permite adicionar gestos multitoque nas tuas aplicações para a Web.

Recomendo esta biblioteca para adicionar um pouco de diversão aos teus componentes. Aqui fica um exemplo, para poderes experimentar. Basta tocar com o rato ou caneta no local onde está escrito "Run Pen" ou clicar na div cinza.

Ela consegue reconhecer gestos feitos à mão, através do rato ou pointerEvents. Para utilizadores do jQuery, recomendo usar o plug-in do jQuery.

$(element).hammer(options).bind("pan", myPanHandler);

Lê a documentação aqui (em inglês).

Masonry

A Mansonry é uma biblioteca do JavaScript de layout de grade. É maravilhosa e uso-a em muitos dos meus projectos. Suporta elementos de grade simples e a sua colocação de acordo com o espaço vertical disponível, semelhante ao que um construtor faria para encaixar pedras ou blocos para a construção de uma parede.

Podes usar essa biblioteca para m0strar os teus diferentes projectos numa luz diferente. Usa-a com cartas, imagens, modais, entre outros.

Aqui está um exemplo simples, para mostrar a magia em ação. Não é propriamente magia, mas demonstra como o layout muda conforme o zoom in da página web.

Aqui está o código do exemplo acima:

var elem = document.querySelector('.grid');
var msnry = new Masonry( elem, {
  itemSelector: '.grid-item',
  columnWidth: 400
});

var msnry = new Masonry( '.grid');

Aqui está uma demonstração interessante no Codepen:

Verifica estes projectos:

• https://halcyon-theme.tumblr.com/
• https://tympanus.net/Development/GridLoadingEffects/index.html
• https://www.erikjo.com/work

D3.js

Se és um programador obcecado por dados, então esta biblioteca é para ti. Ainda tenho de descobrir uma biblioteca que manipule tão eficazmente e de maneira tão bonita os dados como a D3. Com mais de 92 mil estrelas no
GitHub, a D3 é a biblioteca de visualização de dados preferida de muitos programadores.

Recentemente, utilizei a D3 para visualizar dados do COVID-19 e o Repositório de dados do Centro de Ciência e Engenharia de Sistemas (CSSE) da Universidade Johns Hopkins no GitHub. Foi um projecto muito interessante. Se estás a pensar em fazer algo semelhante, sugiro experimentares a D3.js.

Lê mais sobre essa biblioteca aqui (em inglês).

slick

A Slick é totalmente responsiva, com integração de swipe, loop infinito e muito mais. Tal como mencionado na sua página oficial, é mesmo o último carrossel de que precisas.

Tenho usado esta biblioteca por algum tempo, o que me permite poupar muito tempo. Com apenas algumas linhas de código, podes adicionar várias características ao teu carrossel.

$('.autoplay').slick({
  slidesToShow: 3,
  slidesToScroll: 1,
  autoplay: true,
  autoplaySpeed: 2000,
});

Verifica as demonstrações aqui (página em inglês).

Popper.js

A Popper.js é uma biblioteca JavaScript leve, de cerca de 3kB, sem dependências e que fornece um mecanismo de posicionamento confiável e extensível, que podes usar para garantir que todos os teus elementos popper estejam posicionados no lugar certo.

Investir tempo para configurar elementos popper pode não parecer importante, mas essas são as pequenas coisas que te distinguem enquanto programador. C0m um espaço tão pequeno, ela nem sequer ocupa tanto espaço assim.

Lê a documentação aqui (em inglês).

Conclusão

Como programador, é importante possuir e usar as bibliotecas do JavaScript correctas. Tornar-te-á mais produtivo e tornará tua programação muito mais fácil e rápida. No fim de contas, és tu que decides qual a biblioteca que preferes usar, de acordo com as tuas necessidades.

Estas são as 10 bibliotecas do JavaScript que podes experimentar e começar a usar nos teus projectos hoje. Que outras bibliotecas do JavaScript utilizas? Gostarias de ler outro artigo parecido a este? Podes enviar uma mensagem ao autor pelo Twitter e informá-lo disso.

Quando se está começando como desenvolvedor JavaScript iniciante, acho que é importante buscar projetos interessantes. Assim, você pode se divertir enquanto aprende e provavelmente encontrará uma área de especialização que seja do seu agrado.

Como se costuma dizer, "se você ama o que faz, nunca trabalhará um dia sequer em sua vida".

Neste artigo, apresentarei a visualização de dados de front-end, que é minha paixão pessoal. Talvez ela também se torne sua paixão!

Os momentos mais gratificantes para mim como desenvolvedor são quando posso ver ou experimentar os resultados do que criei. É muito gratificante criar um gráfico que revela insights interessantes sobre seus dados ou uma experiência interativa que ajuda a explorar detalhes de um conjunto de dados exclusivo. Quanto mais significativo for o resultado, mais gratificante será a sensação.

No entanto, percebi que a quantidade de trabalho que você dedica a um projeto não está necessariamente relacionada à sensação de realização – às vezes, a sensação é ótima mesmo quando foi relativamente fácil.

Com o tempo, você encontrará ferramentas que o ajudarão a ser mais eficiente e, às vezes, você moverá montanhas com pouco esforço. Há muitas bibliotecas de gráficos e ferramentas disponíveis na área de visualização de dados. Com as ferramentas certas, você criará novos gráficos com pouco esforço, independentemente do tipo de gráfico de que precisar. Pessoalmente, acho que a visualização dos dados gera uma grande recompensa pelo seu investimento de tempo e esforço.

Neste tutorial, você usará várias ferramentas para obter dados pela Internet, processará esses dados e desenhará um belo gráfico que pode ser visualizado em qualquer navegador moderno. Você pode clicar nos links abaixo para baixar o código de exemplo de cada etapa individualmente, visualizar todos no GitHub, ou baixar todas as etapas de uma só vez aqui: all-steps.zip.

O resultado

Ao final do tutorial, você criará este gráfico interativo orientado por dados. Você aprenderá a obter dados pela Internet, a processá-los e a criar um gráfico com esses dados. Você também poderá criar seus próprios gráficos do zero.

Depois de processar os dados e fazer o gráfico, você também aprenderá a fazer ajustes no gráfico, incluindo a modificação da legenda padrão, a ativação de pontos de foco (em inglês, crosshairs) no eixo x com dicas (em inglês, tooltips) e a aplicação de anotações de texto para adicionar contexto e outras informações ao gráfico.

As ferramentas

Para começar, use um navegador da internet como o que você provavelmente está usando para ler este artigo. Recomendo o Chrome, pois ele oferece uma ótima experiência e ferramentas integradas para desenvolvedores.

Em seguida, você precisará de um editor de texto. Algo simples como o bloco de notas funcionará. No entanto, sugiro usar um editor de código mais avançado, como o VS Code, pois esse é um ambiente no qual você passará muito tempo. Ele proporcionará a você uma experiência de programação mais conveniente e agradável, além de tornar a escrita em HTML5, CSS e JavaScript mais agradável aos olhos. O mais importante é que, se você esquecer uma citação ou uma vírgula em algum lugar, um editor de código poderá ajudá-lo a encontrar o erro.

Este artigo pode ajudá-lo a escolher o melhor editor de código em JavaScript para o desenvolvimento para a Web (texto em inglês).

Você usará a biblioteca de gráficos JSCharting para desenhar e adicionar a funcionalidade interativa ao gráfico automaticamente. Não serão necessárias outras bibliotecas do JavaScript, como o jQuery, ou plataformas de front-end, como o React e o Angular (comumente usadas em projetos de sites).

Por que JSCharting?

O JSCharting é uma biblioteca de gráficos em JavaScript que pode desenhar muitos tipos diferentes de gráficos usando SVG. Ela é fácil de usar e de começar a aprender, sendo, portanto, é uma boa opção para este tutorial. A API (Interface de Programação de Aplicativos, ou seja, as opções e configurações necessárias para criar gráficos) torna as coisas difíceis mais simples e é uma boa opção para fazer experiências com visualizações de dados.

Você pode usar o JSCharting gratuitamente para uso pessoal e comercial com a marca incluída.

Você pode criar gráficos responsivos com o JSCharting por meio de algumas etapas simples:

• Defina uma tag <div> no HTML com um ID único.
• Forneça essa id, os dados e quaisquer outras opções ao chamar JSC.Chart() no arquivo JavaScript.

É isso. O JSC desenhará um gráfico de aparência profissional preenchendo essa tag div com elementos visuais em SVG. O gráfico será responsivo e interativo sem nenhum esforço extra.

Os dados

Você usará um arquivo de dados fornecido pelo NCHS (National Center for Health Statistics, o Centro Nacional de Estatísticas em Saúde) que lista a expectativa de vida histórica de homens e mulheres nos EUA.

Você pode encontrar esses dados aqui: https://data.cdc.gov/resource/w9j2-ggv5.csv.

Esse arquivo CSV contém dados que categorizam as expectativas de vida por ano, raça e sexo. Você usará alguns desses dados para desenhar uma simples linha de tendência para homens e mulheres nos últimos 100 anos.

O arquivo CSV (de Comma Separated Values, que significa valores separados por vírgula) é um formato muito bom para transmitir dados pela Internet. É compacto, legível por humanos e você pode abri-lo diretamente no Excel, o que também é ótimo.

Portanto, sem mais delongas, vamos começar.

Passo 1 – adicionar um gráfico em branco

O primeiro arquivo zip contém um ponto de partida em branco que pode ser preenchido à medida que avançamos. Se você se perder ou ficar confuso, ou se quiser pular adiante, o arquivo zip no final ou ao longo de cada seção o deixará atualizado.

Se desejar fazer o download de todos os arquivos de uma só vez, pegue o arquivo all-steps.zip.

step1-a.zip

Esse arquivo zip contém os seguintes arquivos:

• index.html
• js/index.js

O arquivo .html está vazio, exceto por algum código padrão que o torna um arquivo válido, enquanto o arquivo .js está completamente vazio.

A primeira coisa a fazer é adicionar alguns scripts ao arquivo HTML da página da Web. Normalmente, as pessoas sugerem adicionar tags <script> dentro das tags <head>. No entanto, para scripts que afetam o conteúdo HTML, geralmente é melhor adicioná-los após o fechamento da tag </body>.

Essa técnica carrega todo o HTML no DOM antes de executar qualquer JavaScript. O gráfico precisa do HTML carregado antes de poder desenhar nele. O DOM (de Document Object Model – em português, Modelo de Objeto de Documentos) é uma representação de seu código HTML na memória do navegador. Depois que o HTML é carregado no DOM, o navegador pode exibi-lo e o JavaScript pode interagir com ele.

Comece adicionando a biblioteca JSCharting ao arquivo HTML. Abra o arquivo index.html no editor de sua preferência. Em seguida, adicione uma tag de script para incluir o JSCharting após a tag de fechamento </body>. O código resultante na parte inferior do arquivo deve ter a seguinte aparência:

</body>
<script src="https://code.jscharting.com/2.9.0/jscharting.js"></script>
</html>

O URL dessa biblioteca aponta para uma CDN (Content Delivery Network – em português, rede de distribuição de conteúdo). Ela hospeda o código do gráfico e torna conveniente adicionar rapidamente a biblioteca a qualquer página HTML para criar protótipos de gráficos e fazer experimentos. Você também pode baixar e usar a biblioteca localmente ou usar o pacote npm em seu projeto, mas a CDN não exige nenhuma etapa adicional.

Em seguida, usando a mesma técnica, adicione outra tag de script fazendo referência ao seu arquivo JavaScript em branco. Adicione esse script após o script de jscharting.js para que tenha a seguinte aparência:

</body>
<script src="https://code.jscharting.com/2.9.0/jscharting.js"></script>
<script src="js/index.js"></script>
</html>

Ótimo. Estamos quase prontos para desenhar um gráfico em branco. A última coisa que você precisa fazer é adicionar uma tag <div> dentro do arquivo HTML para definir onde queremos que este gráfico seja desenhado.

Adicione este código HTML dentro das tags <body>.

<body>
    <div id="chartDiv" style="width:50%; height:300px; margin:0 auto;"></div>
</body>

A div deve ter um id para que você possa informar ao gráfico em qual div deve ser desenhada. Nesse caso, o id é chartDiv.

Você pode notar o atributo style da tag <div>. Ele faz com que a div tenha 50% da largura da janela e 300 pixels de altura. O estilo de margem margin: 0 auto; centraliza a div na página. O gráfico será preenchido independentemente do tamanho da div, portanto, alterar o tamanho da div é uma boa maneira de controlar o tamanho do gráfico.

Está tudo pronto com o arquivo HTML. Abra o arquivo index.js e adicione um gráfico em branco a essa página escrevendo o seguinte código, que inclui a div id chartDiv:

JSC.Chart('chartDiv', {});

Abra o arquivo index.html em um navegador (arraste e solte o arquivo em um navegador da Web como o Chrome).

Ainda não há muito para ver, mas você pode notar um pequeno logotipo da JSC nesta página. Isso indica que um gráfico está conectado e sendo desenhado.

step1-b.zip

Passo 2 – brinque um pouco com o gráfico

Para testar, vamos adicionar alguns valores para o gráfico visualizar e ver como ele funciona.

Voltando ao arquivo index.js, substitua o conteúdo pelo código a seguir, que adiciona mais opções ao gráfico.

JSC.Chart('chartDiv', {
   type: 'horizontal column',
   series: [
      {
         points: [
            {x: 'Apples', y: 50},
            {x: 'Oranges', y: 42}
         ]
      }
   ]
});

Agora, atualize (F5) a janela do navegador onde a página index.html está carregada.

Muito bom! Você acabou de criar seu primeiro gráfico usando JavaScript.

Você criou um gráfico de barras ao definir a opção de tipo de gráfico como 'horizontal column'. Se você preferir uma coluna vertical, defina o valor como 'column'. Você também adicionou uma série com dois pontos ao gráfico para Maçãs e Laranjas (Apples e Oranges, em inglês, respectivamente).

Todos os dados do gráfico são compostos de séries e pontos. Uma série é simplesmente um grupo de pontos de dados. Os gráficos podem conter uma ou mais séries de dados. Os pontos de dados consistem em valores que mapeiam os eixos x e y. Os pontos também podem incluir muitas outras variáveis e valores descritivos.

O exemplo acima contém apenas uma série. Agora vamos dar uma olhada nas opções para um gráfico com duas séries. Substitua o conteúdo do arquivo JavaScript por este código.

JSC.Chart('chartDiv', {
   type: 'horizontal column',
   series: [
      {
         name:'Andy',
         points: [
            {x: 'Apples', y: 50},
            {x: 'Oranges', y: 32}
         ]
      },{
         name:'Anna',
         points: [
            {x: 'Apples', y: 30},
            {x: 'Oranges', y: 22}
         ]
      }
   ]
});

Ao atualizar da janela do navegador será exibido este gráfico.

As opções do gráfico são semelhantes. Ainda é um gráfico de barras, mas dessa vez há um objeto extra no array de séries.  Também adicionamos propriedades de nome para cada série para que o gráfico possa identificá-las na legenda.

Se estiver interessado em criar gráficos diferentes, como gráficos de radar, gráficos de área, gráficos de pizza, gráficos de Gantt ou até mesmo gráficos de mapa de calor de calendário, dê uma olhada na galeria de exemplos do JSCharting e o código-fonte (opções de gráfico) usado para criar esses gráficos. Você pode aprender rapidamente a usar outros recursos de gráficos copiando os exemplos disponíveis.

step2.zip

Passo 3 – prepare os dados

O formato de dados CSV é exatamente isso: valores separados por vírgula. O arquivo contém linhas e cada linha representa um registro ou entrada. Normalmente, a primeira linha de valores contém os nomes de cada valor separado por vírgula (coluna). As linhas subsequentes contêm os valores propriamente ditos.

name,age
chris,26
mike,34

O CSV é legível por humanos, mas há variações desse formato. Às vezes, se os valores contiverem vírgulas (por exemplo, endereços de correspondência), o formato não funcionará como está, de modo que cada valor também é envolvido por aspas. Dessa forma, as vírgulas dentro das aspas são ignoradas e o formato ainda pode funcionar usando apenas as vírgulas fora das aspas para separar os valores.

"name","age","parents"
"Chris","26","Gregory, Mary"
"Mike","34","David, Sarah"

Os valores também podem ser separados usando um caractere diferente, como tabulações no lugar de vírgulas.

Não vamos, porém, nos prender a minúcias. O JSCharting fornece várias ferramentas que ajudam nesse processo e usaremos uma delas para não nos preocuparmos com o formato do arquivo CSV e convertê-lo em JSON (JavaScript Object Notation). O resultado será um array de objetos. Cada objeto representa uma linha com propriedades nomeadas. A primeira linha do arquivo CSV é usada para definir os nomes dessas propriedades.

Este é o url dos dados nos quais estamos interessados: https://data.cdc.gov/resource/w9j2-ggv5.csv.

Você pode clicar para fazer o download e abri-lo no Excel.

No entanto, você fará o download e acessará esses dados CSV em tempo real usando o código JavaScript. O código abaixo pode ser um pouco confuso no início, mas é curto e você pode reutilizá-lo para obter qualquer arquivo CSV, texto ou JSON pela internet de modo programático. É semelhante à antiga tecnologia AJAX, mas muito mais simples de usar.

Mais uma vez, substitua o conteúdo do arquivo index.js pelo seguinte:

fetch('https://data.cdc.gov/resource/w9j2-ggv5.csv')
   .then(function (response) {
      return response.text();
   })
   .then(function (text) {
	csvToSeries(text);
   })
   .catch(function (error) {
      //Something went wrong
      console.log(error);
   });

function csvToSeries(text) {
   console.log(text);
}

Por que é tão complicado? É porque quando você solicita um arquivo, ele não fica disponível imediatamente. Há um atraso e você precisa aguardar a chegada do arquivo. Portanto, primeiro você solicita o arquivo de outro site usando fetch().

fetch('https://data.cdc.gov/resource/w9j2-ggv5.csv')

Em seguida, o código dentro da função de argumento then(...) é chamado com a resposta quando ela chega. Essa função converte a resposta em texto e a retorna, que passa o resultado para a próxima função do método then().

.then(function (response) {
	return response.text();
})

A próxima função do método then(...) chama a função csvToSeries() e passa o texto como argumento.

.then(function (text) {
	csvToSeries(text);
})

Na função do método catch(), você pode especificar o que fazer se algo der errado. Por exemplo, talvez a internet não esteja disponível ou o URL não esteja correto.

.catch(function (error) {
	//Something went wrong
	console.log(error);
});

Nesse caso, o erro é enviado para o console.

Na função csvToSeries(), passamos esse texto para o console para inspeção.

function csvToSeries(text) {
   console.log(text);
}

Observação: a função fetch() nativa não é compatível com o Internet Explorer 11. Se você também quiser oferecer suporte a esse navegador, poderá usar a função JSC.fetch() que vem com o JSCharting. Ela oferece a mesma funcionalidade, mas acrescenta suporte adicional ao IE11.

Arraste o arquivo index.html para uma janela do navegador (ou atualize a página se já estiver aberta) e pressione F12. Isso abrirá a janela DevTools do navegador Chrome. Por padrão, a metade inferior da janela do DevTools mostrará a saída do console. É para lá que o texto é enviado quando você executa códigos usando:

console.log(text);

Você também pode colar ou escrever código nessa janela do console para executá-lo. Tente colar todo o trecho de código acima na janela do console (ao lado do caractere >) e pressione Enter. Você perceberá que obtém o mesmo resultado na saída da janela do console. Isso pode ser útil para testar uma linha de código e fazer experimentos.

step3-a.zip

Neste ponto, você recuperou o texto do arquivo CSV pela internet e o enviou ao console para provar que ele funciona. Agora podemos começar a trabalhar com ele.

Vamos dar uma olhada nesse arquivo de dados para ter uma ideia do que há nele: https://data.cdc.gov/resource/w9j2-ggv5.csv

Usei o Excel para classificar as linhas pela coluna do ano para analisar as linhas de dados de um único ano.

Cada ano contém 9 linhas com dados baseados em raça e sexo. Estamos interessados apenas nos valores destacados de homens e mulheres de todas as raças para cada ano. Você criará duas séries com base nas linhas destacadas. Uma série para valores femininos e outra para valores masculinos.

Agora que você tem uma ideia do que precisa acontecer, vamos começar.

Primeiro, vamos usar a função JSC.csv2Json() para converter o texto no formato JSON e passá-lo para o console para ver o que ele faz.

Atualize a função csvToSeries() com o seguinte código:

function csvToSeries(text) {
   let dataAsJson = JSC.csv2Json(text);
   console.log(dataAsJson)
}

Atualize o navegador para ver a saída atualizada do console.

O console mostra um array de 1062 registros. Este é um desses registros:

{year: 1900, race: "All Races", sex: "Both Sexes", average_life_expectancy: 47.3, mortality: 2518}

Observação: o console pode exibir arrays e objetos para inspeção e você pode expandir e recolher seções no console para explorar detalhes.

O nome da propriedade average_life_expectancy é um pouco longo, mas você precisará usá-lo. Para evitar digitá-lo mais de uma vez, defina uma constante para armazenar esse nome. Quando você precisar usar essa propriedade, basta escrever o nome da constante lifeExp. Ela terá esta aparência, row[lifeExp], em vez de row.average_life_expectancy.

Adicione esta linha na parte superior da função csvToSeries().

function csvToSeries(text) {
	const lifeExp = 'average_life_expectancy';
	...

Você pode processar esses dados usando JavaScript simples. O resultado final que queremos são duas séries com pontos de dados que incluem um ano e a expectativa de vida para cada ponto.

Atualize a função csvToSeries() com o seguinte código:

function csvToSeries(text) {
	const lifeExp = 'average_life_expectancy';
	let dataAsJson = JSC.csv2Json(text);
	let male = [], female = [];
	dataAsJson.forEach(function (row) {
		 //add either to male, female, or discard.
		console.log(row);
	});
}

Ele define arrays para pontos de dados masculinos e femininos. Em seguida, ele chama a função array dataAsJson.forEach() passando uma função de retorno de chamada (callback) function(row){...} como argumento. A função forEach() executará a função de retorno de chamada para cada item no array dataAsJson. Por enquanto, chamaremos apenas console.log(row) em cada linha que a função de retorno de chamada encontrar.

Atualize o navegador e inspecione a saída do console.

Vamos adicionar alguma lógica para filtrar os dados que desejamos e registrar o resultado na janela do console. Substitua a função csvToSeries() por este código.

function csvToSeries(text) {
	const lifeExp = 'average_life_expectancy';
	let dataAsJson = JSC.csv2Json(text);
	let male = [], female = [];
	dataAsJson.forEach(function (row) {
		 //add either to male, female, or discard.
		if (row.race === 'All Races') {
			if (row.sex === 'Male') {
				male.push({x: row.year, y: row[lifeExp]});
			} else if (row.sex === 'Female') {
				female.push({x: row.year, y: row[lifeExp]});
			}
		}
	});
    console.log([male, female]);
}

Dentro da função de retorno de chamada, você decide se a linha é de interesse e a utiliza. Caso contrário, você a descarta.

if (row.race === 'All Races') {
	if (row.sex === 'Male') {
		//add data to male array
		male.push({x: row.year, y: row[lifeExp]});
	} else if (row.sex === 'Female') {
		//add data to female array
		female.push({x: row.year, y: row[lifeExp]});
	}
}

A lógica verifica se o valor row.race é igual a 'All Races'. Se for, verifica se a propriedade row.sex é igual a 'Male' ou 'Female'. Se a linha for igual a qualquer uma delas, ele adiciona os dados aos arrays male ou female como um objeto de ponto {x, y}. Observe o uso da constante lifeExp definida acima, que ajuda a encurtar esse código.

No final, você usou console.log([male, female]) para passar as variáveis male e female (masculino e feminino, em inglês) para o console para inspeção e para garantir que o código funcionou conforme o esperado.

Depois de atualizar o navegador, o console mostra o resultado, que são dois arrays, cada um com 118 pontos de dados que abrangem os anos de 1900 a 2017.

Por fim, em vez de passar o resultado para o console, envolva esses pontos de dados em um array de duas séries que o gráfico possa usar diretamente e retorne-os.

Adicione este código no final da função csvToSeries():

return [
   {name: 'Male', points: male},
   {name: 'Female', points: female}
];

Se o valor retornado fosse enviado para o console, ele produziria este resultado:

Como você pode ver, a lógica para filtrar as linhas é bastante simples e você pode ajustá-la para obter outros detalhes desse conjunto de dados.

Para saber mais sobre como lidar com arquivos CSV usando os utilitários do JSCharting, consulte este tutorial. Quando você estiver pronto para um tratamento de dados mais avançado, o utilitário JSC.nest() poderá ser usado para criar séries e pontos a partir de dados JSON com muito pouco código.

step3-b.zip

Passo 4 – juntando tudo

A seção de manipulação de dados foi a etapa mais difícil, mas só ela permitirá que você manipule e extraia dados de interesse de qualquer arquivo CSV. É aqui que tudo se encaixa e que você terá uma sensação de realização.

Comece adicionando uma função renderChart() ao final do arquivo index.js. Você passará os dados da série para essa função como um argumento.

function renderChart(series){
   JSC.Chart('chartDiv', {
      series: series
   });
}

Na função do método then() que chama a função csvToSeries(), passe o resultado da série para a função renderChart() para ver o que ela desenha no navegador.

.then(function (text) {
	let series = csvToSeries(text);
	renderChart(series);
})

step4-a.zip

Agora, atualize o navegador. Você deverá ver este gráfico que usa os dados CSV processados na seção anterior. Não é incrível?

Uau, o que aconteceu em 1918? A expectativa de vida caiu significativamente lá. De acordo com a Wikipédia, houve uma pandemia de gripe envolvendo o vírus H1N1 que dizimou uma parte da população mundial. Esse evento infeliz mostra como a visualização de dados fornece insights que você normalmente não obteria apenas observando os números.

Você criou um gráfico usando o tipo de série de linhas padrão e ele está com boa aparência, mas pode fazer alguns ajustes para melhorá-lo ainda mais.

Primeiro, adicione um título na parte superior para explicar o que o usuário está vendo e uma anotação na parte inferior do gráfico para dar crédito à fonte dos dados. Atualize a função do construtor JSC.Chart() para passar as seguintes opções:

function renderChart(series){
	JSC.Chart('chartDiv', {
		title_label_text: 'Life Expectancy in the United States',
		annotations: [{
			label_text: 'Source: National Center for Health Statistics',
			position: 'bottom left'
		}],
		series: series
	});
}

Quando você atualiza o navegador, pode ver o gráfico atualizado.

Você adicionou uma anotação com texto do rótulo e uma configuração de posição. Também podemos usar outra anotação para o título, mas foi mais fácil usar o rótulo do título neste exemplo.

É fácil controlar a posição da anotação usando valores como 'top right' ou 'inside bottom right'. O valor 'inside' significa que a anotação é colocada dentro da área do gráfico onde os dados são desenhados. Este exemplo de gráfico de posições de caixa demonstra todas as opções de configuração de posição.

A legenda mostra a soma dos valores de pontos de cada série, mas a soma não é importante para esse conjunto de dados. Você pode reduzir as colunas de legenda para mostrar apenas o ícone e o nome da série usando essa configuração:

legend_template: '%icon,%name'

No entanto, você não precisa realmente usar uma legenda. Será mais limpo se simplesmente rotular as próprias linhas. Você pode desativar a legenda e instruir o gráfico a escrever o nome da série no último ponto de cada série de linhas com essas opções de gráfico:

legend_visible: false,
defaultSeries_lastPoint_label_text: '<b>%seriesName</b>',

O token'%seriesname' é um dos muitos tokens relacionados a pontos que podem ser usados em qualquer texto de rótulo de ponto para mostrar detalhes e cálculos de pontos.

Por fim, vamos ativar a tooltip do eixo x para mostrar a expectativa de vida masculina e feminina em um determinado ano. Em dispositivos móveis, você pode tocar no gráfico para ver a tooltip. Ao usar um PC, a tooltip é exibida ao passar o mouse sobre o gráfico.

xAxis_crosshair_enabled: true,

Você deve estar se perguntando: por que todos esses sublinhados nos nomes das propriedades? Esse não é o nome real da propriedade. É uma forma abreviada de escrever:

xAxis: {crosshair: {enabled: true}},

Você pode achar mais conveniente especificar uma configuração com sublinhados e o JSCharting entenderá o que você quer dizer.

O texto padrão da tooltip é claro, mas vamos personalizá-lo um pouco para torná-lo nosso.

Como tooltip mostra informações sobre cada ponto, o texto é definido nas opções de ponto. A propriedade defaultPoint define as opções de ponto que todos os pontos herdarão automaticamente.

defaultPoint_tooltip: '%seriesName <b>%yValue</b> years',

Para obter mais informações sobre esse recurso, consulte o tutorial sobre mouse de mira (ponto focal) e tooltip (texto em inglês).

Quando você aplicar todas essas opções, seu código será semelhante ao trecho a seguir. Substitua toda a função renderChart() por este código:

function renderChart(series){
	JSC.Chart('chartDiv', {
		title_label_text: 'Life Expectancy in the United States',
		annotations: [{
			label_text: 'Source: National Center for Health Statistics',
			position: 'bottom left'
		}],
        legend_visible: false,
		defaultSeries_lastPoint_label_text: '<b>%seriesName</b>',
		defaultPoint_tooltip: '%seriesName <b>%yValue</b> years',
		xAxis_crosshair_enabled: true,
		series: series
	});
}

Atualize a janela do navegador mais uma vez.

Você conseguiu!

Primeiro, você buscou dados CSV usando JavaScript nativo. Em seguida, você os converteu no formato JSON e filtrou os dados em duas séries. Com essas séries, você criou um belo gráfico de linhas interativo usando o JSCharting e o configurou para ter uma aparência profissional.

Você pode personalizar e ajustar ainda mais os gráficos para atender às suas necessidades específicas. Visite a seção de tutoriais para saber mais sobre um tópico específico ou encontre gráficos semelhantes ao que deseja criar na galeria de exemplos e copie-os para continuar sua jornada de visualização de dados.

Se tiver problemas ao trabalhar com o JSCharting, sinta-se à vontade para entrar em contato com a equipe de suporte. Eles terão prazer em orientá-lo ou ajudar a resolver qualquer problema que você possa encontrar.

step4-b.zip

Desafio adicional

Não usamos todos os dados disponíveis nesse arquivo CSV. Vamos fazer experiências com ele para nos divertirmos e praticarmos.

Crie este gráfico usando o que você aprendeu:

Este arquivo zip contém a resposta:

step5-bonus.zip

Você consegue pensar em outros gráficos que pode fazer com esses dados? Continue experimentando e aproveite cada minuto!

Promises são blocos de construção importantes para operações assíncronas em JavaScript. Você pode pensar que as promises não são tão fáceis de entender, aprender e usar – acredite, você não está sozinho!

As promises (em português, promessas) são um desafio para muitos desenvolvedores da Web, mesmo depois de passar anos trabalhando com elas.

Neste artigo, quero tentar mudar essa percepção ao compartilhar o que aprendi sobre promises em JavaScript nos últimos anos. Espero que seja útil para você.

O que é uma promise no JavaScript?

Uma Promise é um objeto especial no JavaScript. Ela produz um valor após uma operação assícrona (também conhecida como async) ser concluída com êxito, ou um erro se ela não for concluída com sucesso, seja porque excedeu o limite de tempo, por erro de rede etc.

As conclusões de chamadas bem-sucedidas são indicadas pela chamada da função resolve e os erros são indicados pela chamada da função reject.

Você pode criar uma promise usando o construtor de promises da seguinte forma:

let promise = new Promise(function(resolve, reject) {    
    // Faz uma chamada assíncrona e conclui ou rejeita essa chamada
});

Na maioria dos casos, uma promise pode ser usada para uma operação assíncrona. Entretanto, tecnicamente, você pode concluir/rejeitar operações síncronas e assíncronas.

Espere aí, não temos funções de callback para operações assíncronas?

Sim, está correto. Temos funções de callback no JavaScript. Porém, uma função de callback não é algo especial no JavaScript. É uma função normal que produz resultados após a conclusão de uma chamada assíncrona (com sucesso/erro).

A palavra "assíncrona" significa que algo acontece no futuro, não agora. Normalmente, callbacks são usadas apenas para fazer coisas como chamadas de rede ou fazer upload/download de coisas, se comunicar com bancos de dados e assim por diante.

Embora callbacks sejam úteis, elas também têm uma grande desvantagem. Às vezes, podemos ter uma callback dentro de outra callback que está em outra callback e assim por diante. Sério! Vamos entender esse "inferno de callbacks" (do inglês, callback hell) com um exemplo.

Como evitar o inferno de callbacks – exemplo do PizzaHub

Vamos pedir uma pizza Marguerita vegana 🍕 do PizzaHub. Quando fazemos o pedido, o PizzaHub detecta automaticamente nossa localização, encontra uma pizzaria próxima e verifica se a pizza que estamos pedindo está disponível.

Se estiver disponível, ele detecta que tipo de bebida recebemos gratuitamente junto com a pizza e, por fim, faz o pedido.

Se o pedido for feito com sucesso, receberemos uma mensagem com uma confirmação.

Então, como podemos codificar isso usando funções de callback? Eu criei algo parecido com isso:

function pedirPizza(tipo, nome) {
    
    // Consulta a pizzahub por uma loja
    query(`/api/pizzahub/`, function(resultado, erro){
       if (!error) {
           let idLoja = resultado.idLoja;
           
           // Obtém a loja e consulta as pizzas
           query(`/api/pizzahub/pizza/${idLoja}`, function(resultado, erro){
               if (!erro) {
                   let pizzas = resultado.pizzas;
                   
                   // Verifica se minha pizza está disponível
                   let minhaPizza = pizzas.find((pizza) => {
                       return (pizza.tipo===tipo && pizza.nome===nome);
                   });
                   
                   // Verifique se há bebidas gratuitas
                   query(`/api/pizzahub/bebidas/${minhaPizza.id}`, function(resultado, erro){
                       if (!erro) {
                           let bebida = resultado.id;
                           
                           // Prepara um pedido
                           query(`/api/pedido`, {'tipo': tipo, 'nome': nome, 'bebida': bebida}, function(resultado, erro){
                              if (!erro) {
                                  console.log(`Seu pedido de ${tipo} ${nome} com ${bebida} foi realizado`);
                              } else {
                                  console.log(`Infelizmente, não temos pizzas para você hoje!`);
                              }
                           });

                       }
                   })
               }
           });
       } 
    });
}

// Chama a função orderPizza
pedirPizza('vegetariana', 'marguerita');

Vamos dar uma olhada na função pedirPizza no código acima.

Ela chama uma API para obter o ID da pizzaria mais próxima. Depois disso, obtém a lista de pizzas disponíveis nesse restaurante. Então, ela verifica se a pizza que estamos pedindo foi encontrada e faz outra chamada à API para encontrar as bebidas para essa pizza. Por fim, a API de pedidos faz o pedido.

Aqui usamos uma callback para cada uma das chamadas de API. Isso nos leva a usar outra callback dentro da anterior, e assim por diante.

Isso significa que entramos em algo que chamamos (de forma muito expressiva) de Inferno de Callbacks. Ninguém quer isso, certo? Isso também forma uma pirâmide de código que não é apenas confusa, mas também propensa a erros.

Há algumas maneiras de sair do (ou não entrar no) inferno de callbacks. A mais comum é usar uma Promise ou função async. No entanto, para entender bem as funções async, primeiro é preciso ter uma boa compreensão das Promises.

Portanto, vamos começar e nos aprofundar nas promises.

Entendendo os estados das promises

Apenas para revisar, uma promise pode ser criada com a sintaxe de construtor, dessa maneira:

let promise = new Promise(function(resolve, reject) {
  // Código a ser executado
});

A função construtora recebe uma função como argumento. Essa função é chamada de função executora.

// Função executora passada como um argumento 
// para o construtor da Promise
function(resolve, reject) {
    // Sua lógica entra aqui...
}

A função executora recebe dois argumentos: resolve e reject. Essas são as funções de callback fornecidas pela linguagem JavaScript. Sua lógica está dentro da função executora, que é executada automaticamente quando uma new Promise é criada.

Para que a promise seja eficaz, a função executora deve chamar uma das funções de callback, resolve ou reject. Aprenderemos mais sobre isso em detalhes daqui a pouco.

O construtor new Promise() retorna um objeto promise. Como a função executora precisa lidar com operações assíncronas, o objeto promise retornado deve ser capaz de informar quando a execução foi iniciada, concluída (resolved) ou retornada com erro (rejected).

Um objeto promise tem as seguintes propriedades internas:

1. state – essa propriedade pode ter os seguintes valores:

• pending – inicialmente, quando a função executora inicia a execução.
• fulfilled – quando a promise é concluída.
• rejected – quando a promise é rejeitada.

2.  result – essa propriedade pode ter os seguintes valores:

• undefined – inicialmente, quando o valor do state é pending.
• value – quando resolve(value) é chamada.
• error – quando  reject(error) é chamada.

Essas propriedades internas são inacessíveis ao código, mas podem ser inspecionadas. Isso significa que poderemos inspecionar os valores das propriedades state e result usando a ferramenta de depuração, mas não poderemos acessá-las diretamente usando o programa.

O estado de uma promise pode ser pending (pendente), fulfilled (cumprida) ou rejected (rejeitada). Uma promise que é resolvida ou rejeitada é chamada de settled (liquidada).

Como as promises são concluídas e rejeitadas

Aqui temos um exemplo de uma promise que será concluída imediatamente (estado fulfilled) com o valor Estou pronto.

let promise = new Promise(function(resolve, reject) {
    resolve("Estou pronto");
});

A promise abaixo será rejeitada (estado rejected) com a mensagem de erro Algo não está correto!.

let promise = new Promise(function(resolve, reject) {
    reject(new Error('Algo não está correto!'));
});

Um ponto importante a observar:

Uma função executora de promises deve chamar apenas uma função resolve ou uma função reject. Uma vez que um estado seja alterado (pending => fulfilled ou pending => rejected), acabou. Qualquer outra chamada para resolve ou para reject será ignorada.

let promise = new Promise(function(resolve, reject) {
  resolve("Com certeza serei resolvido!");

  reject(new Error('Isso será ignorado?')); // ignorado
  resolve("Ignorado?"); // ignorado
});

No exemplo acima, apenas o primeiro a ser resolvido será chamado e os demais serão ignorados.

Como lidar com uma promise depois de criá-la

Uma Promise usa uma função executora para concluir uma tarefa (principalmente de maneira assíncrona). Uma função consumidora (que usa um resultado da promise) deve ser notificada quando a função executora concluir (com sucesso) ou rejeitar (com erro).

Os métodos, .then(), .catch() e .finally(), ajudam a criar o vínculo entre a função executora e as funções consumidoras para que possam estar em sincronia quando uma promise for concluída (resolve) ou rejeitada (reject).

Como usar o método .then() da promise

O método .then() deve ser chamado no objeto promise para lidar com um resultado (resolve) ou um erro (reject).

Aceita duas funções como parâmetros. Normalmente, o método .then() deve ser chamado a partir da função consumidora em que você gostaria de saber o resultado da execução de uma promise.

promise.then(
  (result) => { 
     console.log(result);
  },
  (error) => { 
     console.log(error);
  }
);

Se estiver interessado apenas em resultados bem-sucedidos, pode passar apenas um argumento, desta maneira:

promise.then(
  (result) => { 
      console.log(result);
  }
);

Se você estiver interessado apenas no erro, poderá passar null para o primeiro argumento, assim:

promise.then(
  null,
  (error) => { 
      console.log(error)
  }
);

No entanto, pode tratar melhor os erros usando o método .catch(), que veremos em um minuto.

Vamos dar uma olhada em alguns exemplos de tratamento de resultados e erros usando os métodos .then e .catch . Tornaremos esse aprendizado um pouco mais divertido com algumas requisições assíncronas reais. Usaremos a PokeAPI para obter informações sobre Pokémons e concluí-las/rejeitá-las usando promises.

Primeiro, vamos criar uma função genérica que aceita um URL da PokeAPI como argumento e retorna uma promise. Se a chamada à API for bem-sucedida, uma promise concluída será retornada. Uma promise rejeitada é retornada para qualquer tipo de erro.

A partir de agora, usaremos essa função em vários exemplos para obter uma promise e trabalhar com ela.

function getPromise(URL) {
  let promise = new Promise(function (resolve, reject) {
    let req = new XMLHttpRequest();
    req.open("GET", URL);
    req.onload = function () {
      if (req.status == 200) {
        resolve(req.response);
      } else {
        reject("Ocorreu um erro!");
      }
    };
    req.send();
  });
  return promise;
}

Exemplo 1: obter informações de 50 Pokémons:

const ALL_POKEMONS_URL = 'https://pokeapi.co/api/v2/pokemon?limit=50';

// Já discutimos essa função!
let promise = getPromise(ALL_POKEMONS_URL);

const consumer = () => {
    promise.then(
        (result) => {
            console.log({result}); // Exibe o retorno de 50 Pokémons no console do navegador
        },
        (error) => {
            // Como o URL é válido, isso não será chamado.
            console.log('Encontramos um erro!'); // Exibe um erro no console do navegador
    });
}

consumer();

Exemplo 2: vamos tentar um URL inválido

const POKEMONS_BAD_URL = 'https://pokeapi.co/api/v2/pokemon-bad/';

// Isso será rejeitado porque o URL retorna erro 404
let promise = getPromise(POKEMONS_BAD_URL);

const consumer = () => {
    promise.then(
        (result) => {
            // A promise não foi concluída. Portanto, ela não será executada.
            console.log({result});
        },
        (error) => {
            // Uma promise rejeitada executará o seguinte
            console.log('We have encountered an Error!'); // Exibe um erro no console do navegador
        }
    );
}

consumer();

Como usar o método .catch() da promise

Você pode usar esse método para lidar com erros (rejeições) das promises. A sintaxe de passar null como o primeiro argumento para .then() não é uma boa maneira de tratar erros. Portanto, temos o .catch() para fazer o mesmo trabalho com uma sintaxe simples:

// Isso será rejeitado porque o URL retorna 404
let promise = getPromise(POKEMONS_BAD_URL);

const consumer = () => {
    promise.catch(error => console.log(error));
}

consumer();

Se lançarmos um erro usando new Error("Algo está errado!") em vez de chamar o reject da função executora e dos métodos da promise, ele ainda será tratado como uma rejeição. Isso significa que será capturado pelo método .catch.

O mesmo se aplica a todas as exceções síncronas que ocorrem no executor da promise e nas funções.

Aqui está um exemplo onde será tratado como uma rejeição e o método .catch será chamado:

new Promise((resolve, reject) => {
  throw new Error("Algo está errado!");// Sem chamada rejeitada
}).catch((error) => console.log(error)); 

Como usar o método .finally() da promise

O método .finally() realiza tarefas de limpeza como parar um carregamento, fechar uma conexão ativa e assim por diante. O método finally() será chamado independentemente da promise retornar um resultado (resolve) ou um erro (reject). Ele passa o resultado ou o erro para o próximo método, que pode chamar os métodos .then() ou .catch() novamente.

Aqui temos um exemplo que ajudará você a entender os três métodos juntos:

let loading = true;
loading && console.log('Carregando...');

// Obtendo a Promise
promise = getPromise(ALL_POKEMONS_URL);

promise.finally(() => {
    loading = false;
    console.log(`Promessa resolvida e o carregamento é ${loading}`);
}).then((result) => {
    console.log({result});
}).catch((error) => {
    console.log(error)
});

Explicando em detalhes:

• O método .finally() torna o carregamento false.
• Se a promise retornar um resultado (resolve), o método .then() será chamado. Se a promise retornar um erro (reject), o método .catch() será chamado. O .finally() será chamado independentemente do resolve ou do reject.

O que é encadeamento de promises?

A chamada  promise.then() sempre retorna uma promise. Essa promise terá o state como pending e result como undefined. Ela nos permite chamar o próximo método .then em uma nova promise.

Quando o primeiro método .then retornar um valor, o próximo método .then pode recebê-lo. O segundo pode passar para o terceiro .then() e assim por diante. Isto forma uma cadeia de métodos .then para transmitir as promises. Esse fenômeno é chamado de Cadeia de Promises.

Aqui está um exemplo:

let promise = getPromise(ALL_POKEMONS_URL);

promise.then(result => {
    let onePokemon = JSON.parse(result).results[0].url;
    return onePokemon;
}).then(onePokemonURL => {
    console.log(onePokemonURL);
}).catch(error => {
    console.log('In the catch', error);
});

Aqui, primeiro obtemos uma promise resolvida e, em seguida, extraímos o URL para chegar ao primeiro Pokémon. Em seguida, retornamos esse valor e ele será passado como uma promise para a próxima função .then(). Daí o resultado,

https://pokeapi.co/api/v2/pokemon/1/

O método .then pode retornar tanto:

• Um valor (já vimos isso)
• Uma nova promise.

Também pode lançar um erro.

Aqui está um exemplo em que criamos uma cadeia de promises com os métodos .then que retornam resultados e uma nova promise:

// Promise Chain with multiple then and catch
let promise = getPromise(ALL_POKEMONS_URL);

promise.then(result => {
    let onePokemon = JSON.parse(result).results[0].url;
    return onePokemon;
}).then(onePokemonURL => {
    console.log(onePokemonURL);
    return getPromise(onePokemonURL);
}).then(pokemon => {
    console.log(JSON.parse(pokemon));
}).catch(error => {
    console.log('In the catch', error);
});

Na primeira chamada de .then, extraímos o URL e o retornamos como um valor. Esse URL será passado para a segunda chamada .then na qual estamos retornando uma nova promise tendo esse URL como argumento.

Essa promise será resolvida e passada para a cadeia, onde obteremos as informações sobre o Pokémon. Aqui está o resultado:

Caso ocorra um erro ou a rejeição de uma promise, o método .catch da cadeia será chamado.

Um ponto a ser observado: chamar .then várias vezes não forma uma cadeia de promises. Você pode acabar fazendo algo assim apenas para introduzir um bug no código:

let promise = getPromise(ALL_POKEMONS_URL);

promise.then(result => {
    let onePokemon = JSON.parse(result).results[0].url;
    return onePokemon;
});
promise.then(onePokemonURL => {
    console.log(onePokemonURL);
    return getPromise(onePokemonURL);
});
promise.then(pokemon => {
    console.log(JSON.parse(pokemon));
});

Chamamos o método .then três vezes na mesma promise, mas não passamos a promise adiante. Isso é diferente da cadeia de promises. No exemplo acima, o resultado será um erro.

Como lidar com várias promises

Além dos métodos (.then, .catch e .finally), há seis métodos estáticos disponíveis na API da promise. Os primeiros quatro métodos aceitam um array de promises e as executam em paralelo.

1. Promise.all
2. Promise.any
3. Promise.allSettled
4. Promise.race
5. Promise.resolve
6. Promise.reject

Vamos examinar cada uma delas.

O método Promise.all()

Promise.all([promises]) aceita uma coleção (por exemplo, um array) de promises como argumento e as executa em paralelo.

Esse método aguarda a resolução de todas as promises e retorna o array de resultados das promises. Se alguma das promises for rejeitada ou falhar devido a um erro, todos os outros resultados das promises serão ignorados.

Vamos criar três promises para obter informações sobre três Pokémons.

const BULBASAUR_POKEMONS_URL = 'https://pokeapi.co/api/v2/pokemon/bulbasaur';
const RATICATE_POKEMONS_URL = 'https://pokeapi.co/api/v2/pokemon/raticate';
const KAKUNA_POKEMONS_URL = 'https://pokeapi.co/api/v2/pokemon/kakuna';


let promise_1 = getPromise(BULBASAUR_POKEMONS_URL);
let promise_2 = getPromise(RATICATE_POKEMONS_URL);
let promise_3 = getPromise(KAKUNA_POKEMONS_URL);

Use o método Promise.all() passando um array de promises.

Promise.all([promise_1, promise_2, promise_3]).then(result => {
    console.log({result});
}).catch(error => {
    console.log('An Error Occurred');
});

Saída:

Como você pode ver, o resultado de todas as promises é retornado. O tempo para executar todas as promises é igual ao tempo máximo que a promise leva para ser executada.

O método Promise.any()

Promise.any([promises]) – semelhante ao método all(), .any() também aceita um array de promises para executá-las em paralelo. Esse método não espera que todas as promises sejam resolvidas. Ele finaliza quando qualquer uma das promises é resolvida.

 Promise.any([promise_1, promise_2, promise_3]).then(result => {
     console.log(JSON.parse(result));
 }).catch(error => {
     console.log('An Error Occurred');
 });

A saída seria o resultado de qualquer uma das promises resolvidas:

O método Promise.allSettled()

promise.allSettled([promises]) – esse método aguarda que todas as promises sejam resolvidas (resolve/reject) e retorna seus resultados como um array de objetos. Os resultados conterão um estado (fulfilled/rejected) e um valor, se for fulfilled. Em caso de status rejected, ele retornará um motivo para o erro.

Aqui está um exemplo de todas as promessas cumpridas (fulfilled):

Promise.allSettled([promise_1, promise_2, promise_3]).then(result => {
    console.log({result});
}).catch(error => {
    console.log('There is an Error!');
});

Saída:

Se alguma das promises for rejeitada, por exemplo, a promise_1,

let promise_1 = getPromise(POKEMONS_BAD_URL);

O método Promise.race()

Promise.race([promises]) – Aguarda a primeira promise (a mais rápida) ser concluída e retorna o respectivo resultado/erro.

Promise.race([promise_1, promise_2, promise_3]).then(result => {
    console.log(JSON.parse(result));
}).catch(error => {
    console.log('An Error Occured');
});

Retorna a promise que foi resolvida mais rapidamente:

O método Promise.resolve/reject

Promise.resolve(value) – Ele resolve uma promise com o valor passado. É o mesmo que o seguinte código:

let promise = new Promise(resolve => resolve(value));

Promise.reject(error) – Rejeita uma promise com o erro passado. É o mesmo que o seguinte código:

let promise = new Promise((resolve, reject) => reject(error));

Podemos reescrever o exemplo da PizzaHub com promises?

Claro, vamos fazer isso. Vamos supor que o método query retornará uma promise. Aqui está um exemplo de método query(). Na vida real, esse método pode se comunicar com um banco de dados e retornar resultados. Nesse caso, ele é bastante codificado, mas tem a mesma finalidade.

function query(endpoint) {
  if (endpoint === `/api/pizzahub/`) {
    return new Promise((resolve, reject) => {
      resolve({'idLoja': '123'});
    })
  } else if (endpoint.indexOf('/api/pizzahub/pizza/') >=0) {
    return new Promise((resolve, reject) => {
      resolve({pizzas: [{'tipo': 'vegetariana', 'nome': 'marguerita', 'id': '123'}]});
    })
  } else if (endpoint.indexOf('/api/pizzahub/bebidas') >=0) {
    return new Promise((resolve, reject) => {
      resolve({id: '10', 'tipo': 'vegetariana', 'nome': 'marguerita', 'bebida': 'coca'});
    })
  } else if (endpoint === `/api/order`) {
    return new Promise((resolve, reject) => {
      resolve({'tipo': 'vegetariana', 'nome': 'marguerita', 'bebida': 'coca'});
    })
  }
}

Em seguida, a refatoração do nosso callback hell. Para isso, primeiro criaremos algumas funções lógicas:

// Retorna um id da loja
let getIdLoja = resultado => resultado.idLoja;

// Retorna uma promise com a lista de pizzas para uma loja
let getListaPizzas = idLoja => {
  const url = `/api/pizzahub/pizza/${idLoja}`;
  return query(url);
}

// Retorna uma promise com a pizza que combina com o pedido do cliente
let getMinhaPizza = (resultado, tipo, nome) => {
  let pizzas = resultado.pizzas;
  let minhaPizza = pizzas.find((pizza) => {
    return (pizza.tipo===tipo && pizza.nome===nome);
  });
  const url = `/api/pizzahub/bebidas/${minhaPizza.id}`;
  return query(url);
}

// Retorna uma promise depois de fazer o pedido
let fazerPedido = resultado => {
  let bebida = resultado.id;
   return query(`/api/pedido`, {'tipo': resultado.tipo, 'nome': resultado.nome, 'bebida': resultado.bebida});
}

// Confirma o pedido
let confirmarPedido = resultado => {
    console.log(`Seu pedido de ${resultado.tipo} ${resultado.nome} com ${resultado.bebida} foi aceito!`);
}

Use essas funções para criar as promises necessárias. É aqui que você deve comparar com o exemplo do callback hell. Este é bem mais legal e elegante.

function pedirPizza(tipo, nome) {
  query(`/api/pizzahub/`)
  .then(resultado => getIdLoja(resultado))
  .then(idLoja => getListaPizzas(idLoja))
  .then(resultado => getMinhaPizza(resultado, tipo, nome))
  .then(resultado => realizarPedido(resultado))
  .then(resultado => confirmarPedido(resultado))
  .catch(function(erro){
    console.log(`Infelimente, não temos pizzas para você hoje!`);
  })
}

Por fim, chame o método pedirPizza() passando o tipo e o nome da pizza, da seguinte forma:

pedirPizza('vegetariana', 'marguerita');

O que vem a seguir?

Se você chegou até aqui e leu a maior parte das linhas acima, parabéns! Agora você já deve ter uma noção melhor das Promises do JavaScript. Todos os exemplos usados neste artigo estão neste repositório do GitHub.

Em seguida, você deve aprender sobre a função async no JavaScript, que simplifica ainda mais as coisas. A melhor maneira de aprender o conceito de promises do JavaScript é escrever pequenos exemplos e desenvolvê-los com base neles.

Independentemente do framework ou da biblioteca (Angular, React, Vue e assim por diante) que usarmos, as operações assíncronas são inevitáveis. Isso significa que precisamos entender as promises para que as coisas funcionem melhor.

Além disso, tenho certeza de que você achará o uso do método fetch muito mais fácil agora:

fetch('/api/user.json')
.then(function(response) {
    return response.json();
})
.then(function(json) {
    console.log(json); // {"name": "tapas", "blog": "freeCodeCamp"}
});

• O método fetch retorna uma promise. Portanto, podemos chamar o método .then nele.
• O restante é sobre a cadeia de promises que aprendemos neste artigo.

Antes de terminarmos...

Obrigado por ler até aqui! Vamos nos conectar. Você pode me mandar mensagens no Twitter (@tapasadhikary) com comentários.

Você também pode gostar destes artigos (em inglês):

• JavaScript undefined and null: Let's talk about it one last time!
• JavaScript: Equality comparison with ==, === and Object.is
• The JavaScript `this` Keyword + 5 Key Binding Rules Explained for JS Beginners
• JavaScript TypeOf – How to Check the Type of a Variable or Object in JS

Isso é tudo por enquanto. Voltaremos a nos ver em breve com meu próximo artigo. Até lá, cuide-se bem. 🙂

Você pode até pensar que encodeURI e encodeURIComponent fazem a mesma coisa, ao menos ao olhar para seus nomes. Você também pode estar confuso sobre qual deles usar e quando usar.

Neste artigo, tentarei desmistificar a diferença entre encodeURI e encodeURIComponent.

O que é um URI e qual a sua diferença de um URL?

URI é a sigla para Uniform Resource Identifier (em português, identificador de recurso uniforme).
URL é a sigla para Uniform Resource Locator (em português, localizador de recurso uniforme).

Qualquer coisa que identifique de modo único um recurso é seu URI: exemplos disso são o id, o nome ou o número no ISBN. Um URL especifica um recurso e como ele pode ser acessado (o protocolo). Todos os URLs são URIs, mas nem todo URI é um URL.

Por que precisamos codificá-los?

URLs somente podem ter alguns caracteres do conjunto padrão de 128 caracteres ASCII. Caracteres reservados que não pertençam a esse conjunto devem ser codificados.

Isso significa que precisamos codificar esses caracteres ao passarmos um URL. Caracteres especiais, como &, espaço e !, ao serem inseridos em um URL, necessitam de um "escape", ou podem causar situações imprevisíveis.

Casos de uso:

1. O usuário enviou valores em um formulário que podem estar no formato de string e precisam ser passados, como campos de URL.
2. É preciso aceitar parâmetros de consulta em formato de strings para fazer solicitações do tipo GET.

Qual é a diferença entre encodeURI e encodeURIComponent?

encodeURI e encodeURIComponent são usados para codificar os identificadores de recurso uniformes (URIs) ao substituir determinados caracteres por uma, duas, três ou quatro sequências de escape que representem a codificação UTF-8 do caractere.

encodeURIComponent deve ser usado para codificar um componente URI – uma string que se suponha que seja parte de um URL.

encodeURI deve ser usado para codificar um URI ou um URL existente.

Aqui temos uma tabela bastante útil para ver a diferença na codificação dos caracteres

Quais caracteres são codificados?

encodeURI() não codificará: ~!@#$&*()=:/,;?+'

encodeURIComponent() não codificará: ~!*()'

Os caracteres A-Z a-z 0-9 - _ . ! ~ * ' ( ) não recebem o "escape".

Exemplos

const url = 'https://www.twitter.com'

console.log(encodeURI(url))             //Resultado: https://www.twitter.com
console.log(encodeURIComponent(url))    //Resultado: https%3A%2F%2Fwww.twitter.com


const paramComponent = '?q=search'
console.log(encodeURIComponent(paramComponent)) //Resultado: "%3Fq%3Dsearch"
console.log(url + encodeURIComponent(paramComponent)) //Resultado: https://www.twitter.com%3Fq%3Dsearch

Quando codificar

1. Ao aceitar uma entrada que possa ter espaços.

encodeURI("http://www.mysite.com/a file with spaces.html") //Resultado: http://www.mysite.com/a%20file%20with%20spaces.html

2. Ao criar um URL a partir de parâmetros de consulta em formato de string.

 let param = encodeURIComponent('mango')
 let url = "http://mysite.com/?search=" + param + "&length=99"; //Resultado: http://mysite.com/?search=mango&length=99

3. Ao aceitar parâmetros de consulta que possam ter caracteres reservados.

   let params = encodeURIComponent('mango & pineapple')
   let url = "http://mysite.com/?search=" + params; //Resultado: http://mysite.com/?search=mango%20%26%20pineapple

Resumo

Se você tiver um URL completo, use encodeURI. Se, no entanto, tiver apenas parte de um URL, use encodeURIComponent.

O uso de linting (verificação de código) facilita nossas vidas pois nos diz o que há de errado no código. Como podemos, no entanto, evitar a realização do trabalho que passamos para consertar o código?

Anteriormente, já escrevi sobre linting (texto em inglês), sobre o que ele é e sobre como ele facilita nossas vidas. No fim, eu cheguei a recomendar um modo de consertar o código automaticamente. Assim sendo, por que eu estou escrevendo este artigo?

O que você quer dizer com consertar o código?

Antes de nos aprofundarmos no assunto, vamos tratar disso rapidamente. Linters são muito poderosos e fornecem um modo fácil de verificar o código para ver se há erros de sintaxe que podem levar a bugs. Eles também podem, simplesmente, ajudar a manter uma base de código limpa, saudável e consistente. Ao executarmos um linter, ele mostrará todos os problemas e permitirá que examinemos um por um, individualmente, para consertarmos os erros.

Podemos levar isso um nível adiante. Alguns linters, de fato, permitirão que você passe um argumento ao comando que executa o linter que ajudarão a consertar o erro "automagicamente". Isso quer dizer que você não precisa examinar o código manualmente e fazer os ajustes finos de espaços em branco e de pontos-e-vírgulas (tendo de adicionar um por um) por conta própria!

O que mais eu posso fazer para consertar tudo?

Se você já usou a opção de consertar, temos um bom ponto de partida. No entanto, há algumas ferramentas que foram desenvolvidas especificamente para lidar com esse problema para além de apenas sinalizá-lo no seu comando. Hoje, tratarei do Prettier.

O que é o Prettier?

Prettier considera a si mesmo "um formatador de código com opinião formada". Ele recebe seu código como entrada e o retorna um uma formatação consistente, removendo qualquer estilo do código original e substituindo pelo seu. Ele, de fato, converte seu código em uma árvore sintática, reescrevendo-o em seguida usando estilos e regras que você e o próprio Prettier fornecem por meio da configuração do seu ESLint e das regras padrão do Prettier.

Você pode usar o Prettier facilmente por conta própria apenas para formatar seu código. Isso já funciona bem. No entanto, se você combiná-lo com um processo de ESLint operando em conjunto, terá tanto um linter poderoso como um consertador de códigos de respeito. Mostrarei a você como fazer para que eles funcionem juntos.

Noções básicas do Prettier

Para este passo a passo, vou assumir que você já tem o ESLint configurado e preparado para uma aplicação. Particularmente, vou começar de onde eu parei em meu passo a passo anterior, onde instalamos o ESLint para uma aplicação do React (texto em inglês).

Também é bom ressaltar que o Prettier nos diz já de início que ele é um formatador de código com opinião formada . Você deve esperar que ele formate seu código de maneira consistente, mas talvez de um modo diferente daquele que você configurou até agora. Não se assuste! Você pode ajustar essa configuração.

De onde estamos começando? Nós já:

• instalamos o ESLint
• adicionamos o Babel como nosso parser de código
• adicionamos um plug-in que inclui configurações do React

Em seguida, vamos começar instalando alguns pacotes:

yarn add prettier prettier-eslint prettier-eslint-cli -D

Observação: o comando acima é semelhante ao do npm. Se o seu projeto não usa o yarn, troque por npm onde for apropriado.

Acima, instalamos:

• prettier: o pacote principal do Prettier e sua engine
• prettier-lint: passa o resultado do Prettier para o ESLint para que ele o conserte usando sua configuração do ESLint
• prettier-eslint-cli: ajuda o Prettier e o ESLint a trabalharem juntos em diversos arquivos por todo o seu projeto

É importante notar que estamos instalando tudo isso como dependências de desenvolvimento, pois não precisaremos delas depois disso.

Configurando seu novo formatador

Agora que nossos pacotes estão instalados, podemos solicitar ao yarn que execute esse código para nós.

Anteriormente, definimos um script de lint para que tivesse esta aparência no package.json:

"scripts": {
  ...
  "lint": "eslint . --ext .js"
  ...
}

Vamos deixar isso como está, mas faremos algo parecido e criaremos um script próximo a isso, chamado format, para nosso formatador, o Prettier:

"scripts": {
  ...
  "format": "prettier-eslint --eslint-config-path ./.eslintrc.js --write '**/*.js'",
  "lint": "eslint . --ext .js"
  ...
}

O que está ocorrendo aqui? Estamos:

• Adicionando um novo script chamado format, que pode ser executado com yarn format
• utilizando o pacote prettier-eslint-cli para executar a formatação para nós
• passando nossa configuração do ESLint, localizada ao lado do nosso package.json, na raiz do projeto (altere o caminho se estiver em um local diferente)
• e, por fim, dizendo ao Prettier que reescreva todos os artigos que tenham **/*.js como correspondência, ou quaisquer arquivos de JS que sejam encontrados recursivamente em nosso projeto

A beleza está no fato de que estamos passando nossa configuração do ESLint para o Prettier. Isso quer dizer que precisamos apenas manter uma configuração para ambas as ferramentas e que ainda podemos aproveitar do poder de verificação do ESLint, juntamente do poder formatador do Prettier.

Execute seu formatador!

Agora que está tudo configurado, vamos executar! Faça isso com o seguinte comando:

yarn format

Veremos que isso funciona imediatamente:

Ei, meu código parece diferente!

Como eu mencionei antes, o Prettier nos avisa de cara que ele é um formatador de código com opinião formada. Ele vem com suas próprias regras, algo como sua própria configuração do ESLint, o que fará com que ele percorra o código e faça essas alterações também.

Não abandone seu código! Em vez disso, você pode revisar as alterações e ver se, talvez, faça sentido mantê-las como estão (elas estarão bastante consistentes) ou você pode atualizar sua configuração do ESLint (.eslintrc.js) para sobrescrever as regras de que você não gosta. Essa também é uma boa maneira de, talvez, aprender algumas coisas novas pelas quais você pode não ter esperado enfrentar.

Onde isso nos deixa, então?

Se você acompanhou até aqui, agora temos dois comandos:

• lint: verificará seu código por você e contará o que está errado
• format: tentará automaticamente consertar os problemas para você

Ao usá-los na prática, o mais seguro é sempre executar format primeiro para deixar que ele tente consertar automaticamente tudo o que puder. Em seguida, imediatamente, execute o lint para epgar tudo aquilo que o Prettier não conseguiu consertar automaticamente.

Que faço depois disso?

Agora que podemos formatar nosso código automaticamente, deveremos poder consertar nosso código automaticamente!

Na próxima vez, daremos um passo a mais e configuraremos um hook do git, que permitirá que isso seja executado antes de você fazer o commit. Isso quer dizer que você não terá de se preocupar mais com esquecer de executar esses processos novamente!

• Siga o autor no Twitter
• Inscreva-se no ️canal do YouTube do autor
• ✉️ Assine a newsletter do autor

Publicado originalmente em https://www.colbyfayock.com/2019/11/dont-just-lint-your-code-fix-it-with-prettier/

(A ilustração da capa – bem como tudo neste artigo – é de Aditya Barghava)

"Para entender recursão, você primeiro precisa entender recursão."

A recursão, ou recursividade, pode ser um assunto difícil de entender — especialmente para novos programadores. Em sua forma mais simples, uma função recursiva é uma função que invoca a si mesma. Deixe eu tentar explicar com um exemplo.

Imagine que você vai abrir a porta do seu quarto e encontra a porta trancada. Seu filho de três anos aparece e revela que ele trancou a porta e escondeu a chave em uma caixa ("Bem a cara dele", você pensa). Você está atrasado para o trabalho e precisa urgentemente entrar no quarto para pegar sua camisa.

Você abre a caixa apenas para encontrar... mais caixas! Caixas dentro de caixas. Você não sabe qual delas contêm a chave! Você precisa daquela camisa então decide pensar em um bom algoritmo para resolver este dilema.

Existem duas maneiras principais de se criar um algoritmo para este problema: iterativa e recursiva. Aqui estão ambas as maneiras explicadas com um fluxograma:

Qual delas parece mais fácil?

A primeira maneira utiliza um laço while. Enquanto a pilha não estiver vazia, pegue uma caixa e verifique-a. Aqui está um pseudocódigo inspirado em Javascript que mostra o que está acontecendo (pseudocódigo é escrito como se fosse código, mas se assemelha a língua humana).

function procura_chave(caixa_principal) {
    let pilha = caixa_principal.fazer_pilha_para_procurar();
    while (pilha nao vazia) {
        caixa = pilha.pegar_caixa();
        for (item in caixa) {
            if (item.eh_uma_caixa()) {
                pilha.append(item)
            } else if (item.eh_uma_chave()) {
                console.log("achei a chave!")
            }
        }
    }}

A segunda maneira utiliza a recursão. Lembre-se, recursão é quando uma função que invoca a si própria. Aqui está a segunda maneira em pseudocódigo.

function procura_chave(caixa) {
  for (item in caixa) {
    if (item.eh_uma_caixa()) {
      procura_chave(item);
    } else if (item.eh_uma_chave()) {
      console.log("achei a chave!")
    } 
  }
}

Ambas as abordagens resultam na mesma coisa. O principal propósito de se utilizar recursão é que, depois que você entende o conceito, o código fica mais legível. Não existe nenhum benefício de desempenho ao se usar recursão. A solução iterativa, às vezes, pode ser até mais rápida, mas a simplicidade da recursão é preferida.

Além disso, como muitos algoritmos famosos utilizam recursão, é importante entender como funciona. Se recursão ainda não soa simples para você, não se preocupe: darei mais alguns exemplos.

Caso base e caso recursivo

Uma coisa que você deve tomar muito cuidado ao escrever uma função recursiva é com um laço infinito. Isso ocorre quando a função continua se invocando... e nunca para!

Por exemplo, se você quiser escrever uma função de contagem regressiva. Você poderia escrevê-la recursivamente em Javascript desse jeito:

// CUIDADO: esta função contém um laço infinito!
function contagemRegressiva(i) {
    console.log(i)
    contagemRegressiva(i - 1)
}

contagemRegressiva(5); // Essa é a chamada inicial da função.

Essa função continuará se invocando pra sempre. Se você acidentalmente criou um código com um laço infinito,  pode apertar "Ctrl+C" para encerrar seu script (ou, se estiver no CodePen, precisará adicionar "?turn_off_js=true" no fim da URL.)

Uma função recursiva sempre precisará de uma condição para dizer quando ela precisa parar de se invocar. Sempre existirão duas partes de uma função recursiva: O caso recursivo e o caso base. O caso recursivo é quando a função invoca a si mesma. O caso base é quando a função deverá parar de se invocar. Isso evitará os laços infinitos.

Aqui está a contagem regressiva novamente, desta vez com um caso base:

function contagemRegressiva(i) {
    console.log(i)  
    if (i <= 1) {  // caso base
        return;
    } else {     // caso recursivo
        contagemRegressiva(i - 1);
    }
}

contagemRegressiva(5); // Essa é a chamada inicial da função.

Pode não ser óbvio o que está acontecendo nessa função. Vou explicar o que acontece quando se executa a função contagemRegressiva passando "5" como argumento.

Começamos imprimindo o número 5 no console utilizando console.log. Como cinco não é menor ou igual a um, vamos para o bloco else. Lá, invocamos novamente a função contagemRegressiva com o número quatro (5-1=4).

Imprimimos o número 4. Novamente, i não é menor ou igual a um, então vamos para o bloco else e invocamos a função contagemRegressiva novamente com o argumento 3. Esse processo continua até i ser igual a um. Quando isso acontecer, imprimimos o número um  e então i será menor ou igual a um. Finalmente chegamos à declaração de retorno, então encerramos o laço e saímos da função.

Call stack

Funções recursivas utilizam algo chamado "call stack" (ou "pilha de chamadas", em português). Quando um programa invoca uma função, essa função vai para o topo dessa pilha. Essa estrutura é similar à uma pilha de livros. Você adiciona livros na pilha um de cada vez. Então quando você quer retirar um livro da pilha, você sempre tira primeiro o livro do topo.

Vou mostrar a pilha de chamadas em ação com a função fatorial. A expressão fatorial(5) é escrita como 5! e é definida assim: 5! = 5 * 4 * 3 * 2 * 1. Aqui está uma função recursiva para calcular o fatorial de um número.

function fatorial(x) {
    if (x == 1) {
        return 1;
    } else {
        return x * fatorial(x-1);
    }
}

Agora, vamos ver o que acontece se você chamar fatorial(3). A ilustração abaixo mostra como a pilha de chamada (call stack) funciona, linha por linha. A chamada mais ao topo da pilha mostra qual chamada de fatorial (no exemplo em inglês, fact) está sendo executada no momento.

Note como cada chamada de fatorial tem sua própria cópia de x. Isso é muito importante para fazer com que a recursão funcione. Você não pode acessar a cópia de x de uma função diferente.

Já encontrou a chave?

Vamos voltar brevemente ao exemplo original sobre procurar a chave nas caixas aninhadas. Lembre-se, o primeiro método foi iterativo utilizando um laço while. Com aquele método, você primeiro alinha as caixas e depois procura em cada uma delas, assim você sempre sabe em quais caixas você ainda precisa procurar.

Essa abordagem, porém, não existe no método recursivo. Como seu algoritmo sabe em quais caixas você ainda precisa procurar? A "pilha de caixas" é salva na stack. Essa stack consiste em chamadas de funções "meio completas", cada uma com suas listas "meio completas" para serem verificadas. A stack gerencia toda essa pilha para você!

Graças à recursão, você pode finalmente encontrar a chave e pegar sua camisa!

Você também pode assistir esse vídeo (em inglês) de 5 minutos sobre recursão. Isso vai ajudar a reforçar esses conceitos de recursão.

Conclusão

Espero que este artigo tenha trazido mais clareza sobre recursão na programação. Este artigo é baseado em meu novo curso na Manning Publications chamado Algorithms in Motion (Algoritmos em movimento). O curso (bem como este artigo) é baseado no incrível livro Entendendo algoritmos, de Aditya Bhargava. Foi ele quem desenhou todas as ilustrações deste artigo.

Se você aprende melhor lendo livros, adquira o livro! Se você aprende melhor assistindo vídeos, considere adquirir meu curso (em inglês).

Tenha 39% de desconto no meu curso usando o código '39carnes'!

Por fim, para realmente entender recursão, leia este artigo de novo!

Nota da tradução: o artigo a seguir foi escrito quando o React estava em sua versão 16.7.0. No momento da tradução, ele se encontra em sua versão 18.2.0 e houve muitas mudanças no comportamento dos componentes – em especial, com a questão de roteamento. Caso deseje realizar o processo tal e qual ele está neste artigo, sugerimos a instalação da versão 16.7.0 do React para seguir o passo a passo. Para isso, use o comando npm install react@16.7.0.

Você já se perguntou como as aplicações em tempo real são criadas? Já percebeu a importância e os casos de uso de aplicações em tempo real?

Se você está curioso sobre as perguntas acima e precisa de respostas, então este artigo é para você.

Primeiro, vamos identificar alguns casos de uso que precisam de aplicações em tempo real:

1. Obter atualizações de localização do seu táxi em um mapa de uma aplicação de reserva de táxi.
2. Receba novas mensagens instantaneamente em sua aplicação de bate-papo favorito.
3. Atualização de informações sobre pedidos de comida para a cozinha de seu restaurante favorito.

Todos esses são cenários comuns do nosso dia a dia, em que não podemos tolerar um atraso na atualização das informações e, portanto, precisamos de comunicação em tempo real.

Tecnologias que podem ser usadas para comunicação em tempo real são:

1. Short Polling: AJAX, cria tráfego intenso.
2. Long Polling: Igual ao AJAX, mas o servidor retém a resposta até que tenha uma atualização. Depois de recebê-la, o client envia outra solicitação e precisa que o cabeçalho adicional seja percorrido para frente e para trás, causando sobrecarga adicional.
3. Web Sockets: possibilitam a abertura de comunicação interativa entre o client e o servidor. É possível enviar uma solicitação para o servidor e receber respostas orientadas por eventos sem consultar o servidor para obter uma resposta, o que torna os Web Sockets a melhor opção para o nosso caso de uso.

Informações mais detalhadas sobre as três tecnologias acima podem ser lidas aqui (texto em inglês).

Vamos aprender a criar uma aplicação em tempo real, abordando o seguinte cenário: imagine que você está sentado em seu restaurante favorito e tem um menu digital. Você faz o pedido e a cozinha é atualizada sobre ele em tempo real. Quando a cozinha termina de fazer o pedido, ela também o atualiza em tempo real.

Características detalhadas:

1. Realizar o pedido: interface para selecionar a quantidade e fazer o pedido de um item alimentar selecionado para a cozinha.
2. Cozinha: interface que pode ser aberta em várias cozinhas e atualiza em tempo real os chefs e cozinheiros com relação ao total de pedidos criados e à quantidade prevista de itens alimentícios, dando a eles a flexibilidade de atualizá-los. Também possui uma funcionalidade para baixar o relatório na forma de uma planilha do Excel.
3. Mudança prevista: interface para atualizar a quantidade prevista de itens alimentares.

Para uma melhor compreensão, abra-o em diferentes abas/dispositivos ao mesmo tempo para ver a alteração dos dados em tempo real.

O código-fonte está aqui. Sinta-se à vontade para criar algo inovador/útil com base nele.

Então, vamos começar.

Stack de tecnologias:

Front-end: React.js, Reactstrap, Socket.io

Back-end: Node.js (Express), MongoDB, Socket.io

Estrutura de pastas:

/*
Vá para o diretório raiz no código-fonte e encontre os arquivos mencionados abaixo. Essa arquitetura ajuda a criar uma grande aplicação modular.
*/
backend-my-app/ /* Código do back-end da aplicação */
 server.js       /* O código do soquete e do back-end fica aqui*/
 build/      /* Opcional para a implementação da build do front-end */ 
 package.json /* Dependências do back-end */
 ...
public/
src/  /*      Código-fonte do front-end      */
 global/      /*   Componentes usados em todos os lugares   */
  header.css
  header.js     
 main/           
  Kitchen.js
  PlaceOrder.js
  UpdatePredicted.js
 App.js   /* Lógica de roteamento e parte de montagem dos componentes */
package.json /* Dependências do front-end */ 
 ............

Explicação do código-fonte:

Front-end:

git clone https://github.com/honey93/OrderKitchen.git
cd OrderKitchen
npm install
npm start

Pacotes utilizados:

1. Reactstrap: componentes do bootstrap 4 fáceis de usar.
2. Socket.io: o Socket.io é uma biblioteca que permite a comunicação em tempo real, bidirecional e baseada em eventos entre o navegador e o servidor.
3. react-html-table-to-excel: fornece uma geração de arquivos Excel (.xls) no lado do client a partir de um elemento de tabela HTML.
4. react-router-dom: vinculações do DOM para o React Router. Ele consiste em vários componentes importantes, como BrowserRouter, usado quando há um servidor para lidar com solicitações dinâmicas, Switch, Route etc.

Componente App

Caminho: src/App.js

Este componente contém a lógica de roteamento principal do front-end. Esse arquivo é usado em src/index.js dentro do módulo Browser Router. O código abaixo demonstra uma das abordagens para manter sua aplicação modular.

import React, { Component } from "react";
import "./App.css";
import { Header } from "./global/header";
import { Switch, Route } from "react-router-dom";
import PlaceOrder from "./main/PlaceOrder";
import UpdatePredicted from "./main/UpdatePredicted";
import Kitchen from "./main/Kitchen";
/*O componente <Route> é a parte principal do React Router. Em qualquer lugar em que você queira renderizar apenas o conteúdo com base no nome do caminho do local, você deve usar um elemento <Route>. */
/* O componente Route espera uma propriedade de caminho, que é uma cadeia de caracteres que descreve o nome do caminho ao qual a rota corresponde */
/* O <Switch> iterará as rotas e renderizará apenas a primeira que corresponder ao nome do caminho atual */
class App extends Component {
  render() {
    return (
      <div className="App">
        <Header />
        <Switch>
          <Route exact path="/" component={PlaceOrder} />
          <Route path="/updatepredicted" component={UpdatePredicted} />
          <Route path="/kitchen" component={Kitchen} />
        </Switch>
      </div>
    );
  }
}
export default App;

Componente do cabeçalho

Caminho: src/global/header.js

Este componente será comum e usado em todas as seções, como Realizar Pedido (em inglês, Place Order), Mudança Prevista (em inglês, Change Predicted), Cozinha (em inglês, Kitchen). Essa abordagem ajuda a evitar a duplicação de código e mantém a aplicação modular.

import React, { Component } from "react";
import { NavLink } from "react-router-dom";
import socketIOClient from "socket.io-client";
import "./header.css";
// O cabeçalho cria links que podem ser usados para navegar
// entre as rotas.
var socket;
class Header extends Component {
/* Cria um client do Socket e o exporta no final para ser usado nos componentes Place Order, Kitchen etc. */
  constructor() {
    super();
    this.state = {
      endpoint: 'http://localhost:3001/'
    };
socket = socketIOClient(this.state.endpoint);
  }
render() {
    return (
      <header>
        <nav>
          <ul className="NavClass">
            <li>
              <NavLink exact to="/">
                Place Order
              </NavLink>
            </li>
            <li>
              <NavLink to="/updatepredicted">Change Predicted </NavLink>
            </li>
            <li>
              <NavLink to="/kitchen"> Kitchen </NavLink>
            </li  >
          </ul>
        </nav>
      </header>
    );
  }
}
export { Header, socket };

Componente da cozinha

Caminho: src/main/Kitchen.js

A lógica da UI da tela da Cozinha e o código html residem neste componente:

import React, { Component } from "react";
import { Button, Table, Container } from "reactstrap";
import { socket } from "../global/header";
import ReactHTMLTableToExcel from "react-html-table-to-excel";
class Kitchen extends Component {
  constructor() {
    super();
    this.state = {
      food_data: []
      // é onde estamos nos conectando com os soquetes,
    };
  }
getData = foodItems => {
    console.log(foodItems);
    this.setState({ food_data: foodItems });
  };
changeData = () => socket.emit("initial_data");
/* Assim que o componente for montado, ou seja, no método componentDidMount, dispara o evento initial_data para obter os dados para inicializar o Kitchen Dashboard */
/* Adiciona o ouvinte change_data para ouvir todas as alterações feitas pelos componentes Fazer pedido e Pedido previsto */ 
componentDidMount() {
    var state_current = this;
    socket.emit("initial_data");
    socket.on("get_data", this.getData);
    socket.on("change_data", this.changeData);
  }

/* Remove o ouvinte antes de desmontar o componente para evitar a adição de vários ouvintes no momento da revisão */
componentWillUnmount() {
    socket.off("get_data");
    socket.off("change_data");
  }
/* Quando Done (Pronto) é clicado, essa função é chamada e o evento mark_done é emitido, o qual é ouvido no back-end, explicado mais adiante*/
markDone = id => {
    // console.log(predicted_details);
    socket.emit("mark_done", id);
  };
getFoodData() {
    return this.state.food_data.map(food => {
      return (
        <tr key={food._id}>
          <td> {food.name} </td>
          <td> {food.ordQty} </td>
          <td> {food.prodQty} </td>
          <td> {food.predQty} </td>
          <td>
            <button onClick={() => this.markDone(food._id)}>Done</button>
          </td>
        </tr>
      );
    });
  }
render() {
    return (
      <Container>
        <h2 className="h2Class">Kitchen Area</h2>
        <ReactHTMLTableToExcel
          id="test-table-xls-button"
          className="download-table-xls-button"
          table="table-to-xls"
          filename="tablexls"
          sheet="tablexls"
          buttonText="Download as XLS"
        />
<Table striped id="table-to-xls">
          <thead>
            <tr>
              <th>Name</th>
              <th>Quantity</th>
              <th>Created Till Now</th>
              <th>Predicted</th>
              <th>Status</th>
            </tr>
          </thead>
          <tbody>{this.getFoodData()}</tbody>
        </Table>
      </Container>
    );
  }
}
export default Kitchen;

Componente Fazer Pedido

Caminho: src/main/PlaceOrder.js

import React, { Component } from "react";
import { Button, Table, Container } from "reactstrap";
import { socket } from "../global/header";
class PlaceOrder extends Component {
  constructor() {
    super();
    this.state = {
      food_data: []
      // é onde estamos nos conectando com os soquetes,
    };
  }
getData = foodItems => {
    console.log(foodItems);
    foodItems = foodItems.map(food => {
      food.order = 0;
return food;
    });
    this.setState({ food_data: foodItems });
  };
componentDidMount() {
    socket.emit("initial_data");
    var state_current = this;
    socket.on("get_data", state_current.getData);
  }
componentWillUnmount() {
    socket.off("get_data", this.getData);
  }
// Função para fazer o pedido.
sendOrder = id => {
    var order_details;
    this.state.food_data.map(food => {
      if (food._id == id) {
        order_details = food;
      }
      return food;
    });
    console.log(order_details);
    socket.emit("putOrder", order_details);
    var new_array = this.state.food_data.map(food => {
      food.order = 0;
      return food;
    });
    this.setState({ food_data: new_array });
  };
// Altera a quantidade no estado que é emitido para o back-end no momento da realização do pedido.
changeQuantity = (event, foodid) => {
    if (parseInt(event.target.value) < 0) {
      event.target.value = 0;
    }
    var new_array = this.state.food_data.map(food => {
      if (food._id == foodid) {
        food.order = parseInt(event.target.value);
      }
      return food;
    });
    this.setState({ food_data: new_array });
  };
// Obtém os dados iniciais
getFoodData() {
    return this.state.food_data.map(food => {
      return (
        <tr key={food._id}>
          <td> {food.name} </td>
          <td>
            <input
              onChange={e => this.changeQuantity(e, food._id)}
              value={food.order}
              type="number"
              placeholder="Quantity"
            />
          </td>
          <td>
            <button onClick={() => this.sendOrder(food._id)}>Order</button>
          </td>
        </tr>
      );
    });
  }
render() {
    return (
      <Container>
        <h2 className="h2Class">Order Menu</h2>
        <Table striped>
          <thead>
            <tr>
              <th>Product</th>
              <th>Quantity</th>
              <th>Order</th>
            </tr>
          </thead>
          <tbody>{this.getFoodData()}</tbody>
        </Table>
      </Container>
    );
  }
}
export default PlaceOrder;

Mais uma seção chamada Atualizar caminho previsto (em inglês, Update Predicted Path): src/main/UpdatePredicted.js, semelhante à seção acima, está no repositório de código.

Back-end

Iniciando o back-end:

cd backend-my-app
npm install
node server.js

Pacotes utilizados:

1. Monk: uma pequena camada que oferece melhorias simples, mas substanciais, na usabilidade do uso do MongoDB no Node.JS.
2. Socket.io: o Socket.io é uma biblioteca que permite a comunicação em tempo real, bidirecional e baseada em eventos entre o navegador e o servidor.

3. Express: estrutura da Web rápida e minimalista para o node.

Código principal

Caminho: backend-my-app/server.js

const express = require("express");
const http = require("http");
const socketIO = require("socket.io");
// Cadeia de conexão do banco de dados MongoDb hospedado no Mlab ou localmente
var connection_string = "**********";
// O nome da coleção deve ser "FoodItems", pois há apenas uma coleção no momento.
// O formato do documento deve ser o mencionado abaixo, pelo menos um desses documentos:
// {
//     "_id": {
//         "$oid": "5c0a1bdfe7179a6ca0844567"
//     },
//     "name": "Veg Roll",
//     "predQty": 100,
//     "prodQty": 295,
//     "ordQty": 1
// }
const db = require("monk")(connection_string);
const collection_foodItems = db.get("FoodItems");
// nossa porta do localhost
const port = process.env.PORT || 3000;
const app = express();
// nossa instância de servidor
const server = http.createServer(app);
// Isso cria nosso soquete usando a instância do servidor
const io = socketIO(server);
io.on("connection", socket => {
// console.log("New client connected" + socket.id);
// console.log(socket);
// Retornando os dados iniciais do menu de comida da coleção FoodItems
  socket.on("initial_data", () => {
    collection_foodItems.find({}).then(docs => {
      io.sockets.emit("get_data", docs);
    });
  });
// A realização do pedido é chamada em /src/main/PlaceOrder.js do Frontend
  socket.on("putOrder", order => {
    collection_foodItems
      .update({ _id: order._id }, { $inc: { ordQty: order.order } })
      .then(updatedDoc => {
        // Emissão de evento para atualizar a Cozinha aberta nos dispositivos com os valores do pedido em tempo real
        io.sockets.emit("change_data");
      });
  });
// Conclusão do pedido, chamada a partir de /src/main/Kitchen.js
  socket.on("mark_done", id => {
    collection_foodItems
      .update({ _id: id }, { $inc: { ordQty: -1, prodQty: 1 } })
      .then(updatedDoc => {
        // Atualizar as diferentes áreas da cozinha com o status atual.
        io.sockets.emit("change_data");
      });
  });

// Funcionalidade para alterar o valor da quantidade prevista, chamada de /src/main/UpdatePredicted.js
  socket.on("ChangePred", predicted_data => {
    collection_foodItems
      .update(
        { _id: predicted_data._id },
        { $set: { predQty: predicted_data.predQty } }
      )
      .then(updatedDoc => {
        // Evento de soquete para atualizar a quantidade prevista na cozinha
        io.sockets.emit("change_data");
      });
  });

// A desconexão é acionada quando um cliente deixa o servidor
  socket.on("disconnect", () => {
    console.log("user disconnected");
  });
});
/* As etapas mencionadas abaixo são executadas para retornar a compilação do Front-end do create-react-app da pasta de compilação do Back-end.*/
app.use(express.static("build"));
app.use("/kitchen", express.static("build"));
app.use("/updatepredicted", express.static("build"));
server.listen(port, () => console.log(`Listening on port ${port}`));

Banco de dados: MongoDB

Mlab: banco de dados como um serviço para o MongoDB

Nome da coleção: FoodItems

Formato do documento: é necessário pelo menos um documento na coleção FoodItems com o formato mencionado abaixo.

{
"name": "Veg Roll",  // Nome do alimento
"predQty": 100,  // Quantidade prevista
"prodQty": 295,  // Quantidade produzida
"ordQty": 1   // Quantidade total do pedido
}

Espero que você tenha entendido como criar uma aplicação modular em tempo real usando a pilha MERN. Se você achou útil, deixe uma estrela no repositório do GitHub do projeto e compartilhe com seus amigos também.