Kuzzle blog FR

Découvrez la nouvelle Admin Console v4

Rédigé par Luca Marchesini | 02 février 2021

 

Le 4 février 2021, la console d'administration disponible sur https://console.kuzzle.io sera mise à jour de la v3.x à la v4.0.

 

Aujourd'hui, c'est avec une grande fierté que nous annonçons la sortie de la version 4.0 de la console d'administration de Kuzzle, une réécriture en profondeur qui nous a pris plus d'un an. Cette nouvelle version comprend une refonte complète de l'interface, une stabilité améliorée grâce à des tests approfondis de bout en bout, un meilleur état hors ligne et de nombreux petits détails qui, nous l'espérons, rendront votre expérience quotidienne plus agréable.
Allons dans les détails !

Nouveau design

L'Admin Console Kuzzle a subi plusieurs itérations de conception. Elle a commencé comme une application AngularJS, avec une interface utilisateur de type "Material Design". Nous l'avons ensuite entièrement réécrite dans VueJS (nous étions d'ailleurs parmi les premiers à adopter ce framework, juste avant la sortie de la version 1.0) et avons conservé cette orientation Material Design en adoptant une bibliothèque CSS appelée MaterializeCSS. C'était cool à l'époque. Mais très vite, nous avons commencé à sentir que les bibliothèques CSS massives n'étaient pas en phase avec la conception orientée composants que des frameworks comme Vue et React ont encouragée ces dernières années. Nous avons ressenti le besoin d'avoir le CSS encapsulé dans le composant, mais nous n'avions pas la bande passante de travail pour l'implémenter pour tous nos composants. Nous l'avons donc conservé, accumulant les dettes techniques année après année. Au moment où cette dette a bloqué une simple amélioration, eh bien... C'est l'étincelle qui a allumé le feu. Il était évident que nous devions recâbler l'interface utilisateur avec une bibliothèque de composants appropriée, comme celles que nous avons vu apparaître au cours de ces années. Nous pouvions conserver le style Material (Vuetify est une excellente bibliothèque, en fait), mais nous avons opté pour Bootstrap, que nous avons préféré sur le plan esthétique. Nous voici donc dans la situation suivante : chaque composant de l'Admin Console de Kuzzle a été réécrit à l'aide de BootstrapVue. Nous espérons qu'il vous plaira autant qu'à nous.

Compatibilité entre plusieurs versions backend

 

Lorsque nous avons abordé l'énorme travail de refonte de l'application dans son ensemble, nous avions ce mantra : "Juste.Toucher.Au.Design".

Bien sûr, nous ne voulions pas disperser notre énergie. Nous avions un objectif et nous voulions que tout le monde s'y consacre. Mais, redessiner les choses implique de les utiliser et les utiliser implique, eh bien... Trouver des bugs. Donc le mantra a évolué : Juste.toucher.Au.Design.Et.Déboguer.

Ok, toujours concentré. Super. Mais... À quoi bon corriger les bogues si les corrections ne sont pas testées ?

Juste.Toucher.Au.Design.Et.Débuguer.Et.Les.Tests

À ce moment-là, on a perdu le fil : mais pas pour une cause perdue ! Fonctionnalités !
En fait, nous nous sommes libérés et avons commencé à parler de ce que nous trouvions scandaleusement frustrant dans l'ancienne console d'administration.
La première chose absolument hideuse dont nous voulions nous débarrasser était celle-ci.

Qui est maintenant remplacée par celle-ci.

C'est tout : la nouvelle Admin Console est compatible avec Kuzzle v1.x et v2.x

Namasté.

Amélioration de l'état hors ligne

C'était donc ça. Nous étions enthousiastes. Nous voulions livrer quelque chose de grand. Et c'est la raison principale pour laquelle il a fallu tant de temps pour la sortir. Oh, et bien sûr, les tonnes d'autres choses qui sont devenues prioritaires pendant ce temps, se mettant en travers du chemin pour interrompre votre travail. Comme les pandémies, pour n'en citer qu'une.

Donc, un autre comportement ennuyeux que nous voulions changer était l'état hors ligne. La console d'administration est connectée à Kuzzle via un Websocket qui, comme toutes les connexions persistantes, peut être perdu et ensuite récupéré. Il est tout à fait normal qu'une application moderne soit temporairement hors ligne, c'est pourquoi le SDK Javascript de Kuzzle a un état hors ligne et un mécanisme de reconnexion automatique.

Dans l'Admin Console v3, chaque fois que la connexion était coupée, la page entière était remplacée par une vue "Connexion indisponible". Et c'était vraiment ennuyeux. Surtout si vous remplissez un formulaire, car une fois la connexion rétablie (disons 5 secondes plus tard), toutes les données du formulaire étaient perdues. Nous avons rendu certains utilisateurs complètement fous avec cela, et nous nous en excusons profondément.

Bonne nouvelle !

 

 

 

La nouvelle console d'administration garde son état en sécurité lorsque la connexion est coupée. Vous pouvez continuer à travailler sur vos formulaires pendant que la connexion se rétablit.

 

Amélioration des filtres de recherche

L'état hors ligne et la connexion backend multi-versions ont ouvert la voie à une série d'améliorations minuscules, mais cool. La première d'entre elles est le filtre avancé, qui permet de construire une requête à Elasticsearch à l'aide d'une interface visuelle.

La nouvelle conception rend le filtre plus lisible. De plus, lorsqu'un filtre de recherche est appliqué à la vue des documents, une pilule informe l'utilisateur de manière plus claire.

Mais nous avons également ajouté deux fonctions intéressantes : un bouton "plein écran" et la possibilité de voir la forme brute JSON du filtre. Jetez un coup d'œil.

 

 

Filtres de recherche favoris et historique

En plus de ces petites améliorations soignées, il y a eu un élément important d'une fonctionnalité demandée par un de nos clients : la possibilité de voir l'historique des recherches. Nous avons décidé de l'implémenter, mais nous l'avons doublée d'une fonction supplémentaire qui consiste à enregistrer un filtre de l'historique dans un dossier Favoris. Et voilà, c'est fait : dites bonjour à votre collection de filtres.

 

 

Amélioration de la barre latérale gauche

Nous avons également décidé d'améliorer la barre latérale. Elle est maintenant redimensionnable, et elle charge les collections en differé. Cela permet d'accélérer le processus d'amorçage lors de la connexion à des instances de Kuzzle comportant de nombreuses collections.

 

 

Amélioration de la gestion des connexions

 

Le formulaire de création de connexion (anciennement appelé "environnement") a été en fait la première chose que nous avons redessinée, puisqu'il s'agit de la première vue à laquelle l'utilisateur est confronté lorsqu'il ouvre l'Admin Console. Au cours de la refonte, nous avons repéré quelques hoquets de l'affichage et nous les avons corrigés. Tout d'abord, nous avons ajouté un système de validation, afin de vous fournir un meilleur retour d'information. Nous avons également amélioré le dialogue d'importation, afin que vous puissiez glisser et déposer vos connexions exportées. Ensuite, un problème ennuyeux s'est glissé : lors de la migration depuis la v3, vous pouviez obtenir toutes vos connexions, mais elles étaient incomplètes, car elles ne spécifiaient pas la version de Kuzzle. Nous avons donc ajouté un retour d'information plus significatif sur les connexions malformées.

 

 

Amélioration de la validation des formulaires

Une fois que nous avons ajouté la validation au formulaire de création de connexion, nous avons voulu étendre cette fonctionnalité partout où il était utile de l'avoir, comme dans les dialogues de création d'index et de collections ✅💯

 

 

Amélioration du flux de création des utilisateurs

Dans la version 3, la création d'un utilisateur était un assistant en trois étapes. Nous n'aimions pas vraiment cela, surtout parce que certaines des étapes étaient facultatives (vous pouviez tout à fait laisser un utilisateur sans champs personnalisés). Nous avons amélioré ce flux de travail en rendant l'interface utilisateur par onglets, en rendant le formulaire d'identification plus clair et en ajoutant une validation entre les onglets.


Amélioration de la navigation dans les index et les collections

Chez Kuzzle, nous croyons au plaisir des détails. La stabilité, la prévisibilité et une bonne conception ne sont pas les seuls éléments qui permettent à l'utilisateur de vivre une expérience agréable. Elle s'accompagne de détails agréables qui peuvent être un peu difficiles à trouver, comme les filtres de mise au point automatique dans les listes d'index et de collections. Une fois que vous voyez la liste, il suffit de commencer à taper et la liste sera filtrée : une fois que votre index est en haut de la liste, il suffit d'appuyer sur "Entrée" et, boum ! Vous êtes dans le premier item de la liste filtrée.

 

Conclusions (a.k.a. S'il vous plaît, faites-le nous savoir !)

Nous avons commencé à travailler sur cette nouvelle version à la fin de 2019 et, une pandémie plus tard, nous voilà : le bébé est né. Nous sommes conscients qu'en plus des nouvelles fonctionnalités, nous avons envoyé quelques nouveaux bugs ici et là. S'il vous plaît, soyez patients. Et faites-nous savoir ce que vous pensez de la nouvelle console d'administration. Vous pouvez le faire en ouvrant des tickets sur le repo GitHub ou en nous envoyant un message sur Discord. Votre avis est la chose la plus précieuse que nous puissions avoir, après tout ce travail.

 

Enjoy ! 🎉

 

P.S. Oh et, bien sûr, si jamais vous vouliez continuer à utiliser la v3.x, c'est toujours possible (mais cette version ne sera plus maintenue) en l'installant à partir des sources.