Fermer

mars 9, 2021

Modélisation d'une API GraphQL pour votre blog à l'aide du CMS Webiny Serverless20 minutes de lecture



À propos de l'auteur

Nwani Victory travaille à distance en tant que développeur Fullstack de Lagos, au Nigeria. Après les heures de bureau, il se double d'un ingénieur cloud à la recherche de moyens de faire du cloud…
En savoir plus sur
Nwani

Dans le monde des applications sans serveur, Webiny devient un moyen populaire d'adopter l'approche sans serveur de la création d'applications en fournissant des outils pratiques sur lesquels les développeurs peuvent construire leurs applications. Dans cet article, nous examinerons ce qu'est Webiny et essayerons le CMS headless comme source de données pour une application de blog Gatsby.

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.

 Répertoire du projet Webiny généré structure.
Structure de répertoire de projet Webiny générée. ( Grand aperçu )

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.

 Page d'accueil de l'application Admin affichant d'autres applications Webiny.
Page d'accueil de l'application Admin affichant d'autres applications Webiny. ( Grand aperçu )

À 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.

 Affichage modal de création de contenu avec les champs nécessaires pour créer un nouveau contenu.
Affichage du modal de création de contenu avec les champs nécessaires pour créer un nouveau contenu. ( Grand aperçu )

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.

 Éditeur de contenu Webiny glisser-déposer.
Éditeur de contenu Webiny glisser-déposer. ( Grand aperçu )

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.

 Un organigramme contenant des éléments dans un article de blog typique.
Un organigramme contenant des éléments dans un article de blog typique. ( Grand aperçu )

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.

 Modal de paramètres de champ utilisé pour ajouter les valeurs d'un type de champ supprimé.
Modal de paramètres de champ utilisé pour ajouter les valeurs d'un champ supprimé. taper. ( Grand aperçu )

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.

 Aperçu montrant tous les champs supprimés dans l'éditeur de modèle de contenu.
Aperçu montrant tous les champs supprimés dans l'éditeur de modèle de contenu. ( Grand aperçu )

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.

 Terrain de jeu GraphQL pour tester l'API GraphQL CMS Headless généré.
Terrain de jeu GraphQL pour tester le CMS GraphQL sans tête généré. API. ( Grand aperçu )

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.

( Grand aperçu )

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 .

 Terrain de jeu GraphiQL généré par Gatsby pour tester et introspecter le schéma généré par Gatsby.
Terrain de jeu GraphiQL généré par Gatsby pour tester et introspecter le schéma généré par Gatsby. ( Grand aperçu )

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 Un petit espace pour documenter mes pensées sous forme de billets de blog et d'articles

{ data.posts.listContentModels.data.map (({id, nom, description, createdOn, modelId}) => (
{Moment (createdOn) .format ("jjjj, m, aaaa")}

{nom}
{description}
)) }
) } 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. « />

Page d'accueil de l'application de blog Gatsby affichant une liste des modèles de contenu de l'API GraphQL. ( Grand aperçu )

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} Créé le {Moment (createdOn) .format ("jjjj, mm, aaaa")}
{description}

) } 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.

 Article de blog Webiny
( Grand aperçu )

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

 Smashing Editorial "width =" 35 "height =" 46 "loading =" lazy "decoding =" async (vf, il, yk)

Le meilleur outil 2021 pour ta croissance Instagram !



Source link

0 Partages
Revenir vers le haut