Créer une application Web avec un CMS sans tête et réagir
À propos de l'auteur
Blessing Krofegha est un ingénieur logiciel basé à Lagos au Nigeria, avec un ardent désir de contribuer à rendre le Web génial pour tous, en écrivant et en construisant… En savoir plus sur Bénédiction …
Cet article présente le concept du CMS sans tête, un système de gestion de contenu uniquement qui permet aux développeurs de créer, stocker, gérer et publier le contenu via une API. Il donne aux développeurs le pouvoir de créer rapidement d'excellentes expériences utilisateur, sans se soucier de son impact sur la logique métier principale.
Dans ce didacticiel, vous apprendrez ce qu'est le CMS Headless et les avantages et inconvénients de Headless CMS. En fin de compte, vous aurez construit un panier d'achat en utilisant GraphCMS (un (système de gestion de contenu uniquement). Après cela, vous pouvez continuer et créer n'importe quelle application Web de votre choix en utilisant un CMS sans tête et React .
Pour suivre, vous devez avoir installé Node et npm / yarn sur votre machine. Si vous ne l'avez pas déjà fait, suivez ces guides rapides pour installer yarn ou npm sur votre machine. Vous devez également avoir une connaissance de base des requêtes React, Node.js et GraphQL. (Vous pouvez toujours réviser les compétences React et GraphQL bien sûr !)
À mesure que les produits numériques continuent d'évoluer, le contenu que nous consommons évolue également. Un système de gestion de contenu multiplateforme évolutif est essentiel pour assurer la vitesse de croissance d'un produit. Le CMS traditionnel offre le confort d'avoir le contenu, l'interface d'édition , des modèles et des codes personnalisés, dans un environnement unique. Mais avec les changements dans ce mobile ère, ça ne suffit plus. Nous avons besoin d'une nouvelle génération de CMS – qui peut rendre le contenu disponible sur n'importe quel canal, auquel cas un CMS sans tête est requis. Un CMS sans tête vous offre les avantages de gérer le contenu et de le diffuser sur n'importe quel canal. L'API rend le contenu disponible sur n'importe quel canal et sur n'importe quel appareil à l'aide de la plupart des outils et langages de programmation préférés et offre également un niveau de sécurité plus élevé et une bien meilleure évolutivité.
À quoi cela ressemble-t-il en pratique?
vous enlevez le frontend d'un CMS? La plus grande distinction est qu’un site Web ne peut pas être construit à lui seul avec un CMS sans tête. Avec un CMS traditionnel, tout se passe au même endroit.
Un CMS sans tête ne possède pas les fonctionnalités qui vous permettent de créer votre site – il n'a pas de thèmes ni de modèles de site. Pour utiliser un CMS sans tête, vous devez d'abord créer un site ou une application, ou toute autre expérience, puis utiliser l'API du CMS pour y brancher votre contenu.
Pourquoi devriez-vous vous soucier de Headless?
Un CMS sans tête est fourni avec une approche conviviale API, qui permet de publier du contenu via une API (RESTful ou GraphQL). Il vous permet d'utiliser la même API pour diffuser du contenu sur différents canaux tels que les applications Android ou IOS, les montres intelligentes, AR / VR, etc. Un CMS sans tête donne aux développeurs la capacité de mobiliser rapidement la créativité. Avec un CMS traditionnel, les modifications peuvent prendre beaucoup de temps, par exemple, pour modifier une partie de votre site, vous devez réimplémenter l'intégralité du CMS. Avec un CMS sans tête, vous pouvez apporter des modifications à votre frontend sans avoir aucun impact sur l'infrastructure principale, économisant ainsi du temps et des ressources, ce qui le rend bien meilleur.
CMS traditionnel vs sans tête: les avantages et les inconvénients [19659002] Il peut être compliqué de choisir entre un CMS sans tête et un CMS traditionnel. Le fait est qu'ils présentent tous les deux des avantages et des inconvénients potentiels.
CMS traditionnels
Il permet une personnalisation facile. Beaucoup d'entre eux ont un glisser-déposer, ce qui facilite la tâche d'une personne sans expérience en programmation.
Il est plus facile de configurer votre contenu sur un CMS traditionnel comme tout ce dont vous avez besoin (gestion de contenu, conception, etc. ) sont déjà disponibles.
Contre CMS traditionnel
Le front-end et le back-end couplés entraînent plus de temps et d'argent pour la maintenance et la personnalisation.
Le CMS traditionnel, par exemple WordPress, s'appuie fortement sur des plugins et des thèmes qui peuvent contenir codes malveillants ou bogues et ralentir la vitesse du site Web ou du blog. Voici une liste de 18 305 plugins et thèmes WordPress vulnérables. Voici les mesures de sécurité pour les développeurs Drupal . Consultez ici pour plus de détails.
CMS sans tête Pros
Étant donné que le frontend et le backend sont séparés l'un de l'autre, il vous permet de choisir la technologie frontale qui convient à vos besoins. Cela donne également au développeur une flexibilité pendant la phase de développement.
Les plates-formes (blogs, sites Web, etc.) construites avec un CMS sans tête peuvent être déployées pour fonctionner sur divers affichages tels que le Web, le mobile, l'AR / VR, etc. [19659023] Inconvénients du CMS sans tête
Ils vous permettent de gérer les infrastructures back-end, de configurer le composant de présentation de votre site, application.
Ils peuvent être plus coûteux à mettre en œuvre – le coût impliqué dans la construction d'une interface conviviale
Les meilleurs cas d'utilisation pour les CMS sans tête
Les CMS sans tête peuvent avoir les cas d'utilisation suivants:
Générateurs de sites statiques (par exemple Gridsome, Gatsby) [19659029] De nombreux sites Jamstack créés avec des générateurs de sites statiques comme Gridsome, Hugo ou Gatsby utilisent le CMS sans tête pour gérer le contenu, ils ne peuvent pas accéder à une base de données, Par conséquent, le contenu peut être stocké dans un CMS sans tête et récupéré via une API pendant la construction et déployé en tant que fichier statique s.
Applications mobiles (iOS, Android)
L'avantage d'un CMS sans tête pour les ingénieurs mobiles est que l'API leur permet de fournir du contenu à une application IOS / Android à partir du même backend qui gère le contenu pour
Cette approche implique de servir du contenu via une API qui est ensuite consommée par une application Web mais offre un endroit centralisé pour gérer le contenu. Un exemple est une application de commerce électronique construite en utilisant HTML, CSS et JavaScript avec du contenu et des données de produit qui sont conservés dans le CMS et servis via une API externe.
Types de CMS sans tête
Il existe une liste de sans tête CMS que vous pourriez vérifier.
Veuillez noter que cet article n'est pas écrit pour promouvoir des services ou des produits.
Contentful Un CMS sans tête piloté par API conçu pour créer, gérer et distribuer du contenu à n'importe quelle plate-forme. Contrairement à un CMS traditionnel, ils offrent la possibilité de créer votre modèle de contenu afin que vous puissiez décider quel type de contenu vous souhaitez gérer.
GraphCMS Un CMS sans tête pour les utilisateurs qui souhaitent créer un contenu GraphQL infrastructure pour leurs produits numériques. Ce CMS est entièrement conçu comme une API axée sur le sol, permettant aux créateurs de définir les structures, les autorisations et les relations pour les paramètres de l'API. Dans cet article, nous utiliserions GraphCMS en raison de son approche API GraphQL.
ButterCMS Un CMS qui donne une liberté totale pour créer un site Web ou un blog de marque avec un référencement complet et prend en charge n'importe quelle pile technologique. Cet outil vous fait économiser de l'argent et du temps pour le développement du site. Butter CMS est un outil CMS sans tête sans maintenance et peut s'intégrer à n'importe quel langage ou framework. La puissante interface vous aide à définir et à personnaliser chaque élément de votre site Web sans tracas.
Directus Un outil open-source qui enveloppe des bases de données SQL personnalisées avec une API dynamique et fournit une application d'administration intuitive pour gérer ses contenu. Auto-hébergez gratuitement ou utilisez le service Cloud à la demande pour gérer toutes vos expériences numériques omnicanal.
Sanity Une autre plate-forme pilotée par API pour gérer le contenu structuré. Avec Sanity, vous pouvez gérer votre texte, vos images et d'autres médias avec des API. Vous pouvez également utiliser l'application open-source à page unique Sanity Studio pour configurer rapidement un environnement d'édition que vous pouvez personnaliser.
Agilité Un CMS sans tête axé sur JAMStack avec gestion de page intégré -dans. Construction, gestion et déploiement plus rapides. Agility CMS est un CMS sans contenu, sans tête, vous permettant de choisir n'importe quel langage de programmation tout en bénéficiant de la flexibilité, de la vitesse et de la puissance des API légères. À partir de là, ajoutez des fonctionnalités telles que la gestion des pages, le commerce électronique, la billetterie en ligne et la recherche. Le CMS Agility devient une plateforme d'expérience numérique complète, ce qui permet de gagner du temps, de supprimer les limitations et de permettre des expériences transparentes sur tous les canaux numériques.
CMS Netlify Un CMS gratuit et open-source basé sur git créé par Netlify. Il vous permet de définir votre modèle de contenu, intègre l'authentification tierce et étend les capacités de son backend (une application d'une seule page basée sur React).
Note : Tous les exemples mentionnés ci-dessus ont des versions gratuites et payantes, à l'exception de Directus et Netlify CMS qui sont gratuits. Pour une liste de CMS sans tête, consultez ici .
Dans cet article, nous utilisons GraphCMS – un système de gestion de contenu sans tête orienté API GraphqQL qui prend soin de notre back-end
Utilisation de GraphCMS
Le contenu est à la fois dynamique et multicanal, mais les systèmes de gestion de contenu (CMS) actuels manquent de flexibilité pour répondre aux exigences de la distribution de contenu numérique moderne. GraphCMS est le premier HeadlessCMS construit autour de GraphQL et offre une solution à ce problème avec sa mission de faciliter le flux de contenu indolore entre les créateurs de contenu, les développeurs et les consommateurs.
GraphCMS accepte presque tous les types de données que vous pouvez imaginer, allant des images, des cartes , etc. Il facilite même les rôles et les autorisations. Bien qu'il existe d'autres solutions CMS sans tête, GraphCMS vise à fournir une expérience sans tracas aux développeurs; en exploitant une spécification d'API appelée GraphQL . Il élimine le besoin de plusieurs SDK pour interagir avec la diffusion de contenu et fournit une accessibilité de contenu multicanal simple. Cela rend la création d'applications de contenu riche très facile.
GraphCMS et GraphQL
GraphCMS s'appuie fortement sur GraphQL sa spécification d'API de dorsale. GraphQL est le langage de requête API et le runtime. Il a été développé par Facebook en 2012 et publié en open source en 2015. Depuis, Pinterest, Github, Twitter, Intuit, Coursera ont tous adopté GraphQL pour alimenter leurs applications mobiles, sites Web et API. GraphQL est similaire à REST dans son objectif principal de fournir une spécification pour la construction et l'utilisation des API. Cependant, surnommé officieusement «REST 2.0», GraphQL a optimisé différentes fonctionnalités clés offertes par REST.
La principale unicité de GraphQL comprend l'utilisation indépendante du protocole, la récupération contrôlée des données, les champs modifiables et les types et la gestion approfondie des erreurs. Les résultats incluent la suppression de la redondance du code, la prévention de la récupération excessive et insuffisante des données et la réduction significative des demandes réseau.
Comme exemple concret, prenons la relation d'une requête avec un flux d'actualités. Un article d'un fil d'actualité a un auteur, un titre et des commentaires. Si nous utilisons un CMS basé sur REST, nous aurions à faire 3 demandes de serveur différentes pour ces 3 points de terminaison différents, alors que, dans un CMS basé sur GraphQL, nous n'aurions qu'à faire 1 demande pour les 3. Par conséquent, les résultats offrent relativement des requêtes plus rapides et moins de saturation du réseau – dans un cas d'utilisation pratique, il ne s'agirait pas d'une seule entité effectuant plusieurs demandes, mais de milliers et de millions.
GraphQL réduit la complexité de la création d'API en faisant abstraction de toutes les demandes à un seul point de terminaison. Contrairement aux API REST traditionnelles, elle est déclarative; tout ce qui est demandé est retourné.
GraphCMS dispose d'un niveau gratuit généreux de 1 million de demandes d'opérations API par mois et de 500 Go de trafic d'actifs. En outre, GraphCMS fournit une interface d'administration Graphiql qui vous offre un accès complet à vos données et vous pouvez simplement les télécharger toutes, puis exécuter de nombreuses mutations sur votre nouveau backend pour tout migrer.
article, nous utiliserons le niveau gratuit de 1 million d'opérations d'API par mois et 500 Go de trafic d'actifs. Vous pouvez utiliser le même niveau pour les tests, pour les projets qui en ont besoin, consultez bien leur page de tarification .
Construire notre projet
Pour voir la puissance du CMS sans tête en utilisant GraphCMS, nous construirions un panier d'achat simple.
Mise en route
Pour commencer avec GraphCMS, suivez les étapes.
Créez un compte sur GraphCMS . Vous pouvez utiliser le niveau gratuit.
Actuellement, nous n'avons aucun contenu. Cliquez sur «Contenu» dans la barre latérale qui devrait vous emmener dans la section Contenu, puis cliquez sur «Créer nouveau».
À ce stade, nous n'avons aucun contenu / message. ( Grand aperçu )
Ajoutons quelques contenus afin de pouvoir les afficher plus tard dans notre application en utilisant React.
Ensuite, copiez l'URL du point de terminaison API (cliquez sur le tableau de bord) – il s'agit du point de terminaison unique pour la communication entre notre front-end React et le back-end GraphCMS.
Ensuite, rendons notre point de terminaison API accessible.
Accédez aux paramètres sous Autorisation API publique et cliquez sur le menu déroulant et sélectionnez OUVERT et cliquez sur le bouton de mise à jour .
La manière la plus simple de configurer React consiste à utiliser Create-React-App . (Il s'agit d'un moyen officiellement pris en charge pour créer des applications React sur une seule page et offre une configuration de construction moderne sans configuration.) Nous l'utiliserons pour amorcer l'application que nous allons créer.
Depuis votre terminal, exécutez la commande ci-dessous:
npx create-react-app smashing-stores && cd smashing-stores
Une fois l'installation réussie, démarrez le serveur React en exécutant npm start .
Lors de la création de la mise en page de notre projet, nous aurons cinq composants différents.
Navbar
Pour maintenir notre icône de navigation et de panier [19659104] Tous les produits
Pour afficher une liste de tous les produits
Produit
Le balisage pour un seul produit
Pied de page
Le pied de page de notre application
Panier
Pour conserver les articles dans notre cart
Pour une configuration rapide, nous utiliserons Bootstrap pour créer nos composants. Pour inclure Bootstrap, nous utiliserions CDN bootstrap, ouvrir votre index.html dans le dossier public, ajouter le lien vers la section head:
Nous pouvons maintenant utiliser les classes d'amorçage dans notre application.
Ensuite, créez un dossier / components et créez les fichiers suivants à l'intérieur:
Navbar.js
Allproducts.js
Product.js
Footer.js [19659016] Cart.js
Création de notre Navbar
Ouvrez le Navbar.js et ajoutez le code suivant:
import React from 'react';
const Navbar = () => {
revenir (
);
};
export par défaut Navbar;
Nous avons déclaré un composant fonctionnel Navbar, nous renvoyons notre balise nav avec une classe d'amorçage de navbar navbar-light bg-light . Ce que font ces classes, c'est d'appliquer une Navbar avec un fond clair. À l'intérieur de notre élément de navigation, nous avons inclus une balise d'ancrage avec un lien vers juste barre oblique (page d'accueil) et une classe de marque navbar .
Le bouton stylisé de la Navbar le composant a une classe nommée navbar navbar-light bg-light . Ce que fait cette classe pour garantir que notre bouton a une couleur d'arrière-plan bleu clair et une ombre lorsqu'il est survolé.
Ensuite, créons notre pied de page. Ouvrez le fichier Footer.js et ajoutez-y le code suivant:
import React from 'react';
import '../App.css';
pied de page const = () => {
revenir (
);
};
exporter le pied de page par défaut;
Nous avons ajouté un e-mail de contact en utilisant h5 et un élément de paragraphe. Enfin, dans cette section de pied de page, nous avons ajouté des droits d'auteur avec le nom "Smashing Stores".
Notre pied de page a besoin d'un style afin que nous ajoutions les styles suivants au fichier App.css :
bas de page {
position: absolue;
en bas: -55px;
largeur: 100%;
couleur de fond: # 333;
couleur: #fff;
}
Avant de créer notre composant produit, nous devons interroger GraphCMS pour nous envoyer les détails de notre produit à afficher. Faisons-le maintenant.
Connexion au backend GraphCMS avec GraphQL
Pour connecter notre application au backend, nous devons installer quelques packages GraphQL. L'une des bibliothèques que nous pouvons utiliser est apollo-boost qui donne à un client la possibilité de se connecter au backend GraphQL à l'aide d'un URI ( U niform R esource I dentifier).
L'URI est le noeud final fourni par GraphCMS et est disponible dans la section des noeuds finaux du tableau de bord.
Exécutez la commande suivante dans votre terminal pour installer les packages nécessaires:
Une fois l'installation terminée, mettez à jour le fichier index.js dans le répertoire / src vers le code suivant :
importez React depuis 'react';
importer ReactDOM depuis 'react-dom';
import './index.css';
importer l'application depuis './App';
importer {ApolloProvider} de "react-apollo";
importer ApolloClient de "apollo-boost";
importer * en tant que serviceWorker depuis './serviceWorker';
client const = nouvel ApolloClient ({
uri: ""
});
ReactDOM.render (
,
document.getElementById ('root')
);
serviceWorker.unregister ();
Ici, nous avons enveloppé l'intégralité de notre application avec le ApolloProvider qui prend un seul accessoire: le client . Le ApolloProvider charge le schéma Graph CMS et nous donne accès à toutes les propriétés du modèle de données dans notre application, ce qui est possible car notre composant App est un enfant du ApolloProvider composant.
Affichage de nos produits
Si vous êtes allé aussi loin, tapotez-vous dans le dos. ? Nous avons pu charger notre schéma de GraphCMS dans notre application.
L'étape suivante consiste à récupérer et afficher nos produits. Créez un dossier / all-product sous le dossier / component puis créez un fichier index.js et ajoutez-y ce qui suit:
import gql de "graphql-tag";
const PRODUCTS_QUERY = gql`
requete {
produits {
id
Nom
prix
la description
créé à
image {
id
url
}
}
}
"
export par défaut PRODUCTS_QUERY;
Que sont « productses »? Notre nom de modèle est des produits, mais GraphQL pluralise les modèles, d'où le nom.
Ensuite, nous avons créé une variable appelée PRODUCTS_QUERY qui stocke la requête de notre backend GraphQl. La fonction gql est utilisée pour analyser (analyser un objet, comme c'était le cas dans notre schéma) la chaîne simple qui contient le code GraphQL (si vous n'êtes pas familier avec la syntaxe backtick, vous pouvez lire le modèle balisé de JavaScript littéraux ).
GraphCMS fournit un explorateur GraphQL pratique nommé (graphiql) spécifiquement pour tester notre requête.
Test de notre point de terminaison à l'aide de Graphiql Explorer dans notre tableau de bord GraphCMS. ( Grand aperçu )
Maintenant que notre requête fonctionne comme il se doit. Allons de l'avant et créons les composants de notre produit.
Création du composant Allproducts
Ouvrez le fichier Allproducts.js et ajoutez-y le code suivant:
import React, {Component} de 'react';
importer {Requête} depuis 'react-apollo';
importer PRODUCTS_QUERY de './all-products/index';
importer un produit de './Product';
importer le panier à partir de './Cart';
importer Navbar à partir de './Navbar';
classe Allproducts étend Component {
constructeur (accessoires) {
super (accessoires);
this.state = {
cartitems: []
};
}
addItem = (item) => {
this.setState ({
cartitems: this.state.cartitems.concat ([item])
});
}
render () {
revenir (
{({chargement, erreur, données}) => {
if (loading) return
Récupération des produits .....
if (error) return
Erreur lors de la récupération des produits
const items = data.productses;
revenir (
{items.map (item => )}
)
}}
);
}
};
export par défaut AllProducts;
Ici, nous avons enveloppé nos produits avec le composant et passé le PRODUCTS_QUERY comme accessoires. Apollo a injecté plusieurs accessoires dans la fonction de rendu du composant. Ces accessoires fournissent eux-mêmes des informations sur l'état de la demande de réseau:
chargement
Cela se produit pendant les demandes en cours.
erreur
Cela se produit lorsque les demandes échouent.
data
Ce sont des données
Enfin, nous parcourons tous les éléments reçus et les passons en tant qu'accessoire à notre composant Produit. Avant de voir à quoi il ressemble, créons notre composant Produit.
Puisque notre Product.js est un composant fonctionnel qui reçoit les détails du produit via des accessoires et les affiche, nous appelons la fonction addItem sur l'écouteur d'événement onClick pour ajouter le produit actuel au panier quand il clique. [19659183] Importation de nos composants dans App.js
Avec la configuration de nos composants, il est temps d'importer nos composants dans notre composant de base App.js.
Ouvrez-le et ajoutez-y ce qui suit:
import React from ' réagir';
import './App.css';
importer le pied de page à partir de './components/Footer';
importer des produits à partir de './components/Allproducts';
fonction App () {
revenir (
);
}
exporter l'application par défaut;
À partir des lignes 3 à 4, nous avons importé à la fois le pied de page et le composant Produits dans le composant App.
Ensuite, saisissez npm start dans votre terminal, puis accédez à https: // localhost: 3000 dans votre navigateur, et vous verrez ce qui suit:
Résultat final de notre application Web. ( Grand aperçu )
Nous sommes presque à la fin de notre projet, mais nos produits ont besoin d'une fonctionnalité qui ajoute des articles au panier.
Création de notre composant de panier
Pour inclure notre fonctionnalité de panier, nous aurions besoin d'ajouter quelques méthodes à nos composants.
Mettons à jour notre fichier Allproducts.js en ceci:
import React, {Component} from 'react';
importer {Requête} depuis 'react-apollo';
importer PRODUCTS_QUERY de './all-products/index';
importer un produit de './Product';
importer le panier à partir de './Cart';
importer Navbar à partir de './Navbar';
classe Allproducts étend Component {
constructeur (accessoires) {
super (accessoires);
this.state = {
cartitems: [],
montrer: faux
};
}
addItem = (item) => {
this.setState ({
cartitems: this.state.cartitems.concat ([item])
});
}
showModal = () => {
this.setState ({show: true});
};
hideModal = () => {
this.setState ({show: false});
};
render () {
revenir (
{({chargement, erreur, données}) => {
if (chargement) return
Dans notre div parent, nous avons utilisé un opérateur ternaire qui bascule entre la visibilité et l'état caché. Ensuite, dans d'autres pour afficher les articles dans notre panier modal, nous cartographions nos articles.
Enfin, dans cette section, pour vérifier le nombre total d'articles dans notre panier, nous avons utilisé la longueur .longueur Méthode JavaScript.
Ouvrez votre app.css et ajoutez-y le code suivant:
Enfin, ouvrez le panier, ajoutez-y des articles et affichez-le via le bouton "Panier":
Conclusion
Le concept appris dans cet article peut vous aider à créer presque à tout moment des applications Web sans payer trop cher attention à votre infrastructure dorsale. Vous pouvez aller plus loin en créant une boutique de commerce électronique à part entière et en ajoutant des paiements, etc. J'adorerai voir ce que vous avez pu faire dans la section des commentaires.
Le dépôt de garantie de cet article est disponible sur Github .
![] Grand aperçu](https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/ccf3332f-950b-402b-b897-354b0b9b0164/012-building-web-app-with-headless-cms-react.png){kind=link}
