Catégories
Astuces et Design

Faites rouler vos propres commentaires avec Gatsby et FaunaDB

Si vous n'avez pas utilisé Gatsby auparavant, découvrez pourquoi il est rapide à tous points de vue et si vous n'avez pas utilisé FaunaDB avant de vous faire plaisir. Si vous cherchez à faire de vos sites statiques des applications Jamstack complètes, c'est la solution back-end pour vous!

Ce tutoriel se concentrera uniquement sur les opérations dont vous avez besoin pour utiliser FaunaDB pour alimenter un système de commentaires pour un blog Gatsby. L'application est livrée avec des champs de saisie qui permettent aux utilisateurs de commenter vos articles et une zone d'administration pour que vous approuviez ou supprimiez les commentaires avant qu'ils n'apparaissent sur chaque article. L'authentification est fournie par le widget Identité de Netlify et tout est assemblé à l'aide de fonctions sans serveur Netlify et d'une API Apollo / GraphQL qui pousse les données vers une collection de bases de données FaunaDB.

J'ai choisi FaunaDB pour la base de données pour plusieurs raisons. Tout d'abord, il y a un niveau gratuit très généreux! parfait pour les petits projets qui ont besoin d'un back-end, il y a un support natif pour les requêtes GraphQL et il a des fonctionnalités d'indexation vraiment puissantes!

… Et pour citer les créateurs;

Peu importe la pile que vous utilisez ou l'endroit où vous déployez votre application, FaunaDB vous offre un accès sans effort, à faible latence et fiable à vos données via des API que vous connaissez bien.

Vous pouvez voir l'application de commentaires terminée ici.

Commencer

Pour commencer, clonez le dépôt sur https://github.com/PaulieScanlon/fauna-gatsby-comments

ou:

git clone https://github.com/PaulieScanlon/fauna-gatsby-comments.git

Installez ensuite toutes les dépendances:

npm install

Aussi cd pour functions/apollo-graphql et installez les dépendances pour la fonction Netlify:

npm install

Il s'agit d'un package distinct et a ses propres dépendances, vous l'utiliserez plus tard.

Nous devons également installer la CLI Netlify car vous pourrez également l'utiliser plus tard:

npm install netlify-cli -g

Ajoutons maintenant trois nouveaux fichiers qui ne font pas partie du dépôt.

A la racine de votre projet créez un .env .env.development et .env.production

Ajoutez ce qui suit à .env:

GATSBY_FAUNA_DB =
GATSBY_FAUNA_COLLECTION =

Ajoutez ce qui suit à .env.development:

GATSBY_FAUNA_DB =
GATSBY_FAUNA_COLLECTION =
GATSBY_SHOW_SIGN_UP = true
GATSBY_ADMIN_ID =

Ajoutez ce qui suit à .env.production:

GATSBY_FAUNA_DB =
GATSBY_FAUNA_COLLECTION =
GATSBY_SHOW_SIGN_UP = false
GATSBY_ADMIN_ID =

Vous y reviendrez plus tard, mais au cas où vous vous poseriez la question

  • GATSBY_FAUNA_DB est la clé secrète FaunaDB pour votre base de données
  • GATSBY_FAUNA_COLLECTION est le nom de la collection FaunaDB
  • GATSBY_SHOW_SIGN_UP est utilisé pour masquer le bouton S'inscrire lorsque le site est en production
  • GATSBY_ADMIN_ID est un identifiant utilisateur que Netlify Identity va générer pour vous

Si vous êtes du genre curieux, vous pouvez obtenir un avant-goût de l'application en exécutant gatsby develop ou yarn develop puis accédez à http://localhost:8000 dans votre navigateur.

FaunaDB

Alors commençons, mais avant d'écrire toute opération, rendez-vous sur https://fauna.com/ et inscrivez-vous!

Base de données et collecte

  • Créez une nouvelle base de données en cliquant sur NOUVELLE BASE DE DONNÉES
  • Nommez la base de données: j'ai appelé la base de données de démonstration fauna-gatsby-comments
  • Créez une nouvelle collection en cliquant sur NOUVELLE COLLECTION
  • Nommez la collection: j'ai appelé la collection de démonstration demo-blog-comments

Clé du serveur

Vous devez maintenant configurer une clé de serveur. Aller à SÉCURITÉ

  • Créez une nouvelle clé en cliquant sur NOUVELLE CLÉ
  • Sélectionnez la base de données à laquelle vous souhaitez appliquer la clé, fauna-gatsby-comments par exemple
  • Met le Rôle comme Admin
  • Nommez la clé du serveur: j'ai appelé la clé de démonstration demo-blog-server-key

Variables d'environnement Pt. 1

Copiez la clé du serveur et ajoutez-la à GATSBY_FAUNA_DB dans .env.development, .env.production et .env.

Vous devrez également ajouter le nom de la collection à GATSBY_FAUNA_COLLECTION dans .env.development, .env.production et .env.

Ajouter ces valeurs à .env sont juste pour que vous puissiez tester vos opérations de développement FaunaDB, ce que vous ferez ensuite.

Commençons par créer un commentaire alors revenons à boop.js:

// boop.js
...
// CREATE COMMENT
createComment: async () => {
  const slug = "/posts/some-post"
  const name = "some name"
  const comment = "some comment"
  const results = await client.query(
    q.Create(q.Collection(COLLECTION_NAME), {
      data: {
        isApproved: false,
        slug: slug,
        date: new Date().toString(),
        name: name,
        comment: comment,
      },
    })
  )
  console.log(JSON.stringify(results, null, 2))
  return {
    commentId: results.ref.id,
  }
},
...

La répartition de cette fonction est la suivante;

  • q est l'instance de faunadb.query
  • Create est la méthode FaunaDB pour créer une entrée dans une collection
  • Collection est la zone de la base de données pour stocker les données. Il prend le nom de la collection comme premier argument et un objet de données comme deuxième.

Le deuxième argument est la forme des données dont vous avez besoin pour piloter le système de commentaires des applications.

Pour l'instant, vous allez coder en dur slug, name et comment mais dans l'application finale, ces valeurs sont capturées par le formulaire d'entrée sur la page des messages et transmises via args

La répartition de la forme est la suivante;

  • isApproved est le statut du commentaire et par défaut, il est faux jusqu'à ce que nous l'approuvions dans la page d'administration
  • slug est le chemin vers le message où le commentaire a été écrit
  • date est l'horodatage du commentaire a été écrit
  • name est le nom que l'utilisateur a entré dans les commentaires
  • comment est le commentaire que l'utilisateur a entré dans le formulaire de commentaires

Lorsque vous (ou un utilisateur) créez un commentaire, vous n'êtes pas vraiment intéressé par la réponse, car en ce qui concerne l'utilisateur, tout ce qu'il voit est soit un message de réussite soit un message d'erreur.

Une fois qu'un utilisateur a posté un commentaire, il va entrer dans votre file d'attente d'administration jusqu'à ce que vous l'approuviez, mais si vous souhaitez retourner quelque chose, vous pouvez le faire apparaître dans l'interface utilisateur en renvoyant quelque chose à partir createComment une fonction.

Créer un commentaire

Si vous avez codé en dur un slug, name et comment vous pouvez maintenant exécuter ce qui suit dans votre CLI

node boop createComment

Si tout fonctionnait correctement, vous devriez voir un journal dans votre terminal du nouveau commentaire.

{
   "ref": {
     "@ref": {
       "id": "263413122555970050",
       "collection": {
         "@ref": {
           "id": "demo-blog-comments",
           "collection": {
             "@ref": {
               "id": "collections"
             }
           }
         }
       }
     }
   },
   "ts": 1587469179600000,
   "data": {
     "isApproved": false,
     "slug": "/posts/some-post",
     "date": "Tue Apr 21 2020 12:39:39 GMT+0100 (British Summer Time)",
     "name": "some name",
     "comment": "some comment"
   }
 }
 { commentId: '263413122555970050' }

Si vous vous dirigez vers COLLECTIONS dans FaunaDB, vous devriez voir votre nouvelle entrée dans la collection.

Vous devrez créer quelques commentaires supplémentaires pendant le développement. Modifiez donc les valeurs codées en dur pour name et comment et exécutez à nouveau ce qui suit.

node boop createComment

Faites-le plusieurs fois afin de vous retrouver avec au moins trois nouveaux commentaires stockés dans la base de données, vous les utiliserez dans un instant.

Supprimer le commentaire par identifiant

Maintenant que vous pouvez créer des commentaires, vous devez également pouvoir supprimer un commentaire.

En ajoutant le commentId l'un des commentaires que vous avez créés ci-dessus, vous pouvez le supprimer de la base de données. le commentId est le id dans le (email protected) objet

Encore une fois, vous n'êtes pas vraiment préoccupé par la valeur de retour ici, mais si vous vouliez faire apparaître cela dans l'interface utilisateur, vous pouvez le faire en renvoyant quelque chose de la deleteCommentById une fonction.

// boop.js
...
// DELETE COMMENT
deleteCommentById: async () => {
  const commentId = "263413122555970050";
  const results = await client.query(
    q.Delete(q.Ref(q.Collection(COLLECTION_NAME), commentId))
  );
  console.log(JSON.stringify(results, null, 2));
  return {
    commentId: results.ref.id,
  };
},
...

La répartition de cette fonction est la suivante

  • client est l'instance client FaunaDB
  • query est une méthode pour obtenir des données de FaunaDB
  • q est l'instance de faunadb.query
  • Delete est la méthode de suppression de FaunaDB pour supprimer des entrées d'une collection
  • Ref est la référence FaunaDB unique utilisée pour identifier l'entrée
  • Collection est la zone de la base de données où les données sont stockées

Si vous avez codé en dur un commentId vous pouvez maintenant exécuter ce qui suit dans votre CLI:

node boop deleteCommentById

Si vous retournez à COLLECTIONS dans FaunaDB, vous devriez voir que l'entrée n'existe plus dans la collection

Index

Ensuite, vous allez créer un INDICE dans FaunaDB.

Une INDICE vous permet d'interroger la base de données avec un terme spécifique et de définir une forme de données spécifique à renvoyer.

Lorsque vous travaillez avec GraphQL et / ou TypeScript, cela est vraiment puissant car vous pouvez utiliser les index FaunaDB pour retourner seulement les données dont vous avez besoin et sous une forme prévisible. Cela fait des réponses de saisie de données dans GraphQL et / TypeScript un rêve… J'ai travaillé sur un certain nombre d'applications qui ne font que renvoyer un objet massif de valeurs inutiles qui entraînera inévitablement des bogues dans votre application. blurg!

  • Aller à INDEX et cliquez NOUVEL INDEX
  • Nommez l'index: j'ai appelé celui-ci get-all-comments
  • Met le collection source au nom de la collection que vous avez configurée plus tôt

Comme mentionné ci-dessus, lorsque vous interrogez la base de données à l'aide de cet index, vous pouvez indiquer à FaunaDB les parties de l'entrée que vous souhaitez renvoyer.

Vous pouvez le faire en ajoutant des «valeurs» mais veillez à saisir les valeurs exactement telles qu'elles apparaissent ci-dessous car (sur le niveau gratuit FaunaDB) vous ne pouvez pas les modifier après les avoir créées, donc s'il y a une erreur, vous aurez pour supprimer l'index et recommencer… bummer!

Les valeurs que vous devez ajouter sont les suivantes:

  • ref
  • data.isApproved
  • data.slug
  • data.date
  • data.name
  • data.comment

Après avoir ajouté toutes les valeurs, vous pouvez cliquer sur ENREGISTRER.

Obtenez tous les commentaires

// boop.js
...
// GET ALL COMMENTS
getAllComments: async () => {
   const results = await client.query(
     q.Paginate(q.Match(q.Index("get-all-comments")))
   );
   console.log(JSON.stringify(results, null, 2));
   return results.data.map(((ref, isApproved, slug, date, name, comment)) => ({
     commentId: ref.id,
     isApproved,
     slug,
     date,
     name,
     comment,
   }));
 },
...

La répartition de cette fonction est la suivante

  • client est l'instance client FaunaDB
  • query est une méthode pour obtenir des données de FaunaDB
  • q est l'instance de faunadb.query
  • Paginate pagine les réponses
  • Match renvoie les résultats correspondants
  • Index est le nom du Indice vous venez de créer

La forme du résultat renvoyé ici est un tableau de la même forme que vous avez définie dans le Indice "valeurs"

Si vous exécutez ce qui suit, vous devriez voir la liste de tous les commentaires que vous avez créés précédemment:

node boop getAllComments

Obtenez les commentaires par slug

Vous allez adopter une approche similaire à celle ci-dessus, mais cette fois, créez une nouvelle Indice qui vous permet d'interroger FaunaDB d'une manière différente. La principale différence ici est que lorsque vous get-comments-by-slug vous devrez informer FaunaDB de ce terme et vous pouvez le faire en ajoutant data.slug à la termes champ.

  • Aller à INDICE et cliquez NOUVEL INDEX
  • Nommez l'index, j'ai appelé celui-ci get-comments-by-slug
  • Met le collection source au nom de la collection que vous avez configurée plus tôt
  • Ajouter data.slug dans le champ des termes

Les valeurs que vous devez ajouter sont les suivantes:

  • ref
  • data.isApproved
  • data.slug
  • data.date
  • data.name
  • data.comment

Après avoir ajouté toutes les valeurs, vous pouvez cliquer sur ENREGISTRER.

// boop.js
...
// GET COMMENT BY SLUG
getCommentsBySlug: async () => {
  const slug = "/posts/some-post";
  const results = await client.query(
    q.Paginate(q.Match(q.Index("get-comments-by-slug"), slug))
  );
  console.log(JSON.stringify(results, null, 2));
  return results.data.map(((ref, isApproved, slug, date, name, comment)) => ({
    commentId: ref.id,
    isApproved,
    slug,
    date,
    name,
    comment,
  }));
},
...

La répartition de cette fonction est la suivante:

  • client est l'instance client FaunaDB
  • query est une méthode pour obtenir des données de FaunaDB
  • q est l'instance de faunadb.query
  • Paginate pagine les réponses
  • Match renvoie les résultats correspondants
  • Index est le nom du Indice vous venez de créer

La forme du résultat renvoyé ici est un tableau de la même forme que vous avez définie dans le Indice "Valeurs", vous pouvez créer cette forme de la même manière que ci-dessus et assurez-vous d'ajouter une valeur pour les termes. Encore une fois, faites attention à les saisir avec soin.

Si vous exécutez ce qui suit, vous devriez voir la liste de tous les commentaires que vous avez créés précédemment mais pour un slug:

node boop getCommentsBySlug

Approuver le commentaire par id

Lorsque vous créez un commentaire, vous définissez manuellement le isApproved valeur à false. Cela empêche le commentaire d'être affiché dans l'application jusqu'à ce que vous l'approuviez.

Vous devez maintenant créer une fonction pour ce faire, mais vous devrez coder en dur un commentId. Utiliser un commentId à partir de l'un des commentaires que vous avez créés précédemment:

// boop.js
...
// APPROVE COMMENT BY ID
approveCommentById: async () => {
  const commentId = '263413122555970050'
  const results = await client.query(
    q.Update(q.Ref(q.Collection(COLLECTION_NAME), commentId), {
      data: {
        isApproved: true,
      },
    })
  );
  console.log(JSON.stringify(results, null, 2));
  return {
    isApproved: results.isApproved,
  };
},
...

La répartition de cette fonction est la suivante:

  • client est l'instance client FaunaDB
  • query est une méthode pour obtenir des données de FaunaDB
  • q est l'instance de faunadb.query
  • Update est la méthode FaundaDB jusqu'à mettre à jour une entrée
  • Ref est la référence FaunaDB unique utilisée pour identifier l'entrée
  • Collection est la zone de la base de données où les données sont stockées

Si vous avez codé en dur un commentId vous pouvez maintenant exécuter ce qui suit dans votre CLI:

node boop approveCommentById

Si vous exécutez le getCommentsBySlug encore une fois, vous devriez maintenant voir le isApproved état de l'entrée que vous avez codée en dur commentId car aura changé en true.

node boop getCommentsBySlug

Ce sont toutes les opérations nécessaires pour gérer les données de l'application.

Dans le repo si vous regardez apollo-graphql.js qui se trouve dans functions/apollo-graphql vous verrez toutes les opérations ci-dessus. Comme mentionné précédemment, les valeurs codées en dur sont remplacées par args, ce sont les valeurs transmises depuis diverses parties de l'application.

Netlify

En supposant que vous avez terminé le processus d'inscription à Netlify ou que vous avez déjà un compte avec Netlify, vous pouvez maintenant transférer l'application de démonstration vers votre compte GitHub.

Pour ce faire, vous devez avoir initialisé git localement, ajouté une télécommande et avoir poussé le dépôt de démonstration en amont avant de continuer.

Vous devriez maintenant être en mesure de lier le référentiel au déploiement continu de Netlify.

Si vous cliquez sur le bouton "Nouveau site de Git" sur le tableau de bord Netlify, vous pouvez autoriser l'accès à votre compte GitHub et sélectionner le gatsby-fauna-comments repo pour activer le déploiement continu de Netlify. Vous devrez avoir déployé au moins une fois pour que nous ayons une URL publique de votre application.

L'URL ressemblera à ceci https://ecstatic-lewin-b1bd17.netlify.app mais n'hésitez pas à le renommer et à noter l'URL car vous en aurez besoin pour l'étape Netlify Identity mentionnée sous peu.

Variables d'environnement Pt. 2

Dans une étape précédente, vous avez ajouté la clé secrète de la base de données FaunaDB et le nom de la collection à votre .env fichier (s). Vous devrez également ajouter la même chose à Netlify Variables d'environnement.

  • Accédez aux paramètres à partir de la navigation Netlify
  • Cliquer sur Construire et déployer
  • Soit sélectionner Environnement ou faites défiler la liste jusqu'à ce que vous voyiez Variables d'environnement
  • Cliquer sur Modifier les variables

Continuez à ajouter ce qui suit:

GATSBY_SHOW_SIGN_UP = false
GATSBY_FAUNA_DB = you FaunaDB secret key
GATSBY_FAUNA_COLLECTION = you FaunaDB collection name

Pendant que vous êtes ici, vous devrez également modifier le Politique relative aux variables sensibles, sélectionnez Déployer sans restrictions

Widget d'identité Netlify

J'ai déjà mentionné que lorsqu'un commentaire est créé, le isApproved la valeur est définie sur false, cela empêche les commentaires d'apparaître sur les articles de blog tant que vous (l'administrateur) ne les avez pas approuvés. Pour devenir administrateur, vous devez créer un identité.

Vous pouvez y parvenir en utilisant le widget d'identité Netlify.

Si vous avez terminé l'étape de déploiement continu ci-dessus, vous pouvez accéder à la page Identité à partir de la navigation Netlify.

Vous ne verrez aucun utilisateur ici pour l'instant, alors utilisons l'application pour connecter les points, mais avant de le faire, assurez-vous de cliquer sur Activer l'identité

Avant de continuer, je tiens à souligner que vous utiliserez netlify dev au lieu de gatsby develop ou yarn develop à partir de maintenant. En effet, vous allez utiliser des méthodes Netlify «spéciales» dans l'application et regarder le serveur en utilisant netlify dev est requis pour faire tourner différents processus que vous utiliserez.

  • Faites tourner l'application en utilisant netlify dev
  • Aller vers http://localhost:8888/admin/
  • Clique le S'inscrire bouton dans l'en-tête

Vous devrez également pointer le widget Identité Netlify vers l'URL de votre application récemment déployée. Il s'agit de l'URL que j'ai mentionnée, que vous devrez noter plus tôt, si vous n'avez pas renommé votre application, elle ressemblera à ceci: https://ecstatic-lewin-b1bd17.netlify.app/ Il y aura une invite dans la fenêtre pop-up pour Définir l'URL du site.

Vous pouvez maintenant effectuer les étapes d'inscription nécessaires.

Après votre inscription, vous recevrez un e-mail vous demandant de confirmer votre identité et, une fois cela terminé, actualisez la page Identité dans Netlify et vous devriez vous voir comme un utilisateur.

Il est maintenant temps de se connecter, mais avant de faire cela, trouvez Identity.js dans src/components et annuler temporairement la console.log() à la ligne 14. Cela enregistrera l'objet utilisateur Netlify Identity sur la console.

  • Redémarrez votre serveur local
  • Relancez l'application à l'aide de netlify dev
  • Clique le S'identifier bouton dans l'en-tête

Si tout cela fonctionne, vous devriez pouvoir voir un journal de console pour netlifyIdentity.currentUser: trouvez le id et copiez la valeur.

Définissez-le comme valeur pour GATSBY_ADMIN_ID = à la fois .env.production et .env.development

Vous pouvez maintenant retirer le console.log() sur la ligne 14 Identity.js ou tout simplement commenter à nouveau.

GATSBY_ADMIN_ID = your Netlify Identity user id

…et enfin

  • Redémarrez votre serveur local
  • Relancez l'application à l'aide de netlify dev

Vous devriez maintenant pouvoir vous connecter en tant qu'administrateur… hourra!

Aller vers http://localhost:8888/admin/ et Connectez-vous.

Il est important de noter ici que vous utiliserez localhost:8888 pour le développement maintenant et NON localhost:8000 ce qui est plus courant avec le développement de Gatsby

Avant de tester cela dans l'environnement déployé, assurez-vous de revenir à Netlify Variables d'environnement et ajoutez votre utilisateur Netlify Identity id aux variables d'environnement!

  • Accédez aux paramètres à partir de la navigation Netlify
  • Cliquer sur Construire et déployer
  • Soit sélectionner Environnement ou faites défiler la liste jusqu'à ce que vous voyiez Variables d'environnement
  • Cliquer sur Modifier les variables

Continuez à ajouter ce qui suit:

GATSBY_ADMIN_ID = your Netlify Identity user id

Si vous avez un jeu avec l'application et entrez quelques commentaires sur chacun des messages, puis revenez à la page Admin, vous pouvez choisir soit approuver ou supprimer les commentaires.

Naturellement, seuls les commentaires approuvés seront affichés sur un message donné et ceux supprimés auront disparu pour toujours.

Si vous avez utilisé ce didacticiel pour votre projet, j'aimerais avoir de vos nouvelles à @pauliescanlon.


Par Paulie Scanlon (@pauliescanlon), Développeur d'interface utilisateur Front End React / Ingénieur UX: Après tout, la structure + l'ordre = le plaisir.

Visitez le blog de Paulie à: www.paulie.dev

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *