[ Application 58] « Scanne ton Employé » Journal de développement au jour 2

scanneIntroduction JOUR 2


Aujourd’hui, je me concentre sur la validation du formulaire et la génération de la carte plastique avec le code barre.

A ce stade, on peut taper les données d’un utilisateur, puis cliquer sur le boutton « Générer la carte » pour générer la carte et le code barre de l’employé, on génére aussi l’identifiant.

Si on imprime avec une imprimante ce code barre puis qu’on le scanne avec le scanner USB, alors, on récupère l’identifiant de l’employé !

Tout cela se passe uniquement dans la vue nouveau.html et dans le controleur ‘nouveauCtrl’

J’ai fait tout ça en 3h30 à peu près.

Pour tester l’état de l’application au jour 2, cliquer ici .

Explication Technique :


  • Compatibilité : Chrome, Opéra, non compatible avec Firefox(pour l’instant, à cause de l’input Date et de la validation formulaire)
  • Pour générer un code barre en fonction d’une variable, j’utilise la directive suivante AngularJs 1.5 : https://github.com/zhuk-aa/angular-barcode-generator.
  • La variable générant le code barre est la concaténation de la première lettre du prénom et du nom, ainsi que la date de naissance de la personne, cela crée un ID qui sera utilisé pour identifier les personnes, dans le programme, et lors d’un scan laser.
  • La validation des champs utilise la validation interne du navigateur et en même temps la validation optionnelle de AngularJs, qui se vérifie lorsque myForm.$valid est true, en fait, je me sers de cette validation pour valider les données pour la génération de la carte ET pour valider l’enregistrement en base de données du nouvel employé. AngularJs 1.5 permet de vérifier la longueur d’une variable entrée par exemple et bien plus.
  • Pour rappel, toutes les variables du formulaire sont contenues dans un objet JSON qui se modifie en temps réel, il s’appelle $scope.nouvelEmploye , du coup, si je mets à jours le nom du nouvel employé dans le formulaire, alors la variable $scope.nouvelEmploye.nom sera peuplée.
  • Un autocomplete GoogleMap remplit automatiquement la case adresse, façon noSql-bigData

PROBLEME PROVISOIRE AVEC L’IDENTIFIANT D’UN EMPLOYE:

La contrainte d’intégrité et d’unicité de l’identifiant d’un employé n’est pas respectée au jour 2.

Autrement dit, le système de concaténation de la première lettre du prénom, du nom et de la date de naissance n’est pas suffisant, parce que, dans le cas ou il y a ait 100 000 employés, il est probable qu’il y aura des doublons.

Mais pour l’instant, j’ai du faire comme cela, parce que sinon, si l’identifiant est trop grand, le code barre généré dépasse le format de la carte !

Il faudra donc revenir sur ce système… De toute façon on peut tout placer dans le code barre, même un identifiant auto-incrémental généré par Mysql, on fait ce que l’on veut dans la mesure ou la contrainte d’unicité et d’intégrité soit respectée, hi hi !

Photo de l’application:


app

Le code :

Lire la suite

Publicités