Des interfaces sur mesure avec le CMS Contentful — épisode 1 : CMS Headless, Contentful et ses UI Extensions

Avec l’évolution des contenus web a émergé un type de CMS dit “Headless”, adapté à de nouveau mode de création et d’architecture parmi lesquelles on compte par exemple la Jamstack.

Rapidité, simplicité et efficacité.

Dans ce contexte, ces mots ont pris tout leur sens, tant en termes de processus de création que de réalisation.

Les CMS Headless se multiplient et s’homogénéisent de part leurs objectifs communs.

Cette simplicité des interfaces et de leurs fonctionnalités a le mérite de recentrer sur l’essentiel mais amène parfois son petit lot de frustrations : le manque de liberté en terme de personnalisation pour certain type de contenu spécifique par exemple, ou encore de ne pas pouvoir personnaliser sa propre interface dans des cas bien particuliers.

Certains CMS Headless proposent cependant des solutions permettant de garder cette simplicité tout en offrant une marge de liberté précieuse. Parmi eux, Contentful et ses UI Extensions.

A travers une série de 3 articles, nous découvrirons la solution proposée par Contentful :

• Dans l’article n°1 (oui, vous y êtes déjà ! ), nous introduirons la notion de CMS Headless, le CMS Contenful et la fonctionnalité des UI Extensions.
• Dans l’article n°2, nous découvrirons à travers un tutoriel comment réaliser ses propres UI Extensions.
• Enfin, dans l’article n°3, nous verrons jusqu’où peuvent nous mener ces UI Extensions à travers un retour d’expérience : une UI Extension dédiée à notre chargé de SEO, avec une interface adaptée à ses besoins.

Lançons nous sans plus attendre !

Les CMS Headless, Contentful et ses UI extensions

Un petit point sur les CMS Headless

Contrairement à un CMS traditionnel, le CMS Headless ne prend plus en compte la couche de présentation. Le système de gestion de contenu est centré sur le “corps” et non plus la “tête”. Il n’est alors plus composé que de la partie back-end, propose une interface d’édition centrée sur la création de contenu et fournit une API via laquelle il sera possible de récupérer et d’interagir avec ces données.

Décorréler les données et leur usage final permet de couvrir de larges besoins avec un même back-end. Site web, application mobile ou autre réalisation, tous consommeront la même base.

Une telle architecture, favorisant des projets évolutifs et aux réalités techniques variées, a suscité un grand intérêt. Le nombre de CMS Headless s’est démultiplié. On nommera pour exemple Contentful, Stapi, Ghost, Netlify CMS et encore bien d’autres.

Parmi eux, Contentful a attiré notre attention

Le CMS Headless Contentful

Contentful a attiré notre attention de part son concept de “CMS as Code“, proposant des services permettant de mettre en place de l’intégration et du déploiement continu.

Nous apprécions également son approche API-first, fournissant une API REST et une API GraphQL. Ses qualités nous ont amené à lier un partenariat avec Contentful.

Mais au delà des caractéristiques favorables aux développeurs, revenons à la gestion du contenu.

Contentful organise le contenu dans des spaces. Un space est un espace dans lequel sont regroupées des ressources associées à un projet. Chaque space a son modèle de données (Content model) dans lequel il est possible de créer et structurer des types de contenu : les content types.

Ces content types seront utilisés par les éditeurs. Ils pourront choisir parmi les modèles préalablement définis et créer du contenu du partir de celui-ci.

À ces derniers peuvent être ajouté des champs.

Ces champs peuvent se voir attribuer un nom, des conditions de validation (comme une limite de caractères ou un pattern spécifique), ou encore une appearance, soit le type d’interface affichée par le champs.

Contentful met à disposition un certain nombre d’appearances en fonction du type de champ. Par exemple, un champ de type texte pourra être affiché sous la forme d’un champ de saisie simple, d’un champ de saisie d’URL ou encore d’une liste de boutons radios.

Il est également possible de créer soit même une appearance. C’est ici que s’ouvre le champ des possibles avec les UI Extensions.

Les UI Extensions

Les UI extensions permettent de créer ses propres appearences et donc de personnaliser le CMS Contentful.

Parce qu’elles répondent a des besoins spécifiques, l’usage des UI extensions peut être très varié. Il existe par exemple une extension pour le téléchargement direct d’images ou encore pour l’affichage de différences de modification en attente.

Elles vont nous offrir la possibilité de réaliser notre propre interface, conçue en fonction des besoins, autant en termes de visuel que de structure de données.

Les UI Extensions sont des applications HTML5 indépendantes. Elles sont chargées dans un iframe.

Il est possible de mettre en place des extensions via deux types d’hébergement :

• les extensions hosted par contentful (srcdoc).
• les extension self-hosted (src)

Dans le cas de l’extension hosted par Contentful, le code de l’extension est écrit directement depuis l’interface Contentful. Si cette solution permet de ne rien avoir à héberger soi-même, elle implique plusieurs contraintes tel que le fait d’être limité à un seul fichier ou encore la limitation de taille de ce dernier.

En hébergeant l’extension en dehors de Contentful, ces limitations disparaissent. La plateforme d’hébergement choisie doit pouvoir prendre en charge la politique CORS et rendre disponible l’URL relative au code HTML de l’extension via HTTPS.

C’est cette url qu’il faudra fournir lors de la configuration d’une extension self-hosted.

Pour en savoir d’avantage sur l’hébergement des UI Extensions, ci-après le lien vers la documentation officielle : https://www.contentful.com/developers/docs/extensibility/ui-extensions/hosting/

Ces extensions requièrent une structure minimale composée de deux fichiers :

• index.html, un fichier HTML contenant le code de l’extension
• extension.json, un fichier json décrivant les propriétés de l’extension tel que le nom et le type de donnée.

Basé sur cette structure minimale, il est possible de créer une extension avec la technologie de son choix, que ce soit une simple combinaison de HTML/CSS/JS ou bien une application utilisant ReactJS.

Vous avez désormais envie de rentrer dans le concret ? De réaliser votre propre UI Extension ?

Rendez-vous sur l’article n°2 de cette série : Réaliser sa propre UI Extension Contentful (ajouter le lien de l’article 2 sur “Réaliser sa propre UI Extension Contentful”) !

Ressources :

Contentful — CMS as Code

Contentful — Concept Data Model

Contenful — UI Extensions

Contentful — Hosting