Lecture de codes-barres pour les applications Web —

Nous avons créé cet article en partenariat avec Pixelverse. Merci de soutenir les partenaires qui rendent SitePoint possible.

Les codes-barres sont omniprésents dans presque toutes les entreprises traitant d’objets physiques. Qu’il s’agisse d’un colis à livrer, de numéros de série sur des appareils, de billets de concert ou de reçus, il y a de fortes chances qu’au moins un code-barres soit impliqué.

Traditionnellement, ces codes-barres étaient lus à l’aide d’un équipement de numérisation dédié qui transmettait la valeur du code-barres à une application qui la consomme, soit via une connexion par câble, soit via une liaison sans fil comme Bluetooth. Le scanner émule un clavier et envoie les caractères du code-barres lorsque vous appuyez sur une touche virtuelle.

Mais de nos jours, tout le monde a un smartphone dans sa poche – un appareil informatique connecté de grande puissance doté d’un appareil photo. Les développeurs peuvent créer des applications avec une interface utilisateur adaptée à leur cas d’utilisation spécifique, scanner les codes-barres à l’aide de la caméra et les lier directement aux données dans le cloud. Voici quelques exemples :

• enregistrer qu’une maintenance a eu lieu sur un appareil en scannant son numéro de série
• numériser les colis sortants et les marquer comme livrés
• traiter les retours en scannant un code-barres sur une feuille de retour, puis en scannant les codes UPC sur les articles retournés
• valider les billets de concert et les marquer comme consommés
• … et beaucoup plus

Au début, ces applications étaient implémentées en tant qu’applications natives pour Android et iOS. Grâce aux capacités du Web moderne, ces applications peuvent désormais être exécutées sur une plate-forme que tout le monde connaît : le navigateur Web.

Présentation de STRICH : numérisation de codes-barres pour les applications Web

TIRET est une bibliothèque JavaScript qui apporte la numérisation de codes-barres 1D/2D en temps réel au navigateur. Derrière ce nom à consonance étrange (Strich signifie en allemand « ligne » ou « trait », les éléments constitutifs des codes-barres) se cache une bibliothèque allégée distribuée via npm – sans dépendances, permettant une intégration facile dans n’importe quelle application Web. L’interface utilisateur de numérisation intégrée offre des fonctionnalités conviviales telles que la sélection de l’appareil photo, la mise au point par pression et la lampe de poche (pour les conditions de faible luminosité), accélérant ainsi le développement. Des reliures dactylographiées sont disponibles, ainsi que des documentation de référence.

Tous les types de codes-barres couramment utilisés sont pris en charge :

• Codes-barres linéaires 1D comme EAN/UPC, Code 128, Code 39 et autres
• Codes matriciels 2D tels que QR Code, Data Matrix, Aztec Code et PDF417

STRICH exploite des technologies telles que WebGL et WebAssembly pour effectuer le gros du traitement du flux de la caméra et obtenir des performances de type natif dans la localisation et le décodage des codes-barres. Cela permet une lecture très efficace et fiable des codes-barres.

Lancé début 2023, STRICH est un produit relativement jeune et en constante évolution. L’accent est actuellement mis sur l’amélioration des taux de reconnaissance des types de codes-barres existants dans des conditions difficiles (éclairage inégal, codes flous, codes endommagés, etc.), mais la prise en charge de types de codes-barres moins courants tels que Micro QR est également en cours.

Pourquoi la numérisation de codes-barres dans les applications Web ?

Opter pour des applications Web plutôt que des applications natives offre des avantages uniques, que nous aborderons maintenant.

Simplifiez le développement en ciblant une plateforme unique

Au lieu d’avoir à créer pour plusieurs plates-formes (iOS et Android, éventuellement Windows) de manière native ou à utiliser un framework hybride comme Ionic/Capacitor ou Xamarin, vous pouvez simplement créer une application Web à partir d’une seule base de code. Avec les fonctionnalités PWA récemment ajoutées et désormais largement prises en charge, telles que les notifications push et l’installation sur l’écran d’accueil, il n’y a souvent aucune bonne raison de développer une application native, en particulier pour les applications internes.

Distribution facile : vous êtes propriétaire de la chaîne

Si vous créez une application pour scanner des codes-barres, il est probable que vous construisiez une application interne.
Ces applications ne sont généralement utilisées que par les employés, et les publier sur l’App Store d’Apple ou sur Google Play peut s’avérer très compliqué :

• canaux de distribution distincts (Apple App Store/Google Play) avec leurs particularités individuelles et les coûts associés
• captures d’écran et autres éléments nécessaires, dans plusieurs résolutions et langues
• remplir de longs questionnaires sur la confidentialité
• des instructions doivent être fournies aux évaluateurs pour tester l’application

Le dernier point en particulier constitue un obstacle courant, car ces types d’applications nécessitent souvent une connectivité aux backends internes ou des informations d’authentification qui ne peuvent pas être simulées pour les tests. Les mises à jour d’applications rejetées, les interventions manuelles fréquentes et les retards de publication inexplicables sont courants, sans parler du risque qu’une application critique pour l’entreprise soit supprimée de l’App Store parce que quelqu’un a oublié de réagir à un e-mail.

En comparaison, les applications Web sont faciles à distribuer et ne nécessitent pas de ressources ou de personnel spécialisé sur Android ou iOS. Le déploiement d’une application Web est généralement automatisé à l’aide d’un pipeline CI/CD, sans interaction ni retard de l’utilisateur. Une application Web est toujours à jour, il n’y a aucun processus de révision et vous contrôlez totalement le canal de distribution.

Fatigue des applications

L’absence d’application est également de plus en plus considérée comme un différenciateur positif, car les utilisateurs en ont assez d’installer des applications sur l’écran d’accueil encombré de leur téléphone, en particulier celles qu’ils n’utilisent pas quotidiennement.

Offrir une expérience agréable basée sur un navigateur, sans obstacles supplémentaires à franchir, est apprécié, en particulier par les personnes férus de technologie. Et avec les applications Web progressives (PWA), vous pouvez toujours ajouter l’installation sur l’écran d’accueil ou des fonctionnalités hors ligne.

Pour les applications internes, l’affichage d’un code QR à un endroit bien en vue est un moyen simple de lancer votre application, car presque tout le monde connaît le concept de scanner un code QR pour ouvrir un site Web après la pandémie.

Créer une application de numérisation avec STRICH

Créer une application qui scanne les codes-barres est très simple avec STRICH. Pour illustrer, nous allons créer une application de scanner de tickets.

Obtention d’une clé de licence

STRICH nécessite une clé de licence valide pour être utilisé. Pour obtenir une clé, vous devez créer un compte dans le Portail Clients et démarrez l’essai gratuit. Vous spécifiez ensuite les URL sous lesquelles votre application est accessible et créez la clé.

Dans l’exemple ci-dessous, nous ajoutons trois URL : une pour le développement, une pour un environnement de test et une pour la production.

Remarque : les applications qui nécessitent un accès à la caméra doivent être servies à partir d’un contexte sécurisé, ce qui signifie que la connexion doit être sécurisée (HTTPS) ou via localhost. Des outils comme jupe facilitez cela en mappant un port local sur une URL accessible au public avec un certificat TLS généré automatiquement. Mais vous n’en avez pas besoin si vous êtes à l’aise pour configurer vous-même des certificats.

Ajouter le SDK à votre application

Une fois que vous avez obtenu la clé de licence de votre application, vous pouvez continuer et installer le SDK. Si vous utilisez npm pour gérer vos dépendances, vous pouvez utiliser npm install comme pour toute autre dépendance :

npm install @pixelverse/strichjs-sdk

Ensuite, dans le code de démarrage de votre application, fournissez la clé de licence au StrichSDK.initialize() méthode:

StrichSDK.initialize('<your license key>')
    .then(() => console.log('STRICH initialized'));

Une fois la promesse résolue, le SDK est prêt à être utilisé.

Implémentation d’un cas d’utilisation de numérisation

Nous pouvons maintenant commencer à mettre en œuvre le flux réel de lecture des codes-barres.

Pour cet article, nous allons construire un simple scanner de tickets. L’application scannera le code-barres d’un ticket, affichera le numéro du ticket, la validité et les informations sur le titulaire. La recherche de ce dernier impliquerait probablement une requête HTTP, que nous omettreons par souci de simplicité.

Choisir une mise en page

La plupart des applications de numérisation adoptent une disposition en écran partagé, où la partie supérieure contient l’aperçu de la caméra et la partie inférieure fournit le contexte du processus, l’affichage des résultats et les actions. Notre application de numérisation de tickets adoptera une mise en page composée des éléments suivants :

• Entête: affiche un titre à titre indicatif.

• Zone de numérisation: Où le flux de la caméra sera affiché.

• Données: Le numéro du billet scanné ainsi que le nom et l’âge du titulaire, qui peuvent avoir été récupérés auprès d’un service.

• Actions: Un ensemble d’actions à entreprendre après avoir scanné un ticket. Les actions doivent être situées en bas de l’écran pour permettre un accès facile avec le pouce.

Une fois la mise en page en place, nous pouvons commencer à rassembler du HTML, CSS et JavaScript.

Le code HTML de l’application est présenté ci-dessous. J’ai omis le style car ce n’est pas très intéressant. Le code source complet de l’exemple est disponible sur GitHub:

<html lang="en">
<head>
    <title>Ticket Scanner Example</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <style>
        
    </style>
</head>
<body>
<main>
    <header>Ticket Scanner</header>
    <section id="scanner">
        
    </section>
    <section id="results">
        <h3>Ticket #</h3>
        <p id="ticket_number">
            -
        </p>

        <h3>Ticket holder</h3>
        <p id="ticket_holder">
            -
        </p>
    </section>
    <section class="actions">
        <button id="deny_button">DENY</button>
        <button id="admit_button">ADMIT</button>
    </section>
</main>

<script type="module">
   <!-- see next chapter -->
</script>
</body>
</html>

Configurer un lecteur de code-barres

Écrivons du JavaScript pour connecter un lecteur de codes-barres au HTML. L’élément qui hébergera le lecteur de code-barres a une valeur d’ID de scannerafin qu’il puisse être référencé via un sélecteur CSS #scanner. En supposant que nos billets comportent des codes-barres Code 128 (le type le plus courant, à l’exception des codes EAN/UPC utilisés dans le commerce de détail), nous configurerons le BarcodeReader comme suit:

let theBarcodeReader = null;

function initializeBarcodeReader() {
    let configuration = {
        selector: '#scanner',
        engine: {
            symbologies: ['code128']
        }
    };
    new BarcodeReader(configuration).initialize()
        .then(reader => {
            reader.detected = (detections) => {
                displayTicket(detections[0].data);
            };
            
            theBarcodeReader = reader;
            return reader.start();
        });
}

Nous stockons une référence nouvellement créée BarcodeReader dans une variable afin que nous puissions y accéder plus tard.

Gestion des détections de codes-barres

Lorsqu’un code-barres est détecté, nous invoquerons displayTicket() pour afficher le numéro du billet, ainsi que des données fictives sur le détenteur du billet. Dans une application réelle, ce serait l’endroit où nous émettrions une requête HTTP à l’aide de l’API fetch et recherchions les données associées au ticket dans une base de données.

Ici, nous affichons simplement les valeurs, mettons l’analyse en pause et activons les boutons d’action. Les boutons d’action effaceront les valeurs affichées et reprendront la lecture du code-barres :

const admitButton = document.getElementById('admit_button');
const denyButton = document.getElementById('deny_button');
const ticketNumberLabel = document.getElementById('ticket_number');
const ticketHolderLabel = document.getElementById('ticket_holder');


function displayTicket(ticketNumber) {

    
    theBarcodeReader.stop();

    
    ticketNumberLabel.innerText = ticketNumber;
    ticketHolderLabel.innerText = 'John Doe'; 
    admitButton.disabled = false;
    denyButton.disabled = false;
}


function resumeScanning() {
    ticketNumberLabel.innerText = '-';
    ticketHolderLabel.innerText = '-';
    admitButton.disabled = true;
    denyButton.disabled = true;

    
    theBarcodeReader.start();
}


admitButton.onclick = () => {
    resumeScanning();
};
admitButton.disabled = true;
denyButton.onclick = () => {
    resumeScanning();
};
denyButton.disabled = true;

Mettre tous ensemble

Pour garder les choses aussi simples que possible, j’ai choisi de mettre l’intégralité de l’application dans un seul fichier HTML, avec les styles CSS et le code JavaScript intégrés dans le HTML. Ce n’est certainement pas une pratique recommandée, mais cela permet de conserver un exemple simple et de rappeler utilement que le développement d’applications Web peut être aussi simple !

Le fichier HTML unique dans son intégralité est disponible sur GitHub.

Voici une démo de l’application faisant son travail :

Conclusion

Dans cet article, j’ai montré comment créer une application simple d’analyse de tickets qui utilise le TIRET SDK de numérisation de codes-barres. Les applications Web offrent des avantages incontestables par rapport aux applications natives, en particulier pour les applications internes qui n’ont pas besoin de se trouver dans l’App Store. Les navigateurs Web modernes, combinés à un SDK performant comme STRICH, permettent de créer des applications de lecture de codes-barres conviviales, rapides, rentables et amusantes.