Easy-rdv, un projet en Laravel

Dans le cadre d’une petite formation (399 heures) de Concepteur Développeur Web fin 2019, j’ai eu l’occasion de découvrir mon premier framework Php, Laravel. D’ailleurs, un des objectifs de cette formation était la réalisation puis la présentation d’une application réalisée en groupe. Trois thèmes étaient imposés, dont la prise de rendez-vous.

Projetons-nous

Le thème qu’on a choisi était donc les rendez-vous (au cas où c’était pas encore clair). C’est tout. Aucune autre instruction, ni contrainte. Faire une appli tournant autour de la prise de rdv. Donc après avoir un peu cogité, on a décidé de faire un truc (oui oui, on fait des « trucs ») s’inspirant de Doctolib, mais pas uniquement pour le domaine de la santé.
La cible ? Quiconque peut avoir besoin de gérer ses rendez-vous. Autoentrepreneurs, médecins, professions libérales… Le but : simplifier la prise de rdv et au passage s’assurer d’une présence sur le web.

Easy Team

On était quatre, et on a voulu faire ça bien. Personnas, diagrammes, on a avancé étape par étape. On a réfléchit tous ensemble au pourquoi, au comment. Et à un nom, aussi : Easy-RDV.
Tania, qui a endossé (avec brio) le rôle de chef de projet, a réalisé toute la partie conception. On réfléchissait ensemble, certes, mais elle a fait les diagrammes, puis le prototypage et, après avoir décidé d’une charte graphique, une super maquette (voir ci-dessous).

Maquette de la page d'accueil d'Easy-RDV

Sans dec, la classe, non ? Du travail de pro ! Pour voir son boulot, vous pouvez aller sur son site pro ou sur son Behance. Elle est balèze.

Ensuite on s’est chargé du développement. Erwan a créé la base de donnée et une grosse partie du back-end, dont l’authentification. Pendant que Javier s’occupait de certaines fonctionnalités, ma partie à moi a principalement été la prise de rendez-vous. L’interaction entre l’appli et l’utilisateur, de la vue au contrôleur. Pendant ce temps, Tania peaufinait le projet et réalisait les visuels. Ensuite, elle est passée à l’intégration avec Bootstrap.

On faisait le point régulièrement, sur les avancées, les difficultés, les solutions… Tout en continuant notre apprentissage de Laravel.
C’était pour moi la première fois que je bossais de cette manière, en équipe. Et bah c’était vachement cool.

Faire avec ce qu’on a

Une clé à griffe et une clé à molette
Représentation subtile du bricolage.

Pas le temps de tout apprendre. Les contrôleurs, les modèles, les middlewares, les vues… Tout était nouveau pour nous. La doc Laravel est devenue notre meilleure pote. Mais le temps d’assimiler les principes de base et le chrono était déjà bien engagé. Donc on a fait avec. On a complété les blancs à notre façon. Et ça a marché. On aurait pu faire mieux, mais à la fin le projet était fonctionnel et présentable.

Pas si facile, ces rdv

La principale problématique était donc la prise de rdv. Générer un agenda, easy. Surtout que c’est Erwan qui l’a fait. Mais comment entrer une information (un rdv) dans la base de données via une modale, sachant que l’agenda est présenté par tranches de cinq jours (ouvrables, on bosse pas prend pas de rdv le weekend), eux-mêmes redécoupés en tranches horaires ? Ça fait une sacrée grille… Et comment récupérer cette info pour l’afficher au bon endroit (et à la bonne personne) ? Et pouvoir la modifier aussi, ou la supprimer ?

JS à la rescousse

Meme Macguyver avec un missile
Montage élégant représentant Javascript.

Avec JS (et Php, et Laravel), on peut générer une modale qui pourra servir de formulaire, et avec les bons attributs dans le html, on pourra l’adapter à la demande. Les infos sont récupérées par le contrôleur, qui les traite avant leur envoi en base (ou non) et renvoie un message à l’utilisateur via l’interface (confirmant l’action ou non).
Pour ça, on a aussi besoin de routes adaptées, qui renverront vers différentes méthodes du contrôleur, pour différents traitements.
Ça à l’air simple, dit comme ça, mais j’ai bien galéré…

Alors il y avait certainement une autre façon de faire, mais sur le coup on a pas trouvé. Et même comme ça, un dev plus expérimenté aurait sûrement fait un truc plus propre. Mais il faut savoir se satisfaire des petites victoires, ça fait du bien. Alors quand le système a été fonctionnel, joie.

Je vais pas mettre le code JS. Il est trop long, et ce serait laborieux à expliquer. Je mets juste un bout du Controller (ici ProfessionalAreaController), avec les méthodes qui gèrent l’ajout et la modification d’un rdv.

Méthodes d'ajout et de modification d'une rdv du ProfessionnalAreaController

Les méthodes ci-dessus sont exécutées en fonction du formulaire que j’ai généré en Javascript, par l’intermédiaire des routes présentes dans le fichier web.php (storeRdv et updateRdv sont respectivement appelées par les deuxième et quatrième routes de l’extrait de code du web.php ci-dessous).

Routes de web.php pour la gestion des rdvs

Ouais, je sais. Cette partie s’appelle « JS à la rescousse » et je mets pas une ligne de JS… Bah je vais en mettre après. Je vais montrer d’autres fonctionnalités. Parce que oui, j’ai pas bossé que sur ça.

Recherche, JSON et auto-complétion

Au menu, pouvoir rechercher un professionnel, par métier et/ou localisation, mais aussi via son nom. On a donc deux formulaires différents. Pour améliorer la recherche, on devra pouvoir accéder aux données en base afin de faire des propositions à l’utilisateur quand il entre une valeur dans le formulaire, dès la deuxième touche (auto-complétion).

Formulaire de recherche de la page d'accueil
On a donc sur la page d’accueil deux formulaires bien distincts, pour deux types de recherche différents.

JSON + JS, la recette qui carbure

Avec Laravel, il est facile de mettre à disposition des données de la base (ici en MySQL) sous la forme de tableaux JSON. Deux choses à faire, une route et un contrôleur.

Routes de web.php

Les trois routes ci-dessus contenant « json » dans leur path (on peut appeler les chemins comme on veut, pas obligé de mettre « json ») renvoient à trois méthodes différentes du HomeController.

Méthodes JSON du HomeController

Dans le contrôleur, chacune de ces méthodes récupère des données dans la base, et les renvoie sous la forme d’un tableau JSON (à l’url demandée). L’instruction se fait sur deux lignes ! Pratique, non ?
Ici les deux premières méthodes récupèrent toutes les données de la table visée (les professions et villes disponibles). La troisième, elle, ne récupère que les utilisateurs dont la valeur de ‘role_id’ est 2. Cela correspond dans cette appli aux utilisateurs qui sont des professionnels.
On a donc au final trois tableaux JSON qui nous mettent à disposition toutes les infos dont on a besoin pour faire notre auto-complétion.

Et donc, pour traiter ces infos en temps réel (les propositions doivent s’affiner à chaque nouvelle lettre), quoi de mieux que Javascript ?

Code Javascript pour l'auto-complétion des localisations
Erratum : la méthode keyCode (KeyboardEvent.keyCode) ligne 23, est désormais dépréciée. La bonne pratique est maintenant d’utiliser la propriété KeyboardEvent.code

Comme on peut le voir ligne 3, on fait un fetch() sur l’url du tableau JSON qui nous intéresse (ici celui des villes) et on s’en sert ensuite pour remplir un tableau (créé ligne 1). On ajoute un écouteur d’évènement sur l’input concerné, qui parcourra le tableau et pourra ajouter les éléments correspondants sous la forme de balises « option« , sur lesquelles on ajoutera aussi un autre écouteur : si on sélectionne l’élément, l’input se verra attribuer la valeur de l’élément, et le bloc de proposition sera vidé.

Le fonctionnement est le même pour les deux autres input, à part que celui de la recherche par professionnel utilise non pas un tableau mais un objet (voir ci-dessous). En effet, le nom et le prénom, c’est bien beau, mais pour notre recherche en base, c’est l’id du pro qu’il nous faut.

Code Javascript pour l'auto-complétion des professionnels
Ici, ligne 1, on créé un objet vide et non un tableau. Globalement, le fonctionnement reste le même. Je vous laisse chercher… De rien.

Des contrôleurs un peu chargés

Voilà, on arrive au bout. Enfin !
Pour en terminer avec la recherche, voilà ce qu’il se passe dans le HomeController, pour la recherche par profession et ville (Méthode search(). La recherche par professionnel se fait dans une autre méthode, searchPro(), qui est bien plus petite).

Méthode search() du HomeController

Alors je vais pas tout détailler, en fait même pas du tout. En gros, la méthode vérifie les différents cas de figures possibles : recherche par ville, par profession ou les deux. Ça renvoie les résultats de recherche s’il y en a, ou un message à l’utilisateur dans le cas inverse.

En conclusion

C’était long !
On en a bavé, mais je ne regrette rien. Au début Laravel était repoussant mais finalement, super cool. J’aurais aimé passer plus de temps dessus. Là j’ai l’impression de n’avoir fait qu’effleurer les possibilités, comblant les manques avec du JS et du Php. Un jour, peut-être…

Merci à mes camarades pour leur taf, on avait une bonne synergie ensemble.
Pour plus de visuels sur le projet, il y a une page qui lui est dédié sur le Behance de Tania.
Bon visionnage !