JWT — JSON Web Token / Vídeos

Veja nesse artigo como trabalhar com JWT

Recentemente eu liberei mais um módulo do meu curso: Criando API’s RESTful utilizando TypeScript, Node.js, mongoDB, nesse estou demonstrando como trabalhar com JWT. Caso tenha interesse em ver esse conteudo, segue alguns links abaixo:

Gostou deste artigo? Comente abaixo!

Referência: https://programadriano.medium.com/jwt-json-web-token-2039797ba126

Exportando arquivos JSON com MongoDB

Olá, hoje exportaremos arquivos JSON com o MongoDB. O MongoDB é um banco de dados não-relacional que traz o conceito de Banco de Dados Orientado a Documentos. Ele tem como característica conter informações importantes em um único documento. Deste modo, possibilita a consulta de documentos através de métodos avançados de agrupamento e filtragem.

Caso você não conheça o MongoDB e não saiba fazer um CRUD básico, recomendo a leitura do artigo:

https://www.mundojs.com.br/2020/03/17/crud-basico-com-mongodb/

Caso já conheça, mas queira importar arquivos CSV, recomendo o seguinte artigo:

https://www.mundojs.com.br/2020/03/27/importando-arquivos-com-mongodb/

E arquivos JSON:

https://www.mundojs.com.br/2020/03/30/importando-arquivos-json-com-mongodb/

Com o seu mongoDB devidamente configurado, começaremos a exportar os arquivos.

Primeiro, precisamos abrir o diretório em que trabalharemos. Utilize o comando cd diretorio para especificar o diretório a ser trabalhado.

Utilizando o comando mongoexport, precisamos especificar o nosso host, que no meu caso é 127.0.0.1. Após isso, utilizaremos a sintaxe –db nomedodocumento, que especifica em qual documento está o arquivo a ser exportado. Caso não exista, será criado.

Utilizaremos também a sintaxe –collection nomedacollection, que cria/especifica qual a coleção.

Especificados o host, nome do documento e nome da collection, precisamos especificar o nome do arquivo + extensão a ser exportado. Como já sabemos, o nosso arquivo é o example_2.json, e você usa a sintaxe –out para isso.

Utilizaremos os métodos –jsonArray para trazer os documentos JSON em um único array e –pretty, para trazer o documento formatado.

E o comando ficará assim:

mongoexport --host=127.0.0.1 --db quiz --collection listaquiz --out example_2.json --jsonArray --pretty

E a saída será:

connected to: mongodb://127.0.0.1/
exported 1 record

Com isso, exportamos nosso arquivo JSON com sucesso!

Verifique o diretório para confirmar a exportação do seu arquivo JSON.

Gostou deste artigo? Comente abaixo!

Importando arquivos JSON com MongoDB

Olá, hoje importaremos arquivos JSON para o MongoDB. O MongoDB é um banco de dados não-relacional que traz o conceito de Banco de Dados Orientado a Documentos. Ele tem como característica conter informações importantes em um único documento. Deste modo, possibilita a consulta de documentos através de métodos avançados de agrupamento e filtragem.

Caso você não conheça o MongoDB e não sabia fazer um CRUD básico, recomendo a leitura do artigo:

https://www.mundojs.com.br/2020/03/17/crud-basico-com-mongodb/

Caso já conheça, mas queira importar arquivos CSV, recomendo o seguinte artigo:

https://www.mundojs.com.br/2020/03/27/importando-arquivos-com-mongodb/

Agora que você já leu, vamos lá!

Para realizar este exemplo, utilizei o site: https://support.oneskyapp.com/hc/en-us/articles/208047697-JSON-sample-files que disponibiliza vários tipos de arquivos JSON como exemplo. Para o nosso exemplo, utilizaremos o arquivo example_2.json, que contém um quiz sobre esportes.

Com o seu mongoDB devidamente configurado, começaremos a importar os arquivos.

Primeiro, precisamos abrir o diretório em que trabalharemos. Recomendo deixar o arquivo json a ser importado no mesmo diretório. Utilize o comando cd diretorio para especificar o diretório a ser trabalhado.

Utilizando o comando mongoimport, precisamos especificar o nosso host, que no meu caso é 127.0.0.1. Após isso, utilizaremos a sintaxe –db nomedodocumento, que especifica em qual documento será importado. Caso não exista, será criado.

Utilizaremos também a sintaxe –collection nomedacollection, que cria/especifica qual a coleção. Caso ela não exista, será criada.

Especificados o host, nome do documento e nome da collection, precisamos especificar o nome do arquivo + extensão a ser importado. Como já sabemos, o nosso arquivo é o example_2.json, e você usa a sintaxe –file para isso.

E o comando ficará assim:

mongoimport --host=127.0.0.1 --db quiz --collection listaquiz --file example_2.json

E a saída será:

connected to: mongodb://127.0.0.1/

1 document(s) imported successfully. 0 document(s) failed to import.

Com isso, importamos o nosso arquivo JSON com sucesso!

Utilizando o find(), verificamos que foi importado:

Gostou deste artigo? Comente abaixo!

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!

Criando aplicação node com yarn

Recentemente comecei a estudar node para o desenvolvimento de API e notei que a curva de aprendizado é muito rápida, se souber quais bibliotecas utilizar o desenvolvimento fica extremamente rápido. Nesse artigo vou mostrar como iniciar um projeto node usando o yarn e como criar uma rota com o express.

Vantagens de se usar o yarn:

O yarn funciona que nem o npm, ou seja é um gerenciador de pacotes. Mas ele tem um diferencial, ele armazena o cache do que já foi baixado, ao meu ver pra quem baixa muitas dependências, isso agiliza muito o processo e por isso eu vejo como vantajoso, mas essa é minha opinião, claro.

Para começar vamos instalar o node e o yarn baixando:

Feito a instalação, vamos testar para ver se tudo foi instalado corretamente. Para isso abra o terminal se estiver em sistemas baseados em unix ou o bom e velho CMD se estiver no Windows e digite os seguintes comandos:

node -v
yarn -v

O resultado deve ser igual o da foto mostrando a versão de ambos. Feito isso vamos começar a brincadeira iniciando o projeto, para isso cria uma pasta com o nome de sua escolha, a minha será “iniciando_com_node” lembre-se: evite usar espaços de preferencia a “spider case” ou a “camelcase”. Depois, acesse a pasta criada via linha de comando e dentro dela execute o seguinte comando:

touch index.js

Esse comando cria um arquivo.

yarn init -y

O comando “yarn init -y” inicia o yarn e aceita todas as opções dele, as mesmas podem ser alteradas depois.

Quando iniciarmos o yarn, podemos acessar a pasta criada no editor de texto de sua preferencia. Eu recomendo o VSCode.

Abrir o arquivo “package.json”, que é o arquivo que o comando anterior criou. Nele contém todas as informações que concordamos em aceitar sem nem ler, e nesse arquivo em formato json, elas podem ser editadas sem nenhum problema.

Vamos instalar o express na linha de comando. Execute o comando:

yarn add express

Após a instalação, vamos colar a mão na massa.

Com isso, nosso arquivo index.js ficará igual ao da foto abaixo:

Depois, para saber se nosso servidor express funcionou, basta executar o comando:

node index.js

Bom, agora vamos criar uma rota para ser acessada via navegador.

Ao final do arquivo adicione o seguinte código:

 app.get('/', (req, res) =>{
    res.send("Essa é a primeira rota criada com o express")
})

Vou explicar o que ele faz. Estou chamando o express para escutar tudo que vier de requisição com o get na roda / ou seja na rota raiz da aplicação, em seguida cria uma função anônima passando os parâmetros req e res que são esperados pelo express, pode ser qualquer nome mas para ser intuitivo usei req=request e res=response, no retorno dessa função pego o response e peço para ele deixar uma mensagem no navegador.

Pare  o servidor e execute o comando para subir ele de novo, para visualizarmos os resultados.

Bom espero que tenham gostado desse passo-a-passo de node, para criticas e sugestões entrem em contato no twitter: https://twitter.com/tinho361

Referência: Renato Rebouças

Qual a diferença entre JSON e um objeto JavaScript?

Neste post mostrarei brevemente o que é um JSON e o que é um objeto literal JavaScript e qual a diferença entre eles.

JSON

JSON é a abreviação de JavaScript Object Notation e é uma maneira de armazenar e comunicar informações de maneira organizada e fácil de acessar. Em resumo, o JSON nos dá uma coleção de dados legíveis por humanos que podemos acessar de uma maneira realmente lógica.

Atualmente o JSON tem sido muito utilizado para facilitar a comunicação e passagem de dados entre sistemas construídos em linguagens de programação diferentes. Em especial, muitas APIs usam o JSON como seu formato de recebimento e retorno de dados

Exemplo JSON

{
    "nome":"Paulo",
    "idade": 34
}

 

Objeto JavaScript

Um objeto JavaScript é uma representação abstrata de um modelo de dados composto, assim como nas outras linguagens de programação.

Exemplo:

let objeto = { 
    nome:"Paulo", 
    idade: 34 
}

Devido a semelhança entre o JSON e o Objeto Literal, quando o JavaScript lê o JSON ele o reconhece com se fosse um objeto literal. Isso facilita a programação e recebimento de dados, mas acaba confundindo alguns iniciantes.

 

Onde que o JavaScript e o JSON diferem?

Mesmo assim, existem algumas diferenças entre ambos que importante conhecer. Veja abaixo:

Criação de atributos

Como você deve ter notado no exemplo, no JSON é necessário criar as propriedades usando aspas duplas, enquanto no objeto apenas o nome é necessário.

//Obj Literal
let objeto = {
    umaProp: "Lorem Ipsum"
}

//JSON
let objeto2 = {
    "umaProp": "Lorem Ipsum"
}

Uso de aspas

Enquanto o objeto permite o uso de aspas simples ou dupla para expressar strings, o JSON já funciona de maneira mais uniforme e permite apenas o uso de aspas duplas.

// Os seguintes exemplos não são JSONs válidos
{
    'prop': "propriedade"
}

{
    "prop": 'propriedade'
}

Importante: Note que se você estiver utilizando o JavaScript, não ocorrerá erro pois ele interpretará seu objeto como sendo literal.

Tipos de Dados:

JSON: O Json pode armazenar os seguintes valores

  • String
  • Número
  • Objeto JSON
  • Vetor
  • Booleano
  • Null

Objeto: Além dos valores acima, o objeto possuí alguns valores que não são válidos no JSON

  • Objeto Literal
  • Data (no formato Date)
  • Função
  • Undefined

É isso aí, espero que esta explicação rápida ajude mais alguém. Se você conhece outras diferenças, deixe aqui nos comentários que atualizarei a postagem conforme aparecerem contribuições.