CMS JavaScript

Introduction

CMS hérités, écartez-vous. Il y a une bonne raison pour laquelle les systèmes de gestion de contenu headless et les plateformes de contenu gagnent en popularité chez les développeurs frontend. Ces solutions de contenu séparent le contenu et le design, ce qui permet de créer des sites web et des applications plus solides et plus évolutifs, à une vitesse impressionnante. Ce découplage permet aussi aux développeurs de créer avec le langage de programmation et le framework qui leur conviennent le mieux. Dans cet article, on montre pourquoi un CMS headless est idéal pour tous les développeurs JavaScript. Nous mettons également à votre disposition des ressources pour vous aider à rationaliser votre première version avec JS et Contentful.

Les avantages des solutions de contenu headless et API-first

Avant, le monde numérique tournait autour des ordinateurs de bureau et le contenu était codé de manière rigide dans chaque page web. Cela offrait peu de flexibilité dans la réutilisation et le design du contenu. Même si les CMS classiques comme Wordpress ou Drupal ont beaucoup évolué par rapport à leurs premières versions (en grande partie grâce aux plugins), leurs fonctionnalités restent les mêmes, c’est-à-dire quelque peu limitées. Le contenu et le code sont toujours mélangés dans les frameworks centrés sur les pages, ce qui complique leur adaptation aux nouveaux canaux numériques, comme les applis web, les applis mobiles, les appareils portables, les e-mails, les réseaux sociaux, la réalité augmentée/virtuelle, etc. Les CMS headless ont une approche différente du contenu. Au lieu de lier étroitement le contenu à une page web ou à une application, les CMS headless offrent une plus grande flexibilité quant à l’endroit et la manière dont vous diffusez votre contenu. Ils découplent le backend (c’est-à-dire le référentiel de contenu ou « corps ») du frontend (c’est-à-dire la couche de présentation ou « tête »).Avec un CMS headless, vous pouvez utiliser un seul système pour gérer tout votre contenu, quelle que soit sa destination numérique finale. Une fois prêt à être diffusé, chaque élément de contenu est transféré vers son point de destination via des interfaces de programmation d’applications (API). Ce processus ne modifie pas le contenu original, mais rationalise les flux de travail liés à la gestion de contenu tout en multipliant la portée de chaque élément de contenu. En résumé, les CMS headless vous permettent d’utiliser plus efficacement le contenu sur l’ensemble de votre espace numérique : chaque élément de contenu est plus performant et a une portée plus large. Les systèmes API-first, comme les CMS headless, sont plus faciles d’utilisation, plus flexibles et plus adaptables que leurs homologues monolithiques. À l’époque moderne, ce sont des outils indispensables pour offrir des expériences omnicanales exceptionnelles.

Utiliser Contentful comme plateforme CMS JavaScript

Contentful sépare votre contenu du code et est indépendant du langage et du framework, s’adaptant ainsi aux développeurs, qu’ils préfèrent JS ou un autre langage. En plus de prendre en charge les frameworks et technologies frontend basés sur JS tels qu’Angular, React et Vue, les développeurs peuvent, s’ils le souhaitent, développer sur Contentful avec du JavaScript pur. L’un des principaux avantages de Contentful est qu’il prend facilement en charge les projets personnels. Notre formule Free vous offre tout ce dont vous avez besoin pour mener à bien votre projet. La formule comprend 25 types de contenu différents et vous permet de créer jusqu’à 25 000 enregistrements avec deux paramètres régionaux et trois environnements. Elle vous permet même de passer jusqu’à 1 million d’appels d’API chaque mois. Prêt à vous mettre au travail et à commencer à développer avec JavaScript et Contentful ? Consultez notre tutoriel étape par étape, qui est disponible sous forme de texte et de vidéo. Vous pouvez suivre Harshil Agrawal, développeur chez Contentful, alors qu’il crée et déploie une application simple de recettes de cuisine à l’aide de Contentful et JavaScript, qu’il déploie ensuite sur Heroku. L’ensemble du processus peut être divisé en six étapes simples :

1. Cloner le dépôt Github.

2. S’inscrire à Contentful et configurer le modèle de contenu.

3. Exécuter le serveur de développement.

4. Pousser vers GitHub.

5. Créer un compte Heroku.

6. Déployer sur Heroku.

Inscrivez-vous pour ouvrir un compte Contentful gratuit et commencez à développer avec Javascript en quelques minutes.

Exemples d’applications JavaScript pour commencer à créer avec Contentful

Comme ce tutoriel concerne une application web de recettes de cuisine et que tout le monde n’est pas forcément un fin gourmet, nous avons inclus d’autres exemples d’applications JavaScript dans notre Portail dédié aux développeurs. Chacun d’entre eux vous montre comment démarrer un projet JavaScript et Contentful avec des exemples d’espaces. Ces exemples d’applications constituent un excellent moyen de commencer à développer avec Contentful, quel que soit le cas d’utilisation. L’exemple d’application Node.js couvre les bases de l’utilisation de Contentful en tant que CMS pour Node.js open source. Il démontre comment le fait de dissocier le contenu de sa présentation permet une plus grande flexibilité et facilite la livraison rapide de logiciels de meilleure qualité. Le projet exemple de catalogue de produits JavaScript vous montre comment créer une application frontend basée sur JavaScript avec Contentful comme catalogue de produits. Il existe également un exemple d’application pour créer une galerie de photos et un autre qui présente notre API de téléchargement de fichiers. Vous pouvez essayer tous ces exemples d’applications gratuitement et consulter leurs dépôts de projets sur Github.

Accéder aux API Contentful à l’aide des bibliothèques clientes JavaScript SDK

Afin de faciliter davantage le développement d’applications lors de la création avec JavaScript, nous avons publié des bibliothèques clientes SDK JavaScript. Celles-ci offrent un point de départ pour les développeurs JS, en fournissant un accès à nos API et à leurs fonctionnalités. La bibliothèque client Content Delivery API interagit avec Content Delivery API, une API en lecture seule permettant de récupérer du contenu depuis Contentful. Tout le contenu, JSON et binaire, est récupéré à partir du serveur le plus proche de l’emplacement d’un utilisateur via notre CDN mondial.

La bibliothèque client Content Management API interagit avec Content Management API et vous permet de créer, de modifier, de gérer et de publier du contenu. L’API propose également des outils pour gérer les équipes éditoriales et faciliter la collaboration. Ces SDK sont universels et simples à configurer. Ils sont conçus pour fonctionner avec un environnement Node et dans les navigateurs.

• Récupération de contenu via notre Content Delivery API et Content Preview API.

• Gestion et récupération de contenu via notre Content Management API.

• Synchronisation via la Sync API, qui vous permet de conserver une copie locale de tout le contenu d’un espace à jour via des mises à jour delta, ou du contenu qui a été modifié.

• Prise en charge de la localisation par le biais de paramètres de langue-région. Les paramètres de langue-région sont des paires langue-région, qui peuvent être personnalisées pour répondre à des besoins commerciaux spécifiques.

• Résolution des liens. Les liens sont un moyen puissant de modéliser les relations entre les contenus. Vous pouvez utiliser un paramètre de requête URI avec la recherche pour récupérer une chaîne complète de contenus connexes et l’afficher dans votre application.

Ressources supplémentaires pour informer les builds Contentful

Si vous avez d’autres questions sur l’utilisation de JavaScript avec Contentful, nous serons ravis d’y répondre. Vous pouvez nous contacter, ainsi que d’autres utilisateurs de Contentful, via le Slack de la communauté Contentful.

Veuillez noter que Contentful est indépendant du langage et du framework, il fonctionne donc avec d’autres langages que JavaScript. Afin de prendre en charge toutes les langues souhaitées, nous avons créé une bibliothèque de guides de démarrage rapide, de vidéos et de modèles pour d’autres langues et boîtes à outils. Nous vous invitons à consulter nos tutoriels de démarrage rapide et à vous lancer dès aujourd’hui dans votre prochain projet. Si vous recherchez des ressources offrant davantage d’engagement, nous vous recommandons notre parcours d’apprentissage pour développeurs dans le Contentful Learning Center. Pour en savoir plus sur le cours et le contenu de ce parcours, consultez l’aperçu du parcours. Si vous avez confiance en vous, n’hésitez pas à passer l’aperçu et à vous plonger directement dans le cours.