Des interfaces sur mesure avec le CMS Contentful — épisode 3 : REX, une UI Extension répondant à un cas concret
Cet article est l’épisode 3 d’une série de trois articles traitant de la réalisation d’interface sur mesure avec le CMS Headless Contentful et ses UI Extensions.
Il fait suite à l’article précédent, Réaliser sa propre UI Extension Contentful, où nous avons réalisé pas à pas une UI Extension sous la forme d’une petite application en ReactJS.
Bien que le résultat de cette petite application ne soit pas particulièrement extravagant, ce starter laissait présager de larges possibilités de réalisation. C’est ce que nous verrons ici, à travers un REX : une UI Extension sur mesure pour notre chargé de SEO.
En effet, aujourd’hui pour réaliser des sites de qualité et performants, nombre de personnes et de compétences se croisent et collaborent au sein d’une équipe. UI, UX, développeurs, intégrateur, éditeur, seo… à chacun ses objectifs et ses besoins.
Les CMS sur le marché proposent des solutions adaptées pour faciliter le travail des éditeurs et développeurs. Mais qu’en est-il des autres membres de notre équipe? Prenons donc notre chargé de SEO par exemple. Quelle serait pour lui la solution adaptée à ses besoins? Faudra-t-il attendre les nouvelles features de nos chers CMS pour voir ses attentes se réaliser?
Et bien non, car nous avons les UI Extensions !
C’est ici que nous allons pouvoir explorer le potentiel de ces dernières.
Un cas concret : une extension sur mesure pour notre chargé de SEO
Remettons en contexte le besoin nous amenant à la création d’une UI Extension dédiée au SEO :
Nous avons créé un site web. Les données utilisées par ce dernier sont hébergées sur Contentful.
Dans le space utilisé par le site, nous avons créé un content model Page. Chaque Page correspond à une page de notre site.
Parmi les membres de l’équipe intervenant dans la création du site web, nous comptons un chargé de SEO.
Pour pouvoir assurer la mise en place d’un SEO efficace pour les pages du site, il nous présente un certain nombre d’éléments essentiels.
Nous définissons ici une liste de ces derniers :
Pour l’ensemble du site :
- pouvoir définir un namespace OGP
- pouvoir insérer Google Tag Manager
Pour chaque page du site :
- pouvoir définir un titre et une description
- pouvoir définir des données Open Graph Protocol
- pouvoir ajouter des données structurées
- pouvoir définir si une page doit être indexé ou non ( usage de noindex )
Notre chargé de SEO a également une autre demande : celle de centraliser l’information pour gagner du temps, avoir une meilleure visibilité et pouvoir ainsi être plus performant dans son travail.
L’objectif de notre extension est de répondre à l’ensemble de ces besoins.
L’UI Extension SEO
Afin de créer cette extension dédiée au SEO, nous avons utilisé la même structure que le starter que nous avons réalisé dans l’article précédent.
Nous avons créé un content Model SEO avec un champ SEO Configuration dans lequel tourne notre UI extension.
Voyons le résultat de l’application complète de plus près :
Nous avons séparé l’application en deux modules, Global SEO et Pages SEO. Comme leurs noms l’indiquent, le premier répond aux besoins liés à l’ensemble du site, le second aux besoins spécifiques à chaque page.
Dans le module Global SEO, un champ permet de définir le name space OGP.
La section en dessous permet d’intégrer Google Tag Manager en ajoutant dans les champs correspondants :
- l’extrait de code <script> à insérer dans l’élément <head> du code HTML du site
- l’extrait de code <noscript> à insérer juste après la balise <body>
Dans le module Pages Seo, nous avons récupéré la liste des content Page, le SDK nous permettant d’interroger le space Contentful et d’en récupérer les contents. Via un select, nous accédons aux données SEO de la page.
Pour chaque page il est possible de définir le title et le contenu d’une meta description.
On voit également un bouton “FR“. Nous pouvons en effet, via le SDK nous pouvons récupérer les locales utilisées sur le space Contentful et prévoir ainsi un contenu adapté au multilingue.
Ici, le site n’a qu’une seule locale : FR. Si le site est multilingue, il serait possible de remplir les données en plusieurs langues.
Des champs sont également prévus pour les données Open Graph spécifiques à chaque page.
On remarque ici que pour le champ og:image, nous avons ajouté une image. Il est en effet possible de dialoguer via le SDK avec la bibliothèque de média du space Contenful, et donc de créer ou de récupérer des images ou tout autre asset existant dans la bibliothèque de média.
Enfin, il est possible d’ajouter à chaque page des données structurées.
Nous avons ainsi répondu à notre problématique :
L’extension est flexible et peut continuer à évoluer selon les besoins, avec davantage de champs et de nouvelles fonctionnalités.
Aller plus loin. CI, hébergement et versionning
À l’instar de n’importe quel projet web, il est possible mettre en place une intégration continue (CI) ainsi qu’un déploiement continu (CD). Plusieurs outils existent, à choisir selon vos préférences : CircleCI, GitLab CI, etc.
Concernant l’hébergement, plusieurs solutions sont également possibles. Il faut simplement héberger le build et rendre l’url de l’index.html de ce dernier accessible.
Une solution parmi d’autres est de déployer le build de l’extension sur AWS S3.
On peut également imaginer des systèmes de versionning.
Par exemple, nous ajoutons à notre pipeline de CI un job “tagging approval” déclenché au clique.
Lorsque ce job est lancé, le tag du repository git est incrémenté puis nous déployons le build dans un dossier correspondant au tag.
Au tag 1, un dossier 1 est créé sur AWS S3 et contiendra le build de l’extension avec la version git correspondante, soit :
Nous pouvons ensuite utiliser l’url de la version tagué de l’extension dans Contentful.
Il est ainsi possible de faire évoluer l’extension tout en conservant une version stable dans nos projets Contentful et de contrôler les montées de version.
Dans le cadre de l’UI Extension SEO que nous avons présenté précédemment, nous avons fait les choix suivants :
- CI/CD : CircleCI
- hébergement : AWS S3
- versionning : système de tag vu précédemment
Pour conclure
Notre chargé de SEO est content et nous aussi !
D’accord, mais au-delà de ça?
Au-delà de ça, nous avons pu découvrir que la création d’UI Extension Contentful permet de personnaliser les interfaces et la structure du contenu en fonction de ses objectifs.
Ces larges possibilités offertes par le développement d’une l’application sont la force de ces extensions.
Plus qu’un simple affichage personnalisé de données, il devient possible de modeler une interface au service de son utilisateur, qu’il soit un éditeur, un traducteur ou encore un chargé de SEO.
Les extensions peuvent être au service de chaque membre de l’équipe d’un projet.
Elles sont d’autant plus intéressantes que leur création est similaire à la réalisation d’une application, ouverte à différents choix techniques autant en matière de langage ou framework de développement qu’en architecture, une souplesse confortable pour les développeurs.
Si vous souhaitez explorer des exemples d’extensions existantes, vous trouverez ici un ensemble d’extensions utilisant l’UI extensions SDK.
