shop-cart

Vous lisez actuellement: BlueDay #1 Scan moi le book

BlueDay #1 Scan moi le book

Le BlueDay, c’est notre petit hackathon à nous.

Chaque mois, un samedi, nous nous réunissons, hors de nos activités clients, pour travailler tous ensemble à la réalisation d’un petit projet. L’idée de la manoeuvre est de réussir à créer un outil en une journée, sur un périmètre définit à l’avance. Chacun peut alors tester de nouvelles technos, échanger sur du fonctionnel et obtenir de l’aide.

Du coup, le sujet de ce hackday ?

Chez blueAnchor.io, nous avons une petite bibliothèque (qui donnera d’ailleurs lieu à une série “On lit quoi“). Le soucis que nous avons, c’est qu’il est difficile de savoir qui à prit quel livre, depuis combien de temps et ce qui est disponible tout de suite dans la bibliothèque.

Alors, on a donc décidé de passer une journée à créer une petite interface qui nous permettra rapidement d’empreinter un livre et de le rapporter et d’avoir un peu de data à exploiter.

Un peu de règles métiers que diantre.

Cette interface, elle devra :

  • Nous permettre d’obtenir une liste simple des livres disponibles, avec un status de disponibilité
  • Nous permettre de scanner un livre, et d’en déduire des actions en fonction du contexte de l’objet scannée (ajout dans la base, empreint ou restituion)
  • L’interface doit être simple, optimiséé pour tablette et s’afficher telle une application

Alors, qui à fait quoi, et avec quelle techno ?

Thomas s’est occupé de l’api. Une api simple en NodeJs, qui va enregistrer les livres et permettre de changer le status en fonction d’un code EAN qui sera envoyé par le front.

Technos : NodeJs, Express, LowDB

Christophe a bootstrapé une petite app en Angular5, créé le modèle de données, et mis en place la partie graphique sur les trois pages actuelles avec Materialize :

  • Une page faisant office de garde, avec deux boutons pour se rendre sur la liste et sur le scan
  • Une page pour scanner et dérouler la logique d’appel à l’api
  • Une page pour le listing

Techno : Angular, Sass, angular2-materialize

Je me suis occupé de trouver la lib pour le scan et de la mettre en place, avec la logique pour la gestion des actions api à jouer en fonction du contexte du code barre. J’ai aussi mis en place le déploiement coté serveur avec l’installation d’un certificat SSL pour passer l’app en chrome web app (manifest-ement c’est réussi).

Techno : Quagga, Manifest, Angular

Bilan de la journée

On a bien bossé, avec une petite interface fonctionnelle, qui fait ce qu’on lui demande et qui s’installe très simplement sur n’importe quel périphérique en Chrome App.

On peut maintenant gérer les livres de façon très simple et on a surtout un sujet de fond sur lequel avancer. Et pleins d’idées à mettre en place sur cette petite application.

On fignole deux trois choses et on vous lâchera le code source pour que vous puissiez voir comment on a mis ça en place.

On aura aussi retenu :

  • Pour utiliser la camera sur une web app installable, il faut être en https, sinon, pas de cam pour des raisons de sécurité évidente 😛
  • Pour acheter des certificats pas cher, vous pouvez passer par gogetssl.com ; ça prend 5 minutes
  • Mettre en place un scan de code barre avec Quagga, c’est ultra simple

Avec

137

Vues


Écrit par

Julien Moulin

Julien est le lead-developer / CTO de blueanchor. Développeur fullstack, il évolue d’abord dans le monde Php/Symfony (chez SensioLabs), puis s’oriente vers Javascript pour performer en Angular. Formateur chez Linkedin learning, il met à profit son savoir auprès des utilisateurs de tout bord, en tentant de faire découvrir le monde du web au plus grand nombre.


Afficher la conversation (0)

Recommander cette page

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

0 People Replies to “BlueDay #1 Scan moi le book”