En décembre dernier, je me suis positionné en réponse à un appel au bénévolat pour la création d’un site Web pour une association œuvrant pour l’insertion professionnelle des adultes en situation de handicap, GreenActes, à travers le projet SoliTudiant.
L’objectif est simple : fluidifier l’échange entre les établissements accompagnants d’adultes handicapés et proposant des projets professionnels, les établissements scolaires qui y répondent et l’association qui fait le relai entre les deux.
Ce qui n’était pas simple en revanche, c’est le défi technique que représente la réalisation d’une telle plateforme, plus proche de l’application que du site Web et, surtout, loin de ce qu’on s’attend à trouver dans le portfolio d’un webdesigner no-code utilisant WordPress.
Avant toute choses, voici l’aperçu du projet : Plateforme d’inscription dynamique
Le "No-code" ou "Low-code" fait référence à des outils et des plates-formes qui permettent aux utilisateurs de créer des applications logicielles sans avoir à écrire de code traditionnellement. Les outils "No-code" sont conçus pour simplifier le processus de développement d'applications et pour rendre la création de logiciels plus accessible à un public plus large. Les outils "Low-code" quant à eux nécessitent une certaine connaissance en codage mais offrent une interface graphique pour faciliter le développement. Ces outils permettent aux utilisateurs de créer des applications personnalisées plus rapidement, avec moins de coûts et moins de ressources de développement, offrant ainsi une solution efficace aux entreprises de toutes tailles.
Le contexte du projet
Le cahier des charges demandé comportait plusieurs éléments que je vais synthétiser :
1/ Une interface principale avec à droite, une carte interactive et dynamique regroupant l’ensemble des projets disponibles et, à gauche, un listage avec l’ensemble des projets.
Chaque projet peut avoir trois états concernant la possibilité de s’y inscrire : « disponible », « en attente » (lorsqu’une demande a été faite mais qu’elle n’a pas encore été validée par les deux parties) et enfin, « inscription close ».
Les projets doivent être triables en fonction du domaine d’étude ou de leur disponibilité.
2/ Les éléments de la liste et les points sur la carte, cliquables, doivent rediriger vers un détail du projet en question. Ici doivent apparaître toutes les informations relatives au projet, sa situation géographique mais également un formulaire de contact sur la droite pour proposer, en tant qu’établissement scolaire, sa candidature au projet proposé.
Le formulaire doit automatiquement être masqué lorsque l’état d’inscription passe à « en attente » ou « clos ». Le remplissage du formulaire change l’état d’un projet « disponible » à « en attente », immédiatement, sans validation du côté de l’administrateur, et masque donc immédiatement le formulaire pour les prochaines sessions.
3/ L’espace d’inscription doit permettre aux établissements accompagnants de proposer des projets, de façon rapide et intuitive et sans nécessité d’inscription de leur part.
Ils doivent donc pouvoir remplir chaque champ qui sera ensuite converti en poste en attente de relecture et envoyé directement à un administrateur par mail qui pourra, en un clic, approuver ou désapprouver le projet.
Lorsqu’un projet est approuvé, il est automatiquement mis en forme et ajouté à la liste.
4/ Plusieurs déclinaisons sont attendues, comme une page de projet pour l’année en cours différente de la page de projet pour l’année suivante, mais également un formulaire d’ajout d’école sans projet suivant la même logique que l’ajout de projet.
L’objectif, pour résumer, était de rendre très rapide l’ajout de projet.
Lorsqu’un établissement accompagnant remplit un formulaire, l’administrateur du site reçoit un mail récapitulatif et un lien d’approbation. Si le projet est approuvé, il est immédiatement mis en forme, publié, ajouté à la liste et à la carte interactive et ouvert à l’inscription.
JetEngine : l'outil qui a tout rendu possible
Pour ce défi, la simple utilisation d’Elementor et des outils natifs WordPress est largement insuffisant. Si l’on souhaite rester dans une optique de no-code et ne pas développer de plugin sur-mesure ou de fonctionnalités / thème en php pour répondre à la demande, il va falloir s’équiper d’un outil particulier qui nous offrira tous les outils nécessaires au dynamisme et à l’automatisation du site.
JetEngine est un plugin édité par la société Crocoblock et compatible avec Elementor. C’est un plugin payant. (39€/an)
C’est une boîte à outils composée de plusieurs fonctionnalités :
- Le CPT (Custom Post Types) : permets de créer des types d’articles modifiables et d’éditer leurs champs. Ici, les articles seront des projets, et les champs définiront leur contenu. L’idéal est donc de décomposer au maximum le contenu dans différents champs afin de pouvoir les afficher à différents endroits côté éditeur.
- Les listing : ils permettent de créer via l’éditeur un type de liste et d’y afficher des champs dynamiques. Ici, les listages permettront d’afficher les projets sous forme de card avec un badge disponible, en attente ou clos et les informations de base. On utilisera aussi cette fonctionnalité pour déployer la liste des projets sur la carte géographique.
- La logique conditionnelle : elle permet d’afficher certains éléments en fonction du contenu ou de l’état des champs et leur valeur. Ici, elle sera utile pour afficher ou masquer le formulaire d’inscription en fonction de la valeur contenue dans le champ inscription.
- Le Query Builder : un outil très puissant qui permet de créer une requête personnalisée. Très utile pour afficher uniquement ce que l’on souhaite, par exemple, un listing affectée d’une requête personnalisée où l’on souhaite n’afficher que les projets de l’année en cours.
- L’association au Form Builder permet de lier des champs d’un formulaire aux custom fields des custom posts. C’est ce que j’utiliserais pour créer les formulaires qui ajouteront des posts en attente de relecture directement au bon endroit.
- D’autres fonctionnalités sont proposées, mais seules celles utilisées dans ce projet nous intéressent aujourd’hui.
JetEngine réponds à la problématique principale du contenu dynamique sur WordPress. Son utilisation structure nos pages et rend aisé l’affichage de contenus dynamiques en fonction des valeurs de champs, de l’utilisateur ou de la page consultée.
Comment j'ai procédé pour créer cette plateforme en no-code
Pour synthétiser la marche à suivre, je vais prendre l’exemple de la création d’un projet sur le site.
1ère étape : la création du custom post type
Ici, nous créons et différencions chaque champ qui composera notre futur projet. Chaque champ est associé à un type de champ et permettra, au niveau de l’éditeur, d’afficher le contenu aux emplacements souhaités.
2ème étape : le listing
La réalisation de la card via Elementor permet de mettre en forme les éléments précédemment crées à l’aide de l’utilisation des widgets d’éléments dynamique.
L’utilisation de la visibilité dynamique permettra l’affichage de badge différent, en fonction de la valeur contenue dans le champ « Inscription » (en attente, disponible, clos.)
3ème étape : La Custom Query
L’outil de Custom Query permet de créer et de configurer des requêtes qui peuvent ensuite être exploitées sur des widgets dynamiques de tout type.
Ici, nous décidons, entre autres, de n’afficher que les éléments de type Challenge dont la propriété « _year » (créée au préalable lors de la première étape) contient une valeur « next_year« . Ainsi, la liste soumise à cette requête n’affichera que les projets dont la radio « Année suivante » à été cochée par l’utilisateur.
4ème étape : Création de la carte interactive
JetEngine propose également une option pour ajouter au plugin une clé d’API, ici, nous utiliserons l’API GEOCODING de Google qui permet de transformer une adresse en coordonnées géographiques et donc de situer sur une carte un listing précis.
La carte contient donc, en plus des réglages classiques :
- Une clé API pour exploiter les services de Google et un champ d’adresse à lire,
- Un listing custom pour afficher, lorsqu’on clique sur un point ou que l’on survole un établissement, une card réalisée sur Elementor contenant les informations souhaitées à l’aide de dynamic fields,
- Une custom query pour trier les éléments souhaités selon la page d’affichage
5ème étape : Un formulaire et un système de mailing pour l'ajout de projet
La suite Crocoblock comprend également le plugin FormBuilder qui nous servira à créer un formulaire d’ajout avec les fonctionnalités suivantes :
- Chaque champ du formulaire est associé à un custom field du custom post type des projets,
- La soumission du formulaire déclenche l’ajout d’un article de type « Projet », en attente de relecture et envoie un mail à l’administrateur
- La validation du projet le rend immédiatement mis en page et disponible dans la liste
Conclusion : le no-code et WordPress, un duo gagnant pour des sites web dynamiques
Il est clair que l’utilisation de JetEngine sur WordPress dope le CMS et le transforme en véritable outil no-code, avec les avantages que cela induit.
Bien que WordPress soit souvent considéré comme étant principalement destiné aux projets simples dont le dynamisme se limite aux blogs et aux e-commerces, il est désormais possible d’aller bien au-delà de cette limitation grâce à des outils tels que JetEngine. Les possibilités offertes par le no-code sont nombreuses, que ce soit pour la création de portails web, de plateforme collaboratives, de web App style petites annonces ou offres d’emploi, de sites web communautaires, de sites web de réservation en ligne ou de tout autre type de projet.
En combinant le potentiel de WordPress et les avantages du no-code, il est possible de créer des sites web dynamiques, fonctionnels et attrayants pour les visiteurs, sans avoir à passer par la complexité du développement web traditionnel et en limitant grandement les coûts de production.
J’ai personnellement beaucoup aimé réaliser ce projet et relever ce défi technique en passant par le no-code. Mon seul retour d’expérience négatif se situe sur le point important de la vitesse de chargement : L’automatisation à outrance se fait souvent au détriment des performances. Il faut trouver le juste équilibre entre les deux, surtout sur les projets qui misent sur le référencement naturel. Dans mon cas, la plateforme étant sur un sous-domaine du site principal, cette question ne s’est pas posée. C’est d’ailleurs une solution idéale trouvée lorsqu’on souhaite ajouter un côté applicatif sur un site vitrine performant et optimisé.
Mon avis sur le No-Code, en général
Je trouve que le no-code est souvent sous-estimé et méconnu. Il est vrai que certains projets mal optimisés ont contribué à sa mauvaise réputation. Cependant, en réalité, le « no-code » offre énormément de possibilités et peut être utilisé de manière efficace pour créer des applications logicielles personnalisées.
Je suis convaincu que le no-code peut être une solution pour certaines entreprises ou associations qui cherchent à avoir une application complète à moindre coût. Il offre une alternative intéressante au développement traditionnel et peut être une réelle concurrence dans le domaine.
Le no-code peut aussi être un moyen efficace de prototyper rapidement une idée sans avoir à investir beaucoup de temps et d’argent dans le développement, ou pour automatiser des tâches répétitives ou pour améliorer des processus métier inefficaces.
