MERN stack, o que é?

Você já ouviu falar no termo MERN stack?

Por definição, MERN significa:

  • (M) MongoDB;
  • (E) ExpressJs;
  • (R) React;
  • (N) Node.js;

Ou seja, é chamado de MERN stack o profissional que domina todas essas quatro tecnologias. É uma stack que permite a criação de sites/sistemas completos (back-end e front-end) utilizando JavaScript no lado do Cliente e lado do Servidor. Com isso, o desenvolvedor fica apto a criar sites/sistemas completos, sem precisar conhecer outra tecnologia ou utilizar outra habilidade. O MERN stack representa uma aliança das tecnologias mais poderosas do mercado, pois oferece a possibilidade de dominar a parte de algoritmos e lógica utilizada no back-end, juntamente com os componentes de design, UX e animações que o front-end é responsável. Isso traz uma competência para apenas um desenvolvedor, onde, normalmente, seriam exigidos dois.

Atualmente, com a alta utilização do JavaScript, o MERN stack é um dos profissionais mais requisitados no mercado.

E quais são as tecnologias utilizadas?

  • MongoDB: É um banco de dados não-relacional. É utilizado na MERN stack pois os dados são manipulados no formato JSON.
  • Node.js: O Node.js trabalha com JavaScript, ou seja, um desenvolvedor que conheça bem a linguagem JavaScript não terá dificuldades em aprender Node.js.
  • Express.js: Um middleware dedicado ao gerenciamento de apps web complexos, é usado para criação de API REST. A API REST corresponde a um site que recuperará dados por meio de solicitações HTTP.
  • React.js: Responsável pelo front-end, é uma biblioteca JavaScript desenvolvida e utilizada pelo Facebook. Responsável por fazer, de maneira extremamente rápida, animações, uploads e transições.

Assim como a MERN stack, também temos a MEAN stack onde o React não é utilizado, mas sim o Angular, alterando somente a biblioteca/framework utilizado no Front-end. Utilizando o Vue.js, teremos o MEVN stack, ou seja, são muitas as opções para quem quer dominar Front e Back-end utilizando JavaScript!.

Dominando essas tecnologias, você é um desenvolvedor MERN/MEAN/MEVN stack!

Gostou deste artigo? Comente abaixo!

Referências:

 

Criando Pokedéx com React – Parte 4

Na parte 4 do nosso tutorial, vamos fazer o componente DetailView. Você poderá conferir a parte 3 no link: https://www.mundojs.com.br/2020/04/03/criando-pokedex-com-react-parte-3/

DetailView:

Vá para a sua pasta componentes e crie um arquivo chamado DetailView.js. Também vá para a pasta styles e crie o arquivo DetailView.css.

Abra o DetailView.js e siga esses passos:

  1. Importe o React;
  2. Importe o DetailView css;
  3. Cria uma nova função chamada DetailView;
  4. Retorne uma section vazia com className=”detail-view”;
  5. Adicione elementos para mostrar os dados e a imagem;
  6. Exporte a nova função criada.
import React from 'react';
import './styles/DetailView.css';

const DetailView = () => {
    return (
        <section className="detail-view">
            <img className='sprite-image' />
            <div className='data-wrapper'>
                <h1 className='data-name'></h1>
                <p className="data-char"></p>
            </div>
        </section>
    )
}

export default DetailView;

No seu arquivo DetailView.css, adicione o seguinte código:

.detail-view {
    width: 50%;
    height: 100%;
    padding: 10px;
    background-color: #df095e;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.sprite-image {
    width: 80%;
    height: 150px;
    margin: 10px auto;
    background-color: #585858;
    border: 15px solid #DEDEDE;
    color: #585858;
}

.data-wrapper {
    width: 80%;
    height: 110px;
    padding: 10px;
    margin: 0 auto;
    background-color: #585858;
    border-radius: 5px;
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.22);
    color: #FFF;
}

.data-name {
    margin: 0 0 5px;
}

.data-char {
    font-size: 10px;
}
  1. O sprite-image conterá o Sprite Pokemón;
  2. A classe data-chat refere-se às características do Pokemón (id, nome, tipo).

No App.js, importe o componente DetailView. Renderize-o colocando o componente DetailView como uma tag html dentro do elemento pai.

import React, { Component } from 'react';
import PokeList from './PokeList';
import DetailView from './DetailView';
import './styles/App.css';
class App extends Component {
  constructor() {
    super();
    this.state = {};
  }

  render() {
    return (
      <div className = "App">
        <PokeList />
        <DetailView />
      </div>
    );
  }
}

export default App;

E este será o resultado:

Está gostando desta sequência de artigos? Comente abaixo!

Referências: https://blog.cloudboost.io/lets-build-a-pokedex-with-react-part-4-72afd23905a6

Exercício fácil – recursão com JavaScript

Neste exercício, veremos antes uma função que utiliza recursão. Essa função retorna um array de números inteiros começando com 1 pelo número passado para a função.

Teremos um exemplo para você tirar uma base de como resolver o exercício.

No nosso caso base, a função recursiva não precisa mais se chamar, sendo um caso simples em que o valor de retorno já é conhecido. Também haverá uma chamada recursiva que executa a função original com os argumentos diferentes.

No nosso exemplo base, temos uma função recursiva que retorna um vetor que contém os números de 1 a n. Então, se passarmos um valor n, ele deverá adicionar valores ao vetor até chegar a esse valor. Por exemplo: n = 10. O vetor resultante deverá ser [1, 2, 3, 4, 5, 6, 7, 8, 9, 10}. Se o valor de n for menor que 1, retornará um vetor vazio:

function contador (n){
    if (n < 1){
        return [];
    } else {
        let contadorArray = contador (n - 1);
        contadorArray.push(n);
        return contadorArray;
    }
}

console.log(contador(20));
/* [
   1,  2,  3,  4,  5,  6,  7,
   8,  9, 10, 11, 12, 13, 14,
  15, 16, 17, 18, 19, 20
] */

No começo, isso parece contra-intuitivo, com o valor de n diminuindo, mas os valores do vetor aumentando. Isso acontece pois o envio ocorre por último, após o retorno da chamada recursiva. Quando n é inserido, a contagem (n-1) já foi avaliada e retornada [1, 2, …, n-1].

Vamos ao exercício:

No nosso exercício, utilizaremos a recursão para retornar um array que contém os números inteiros que vão de n a 1, com base no parâmetro n. Se n for menor que 1, retorna um array vazio, senão, retorna os valores de n a 1. Exemplo:

n = 10;

[10, 9, 8, 7, 6, 5, 4, 3, 2, 1].

Use o exemplo anterior como base para este exercício. Não use o método push!

Você pode realizar o download da resolução deste exercício aqui:

[download id=”3715″]

Novidades Vue 3

Entre muitas novidades, o Vue 3 está disponibilizando uma nova API para criação de componentes. Ela não introduz novos conceitos no Vue, mas expõe os principais recursos, como criar e observar os estados reativos como funções independentes. Isso é extremamente útil para desenvolvedores de todos os níveis.

Options API e Composition API

No Vue 2, os componentes criados com a Options API são baseados em objetos. No Vue 3, foi adicionado um conjunto de APIs, chamado Composition API que é baseado em funções. Isso é principalmente bom para resolver dois problemas que eram encontrados na utilização do Vue em projetos muito grandes.

Em componentes grandes que encapsulam várias tarefas lógicas, você deseja agrupar código por recurso, mas a API Options dividia esse código (entre hooks de ciclo de vida etc.) afetando negativamente a legibilidade do código. Em segundo lugar, você deseja reutilizar a lógica em projetos de larga escala e, no Vue 2, soluções como mixins não tratam muito bem esse problema.

O Vue 3 veio para resolver esses problemas com uma nova API. Essa API coexistirá com a Options API, não substituindo-a. Você continuará criando componentes da maneira que está acostumado, sem encontrar nenhum problema. Mas você poderá também criar com a Composition API, que fornece recursos mais flexíveis de organização e reutilização de código e lógica. A nova API pensou em levar o Vue adiante como uma estrutura, reduzindo a visão de que o Vue opera “magicamente” por trás dos panos.

Composition API

A Composition API já está disponível como um plug-in para você testá-la.

No Vue 2, a reatividade foi alcançada com o uso de getters e setters do Object.defineProperty, causando algumas limitações. No Vue 3, a reatividade é realizada por meio de proxies, um recurso introduzido no JavaScript ES6.

O Vue oferece APIs independentes que permitem criar, observar e reagir a alterações de estado.

Você pode criar um objeto da seguinte maneira:

import { reactive } from 'vue';
const state = reactive ({ count: 0 });

Você terá acesso às APIs que permitirão injetar hooks dinamicamente em uma instância do Vue. Os métodos de registro do ciclo de vida podem ser utilizados no método setup(), que é o ponto de entrada em que todas as funções de composição são chamadas. Por exemplo:

import { onMounted } from 'vue';

export default {
    setup() {
        onMounted(() => {
            console.log("O componente está montado.");
        })
    }
}

As funções que usam essas APIs podem ser importadas para um componente, permitindo que o componente execute várias tarefas lógicas com código reutilizável e legível.

Gostou desta notícia? Confira as mais novas funções no link de referência!

Referência: https://alligator.io/vuejs/whats-coming-in-vue-3/

Baixando múltiplas imagens com JavaScript

Olá pessoal, neste artigo, ensinarei a baixar múltiplas imagens de um site, usando um algoritmo para busca e download das imagens. Utilizarei o navegador Google Chrome neste exercício.

Vamos começar!

Primeiramente, precisamos abrir o console do nosso navegador. Podemos abrí-lo clicando f12 e acessando o console. Vamos utilizar o site https://www.mundojs.com.br/ para realizar o teste de download das imagens.

Com o site acessado e o console aberto, vamos começar criando uma variável chamada images. Esta variável receberá um querySelectorAll de todas as tags “img”.

let images = document.querySelectorAll('img');

Pronto, já temos todas as tags “img” na nossa variável images. Agora, precisamos percorrer esta lista de tags para realizarmos o download. Vamos utilizar o for…of para isso:

Caso você não conheça o laço de repetição for…of, recomendo a leitura deste artigo, com explicação em vídeo sobre o for…of.

for (let i of images){
    
}

Dentro do nosso laço for…of, precisamos criar um elemento “a”. Esse elemento receberá o atributo src da imagem.

let a = document.createElement('a');
a.href = i.src;

E iremos mostrar o elemento no console.

console.log(i);

Feito isso, criaremos uma pop-up de download. O browser fará o download de cada imagem em cada link do elemento i.

a.download = i.src;

Feito isso, adicionaremos o nosso elemento “a” ao body, utilizando o método appendChild():

document.body.appendChild(a);

E adicionaremos o evento click() ao elemento a, para, então, desanexar o elemento “a” do body, utilizando o método removeChild():

a.click();
document.body.removeChild(a);

E com isso, está pronto o nosso algoritmo para download de múltiplas imagens. O código completo é este:

let images = document.querySelectorAll('img');

for (let i of images){
    let a = document.createElement('a');
    a.href = i.src;
    console.log(i);
    a.download = i.src;
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
}

Abra o site do MundoJS, e insira este código no console. Aceite os múltiplos downloads no navegador e o código irá baixar as fotos disponíveis com a tag “img”.

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

Criando Pokedéx com React – Parte 2

Na parte 2 do nosso projeto, construiremos o layout básico do nosso projeto. Você precisará da Parte 1 para dar sequência neste artigo.

Wireframe:

O React tem a ver com construção de componentes. Então, a melhor maneira de fazer isso é criar wireframes para mapeamento dos componentes a serem construídos. O nosso aplicativo principal terá dois componentes: a visualização do Pokemón e a visualização dos detalhes.

O Pokemon view conterá um componente chamado PokeList que envolverá 151 PokeCélulas (da primeira geração de Pokemón). Ao clicar em uma PokeCélula, a visualização dos detalhes mostrará as informações e a sprite do Pokemón selecionado.

Tipos de componentes:

O React possui 2 tipos básicos de componentes: stateful (com estado) e stateless (sem estado). Os componentes Stateful têm seu próprio estado. No nosso aplicativo, o componente APP será Stateful, pois manterá o estado dos dados do Pokemón.

Vamos construir!

Abra o App.js e exclua todo o conteúdo interno. A primeira etapa é importar o pacote React e desconstruir a classe Component.

import React, { Component } from 'react';

Agora, precisamos criar um novo aplicativo que estenda o Componente. Todos os componentes Stateful requerem dois métodos principais:

  1. Construtor: onde inicializamos o nosso estado;
  2. Render: onde escrevemos nosso jsx.

No construtor, precisamos chamar a função super(), pois estamos estendendo da classe componente. Além disso, precisamos declarar nosso estado inicial. Por enquanto, será um objeto vazio.

import React, { Component } from 'react';
class App extends Component {
  constructor() {
    super();
    this.state = {};
  }
}

Adicionaremos o método render. Ele retorna a sintaxe jsx, que é uma mistura de JavaScript e HTML. O método render só pode retornar um elemento, portanto, criaremos um elemento pai e aninharemos filhos dentro dele. Se estamos retornando um elemento aninhado, envolveremos ele entre parênteses.

import React, { Component } from 'react';
class App extends Component {
  constructor() {
    super();
    this.state = {};
  }

  render() {
    return (
      <div className = "App">

      </div>
    );
  }
}

Feito isso, importaremos nossa folha de estilo na parte superior para adicionar o CSS do nosso componente e exportar toda a classe para que possamos usá-la em outros arquivos.

import React, { Component } from 'react';
import './styles/App.css'
class App extends Component {
  constructor() {
    super();
    this.state = {};
  }

  render() {
    return (
      <div className = "App">

      </div>
    );
  }
}

export default App;

Abra o seu arquivo App.css e adicione o seguinte css:

.App {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 650px;
    height: 400px;
    padding-left: 10px;
    margin: 50px auto;
    background-color: #FE0065;
    border-radius: 10px;
    box-shadow: 0 14px 45px rgba(0, 0, 0, 0.22), 0 18px 45px rgba(0, 0, 0, 0.22);
}

 

  1. Usamos o display: flex para separar as duas visualizações que construiremos;
  2. Fixamos a largura e altura para a tela do desktop;
  3. Aplicamos margem superior e inferior para separar a vista dos cantos e esquerda e direita automaticamente para coloca-los no meio;
  4. Aplicamos cor ao fundo.

Com isso, concluímos a Parte 2! Até a próxima!

Referências: https://blog.cloudboost.io/lets-build-a-pokedex-with-react-part-2-3d119b07f9e0

O que há de novo no ES2020?

As propostas do ECMAScript estão crescendo e dando origem a novas implementações. Portanto, você já consegue acessar os novos recursos do ECMAScript resumidos no ES2020. E quais são eles?

Dynamic Import

O Dynamic Import é um dos recursos mais interessantes do ES2020. É um recurso que você pode usar com carregamento lento. Antes, se você quisesse importar um módulo em JavaScript, teria algo como:

import Math from ('./Math.js');
const Math = new Math;
Math.multiply();

Nesse caso, temos uma maneira estática de importar o módulo Math e não poderíamos atrasar a carga se quiséssemos que esse módulo dependesse de uma ação do usuário. Graças ao ES2020, você pode usar o carregamento lento sem um webpack. Você pode utilizar a importação como uma função em qualquer lugar do seu código, usando uma função assíncrona que retorna uma Promise:

import Math from ('./Math.js');
.then ((Math) => {
    const Math = new Math;
    Math.multiply();
});

BigInt

Representa um número maior que 2 ^ 53-1 no JavaScript pode ser um problema, pois este é o maior número que o objeto Number pode representar. O BigInt é um objeto que ajuda a representar números maiores que esse. Ele é interessante, por exemplo, no caso de uma multiplicação que gere um número maior que isso. Como o Int já indica, você deve utilizar números inteiros, e não flutuantes.

const bigNumber = BigInt(90000880880909);

Promise.allSettled

O método Promise.allSettled() retorna uma promise que é resolvida depois de todas as promises retornarem resolved ou rejected, com um vetor de objetos descrevendo cada resultado da promise. O Promise.allSettled() retorna algo como Promise.all(). Mas o Promise.all() aguarda que todas as promises sejam cumpridas ou qualquer promise seja rejeitada.

const promise1 = Promise.resolve(3);
const promise2 = new Promise((resolve, reject)=>
setTimeout (reject, 100, 'foo'));
const promise = [promise1, promise2];

Promise.allSettled(promises).
 then((results)=> results.foreach((result)=>
 console.log(result.status)));

globalThis:

A propriedade globalThis contém o valor global de this com o contexto do objeto global. Graças a isso, você não precisa diferenciar se o código está sendo executado em um navegador (this) ou no Node (global):

function canMakeHTTPrequest(){
    return typeof globalThis.XMLHttpRequest === 'function';
}

console.log(canMakeHTTPrequest());

Gostou desta notícia? Comente abaixo!

Referência: https://www.ma-no.org/en/programming/javascript/javascript-what-s-new-in-es2020

Criando Pokedéx com React – Parte 3

Começando a parte 3 do nosso tutorial, criaremos os primeiros componentes Stateless. Configuraremos o PokeList e renderizaremos todas as PokeCells com seus sprites. Vamos começar!

PokeList:

Na pasta componentes, criaremos um arquivo chamado PokeList.js e, na pasta styles, criaremos um arquivo chamado PokeList.css.

Os componentes stateless têm uma configuração mais curta. Esses tipos de componentes são funções JavaScript que retornam jsx.

No seu arquivo PokeList.js, você irá:

  1. Importar o react;
  2. Importar o pokelist.css;
  3. Criar uma função chamada PokeList;
  4. Retornar uma seção vazia com a className “poke-list”;
  5. Exportar a função recém-criada.
import React from 'react';
import './styles/PokeList.css';

const PokeList = () => {
    return (
        <section className="poke-list">

        </section>
    )
}
  

Vá para o PokeList.css e adicione o seguinte css:

.poke-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    width: 50%;
    height: 80%;
    padding: 10px;
    margin-right: 10px;
    background-color: #BFF9FF;
    box-shadow: inset 0 0 20px rgba (0, 0, 0, 0.5);
    overflow: scroll;
}

Usamos o display: flex para tirar proveito da funcionalidade de quebra automática. Definimos a largura para 50% para preencher a metade esquerda do componente do aplicativo e também incluímos rolagem de estouro porque nem todas as PokeCells serão exibidas de uma só vez.

Agora, precisamos voltar ao nosso App.js e importar o componente PokeList. Para renderizá-lo, colocaremos o componente PokeList como uma tag html dentro do elemento pai. Veja só:

PokeCell:

Construiremos um componente PokeCell que funcionará como um modelo para cada um dos 150 Pokémons que renderizaremos no PokeList. Crie um arquivo PokeCell.js na pasta componentes e, na pasta styles, um arquivo PokeCell.css.

No arquivo PokeCell.js:

  1. Importe o React;
  2. Importe o PokeCell.css;
  3. Crie uma nova função chamada PokeCell;
  4. Retorne um botão vazio com o className “poke-cell”;
  5. Exporte a função recém-criada:
import React from 'react';
import './styles/PokeCell.css';

const PokeCell = () => {
    return <button className='poke-cell'></button>
};

export default PokeCell;

Vá para o arquivo PokeCell.css e adicione o seguinte css:

.poke-cell {
    width: 120px;
    height: 120px;
    margin: 10px;
    background-color: #FFF;
    background-repeat: no-repeat;
    border: none;
    border-radius: 5px;
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.16);
}

Finalmente, importaremos o PokeCell dentro do nosso PokeList.js e renderizaremos algumas células na lista colocando-os dentro do elemento pai como um html.

Sprites e Renderização de Matriz:

Faça o download desses recursos:

Sprites

pokeClasses

A imagem sprites é uma coleção dos primeiros 151 sprites Pokemon. Exibiremos cada Sprite usando o componente PokeCell e algumas propriedades de plano de fundo do CSS (background-image, background-position).

As background-positions podem ser achadas no arquivo pokeClasses.js, que possuem um array de objetos contendo o id e posição de cada Pokemón para cada Sprite.

  1. Dentro do diretório src, insira o arquivo pokeClasses.js;
  2. Cria uma pasta chamada assets dentro deste diretório, e coloque a imagem de sprites dentro da pasta assets.

Dentro do arquivo PokeList.js, importe o pokeClasses:

import React from 'react';
import PokeCell from './PokeCell';
import { pokeClasses } from '../pokeClasses';
import './styles/PokeList.css';

const PokeList = () => {
    return (
        <section className="poke-list">
            <PokeList />
            <PokeList />
            <PokeList />
        </section>
    )
}

export default PokeList;

Precisamos renderizar a lista de todos os 151 PokeCells com os dados corretos neles. No nosso código, crie um array de PokeCells com as informações de cada elemento do array pokeClasses.

Para isso, utilizaremos o array prototype map ao nosso array pokeClasses e, para cada elemento do array, retornará uma tag PokeCell. Em seguida, armazene esse array em uma nova constante chamada cells.

const cells = pokeClasses.map(pokeClass => <PokeCell />)

Vamos usar props para passer o objeto pokeClass para cada PokeCell. Podemos nomear props da maneira que quisermos e passar qualquer tipo de variável (string, número, objeto, função) por eles. Para fazer isso, adicione um novo prop chamado pokeClass dentro da tag PokeCell. Em seguida, atribua a ele o argumento pokeClass do retorno de chamada do map. Sempre que incluirmos JavaScript regular em um jsx, precisamos envolve-lo com chaves:

const cells = pokeClasses.map(pokeClass => <PokeCell pokeClass = {pokeClass}/>)

Cada pokeClass contém um valor de ID, que podemos usar como nosso valor exclusivo da prop. O resultado será:

import React from 'react';
import PokeCell from './PokeCell';
import { pokeClasses } from '../pokeClasses';
import './styles/PokeList.css';

const PokeList = () => {
    const cells = pokeClasses.map(pokeClass => {
        return (
            <PokeCell 
                key = {pokeClass.id}
                pokeClass={pokeClass}
            />
        );
    });

    return (
        <section className="poke-list">

        </section>
    )
}

export default PokeList;

E agora que temos nosso vetor PokeCells, renderizaremos ele colocando a variável cells dentro do elemento pai, envolto em chaves:

import React from 'react';
import PokeCell from './PokeCell';
import { pokeClasses } from '../pokeClasses';
import './styles/PokeList.css';

const PokeList = () => {
    const cells = pokeClasses.map(pokeClass => {
        return (
            <PokeCell 
                key = {pokeClass.id}
                pokeClass={pokeClass}
            />
        );
    });

    return (
        <section className="poke-list">
            {cells}
        </section>
    )
}

export default PokeList;

E a saida será:

Renderizando Sprites:

Agora que passamos o objeto pokeClass para cada PokeCell, usaremos esses dados para determinar a posição de cada Sprite na imagem do Sprite e renderizá-lo no fundo de cada botão.

No seu arquivo PokeCell.js, passaremos props para o PokeCell, precisamos incluir um argumento de props na função PokeCell. Como sabemos que o objeto props contém o objeto pokeClass, podendo desconstruir o argumento props para acessar o objeto pokeClass.

const PokeCell = ({pokeClass}) => {
    const {id, backgroundPosition} = pokeClass;
    
    return <button className='poke-cell'></button>
};

Em seguida, importe a imagem dos sprites:

import sprites from '../assets/sprites.png';

Para adicionar o sprite como uma imagem de plano de fundo, usaremos o estilo embutido no elemento button. Crie um novo objeto de estilos com duas propriedades: backgroundImage e backgroundPosition. Usaremos a função css url:

const style = {backgroundImage: `url (${sprites})`, backgroundPosition};

E ficaria assim o código:

import React from 'react';
import sprites from '../assets/sprites.png';
import './styles/PokeCell.css';
const PokeCell = ({ pokeClass }) => {
  const { id, backgroundPosition } = pokeClass;
  const style = { backgroundImage: `url(${sprites})`, backgroundPosition};

  return <button style={style} className="poke-cell"></button>
};

export default PokeCell;

E assim será a sua saída:

E assim termina a parte 3 da nossa sequência de artigos! Comente abaixo!

Referências: https://blog.cloudboost.io/lets-build-a-pokedex-with-react-part-3-5d0114361424

Buscando dados de Geolocalização com IP-API

Olá pessoal. Neste artigo, irei mostrar como mostrar os dados advindos de um endereço IP utilizando o IP-API. Neste exemplo, iremos utilizar:

  • fetch;
  • async;
  • await.

Vamos lá?

Uma breve explicação sobre fetch:

O método fetch() fornece uma maneira fácil e rápida para buscar informações e recursos de uma forma assíncrona através da rede. Antes, essa funcionalidade era obtida com o XMLHttpRequest. O fetch() difere do jQuery.ajax(), principalmente nos quesitos de: A promise retornada do fetch() não rejeita status de erro HTTP, e só haverá rejeição se houver falha de rede ou impedimento da requisição ser completada e também o fetch() não envia nem recebe cookies do servidor.

Para mais informações sobre o fetch, acesse esse artigo.

Mãos à obra!

Para utilizarmos a IP-API, podemos acessar o site e sua documentação em:

https://ip-api.com/docs/api:json#test, onde é possível realizar testes, acessando os dados de diferentes IPs.

Ao código:

O primeiro passo é criarmos um documento HTML com um elemento <pre id=”json”></pre>:

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>fetch IP API</title>
</head>
<body>
    <pre id="json"></pre>
    <script src="scripts.js"></script>
</body>
</html>

Adicione uma tag script que aponta para um arquivo “scripts.js” (que será criado agora).

Criando o script:

Crie um arquivo scripts.js no seu editor de texto preferido. Com o arquivo criado, iremos começar a escrever uma função assíncrona chamada fetchIpApi(). A estrutura será a seguinte:

async function fetchIpApi(){}

Agora, iremos utilizar o método try…catch para realizar o teste de verificação de funcionamento da API.

  • A instrução try define o bloco de código a ser testado enquanto ele está sendo executado;
  • A instrução catch permite definir um bloco de código a ser executado se ocorrer algum erro no bloco try.
async function fetchIpApi(){
    try{
    } catch(err) {
    }
}

Ok, agora que temos nossos blocos try…catch definidos, iremos criar uma variável response que vai receber um await e o fetch(requisição) da Ip-API. Iremos capturar os dados do IP DNS do Google (8.8.8.8) (Caso você não saiba o que é async/await, leia este artigo)

async function fetchIpApi(){
    try{
        // Criando uma requisição da API
        let response = await fetch('http://ip-api.com/json/8.8.8.8?fields=61439');
    } catch (err){
    }
}

Feita a requisição, precisamos agora de uma resposta desta requisição. Para isso, utilizaremos o método response.json(), que retorna uma promise com o conteúdo transformado em arquivo json. Crie uma variável chamada usuário para isso e a retorne:

async function fetchIpApi(){
    try{
        let response = await fetch('http://ip-api.com/json/8.8.8.8?fields=61439');
        // Crie a variável usuário e pegue a resposta da requisição
        let usuario = await response.json();
        return usuario;
    } catch (err){
        console.log(err);
    }
}

No nosso tratamento de erro, apenas vamos mostrar no console a ocorrência de algum erro.

Agora, para mostrar o nosso arquivo JSON no HTML, iremos utilizar o método .then(), que:

  • Capturará o elemento HTML com id=”json”;
  • Utilizará o innerText para mostrar as informações em tela;
  • Receberá o arquivo formatado, utilizando o JSON.stringify().
fetchIpApi().then(
    // JSON.stringify(dado, undefined, 2) traz o conteúdo formatado!
    dado =>document.getElementById("json").innerText = JSON.stringify(dado, undefined, 2)
);

E esse será o resultado no seu navegador:

O código JavaScript completo:

async function fetchIpApi(){
    try{
        let response = await fetch('http://ip-api.com/json/8.8.8.8?fields=61439');
        let usuario = await response.json();
        return usuario;
    } catch (err){
        console.log(err);
    }
}

fetchIpApi().then(
    dado =>document.getElementById("json").innerText = JSON.stringify(dado, undefined, 2)
);

Gostou deste artigo? Comente abaixo!

Exercício fácil: async e await

Async e await são extensões das promises. Quando uma função assíncrona é chamada, ela retorna uma promise. Uma função assíncrona pode conter uma palavra-chave await, que pausa a execução da função e espera pela resolução da promise passada, retomando a execução após a resolução da promise e retornando o valor resolvido. A proposta das funções async/await é simplificar o uso de promises. Assim como promises são similares a callbacks estruturados, as funções async/await são similares à junção de generators com promises. Caso você não conheça o async/await, recomendo que antes de prosseguir, leia este artigo: Entenda o async e await.

Dito isto, vamos ao exercício:

Passo 1:

Crie uma função que após 5 segundos, dobre o resultado do número passado como parâmetro. Essa função deverá retornar uma promise. Use o setTimeOut como temporizador.

O corpo da função abaixo servirá como base para este exercício:

function dobrarEm5Segundos(x) {
  return new Promise( => {
    setTimeout(() => {      
    });
  });
}

Realizado este passo, podemos seguir adiante:

Passo 2:

Crie uma função assíncrona que irá receber um parâmetro x. Crie três variáveis: a, b e c dentro do corpo da função. Cada uma dessas variáveis receberá um await da função do passo anterior. Você deve passar como parâmetros dessa função os número 10, 20 e 30, respectivamente.

Retorne a soma de todos esses elementos, inclusive o parâmetro da função assíncrona.

async function addAsync(x) {
  let a;
  let b;
  let c;
  return;
}

Para mostrar o resultado no console, utilize o .then():

addAsync().then(() => {
  console.log();
});

Você pode realizar o download do exercício resolvido aqui:

[download id=”3580″]

Gostou deste exercício? Comente abaixo: