Apoie o Site
Removemos os anúncios para melhorar sua experiência. Se gostou do nosso conteúdo, considere fazer uma doação via Pix para nos mantermos no ar.
Faça uma doação via PIX no QRCode ao lado.
Desenvolvendo um Rastreador de Objetos nos Correios com JavaScript e Tailwind CSS 📦💻
Se você já se perguntou onde sua encomenda está ou está cansado de inserir manualmente os códigos de rastreamento nos sites dos Correios, este projeto pode ser a solução para você. Neste artigo, vou explicar detalhadamente como desenvolver um rastreador de objetos nos Correios usando JavaScript e a biblioteca de estilos Tailwind CSS. Vamos mergulhar na lógica por trás do código e como lidamos com problemas de resposta da API, além de onde encontrar ícones gratuitos para aprimorar a experiência visual do usuário.
Visão Geral do Projeto 📋
O projeto consiste em uma página da web simples com um campo de entrada onde o usuário pode inserir o código de rastreamento de uma encomenda dos Correios. Ao clicar no botão "Buscar Encomenda," o código JavaScript faz uma chamada para uma API externa para obter informações sobre a encomenda e exibe essas informações em uma lista com ícones correspondentes para cada evento de rastreamento.
Veja a versão final do projeto 🔗
Se você clicar aqui, terá a oportunidade de visualizar e testar como este projetinho rápido se desenvolveu. Basta inserir um código dos Correios e deixar a magia acontecer!
Configuração Inicial 🔧
Antes de mergulharmos na lógica do código, é importante configurar o ambiente inicial. Neste projeto, estamos usando o Tailwind CSS (com alguns estilos manuais a mais) e o Font Awesome para estilos e ícones. Certifique-se de adicionar as seguintes referências no cabeçalho do seu arquivo HTML:
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
<title>Rastreio Correios - CodeBR</title>
<style>
.dashed-line {
border-left: 1px dashed #ccc;
height: 90px;
margin: 0 20px;
margin-left: 0px;
}
#loading {
display: none;
text-align: center;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
}
</style>
</head>
Observe que estou atualmente utilizando a versão 2.2 do Tailwind CSS, embora a versão 3 já esteja disponível há algum tempo. No entanto, como CSS não é minha especialidade, optei por utilizar uma versão mais antiga e mais amigável para facilitar o desenvolvimento. É interessante notar como o ChatGPT pode ser útil, não é mesmo? Hahaha!
Estrutura HTML 🌐
A estrutura HTML do projeto é relativamente simples. Temos um campo de entrada para o código de rastreamento e um botão "Buscar Encomenda." Além disso, temos uma área onde o resultado da pesquisa será exibido, bem como um elemento de carregamento. Veja o código abaixo:
<div class="max-w-3xl mx-auto my-8 bg-white p-6 rounded-lg shadow-lg">
<div id="tracking-form">
<h1 class="text-2xl font-bold mb-4">Rastreio Correios</h1>
<div class="mb-4">
<label for="codigo" class="block text-sm font-medium text-gray-700">Código de Rastreio:</label>
<input type="text" id="codigo" class="w-full mt-1 py-2 px-3 border rounded-md">
</div>
<button id="buscar-encomenda" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
Buscar Encomenda
</button>
</div>
<div id="loading">
<img src="https://media.tenor.com/rAVzM1cVcr4AAAAi/box-easyparcel.gif" alt="Loading Rastreio Correios" />
<p class="mt-4 text-gray-600">Buscando objeto...</p>
</div>
<div id="result"></div>
</div>
Lógica do JavaScript 👩💻
Agora, vamos mergulhar na lógica JavaScript por trás do projeto. Aqui está uma explicação passo a passo de como o código funciona:
1. Inicialização de Elementos 📊
let loading = document.getElementById('loading');
let trackingForm = document.getElementById('tracking-form');
let resultDiv = document.getElementById('result');
let codigoInput = document.getElementById('codigo');
let buscarEncomendaBtn = document.getElementById('buscar-encomenda');
Nesta parte, estamos obtendo referências para os elementos HTML que usaremos posteriormente no código. O loading representa a área de carregamento, o trackingForm é o formulário de rastreamento, o resultDiv é onde exibiremos os resultados, codigoInput é o campo de entrada de código e buscarEncomendaBtn é o botão de busca.
2. Evento de Clique no Botão 🕵️♀️
buscarEncomendaBtn.addEventListener('click', () => {
let codigo = codigoInput.value;
if (codigo) {
loading.style.display = 'flex';
trackingForm.style.display = 'none';
resultDiv.innerHTML = '';
buscarEncomenda(codigo);
}
});
Quando o usuário clica no botão "Buscar Encomenda," pegamos o valor do campo de entrada codigoInput. Se um código foi inserido, exibimos a área de carregamento e ocultamos o formulário de rastreamento. Em seguida, chamamos a função buscarEncomenda(codigo) para fazer a solicitação à API.
3. Chamada para a API 📡
function buscarEncomenda(codigo) {
let user = 'teste';
let token = '1abcd00b2731640e886fb41a8a9671ad1434c599dbaa0a0de9a5aa619f29a83f';
let url = `https://api.linketrack.com/track/json?user=${user}&token=${token}&codigo=${codigo}`;
fetch(url)
.then(response => response.json())
.then(data => {
loading.style.display = 'none';
trackingForm.style.display = 'block';
if (data) {
// Lógica para exibir os eventos
} else {
resultDiv.innerHTML = 'Erro ao decodificar a resposta JSON.';
}
})
.catch(error => {
console.error(error);
buscarEncomenda(codigo);
});
}
Aqui fazemos uma chamada à API pública da linketrack com user e token que estão disponíveis no site. Se a resposta da API for bem-sucedida, tratamos os eventos de rastreamento, caso contrário entraremos em loop chamando novamente a API.
4. Exibição dos Eventos de Rastreamento 📆
if (data) {
let eventos = data.eventos;
let codigo = data.codigo;
resultDiv.innerHTML = `
<h2 class="text-lg font-semibold mb-2">Código: ${codigo}</h2>
<div class="border-t border-gray-300 pt-4">
`;
let lastEvent = null;
eventos.forEach(evento => {
let icon = '';
switch (true) {
case evento.status.includes('Objeto entregue ao destinatário'):
icon = '<img src="./icones/received_6491550.png" class="w-10 h-10" alt="Objeto Entregue Rastreio Correios">';
break;
case evento.status.includes('Objeto saiu para entrega ao destinatário'):
icon = '<img src="./icones/delivery_1642255.png" class="w-10 h-10" alt="Objeto Saiu para Entrega Rastreio Correios">';
break;
// Adicione aqui mais ícones
default:
icon = '<img src="./icones/mystery_6726753.png" class="w-10 h-10" alt="Evento Desconhecido Rastreio Correios">';
break;
}
resultDiv.innerHTML += `
<div class="mb-1 flex items-start">
<div class="mr-4">${icon}</div>
<hr class="dashed-line">
<div>
<p class="text-sm text-gray-500">${evento.data} ${evento.hora}</p>
<p class="text-md">${evento.status}</p>
<p class="text-sm text-gray-600">${evento.subStatus[0] ? evento.subStatus[0] : ''}</p>
<p class="text-sm text-gray-600">${evento.subStatus[1] ? evento.subStatus[1] : ''}</p>
</div>
</div>
`;
lastEvent = evento;
});
resultDiv.innerHTML += `</div>`;
}
Nesta parte, se a resposta da API for bem-sucedida, acessamos os eventos de rastreamento e o código da encomenda. Em seguida, preparamos a estrutura HTML para exibir esses eventos. Iteramos pelos eventos e exibimos ícones e detalhes correspondentes a cada evento.
Nesta parte, determinamos qual ícone exibir com base no status do evento de rastreamento. Usamos uma estrutura switch para mapear o status aos ícones correspondentes. Em seguida, adicionamos o ícone e os detalhes do evento à estrutura HTML que estamos construindo.
5. Tentar Novamente 🔄
.catch(error => {
console.error(error);
buscarEncomenda(codigo);
});
No caso de ocorrer um erro durante a chamada à API (como ocorreu em alguns horários do dia), implementamos uma abordagem de tentativa e retentativa. Nesse cenário, reativamos a função buscarEncomenda(codigo) para realizar uma nova tentativa.
Abaixo segue o código completo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
<title>Rastreio Correios - CodeBR</title>
<style>
.dashed-line {
border-left: 1px dashed #ccc;
height: 90px;
margin: 0 20px;
margin-left: 0px;
}
#loading {
display: none;
text-align: center;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
}
</style>
</head>
<body class="bg-gray-100">
<div class="max-w-3xl mx-auto my-8 bg-white p-6 rounded-lg shadow-lg">
<div id="tracking-form">
<h1 class="text-2xl font-bold mb-4">Rastreio Correios</h1>
<div class="mb-4">
<label for="codigo" class="block text-sm font-medium text-gray-700">Código de Rastreio:</label>
<input type="text" id="codigo" class="w-full mt-1 py-2 px-3 border rounded-md">
</div>
<button id="buscar-encomenda" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
Buscar Encomenda
</button>
</div>
<div id="loading">
<img src="https://media.tenor.com/rAVzM1cVcr4AAAAi/box-easyparcel.gif" alt="Loading Rastreio Correios" />
<p class="mt-4 text-gray-600">Buscando objeto...</p>
</div>
<div id="result"></div>
</div>
<script>
let loading = document.getElementById('loading');
let trackingForm = document.getElementById('tracking-form');
let resultDiv = document.getElementById('result');
let codigoInput = document.getElementById('codigo');
let buscarEncomendaBtn = document.getElementById('buscar-encomenda');
buscarEncomendaBtn.addEventListener('click', () => {
let codigo = codigoInput.value;
if (codigo) {
loading.style.display = 'flex';
trackingForm.style.display = 'none';
resultDiv.innerHTML = '';
buscarEncomenda(codigo);
}
});
function buscarEncomenda(codigo) {
let user = 'teste';
let token = '1abcd00b2731640e886fb41a8a9671ad1434c599dbaa0a0de9a5aa619f29a83f';
let url = `https://api.linketrack.com/track/json?user=${user}&token=${token}&codigo=${codigo}`;
fetch(url)
.then(response => response.json())
.then(data => {
loading.style.display = 'none';
trackingForm.style.display = 'block';
if (data) {
let eventos = data.eventos;
let codigo = data.codigo;
resultDiv.innerHTML = `
<h2 class="text-lg font-semibold mb-2">Código: ${codigo}</h2>
<div class="border-t border-gray-300 pt-4">
`;
let lastEvent = null;
eventos.forEach(evento => {
let icon = '';
switch (true) {
case evento.status.includes('Objeto entregue ao destinatário'):
icon = '<img src="./icones/received_6491550.png" class="w-10 h-10" alt="Objeto Entregue Rastreio Correios">';
break;
case evento.status.includes('Objeto saiu para entrega ao destinatário'):
icon = '<img src="./icones/delivery_1642255.png" class="w-10 h-10" alt="Objeto Saiu para Entrega Rastreio Correios">';
break;
case evento.status.includes('Objeto encaminhado'):
icon = '<img src="./icones/fast-delivery_6491635.png" class="w-10 h-10" alt="Objeto Encaminhado Rastreio Correios">';
break;
case evento.status.includes('Objeto postado'):
icon = '<img src="./icones/parcel_5626551.png" class="w-10 h-10" alt="Objeto Postado Rastreio Correios">';
break;
case evento.status.includes('Objeto recebido pelos Correios'):
icon = '<img src="./icones/giving_4116184.png" class="w-10 h-10" alt="Objeto Recebido pelos Correios Rastreio Correios">';
break;
case evento.status.includes('Encaminhado para fiscalização aduaneira'):
icon = '<img src="./icones/checking_3852133.png" class="w-10 h-10" alt="Encaminhado para Fiscalização Aduaneira Rastreio Correios">';
break;
case evento.status.includes('Fiscalização aduaneira finalizada'):
icon = '<img src="./icones/checking_3852121.png" class="w-10 h-10" alt="Fiscalização Aduaneira Finalizada Rastreio Correios">';
break;
case evento.status.includes('Aguardando pagamento'):
icon = '<img src="./icones/bill_10616521.png" class="w-10 h-10" alt="Aguardando Pagamento Rastreio Correios">';
break;
case evento.status.includes('Pagamento confirmado'):
icon = '<img src="./icones/receipt_10552479.png" class="w-10 h-10" alt="Pagamento Confirmado Rastreio Correios">';
break;
case evento.status.includes('Objeto recebido na unidade de exportação no país de origem'):
icon = '<img src="./icones/export_6491604.png" class="w-10 h-10" alt="Objeto recebido na unidade de exportação no país de origem">';
break;
case evento.status.includes('A importação do objeto/conteúdo não foi autorizada pelos órgãos fiscalizadores'):
icon = '<img src="./icones/fora-de-estoque.png" class="w-10 h-10" alt="A importação do objeto/conteúdo não foi autorizada pelos órgãos fiscalizadores">';
break;
case evento.status.includes('Objeto devolvido ao país de origem'):
icon = '<img src="./icones/fora-de-estoque.png" class="w-10 h-10" alt="Objeto devolvido ao país de origem">';
break;
default:
icon = '<img src="./icones/mystery_6726753.png" class="w-10 h-10" alt="Evento Desconhecido Rastreio Correios">';
break;
}
resultDiv.innerHTML += `
<div class="mb-1 flex items-start">
<div class="mr-4">${icon}</div>
<hr class="dashed-line">
<div>
<p class="text-sm text-gray-500">${evento.data} ${evento.hora}</p>
<p class="text-md">${evento.status}</p>
<p class="text-sm text-gray-600">${evento.subStatus[0] ? evento.subStatus[0] : ''}</p>
<p class="text-sm text-gray-600">${evento.subStatus[1] ? evento.subStatus[1] : ''}</p>
</div>
</div>
`;
lastEvent = evento;
});
resultDiv.innerHTML += `</div>`;
} else {
resultDiv.innerHTML = 'Erro ao decodificar a resposta JSON.';
}
})
.catch(error => {
console.error(error);
buscarEncomenda(codigo);
});
}
</script>
</body>
</html>
Ícones Gratuitos 🆓
Os ícones usados neste projeto foram obtidos gratuitamente na internet, especificamente do Freepik. Você pode encontrar uma ampla variedade de ícones gratuitos em sites como o Freepik para aprimorar a experiência visual do seu projeto.
Mas caso você queira usar os mesmos ícones dos meus (listados abaixo), clique aqui e faça o download.
Melhorias a nível de front-end 📲📊
Para melhorar ainda mais este projeto, algumas sugestões valiosas podem ser consideradas. Em primeiro lugar, a otimização dos ícones utilizados no projeto pode ser uma excelente ideia. Atualmente, os ícones são mantidos em formato PNG com dimensões de 250 x 250 pixels, mas no artigo, já houve uma melhoria para 50 x 50 pixels. No entanto, uma otimização adicional seria converter esses ícones para o formato WebP, o que resultaria em uma significativa economia de espaço.
Outra melhoria interessante seria a implementação de uma funcionalidade que permita aos usuários compartilhar os resultados pelo WhatsApp. Isso poderia ser realizado através de um botão que transformaria os dados de rastreamento em um formato adequado para ser compartilhado no WhatsApp.
Melhorias a nível de back-end com sugestão de uso de PHP ⏰📧
No que diz respeito ao back-end, há também várias oportunidades de melhoria. Uma delas é a implementação de notificações por e-mail. Os usuários poderiam inserir um código de rastreamento e seu endereço de e-mail para receber atualizações de rastreamento. Isso poderia ser realizado por meio de uma tarefa cron do PHP, que é uma programação agendada que executa automaticamente tarefas em momentos específicos. É uma técnica eficaz para automatizar o envio de e-mails de atualização de rastreamento.
Para aqueles que desejam explorar ainda mais as funcionalidades de envio de e-mail com PHP de forma profissional, recomendo utilizar a biblioteca PHPMailer, disponível neste link.
Além disso, uma funcionalidade adicional poderia ser a exportação dos dados do projeto para um formato de planilha Excel. Isso permitiria aos usuários armazenar e gerenciar os dados de rastreamento de forma mais conveniente. Para implementar isso, a biblioteca SimpleXLSXGen pode ser uma ótima escolha.
Conclusão 📚
Em resumo, este projeto representa um exemplo prático de como desenvolver um rastreador de objetos nos Correios usando JavaScript e Tailwind CSS. Espero que esta explicação detalhada tenha sido útil para compreender a lógica por trás do código. É importante lembrar que a API usada neste exemplo é fictícia, e para obter resultados reais, você precisaria configurar uma API real dos Correios.
Além disso, as possibilidades de aprimoramento deste projeto são vastas, incluindo a otimização de ícones, compartilhamento via WhatsApp, notificações por e-mail e exportação para planilha Excel. A criatividade é o limite quando se trata de projetos de programação, e essas sugestões podem levar seu projeto a um nível ainda mais profissional e funcional.