Prismic.io, le roi des headless CMS : pari gagné ?


Prismic.io est un CMS permettant de gérer des documents et des articles, le tout en SaaS. A l’inverse des autres CMS, il est entièrement modulable en Front. Prismic.io fournit un Back Office assez complet qui permet à l’utilisateur de se concentrer exclusivement sur la partie graphique.

Contexte

J’ai choisi de tester Prismic.io dans le but de trouver une alternative plus souple à d’autres CMS comme Drupal ou encore WordPress. J’ai donc conçu un site Web vitrine en utilisant Prismic.io en Back Office, avec un appel des contenus en Java. Le Front Office a été développé en utilisant Jquery et Bootstrap. De ce fait, j’ai pu tester les nombreuses fonctionnalités du CMS. Hormis les appels classiques aux articles, il est possible de planifier une date de publication d’un article en indiquant la date et l’heure de release, de modifier la structure d’une publication et de redimensionner les images selon les critères que j’aurai préalablement définis, ajouter une vidéo, utiliser le système de liaison entre les articles, et bien d’autres fonctions que je vais détailler par la suite.

Découverte de l’interface Prismic.io

Prismic.io fournit une interface des plus simples pour le rédacteur. Grâce à cette application en SaaS dotée d’un design responsive, ce dernier peut aisément organiser ses écrits. L’application permet d’historiser ses actions, de planifier un évènement, d’agencer la publication des articles en conséquence, d’uploader des images et des vidéos et propose un système de « draft ».

prismic.io

Rédiger des articles

Avec Prismic.io, les différents champs proposés lors de la rédaction d’une publication sont clairement identifiés et présentés de manière intuitive. Ainsi le rédacteur peut donner un titre, un titre court ou encore une accroche et ajouter une illustration, des métas-datas, etc. Prismic.io offre de multiples alternatives pour personnaliser le document : on peut y ajouter, entre autres, des champs de date, de nombre (pour un prix par exemple), une liste d’articles relatifs au document actuel, etc. Nous verrons qu’en fonction des propriétés de la publication, il est possible de lier les articles entre eux afin de constituer un module de recommandation d’articles similaires.

Comme je le disais plus haut, l’upload d’images ou de vidéos est possible, mais dans la limite de 10 MB par fichier. Pour l’upload de certaines vidéos, il vous faudra donc passer par un service d’hébergement de vidéo en ligne pour pouvoir les intégrer dans l’article.

A la différence de WordPress qui utilise TinyMCE, Prismic.io est doté de son propre éditeur, auquel certaines fonctionnalités manquent cruellement (ex. surlignement, changement de couleur, style et taille de la police, alignement du texte, etc.). De plus, on regrette qu’il ne soit pas possible de personnaliser son « slug » et améliorer ainsi son SEO.

Rédiger des articles

Organiser ses billets de blog

Une fois que beaucoup de billets ont été rédigés, vous risquez d’avoir du mal à les organiser. Prismic.io propose la création de « collections » pour vous aider à trier vos documents. Ce tri est automatisé grâce à un système de « tags » appliqués par le rédacteur à chacun de ses documents, qui peuvent être complétés par des « masks ».

Customisation des documents

Dans le cas où vous souhaiteriez écrire un article doté de champs dits « non standards », Prismic.io vous permet d’ajouter ou supprimer les propriétés d’un type de document donné grâce aux « masks ». Les documents « masks » se présentent sous forme de fichiers JSON. Les champs doivent comporter un nom ainsi qu’un type de document à choisir entre « StructuredText », « Image », « Date », « Select », « Number », « Link », « Range », « Embed », « Group », « Color », « GeoPoint », « Timestamp » et d’autres champs de configuration.

La documentation complète de l’administration est disponible à ce lien : https://developers.prismic.io/documentation/repository-administrators-manual

Malgré la multitude de possibilités de personnalisation du contenu, il ne sera pas possible d’intégrer des règles sur les champs qu’on pourrait imposer pour la structure d’une adresse e-mail par exemple. Il n’est pas non plus possible de rendre des champs obligatoires à remplir, ce qui pourrait être utile lorsqu’on crée un billet de blog et qu’on veut vérifier que le corps de l’article ne soit pas vide. Enfin, Prismic.io ne permet pas à l’heure actuelle la publication de commentaires : il vous faudra donc passer par un service tiers comme Facebook ou Disqus.

Un Front Office ouvert

Prismic.io met à votre disposition une API multi-langages qui vous permet de récupérer les articles de votre compte. Pour mon test, j’ai choisi d’utiliser JAVA. Il est également possible de choisir d’autres langages comme Scala, JavaScript, PHP, C#, Python et Ruby. L’initialisation de l’application doit se faire de cette façon :

Api.get(API_URL); //Api_URL étant l'URL donné lors de l'activation du CDN.

Pour récupérer les articles, il faut utiliser les requêtes dont les conditions sont écrites grâce aux « predicates ».

api.getForm("everything")
				  .ref(api.getMaster())
				  .query(Predicates.at("document.type", "article")).submit();

Ici, nous souhaitons publier tous les documents (Api.getMaster() ) dont le type est un « article ». Cette requête va renvoyer vers une liste de documents à traiter. Si l’on souhaite mettre plusieurs conditions à la requête, il suffit de rajouter un paramètre à la méthode query(…).

api.getForm("everything")
				  .ref(api.getMaster())
				  .query(Predicates.at("document.type", "article"), Predicates.dateAfter("article.datePost", new DateTime(2015, 1 ,1, 0 , 0) ).submit();

Ici on récupère tous les documents de type « article » postés après le 1er janvier 2015. On remarque que les conditions sont des [AND]. Il n’est pour l’instant pas envisageable de faire une concaténation de [OR]. Le prédicate [any] est celui qui s’en rapprocherait le plus.

Predicates.any(«document.type », Arrays.asList(« article », « blog ») ;

Cet exemple permet de récupérer les posts de type « article » ou « blog ». Le « ou » est ici inclusif.

Plusieurs types de « predicates » sont disponibles dans la documentation suivante :  https://developers.prismic.io/documentation/developers-manual

Conclusion

Pour conclure, je dirais que Prismic.io est un moyen pratique et facile d’implémenter un site Web éditorial, si vous souhaitez mettre en ligne rapidement votre projet et que vous possédez un minimum de background technique. En effet, il comporte des fonctionnalités qui couvrent la grande majorité des besoins. La tâche s’avère bien plus compliquée si votre projet nécessite des modifications Métiers liées aux Backs. Le CMS n’est pas implémenté pour gérer des contraintes Métiers qui changeraient le fonctionnement de son dashboard. Toutefois, ce test ne doit pas être considéré comme parole d’évangile : il est possible qu’il y ait eu des manquements quant à son utilisation. Vous êtes créateur ou utilisateur de Prismic.io ? N’hésitez pas à partager vos remarques pour nous éclairer plus amplement !

Récapitulatif des avantages de Prismic.io

Récapitulatif des limites de Prismic.io

• La fonction « recommandation » ;
• La gestion des releases ;
• Une installation facile et rapide (surtout sur Maven) ;
• Une API multi-langages ;
• Un Front Office personnalisable ;
• Un Back Office intuitif ;
• Des requêtes simples d’utilisation ;
• La possibilité de gérer des contenus multiples : avec un seul compte utilisateur, il est possible de gérer le contenu de plusieurs sites que vous aurez implémentés.
• Absence d’expressions régulières ;
• Rendre un champ obligatoire n’est pas possible ;
• Un « Wysiwyg » (éditeur de texte) limité ;
• Un upload de média limité à 10 MB ;
• Gestion des comptes visiteurs ;
• Absence de gestion de commentaires ;
• Absence de personnalisation des « slugs » ;
• Pas de [OR] : que des [AND].
Share
Didier TRANG
Didier TRANG

2961

Comments

  1. merci pour cette review !
    la personnalisation du slug est possible en utilisant le champ “uid” (à configurer dans le custom type) cf. https://developers.prismic.io/documentation/repository-administrators-manual#custom-types
    la mise en forme est volontairement limitée (notamment les couleurs) pour laisser ces décisions… aux designers / au CSS. Vous pouvez cependant utiliser les labels pour avoir plus d’option de mise en forme dans l’éditeur https://blog.prismic.io/VAcbSjEAADMAtjS8/label-your-structured-text-for-richer-display-experience-quotes-tips-captions

Leave a Reply

Your email address will not be published. Required fields are marked *