Laravel Nova tutoriel – l’interfacage PHP avec Vue JS

Pour les fêtes, on m’a offert un super package: Laravel Nova (merci Mathieu). Nova est un addon créé par le fondateur de Laravel : Taylor Otwell.
Celui-ci permet de créer une interface d’administration en créant seulement quelques fichiers de configuration. Dans l’exemple ci-dessus, nous avons par exemple, une interface permettant de gérer 6 ressources. En règle général, il faudrait créer autant de controller et de fichiers de template pour gérer les 4 cas (création, mise à jour, suppression, et affichage) pour chacune des ressources. Mais ici, Nova, nous simplifie le travail. Il suffit de lui dire de quel objet on parle, de lui indiquer si tel champ est une liste déroulante, un booléen, une date, un objet client… et celui ci se charge de nous construire tout ça. Voyons ensemble comment tout ça fonctionne…

Laravel Nova – le dashboard de base :

Ici, en plus des 6 ressources que l’on peut modifier, vous voyez s’afficher des métriques en haut de page. Encore une fois, quelques fichiers de configuration nous permettent de les générer via des requêtes Eloquent (SQL). Il y a encore des tas d’options qu’on peut facilement rajouter: des filtres, des actions… La doc est très fournit et vous indiquera comment paramétrer tous ces fichiers. Regardez comment le résultat de l’édition d’un post est propre.

Vous avez également l’excellente vidéo de Thibaud Dauce qui vous expliquera comment accéder aux fonctions de base.

Mais on ne vas pas s’arrêter là. Le but d’un tableau de bord c’est quand même de rassembler tout ce dont on a besoin, et notamment d’avoir des graphiques personnalisés, et là c’est un peu (pour ne pas dire beaucoup) plus compliqué !

Laravel Nova: Surcharger le tableau de bord avec les outils:

Lorsque vous souhaitez ajouter des écrans à votre menu de gauche, il vous faudra passer par cette partie là: https://nova.laravel.com/docs/1.0/customization/resource-tools.html#overview
Personnellement, je m’attendais à récupérer un fichier PHP avec une inclusion d’un layout pour reprendre l’interface principale, mais pas du tout. D’un framework PHP, on est passé à Vue JS.
Le template généré est un fichiers vue.js et appelle des javascripts pour récupérer les données. Et pour ceux qui ne comprennent pas comment ca peut fonctionner, alors regardez ca:  https://laracasts.com/series/learn-vue-2-step-by-step/episodes/27

Voila pourquoi Nova, nous donne un fichier de route qui s’appelle api.php. En réalité, vous devez créez vos objets en JS, et faire des méthodes pour récupérer les données via Eloquent et transmettre le tout en JSON à la vue. C’est certes très rapide, mais pour ceux qui comme moi ne connaissent pas plus que ca node JS, c’est très déstabilisant.

Backend/ PHP / API / JS / Frontend.

Désormais, les applications fonctionnent comme cela: vous avez une couche PHP qui se charge de récupérer les données, et de les transmettre en JSON avec une API (ce qu’on appelle le développeur backend). Ensuite, charge au développeur frontend de les utiliser et de les faire s’afficher du mieux possible (ici à l’aide de Vue JS). Cette approche permet notamment une plus grande flexibilité et rapidité de l’application. Le jour ou vous ferez une application mobile, vous aurez déjà le socle de base et il ne vous restera plus que la mise en forme. Mais la transition fait mal, et c’est vraiment pas facile de s’y mettre 🙁 .

Conclusion:

Nova est encore jeune, et ne fonctionne pas comme il devrait sur tout. L’interfaçage de Spatie Laravel MediaLibrary par exemple émet quelques limites dès lors qu’on associe plusieurs fichiers à une collection, et on trouve aussi quelques problèmes de modification de libellés. Ca va surement s’améliorer rapidement, mais sachez le pour une mise en production, c’est encore « chaud ».
D’ailleurs si vous voyez Nova comme un outil génial qui va transcender vos interfaces d’administration, mais que nous n’avez pas le temps / la connaissance de Vue JS, alors passez votre chemin. Vous allez plus galérer qu’autre chose. En ce qui me concerne, je vais prendre le temps d’approfondir, car de toute façon, la connaissance d’un framework JS quel qu’il soit est aujourd’hui d’après moi : une nécessité.