Dans le passé, les développeurs ont réduit les défis associés à la gestion des plates-formes dépendant du contenu grâce à l'utilisation de
Systèmes de gestion de contenu (CMS) qui permettaient de créer et d'afficher du contenu Web à l'aide de modèles de conception existants fournis par le service CMS.
Mais avec l'arrivée des applications à page unique ( SPA ) , cette approche de la gestion du contenu est devenue défavorable car les développeurs sont bloqués avec les mises en page de conception fournies. C'est à ce stade que l'utilisation des services Headless CMS a été largement adoptée, car les développeurs ont cherché plus de liberté pour diffuser du contenu sur divers clients tels que les appareils mobiles, Web, de bureau et même portables.
A headless CMS stocke les données dans une base de données principale, mais contrairement au service CMS traditionnel où le contenu est affiché via un modèle défini, le contenu est fourni via une API, ce qui donne aux développeurs la flexibilité de consommer du contenu sur divers clients ou frameworks frontaux.
Un exemple d'un tel CMS sans tête est Webiny . Son CMS sans serveur headless qui fournit une application d'administration personnalisée pour créer du contenu, et une API GraphQL robuste pour consommer tout contenu créé via l'application d'administration. Plus loin dans cet article, nous explorerons Webiny et utiliserons l'application d'administration lors de la modélisation du contenu via l'application CMS headless, puis consommerons le contenu via l'API GraphQL dans une application de blog Gatsby . [19659006] Si c'est la première fois que vous entendez Webiny, c'est un framework open-source pour créer des applications sans serveur qui fournissent aux utilisateurs des outils et des applications prêtes à l'emploi. Il a une communauté de développeurs croissante sur Slack essayant finalement de rendre le développement d'applications sans serveur facile et direct.
Pour rendre cet article facile à suivre, il a été divisé en deux segments principaux. Vous pouvez soit passer à la partie qui vous intéresse le plus, soit les suivre dans l'ordre tel qu'ils apparaissent ci-dessous:
Remarque: Pour suivre, vous devez avoir un compte AWS (sinon, veuillez en créer un ), Yarn ou avoir npm installé sur votre machine locale. Une bonne compréhension de React.js est bénéfique car l'application de démonstration est construite à l'aide de Gatsby .
Création et déploiement d'un projet Webiny
Pour commencer, nous sommes allez créer un nouveau projet Webiny, déployez-le et utilisez le CMS Headless via l'application d'administration générée pour commencer à modéliser le contenu dans l'API GraphQL.
L'exécution de la commande ci-dessous à partir d'un terminal générera un nouveau projet Webiny basé sur vos réponses à les invites d'installation:
npx create-webiny-project @ beta webiny-blog-backend --tag beta
La commande ci-dessus exécuterait toutes les étapes nécessaires pour amorcer un projet Webiny. Un projet Webiny se compose de trois applications plus petites: une API GraphQL, une application d'administration et également un site Web, tous contenus dans le dossier du projet Webiny généré par la racine, similaire à celui de l'image ci-dessous.
Ensuite, nous devons commencer le déploiement des trois composants du projet Webiny sur AWS afin de pouvoir accéder à l'API GraphQL. La section Cloud Infrastructure de la documentation Webiny donne une explication détaillée de l'ensemble de l'infrastructure déployée sur AWS .
Exécutez la commande ci-dessous à partir de votre terminal pour commencer ce déploiement qui durerait quelques minutes:
yarn webiny deploy Après un déploiement réussi des trois applications, l'URL de l'application Admin, le point de terminaison de l'API GraphQL et le site Web seraient imprimés dans le terminal. Vous pouvez les enregistrer dans un éditeur pour une utilisation ultérieure.
Remarque : La commande ci-dessus déploie les trois applications générées collectivement. Veuillez visiter cette partie de la documentation Webiny pour savoir comment déployer les applications individuellement.
Ensuite, nous installerons le CMS Headless à l'aide de l'application d'administration généré pour la gestion de votre projet Webiny.
Application Webiny Admin
Lors de la première installation lorsque vous accédez à votre application d'administration, vous serez invité à créer un utilisateur par défaut avec vos coordonnées et un mot de passe pour sécuriser votre admin, après quoi vous passez par les invites d'installation du CMS Headless, du Page Builder et du Form Builder.
À partir de la page d'accueil de l'administrateur illustrée ci-dessus, accédez à la page Modèles de contenu en cliquant sur le bouton Nouveau modèle de contenu dans le Carte CMS sans tête . Étant un nouveau projet, la liste des modèles de contenu serait vide, nous passons ensuite à la création de notre premier modèle de contenu.
Pour notre cas d'utilisation, chaque modèle de contenu représenterait un article de blog, cela signifie que chaque fois que nous voulons créer un article de blog, nous créerions un modèle de contenu et les données seraient enregistrées dans la base de données et ajoutées à l'API GraphQL.
Cliquer sur le bouton d'action flottant citron afficherait le modal avec les champs pour créer un nouveau Modèle de contenu comme indiqué dans l'image ci-dessous.
Après avoir créé le modèle de contenu à partir de l'image ci-dessus, nous pouvons ouvrir le modèle de contenu nouvellement enregistré pour commencer à ajouter des champs contenant des données sur l'article de blog dans le modèle de contenu.
Le La page de modèle de contenu Webiny a un éditeur facile à utiliser drag 'n' drop qui permet de faire glisser les champs depuis le côté gauche et de les déposer dans l'éditeur sur le côté droit de la page. Ces champs sont de huit catégories, chacun utilisé pour contenir un type spécifique de valeur.
Avant de commencer à ajouter les champs pour le modèle de contenu, vous trouverez ci-dessous une présentation des éléments que nous voulons inclure dans le billet de blog.
Remarque: Bien que nous n'ayons pas à insérer les éléments dans l'ordre exact ci-dessus, l'ajout de champs est cependant beaucoup plus facile lorsque nous avons une image mentale du structure du modèle de contenu.
Ajoutez les éléments suivants avec leurs champs appropriés dans l'éditeur de contenu pour créer la structure du modèle ci-dessus.
1. Élément du titre de l'article
En commençant par le premier élément du titre de l'article, nous glissons "n" déposons le champ TEXT dans l'éditeur. Le champ TEXT est approprié pour un titre car il a été créé pour des textes courts ou des valeurs sur une seule ligne.
Ajoutez le Label Helper Text et Texte d'espace réservé saisissez les valeurs dans le modal des paramètres de champ comme indiqué ci-dessous.
2. Élément de date
Ensuite pour la date, nous faisons glisser "n" déposer le champ DATE dans l'éditeur. Les champs DATE ont un format de date supplémentaire avec des options de date uniquement, heure uniquement, date-heure avec fuseau horaire ou date-heure sans fuseau horaire donné. Pour notre cas d'utilisation, nous sélectionnerons la date et l'heure à côté de l'option de fuseau horaire, car nous voulons que les lecteurs voient quand le message a été créé dans leur fuseau horaire actuel.
3. Résumé de l'article
Pour l'élément de résumé de l'article, nous ferions glisser le champ LONG TEXT dans l'éditeur et remplirions le Label Helper Text et ] Texte d'espace réservé entrées dans les paramètres sur place. Le champ LONG TEXT est utilisé pour stocker des valeurs de texte multiligne, ce qui le rend idéal car le résumé de l'article comprendrait plusieurs lignes résumant le billet de blog.
Nous utiliserions le LONG TEXT pour créer les éléments Premier paragraphe et Paragraphe de conclusion, car ils contiennent tous une longue quantité de valeurs de texte.
4. Exemple d'image
Le champ FILES est utilisé pour ajouter des fichiers et des données d'objet dans le modèle de contenu. Pour notre cas d'utilisation, nous ajouterions des images dans le modèle de contenu en utilisant le champ FILES . Faites glisser et déposez le champ FICHIERS dans l'éditeur pour ajouter des images.
Après avoir ajouté tous les champs ci-dessus, cliquez sur l'onglet Aperçu pour afficher les éléments d'entrée des champs ajoutés dans le modèle de contenu puis remplissez le champ valeurs de ces champs d'entrée.
Dans l'onglet Aperçu ci-dessus, nous pouvons voir un aperçu de tous les champs de modèle déposés dans l'éditeur glisser-déposer pour créer un article de blog en utilisant le contenu maquette. Ajoutez les valeurs respectives dans chacun des champs de saisie ci-dessus puis cliquez sur le bouton Enregistrer en bas.
Après avoir enregistré, nous pouvons visualiser ces valeurs d'entrée en interrogeant l'API GraphQL en utilisant le terrain de jeu GraphQL. Accédez à la page Informations sur l'API à l'aide de la barre latérale pour accéder au terrain de jeu GraphQL de votre projet.
En utilisant l'éditeur GraphQL, vous pouvez inspecter toute la structure de l'API GraphQL en utilisant la fonction d'introspection de schéma de la documentation.
Nous pouvons également créer et testez les requêtes et les mutations GraphQL sur nos modèles de contenu à l'aide du terrain de jeu GraphQL avant de les utiliser à partir d'une application côté client.
Dans l'image ci-dessus, nous avons utilisé la requête getContentModel de notre API GraphQL générée pour interroger notre base de données Webiny pour obtenir des données sur le dernier modèle de contenu que nous avons créé. Pour obtenir ce modèle exact, nous avons dû passer le modelID du nouveau modèle comme argument dans la requête getContentModel .
À ce stade, nous avons mis en place notre projet Webiny et modélisé notre API GraphQL à l'aide de l'application Webiny Admin générée. Il nous reste maintenant à consommer l'API GraphQL à partir d'une application frontale comme source de données. Les étapes suivantes ci-dessous décrivent comment utiliser votre API GraphQL dans une application Gatsby.
Génération d'une clé d'accès API
Toutes les requêtes adressées à votre point de terminaison API Webiny GraphQL doivent contenir un jeton valide dans ses en-têtes de requête pour l'authentification. Ce jeton est obtenu lorsque vous générez une clé API.
Dans le menu latéral, cliquez sur l'élément API Keys dans la liste déroulante Security pour accéder à la page API Keys où vous créez et gérer vos clés API pour votre API GraphQL.
En utilisant le formulaire placé à droite, nous donnons à la nouvelle clé un nom et une description, puis nous sélectionnons le bouton radio Tous les paramètres régionaux dans la liste déroulante Contenu. Enfin, dans la liste déroulante Headless CMS, nous sélectionnons l'option Full Access dans la liste déroulante Access Level pour donner à cette clé un accès complet aux données de l'application Headless CMS de notre projet Admin.
Remarque : * Lors de l'octroi de l'autorisation d'accès à vos clés API, Webiny fournit une option Accès personnalisé dans la liste déroulante * Niveau d'accès pour simplifier l'utilisation de la clé API dans l'application sélectionnée. *
Après avoir enregistré la nouvelle clé API, une clé de jeton serait générée pour être utilisée lors de l'accès à la clé API. Dans l'image ci-dessous, vous pouvez voir un exemple de jeton généré pour mon application dans la case en surbrillance.
Prenez note de cette clé de jeton car nous l'utiliserons ensuite à partir de notre application Web Gatsby.
Définition d'une application à page unique Gatsby
Exécutez la commande ci-dessous pour démarrer le programme d'installation afin de créer un nouveau projet Gatsby sur votre ordinateur local à l'aide de NPM et sélectionnez votre préférence de projet dans le
npm init gatsby Ensuite, exécutez cette commande pour installer les dépendances nécessaires suivantes dans votre projet Gatsby:
yarn add gatsby-source-graphql styled-components react-icons moment Pour utiliser GraphQL dans notre projet Gatsby, ouvrez le gatsby-config.js et modifiez-le pour avoir le même contenu avec les codes du bloc de code ci-dessous;
// gatsby-config.js
module.exports = {
siteMetadata: {
title: "Mon blog propulsé par Webiny CMS",
},
plugins: [
"gatsby-plugin-styled-components",
"gatsby-plugin-react-helmet",
`gatsby-plugin-styled-components`,
{
resolve: `gatsby-source-filesystem`,
options: {
name: `images`,
path: `${__dirname}/src/images`,
},
},
{
resolve: "gatsby-source-graphql",
options: {
// Arbitrary name for the remote schema Query type
typeName: "blogs",
// Field for remote schema. You'll use this in your Gatsby query
fieldName: "posts",
url: process.env.GATSBY_APP_WEBINY_GRAPHQL_ENDPOINT,
headers : {
Authorization : process.env.GATSBY_APP_WEBINY_GRAPHQL_TOKEN
}
},
},
],
};
Ci-dessus, nous ajoutons une API GraphQL externe à l'API GraphQL interne de Gatsby à l'aide du plugin gatsby-source-graphql . Comme option supplémentaire, nous avons ajouté l'URL du point de terminaison GraphQL et la valeur du jeton d'accès dans les en-têtes de requête à partir de nos variables d'environnement Gatsby.
Remarque: Exécutez la commande yarn Webiny info à partir d'un terminal lancé dans le projet Webiny pour imprimer le point de terminaison de l'API GraphQL utilisé dans le champ url du fichier gatsby-config.js ci-dessus.
Au prochain démarrage l'application Gatsby, notre schéma GraphQL et nos données seraient fusionnés dans le schéma généré par défaut de Gatsby que nous pouvons introspecter à l'aide du GraphiQL Playground de Gatsby pour voir les champs similaires à ceux de l'image ci-dessous à http: // localhost: 8000 / ___ graphql .
Ci-dessus, nous avons testé le schéma distant Webiny avec une requête de test tout en explorant le schéma distant pour voir quels champs sont disponibles dans notre application Gatsby.
Remarque: [19659012] Un nouveau modèle de contenu de test a ensuite été créé pour démontrer plusieurs modèles de contenu renvoyés par la requête listContentModels .
Pour interroger et afficher ces données dans l'application Gatsby, créez un nouveau fichier ( posts.js ) contenant le composant React suivant:
import React de "react"
importer {FiCalendar} depuis "react-icons / fi"
import {graphql, useStaticQuery, Link} de "gatsby";
importer Moment à partir de "moment"
importer {PostsContainer, Post, Title, Text, Button, Hover, HoverIcon} depuis "../styles"
importer l'en-tête de "../components/header"
importer le pied de page de "../components/footer"
const Messages = () => {
const data = useStaticQuery (graphql`
query fetchAllModels {
des postes {
listContentModels {
Les données {
Nom
la description
créé sur
modelId
}
}
}
} `)
revenir (
Une collection de mes idées
{
data.posts.listContentModels.data.map (({id, nom, description, createdOn, modelId}) => (
{nom}
))
}
)
}
Exporter les publications par défaut À partir du bloc de code ci-dessus, nous effectuons une requête en utilisant le hook useStaticQuery de Gatsby et nous utilisons les données renvoyées pour remplir les publications dans le composant stylé à l'aide de composants stylisés. [19659108] Page d'accueil de l'application de blog Gatsby affichant une liste des modèles de contenu de l'API GraphQL. « />
En regardant de plus près le bouton Continuer la lecture dans le bloc de code ci-dessus, nous pouvons voir qu'il est entouré d'un lien qui pointe vers le nom d'une page de le modelId en cours d'itération. Cette page serait créée dynamiquement à partir d'un modèle à chaque démarrage de l'application Gatsby.
Pour implémenter cette création de pages dynamiques, créez un nouveau fichier ( gatsby-node.js ) avec le code suivant.
# gatsby-node.js
const path = require ("chemin")
exports.createPages = async ({graphql, actions, reporter}) => {
const {createPage} = actions
résultat const = attendre graphql (`
query getContent {
des postes {
listContentModels {
Les données {
la description
créé sur
modelId
Nom
}
}
}
} `)
// Modèle à partir duquel créer des pages dynamiques.
const blogPostTemplate = chemin.resolve (`src / pages / post.js`)
result.data.posts.listContentModels.data.forEach (({description, modelId, createdOn, nom}) => {
créer une page({
chemin: modelId,
composant: blogPostTemplate,
// données à passer dans le modèle dynamique
le contexte: {
nom, description, modelId, createdOn
},
})
})
} En guise d'aperçu, le bloc de code ci-dessus ajoute une nouvelle tâche dans notre application Gatsby à effectuer immédiatement après le démarrage de l'application. En regardant de plus près, nous pouvons voir les opérations suivantes effectuées lors de l'exécution de cette tâche.
Tout d'abord, nous faisons une requête GraphQL pour récupérer tous les modèles créés sur Webiny qui retourne un tableau avec les champs contenus, puis nous itérons sur le résultat à chaque fois en utilisant l'API createPage de Gatsby pour créer dynamiquement une nouvelle page en utilisant le composant dans ./ pages / post.js comme modèle.
Enfin, nous avons passé le les données que nous avons reçues en itérant sur chaque objet dans le résultat de la requête dans le composant utilisé comme modèle.
À ce stade, le composant modèle est inexistant. Créez un nouveau fichier ( post.js ) avec le code ci-dessous pour créer le modèle.
# ./pages/post.js
importer React depuis "react"
importer Moment à partir de "moment"
importer l'en-tête depuis "../components/header"
importer le pied de page de "../components/footer"
import {PostContainer, Text, Title} de "../styles";
importer la mise en page depuis "../components/layout";
const Post = ({pageContext}) => {
const {nom, description, createdOn} = pageContext
revenir (
{name}
)
}
export default Post Ci-dessus, nous avons créé un composant qui est utilisé comme modèle pour créer d'autres pages dynamiques. Ce composant reçoit un objet pageContext chaque fois qu'il est utilisé comme modèle, les champs de l'objet sont davantage déstructurés et utilisés pour remplir les données affichées sur la page, comme dans l'exemple ci-dessous.
Conclusion
Dans cet article, nous avons examiné en détail ce qu'est Webiny, les fonctionnalités sans serveur qu'il fournit, et aussi comment le Headless CMS peut être utilisé avec un générateur de site Web statique tel que Gatsby comme source de données.
Comme expliqué précédemment, Webiny fournit plus de services sans serveur en dehors du Headless CMS tels comme No-code Form Builder pour créer des formulaires interactifs, Page Builder et même un File Manager à utiliser dans vos applications.
Si vous êtes à la recherche d'un service à exploiter lors de la création de votre prochaine application sans serveur ication, alors vous devriez essayer Webiny. Vous pouvez rejoindre la communauté Webiny sur Slack ou contribuer au projet Open Source Webiny sur Github .
Références
Source link