[Application 58] « Scanne ton Employé » : Scanner avec un scanner de code barres Usb et générer des codes barres graphiques avec AngularJs 1.5 et Jquery

scanne

Introduction et choix du langage:


Aujourd’hui, je vais créer une application permettant de créer, puis de scanner les cartes des employés qui veulent rentrer dans une entreprise ou une salle de sport ou une administration:

asufit-salle-sport-union-toulouse-entree

Cela devrait durer quelques demi journées maximums. On peut également imaginer générer des codes barres personnalisés, puis les envoyer à des personnes par courrier pour leur permettre l’accès à un endroit
ou le lecteur de code barre permet l’ouverture d’une porte.

Le langage utilisé est  JS, pour le back end : Php Mysql Procédural ou Firebase noSql. Le framework utilisé est AngularJs 1.x parce que c’est une solution flexible et agréable.

On n’utilise pas AngularJs 2.0, parce que la syntaxe est trop complexe, et que l’intérêt de JS et de angularJs 1.5 est qu’il est permissif, intuitif, simple,collaboratif et flexible et surtout MVC, on conserve donc la solution pendant les 5 ans à venir, afin de pérénniser dessus. On verra dans le futur si on peut créer des classes comme avec JAVA avec la nouvelle version de JS, mais pour l’instant c’est inutile, on peut s’en passer.

lecteur-code-barre-metrologic-ms3580-quantum.jpg

Js travaillant en temps réel, on le privilégie de suite par rapport aux autres solutions. On évite les anciennes solutions susceptible de nous freiner ou beaucoup trop complexes  (Eclipse, Zend, Symphony…A éviter, on a déjà notre Framework moderne MVC AngularJs 1.5 qui fait tout, surtout avec ses plugins!).

Bien sur comme d’hab, on nomme dès qu’on le peut ses fonctions, variables, et commentaires en Français, vu qu’on est dans le cadre de la création d’une application francophone .

Le matériel nécessaire :


J’ai donc acheté un lecteur de carte USB sur Ebay pour 13 euros:

Il est à noter qu’il n’est pas envoyé directement de Chine.

$_12.JPG

Pourquoi USB? Parce que pour une utilisation professionnelle, il vaut mieux qu’un scan de téléphone portable, de plus il a un mode « scan permanent » comme dans les hypermarchés ou les usines, ce qui fait qu’il peut rester allumé en permanence devant une porte par exemple. Par contre attention, il s’agit d’une prise USB de taille classique, attention, donc si on doit le brancher dans une tablette ou un téléphone portable !

1 Semaine plus tard, je reçois le colis chez moi:

dfefezfez

Le matériel est de facture honorable, le plastique semble robuste.

La notice est en anglais, mais très bien faite, les codes barres présents dans le livret permettent de paramétrer le lecteur, par exemple on peut lui dire d’insérer des caractéres en préambule des codes scannés.

J’ouvre notepad, et scanne un vieux paquet de la poste, cela fonctionne impeccable et de suite, pas besoin d’étalonner le matériel.

Ce qu’il faut comprendre, c’est que sous Windows 7,8 ou 10 Le scanner s’installe tout seul, puis est vu comme un clavier par l’ordinateur… Les infos transmises par le scanner à l’ordinateur sont donc un peu comme si on tapait au clavier. Ca marche donc partout, dans les champs input Html par exemple, sans rien faire.

OK, mais ou va être stocké le code barre qu’on aura scanné ?


Comme d’hab, jo… Dans un objet JSON , qui sera lui même éventuellement contenu dans un tableau d’objets JSON.

Un exemple du look de l’objet JSON suite au scan ?


{"codeBarre ": "LMF0545757574","dateScan":"12/12/2017","heureScan":"12:30:05"}

Ben tu vois, y’a la date et l’heure du scan, il nous reste plus qu’à transférer cet objet JSon au Back end pour réaliser une identification, des comparaisons et des statistiques, jo !

Bien sur, il sera tout en français notre objet Json, comme d’hab, jo, on utilise que le langage français , vu que ce sera notre argument de vente !

Les fonctionnalités de mon application  :


  • Création d’un compte et  génération d’un code Barre affilié à ce compte, imprimable que l’on colle sur la carte (Analyser le prix des solutions d’impression concrêtes sur carte). Stockage sur la Base de données.
  • Le scanner est placé devant une porte, lorsque l’employé scanne sa carte, l’écran d’accueil affiche « Bonjour Mr X » si il est reconnu. La date et l’heure de scan sont inscrites dans la base de données. Un graphique statistique génère le nombre d’entrées et de sorties des employés pour voir si ils bullent beaucoup dehors, lol.

Technique de développement


Pas besoin de UML pour un exercice pas complexe. Une ou deux tables SQL suffisent ou alors un modèle de données noSql.

Difficultés


  • Il faut s’assurer que la librairie JS qui va générer les codes barres, génère des codes barres compatibles avec notre lecteur universel de codes barres.
  • Dans le cas d’une impression Papier du code Barre, s’assurer que le taux de succès de lecture du code barre soit au moins de 95 pour cent
  • Un code barre généré ne peut être identique à un code barre pré-existant, logique non, jo ?

Et tu vas coder ton générateur de Code barre toi même ?


Ben non, je suis pas assez bon pour faire ça mais je vais prendre un code ou une librairie JS sur le net :

  • https://itlearnings.wordpress.com/2011/01/08/javascript-code128-barcode/
  • https://github.com/zhuk-aa/angular-barcode-generator
  • http://demos.telerik.com/kendo-ui/barcode/angular
  • http://barcode-coder.com/en/barcode-jquery-plugin-201.html

Et tu vas quand même faire des tests unitaires ?


On pourra essayer d’en faire, AngularJs 1.5 étant prévu pour ça.

Publicités