Como criar um Rastreador de Encomendas com Histórico e WhatsApp

Consultar uma API é fácil. O desafio real é entregar uma experiência rica para o usuário, permitindo ver o histórico completo do pacote sem poluir a interface inicial.

1. O Objetivo Final (Interativo)

O card abaixo é uma simulação do que vamos construir. Note o botão "Ver Histórico". Clique nele para ver o efeito sanfona (accordion) funcionando:

2. Preparando a Estrutura

Para criar esse efeito, precisamos dividir o HTML em duas partes: o Status Atual (sempre visível) e a Lista de Histórico (oculta por padrão).

3. O Código JavaScript (Lógica de Expandir)

Além de buscar na API, adicionamos uma função simples para alternar a visibilidade da div de histórico quando o usuário clicar no botão.

async function rastrearEncomenda(inputUsuario) {
    // ... (Código de validação e fetch API igual ao anterior) ...

    const ultimo = dados.eventos[0];
    const historico = dados.eventos.slice(1); // Pega do segundo em diante

    // Gera o HTML da Timeline
    const htmlTimeline = historico.map(e => `
        <div class="timeline-item">
            <div class="timeline-dot"></div>
            <p>${e.status}</p>
            <small>${e.local} • ${e.data} ${e.hora}</small>
        </div>
    `).join('');

    // Injeta no Container
    container.innerHTML = `
        <div class="card">
            <h2>${ultimo.status}</h2>
            <p>${ultimo.local}</p>
            
            <button onclick="document.getElementById('hist-oculto').style.display = 'block'">
                Ver Histórico Completo ⬇
            </button>
            
            <div id="hist-oculto" style="display: none; margin-top: 15px;">
                ${htmlTimeline}
            </div>
        </div>
    `;
}