Calculadora de Dígito Verificador GTIN/EAN em JavaScript

O Que é o Projeto?

Uma aplicação web projetada para calcular automaticamente o dígito verificador em javascripo de códigos GTIN (Global Trade Item Number) e EAN (European Article Number), amplamente utilizados em códigos de barras no comércio global. assim sendo, o objetivo do projeto é simplificar a validação e a geração desses códigos, fundamentais para a identificação de produtos em sistemas comerciais.

Neste blog, apresentaremos um guia passo a passo para criar uma calculadora de dígito verificador de códigos GTIN/EAN, utilizando HTML, CSS (com Bootstrap) e JavaScript. A ferramenta permitirá ao usuário inserir um código GTIN sem o dígito verificador e calcular automaticamente o dígito correto com base no algoritmo do Módulo 10, exibindo o código completo. Em resumo, o guia detalhará cada componente do código, explicando suas funções e a lógica envolvida no processo.

O que é o Dígito Verificador GTIN/EAN?

O Dígito Verificador (DV) é um número de controle presente nos códigos de barras EAN/UCC, projetado para garantir a integridade dos dados e evitar erros de leitura. Portanto, atua, além disso, como mecanismo de segurança, confirmando se o sistema escaneou corretamente o código de barras.

Sistemas de códigos de barras utilizam amplamente o cálculo do dígito verificador para garantir a integridade dos dados e evitar erros de digitação ou leitura incorreta.

Descubra como calcular o dígito verificador GTIN/EAN e garanta a precisão dos seus códigos de barras. Confira nosso artigo completo com as regras e o passo a passo do cálculo.

Tecnologias e Desenvolvimento

1. Linguagens Utilizadas

• HTML5: Estruturação da interface do utilizador
• Bootstrap 5: Framework CSS para estilização e design responsivo
• JavaScript: Lógica de cálculo e manipulação de eventos

2. Funcionalidades Principais

• Entrada e validação de códigos GTIN
• Cálculo automático do dígito verificador
• Identificação do tipo de GTIN
• Interface responsiva e amigável
• Tratamento de erros

Implementação Passo a Passo

Estrutura do Código HTML

A interface do usuário da calculadora é construída com HTML e estilizada com Bootstrap. O JavaScript é responsável pela validação da entrada, cálculo do dígito verificador e exibição de mensagens de erro, quando necessário.

1. Container Principal

<div class="container mt-2 bg-white">

O container principal serve como elemento base para agrupar todos os componentes visuais da calculadora. Ele utiliza classes do Bootstrap, como mt-2 (margem superior) e bg-white (fundo branco), para garantir um layout espaçado e limpo.

2. Cartão de Apresentação

<div class="card shadow-lg p-3 mb-5 bg-white rounded">

O cartão organiza visualmente o conteúdo da calculadora, aplicando sombras (shadow-lg) e bordas arredondadas (rounded). Isso melhora a experiência do usuário ao criar uma interface moderna e amigável.

Dica: Elementos como este são ideais para destacar seções importantes da interface, como formulários ou resultados.

3. Formulário de Entrada

<form name="frm" id="frm" class="p-4 border rounded-lg shadow bg-white">

O formulário é o núcleo da interação do usuário. Ele contém os campos de entrada e o botão de cálculo. Além disso, as classes do Bootstrap, como p-4 (espaçamento interno), border (borda) e rounded-lg (bordas arredondadas maiores), garantem um design consistente e profissional.

4. Campos de Entrada

<input type="text" class="form-control" id="codigo" name="codigo" placeholder="Digite o código sem o dígito">
<input type="text" readonly class="form-control" id="digito" name="digito" placeholder="Dígito">

• O primeiro campo permite que o usuário insira o código GTIN sem o dígito verificador. Ele utiliza a classe form-control para estilização.
• O segundo campo exibe o dígito verificador calculado. Ele é definido como somente leitura (readonly) para evitar alterações manuais.

5. Botão de Cálculo

<button type="button" class="btn btn-primary btn-lg" id="btnCalcular">
    <i class="bi bi-calculator-fill"></i>
    Calcular dígito verificador
</button>

O botão aciona a função de cálculo do dígito verificador. Ele é estilizado com classes do Bootstrap:

• btn btn-primary para cor e estilo do botão.
• btn-lg para aumentar o tamanho do botão.
• O ícone <i> (da biblioteca Bootstrap Icons) adiciona um toque visual ao botão.

6. Modal de Erro

<div class="modal fade" id="errorModal" tabindex="-1" aria-labelledby="errorModalLabel" aria-hidden="true">

O modal é usado para exibir mensagens de erro quando o usuário insere um código inválido. Ele é ativado dinamicamente pelo JavaScript e utiliza o Bootstrap para estilização e comportamento.

JavaScript: Lógica de Cálculo

O JavaScript é responsável por validar a entrada, calcular o dígito verificador e exibir os resultados ou mensagens de erro.

1. Evento de Clique no Botão

document.getElementById('btnCalcular').addEventListener('click', function () {
    var codigo = document.getElementById('codigo').value;
    codigo = codigo.replace(/\D/g, ''); // Remove caracteres não numéricos

    if (![7, 11, 12, 13].includes(codigo.length)) {
        showModal('Por favor, insira um número válido: 7 para GTIN-8, 11 para GTIN-12, 12 para GTIN-13 ou 13 para gerar GTIN-14.');
        return;
    }

    var digito = calcularDigitoEAN(codigo);
    document.getElementById('digito').value = digito;

    // Exibe resultado
    document.getElementById('resultado').style.display = 'block';
    document.getElementById('resultado').innerHTML = `Código de barras tipo ${gtinType}: ${codigo}${digito}`;
});

Explicação:

1. Remoção de caracteres não numéricos: A função replace(/\D/g, '') garante que apenas números sejam considerados.
2. Validação do comprimento do código: Apenas códigos com 7, 11, 12 ou 13 dígitos são aceitos, correspondendo aos formatos GTIN-8, GTIN-12, GTIN-13 e GTIN-14.
3. Cálculo do dígito verificador: A função calcularDigitoEAN é chamada para determinar o dígito correto.
4. Exibição do resultado: O código completo (incluindo o dígito verificador) é exibido ao usuário.

2. Cálculo do Dígito Verificador

function calcularDigitoEAN(codigo) {
    var soma = 0;
    for (var i = 0; i < codigo.length; i++) {
        var num = parseInt(codigo[i]);
        soma += (i + 1) % 2 === 0 ? num * 3 : num;
    }
    return (10 - (soma % 10)) % 10;
}

Como funciona:

1. O algoritmo percorre cada dígito do código.
2. Os números nas posições pares são multiplicados por 3, enquanto os das posições ímpares são apenas somados.
3. O dígito verificador é calculado como o menor número que torna a soma total um múltiplo de 10.

Exemplo prático: Para o código 123456:

• Soma = (1 + (2 \times 3) + 3 + (4 \times 3) + 5 + (6 \times 3) = 1 + 6 + 3 + 12 + 5 + 18 = 45)
• Dígito verificador = (10 – (45 \mod 10) = 5)

3. Exibição de Erros

function showModal(message) {
    var errorModal = new bootstrap.Modal(document.getElementById('errorModal'));
    document.getElementById('errorModalBody').innerText = message;
    errorModal.show();
}

Detalhes:

• Esta função exibe um modal com a mensagem de erro fornecida.
• O modal é ativado usando a classe bootstrap.Modal.

Como Usar a Calculadora

Digite o código de barras sem o dígito verificador e clique no botão “Calcular Dígito Verificador”.

Referências

1. Documentação do Bootstrap
   Para informações sobre classes e componentes utilizados na estilização:
   https://getbootstrap.com
2. Algoritmo de Módulo 10
   Explicação detalhada do algoritmo utilizado no cálculo do dígito verificador:
   https://en.wikipedia.org/wiki/Luhn_algorithm
3. MDN Web Docs – JavaScript
   Guia completo sobre manipulação de DOM e funções JavaScript utilizadas:
   https://developer.mozilla.org
4. Bootstrap Icons
   Biblioteca de ícones utilizada no botão de cálculo:
   https://icons.getbootstrap.com