Como conectar na ViaCPE com JavaScript?

Este é um artigo rápido e prático que mostra que conectar-se ao ViaCEP usando JavaScript. O processo em si é simples, você pode fazer uma requisição HTTP GET para a API do ViaCEP com o CEP desejado e manipular a resposta retornada para obter os dados desejados.

Usando métodos encadeados

Você pode fazer isso usando a função fetch() do JavaScript ou outras bibliotecas de requisições HTTP como o Axios. Veja um exemplo usando a função fetch():

const cep = '01001000';
const url = `https://viacep.com.br/ws/${cep}/json/`;

fetch(url)
  .then(response => response.json())
  .then(data => {
    console.log(data);
    // Faça a manipulação dos dados retornados aqui
  })
  .catch(error => console.log(error));

Nesse exemplo, uma requisição HTTP GET é feita para a URL do ViaCEP com o CEP desejado inserido na URL. A resposta da API é convertida para o formato JSON usando o método json() e, em seguida, é possível manipular os dados retornados como um objeto JavaScript.

Lembre-se de tratar os erros que podem ocorrer durante a requisição HTTP e de ajustar a forma como os dados serão manipulados de acordo com a sua necessidade.

Usando Async/await

O async/await é uma forma mais moderna e simplificada de trabalhar com Promises, que são utilizadas nas requisições HTTP. Com o async/await, o código fica mais legível e fácil de entender.

Veja um exemplo de como buscar os dados do ViaCEP utilizando async/await:

async function getCEPData(cep) {
  try {
    const url = `https://viacep.com.br/ws/${cep}/json/`;
    const response = await fetch(url);
    const data = await response.json();
    console.log(data);
    // Faça a manipulação dos dados retornados aqui
  } catch (error) {
    console.log(error);
  }
}

getCEPData('01001000');

Nesse exemplo, a função getCEPData é definida como assíncrona com a palavra-chave async. Dentro da função, é criada a URL da API do ViaCEP com o CEP desejado e, em seguida, é feita a requisição HTTP GET utilizando o fetch. O await é utilizado para aguardar a resposta da API e a conversão da resposta para JSON. Em seguida, é possível manipular os dados retornados como um objeto JavaScript.

Lembre-se de utilizar a estrutura try/catch para tratar os erros que podem ocorrer durante a requisição HTTP.

Trabalhando com a API do DOM

O DOM, ou Document Object Model, é uma interface de programação de aplicativos (API) que permite aos desenvolvedores manipular o conteúdo HTML e CSS de uma página da web.

O DOM é organizado em uma árvore de nós (Nodes), onde cada nó representa um elemento HTML na página. Os desenvolvedores podem usar JavaScript para acessar e manipular esses nós, adicionando, removendo e modificando elementos HTML em tempo real.

Neste tutorial, vamos explorar os conceitos básicos do DOM e como usá-lo para manipular o HTML de uma página da web.

Obtendo elementos do DOM

Antes de podermos manipular o HTML de uma página, precisamos primeiro obter os elementos HTML desejados usando o DOM.

Existem vários métodos para obter elementos do DOM, mas dois dos mais comuns são document.getElementById() e document.querySelector(). O document.getElementById() retorna um elemento HTML com base no valor do atributo id, enquanto o document.querySelector() retorna o primeiro elemento HTML que corresponde a um seletor CSS específico.

// Obtendo um elemento por ID
const myElement = document.getElementById('my-id');

// Obtendo o primeiro elemento que corresponde a um seletor CSS
const myOtherElement = document.querySelector('.my-class');

Manipulando conteúdo do DOM

Uma vez que temos referências aos elementos HTML que queremos manipular, podemos atualizar seu conteúdo usando o DOM.

Para atualizar o conteúdo de um elemento HTML, podemos usar as propriedades textContent ou innerHTML. A propriedade textContent define o texto dentro de um elemento, enquanto a propriedade innerHTML define o HTML dentro de um elemento.

// Atualizando o texto de um elemento
myElement.textContent = 'Novo texto aqui';

// Atualizando o HTML de um elemento
myOtherElement.innerHTML = '<p>Novo HTML aqui</p>';

Adicionando e removendo elementos do DOM

Podemos adicionar e remover elementos HTML do DOM usando o JavaScript. Para adicionar um novo elemento HTML, podemos criar um novo nó usando o método document.createElement() e anexá-lo a um elemento existente usando o método appendChild().

Para remover um elemento HTML, podemos usar o método removeChild().

// Criando um novo elemento HTML
const newElement = document.createElement('div');

// Definindo o conteúdo do novo elemento
newElement.textContent = 'Novo elemento aqui';

// Anexando o novo elemento a um elemento existente
myElement.appendChild(newElement);

// Removendo um elemento
myOtherElement.removeChild(myOtherElement.firstChild);

Manipulando atributos do DOM

Os elementos HTML também possuem atributos que podemos acessar e manipular usando o DOM. Podemos obter e definir valores de atributos usando as propriedades getAttribute() e setAttribute().

// Obtendo o valor de um atributo
const myAttribute = myElement.getAttribute('data-my-attribute');

// Definindo o valor de um atributo
myOtherElement.setAttribute('data-my-other-attribute', 'meu valor');

Conclusão

O DOM é uma ferramenta poderosa que os desenvolvedores podem usar para manipular o conteúdo HTML e CSS de uma página da web em tempo real. Com as habilidades básicas que aprendemos neste tutorial, você deve estar bem encaminhado para começar a criar páginas web dinâmicas e interativas.

Como usar a API JavaScript para estender as funcionalidades do APEX

O JavaScript continua ganhando tração dentro do mundo Oracle. Além do banco estar aceitando código JS, o APEX que é uma plataforma low code que gera aplicações rapidamente está fornecendo uma API JS para manipulação de seus compoentes.

Na semana passada foi ao apresentado no Oracle Office Hours por mim (https://www.mundojs.com.br/author/pkunzel) um breve tutorial de como usar a está API para esta comunicação.

Segue então abaixo o vídeo para curtam e comentem o nele o que acharam.

Caso você queira conhecer o APEX, basta criar uma conta em apex.oracle.com para usa-lo sem custo. Por ser uma base de dados bem restrita, não dá para montar um sistema de grande, mas todas as funcionalidade estão lá

Criando uma API Node com Express.js

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

1. Instalação

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

npm install express

3. Estrutura do nosso projeto

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

4. Criando arquivo de Server

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

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

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

5. Controller

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

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

6. Rotas

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

Index.js

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

PersonRoute

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

7. Configurações.

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

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

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

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

8. Nodemon

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

npm install -g nodemon

9. Arquivo Package.config

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

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

10. Testes

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

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

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