À propos de l'auteur

Aman est un développeur de logiciels et un étudiant. Il code, écrit et court beaucoup. Il trouve généralement le temps d'étudier quand il ne fait rien de tout cela.
En savoir plus sur
Aman
…

Vous avez toujours voulu avoir une section de commentaires pour votre blog, mais vous avez été submergé par les solutions coûteuses et de maintenance? Firebase peut être votre sauveur. Dans ce guide, nous allons apprendre à ajouter une section de commentaires à votre blog avec Firebase, tout en apprenant les bases de Firebase en cours de route.

Une section de commentaires est un excellent moyen de créer une communauté pour votre blog. Récemment, quand j'ai commencé à bloguer, j'ai pensé à ajouter une section de commentaires. Cependant, ce n’était pas facile. Les systèmes de commentaires hébergés, tels que Disqus et Commento, présentent leurs propres problèmes:

• Ils possèdent vos données.
• Ils ne sont pas gratuits.
• Vous ne pouvez pas les personnaliser beaucoup.

J'ai donc décidé pour construire mon propre système de commentaires. Firebase semblait être une alternative d'hébergement parfaite à l'exécution d'un serveur principal.

Tout d'abord, vous bénéficiez de tous les avantages d'avoir votre propre base de données: vous contrôlez les données et vous pouvez les structurer comme vous le souhaitez. Deuxièmement, vous n’avez pas besoin de configurer un serveur principal. Vous pouvez facilement le contrôler depuis le frontal. C’est comme avoir le meilleur des deux mondes: un système hébergé sans les tracas d’un back-end.

Dans cet article, c’est ce que nous allons faire. Nous apprendrons comment configurer Firebase avec Gatsby, un générateur de site statique. Mais les principes peuvent être appliqués à n'importe quel générateur de site statique.

Allons-y!

Qu'est-ce que Firebase?

Firebase est un back-end en tant que service qui offre des outils pour les développeurs d'applications tels que comme base de données, hébergement, fonctions cloud, authentification, analyse et stockage.

Cloud Firestore (base de données Firebase) est la fonctionnalité que nous utiliserons pour ce projet. C'est une base de données NoSQL. Cela signifie qu'il n'est pas structuré comme une base de données SQL avec des lignes, des colonnes et des tables. Vous pouvez le considérer comme un grand arbre JSON.

Introduction au projet

Initialisons le projet en clonant ou en téléchargeant le dépôt depuis GitHub .

J'ai créé deux branches pour chaque étape (une au début et une à la fin) pour vous permettre de suivre plus facilement les modifications au fur et à mesure.

Lançons le projet en utilisant la commande suivante:

 gatsby develop 

Si vous ouvrez le projet dans votre navigateur, vous verrez les bases d'un blog basique.

La section des commentaires ne fonctionne pas. Il charge simplement un exemple de commentaire et, une fois le commentaire soumis, il enregistre les détails dans la console.

Notre tâche principale est de faire fonctionner la section des commentaires.

Avant de faire quoi que ce soit, comprenons comment le code pour la section commentaires fonctionne.

Quatre composants gèrent les sections commentaires:

• blog-post.js
• Comments.js
• CommentForm. js
• Comment.js

Tout d'abord, nous devons identifier les commentaires d'un message. Cela peut être fait en créant un identifiant unique pour chaque article de blog, ou nous pouvons utiliser le slug, qui est toujours unique.

Le fichier blog-post.js est le composant de mise en page pour tous les articles de blog . C'est le point d'entrée idéal pour obtenir le slug d'un article de blog. Cela se fait à l'aide d'une requête GraphQL.

 export const query = graphql`
    query ($ slug: String!) {
        markdownRemark (champs: {slug: {eq: $ slug}}) {
            html
            frontmatter {
                Titre
            }
            des champs {
                limace
            }
        }
    }
»

Avant de l'envoyer au composant Comments.js utilisons la méthode substring () pour supprimer la barre oblique finale ( / ) qui Gatsby ajoute au slug.

 const slug = post.fields.slug.substring (1, post.fields.slug.length - 1)

revenir (
    
        

            
 {post.frontmatter.title} 
            

            
        
    
    )
 }

Le composant Comments.js mappe chaque commentaire et transmet ses données à Comment.js avec les réponses éventuelles. Pour ce projet, j'ai décidé d'aller plus loin avec le système de commentaires.

Le composant charge également CommentForm.js pour capturer les commentaires de premier niveau.

 const Comments = ({comments , slug}) => {
    revenir (
        

            
 Rejoignez la discussion 
            
            
                 {comments.length> 0 &&
                    commentaires
                        .filter (comment =>! comment.pId)
                        .map (commentaire => {
                            laisser l'enfant
                            if (comment.id) {
                                enfant = comments.find (c => comment.id === c.pId)
                            }
                            revenir (
                                
                            )
                        })}
                    
                
            )
        }

Passons à CommentForm.js . Ce fichier est simple, il rend un formulaire de commentaire et gère sa soumission. La méthode de soumission enregistre simplement les détails dans la console.

 const handleCommentSubmission = async e => {
    e. preventDefault ()
        laissez comment = {
            nom nom,
            contenu: contenu,
            pId: parentId ∣∣ null,
            heure: nouvelle date (),
        }
        setName ("")
        setContent ("")
        console.log (commentaire)
    }

Le fichier Comment.js contient beaucoup de choses. Décomposons-le en petits morceaux.

Premièrement, il y a un composant SingleComment qui rend un commentaire.

J'utilise l'API Adorable pour obtenir un avatar sympa . La bibliothèque Moment.js est utilisée pour rendre l'heure dans un format lisible par l'homme.

 const SingleComment = ({comment}) => (
    

        

            

                
            
            

                

                     {comment.name}  dit 
                
                 {comment.time} && ( (moment (comment.time.toDate ()). Calendar ()} )}
            
        
        
 {comment.content} 

    
)

Le suivant dans le fichier est le composant Comment . Ce composant affiche un commentaire enfant si un commentaire enfant lui a été transmis. Sinon, il affiche une boîte de réponse, qui peut être activée ou désactivée en cliquant sur le bouton «Répondre» ou «Annuler la réponse».

 const Comment = ({comment, child, slug}) => {
    const [showReplyBox, setShowReplyBox] = useState (faux)
    revenir (
        
            
             {enfant && (
                
                    
                
            )}
            {! enfant && (
                

                    {showReplyBox? (
                        

                              setShowReplyBoy (false)}
                            >
                                Annuler la réponse
                            
                            
                        
                    ): (
                         setShowReplyBox (true)}>
                            Répondre
                        
                    )}
                
            )}
        

)}

Maintenant que nous avons une vue d’ensemble, passons en revue les étapes de création de notre section de commentaires.

1. Ajouter Firebase

Commençons par configurer Firebase pour notre projet.

Commencez par vous inscrire. Accédez à Firebase et créez un compte Google. Si vous n’en avez pas, cliquez sur «Commencer».

Cliquez sur «Ajouter un projet» pour ajouter un nouveau projet. Ajoutez un nom à votre projet et cliquez sur «Créer un projet».

Une fois que nous avons créé un projet, nous devrons configurer Cloud Firestore.

Dans le menu de gauche, cliquez sur «Base de données». Une fois qu'une page s'ouvre indiquant «Cloud Firestore», cliquez sur «Créer une base de données» pour créer une nouvelle base de données Cloud Firestore.

Lorsque la fenêtre contextuelle apparaît, choisissez «Démarrer en mode test». Ensuite, choisissez l'emplacement Cloud Firestore le plus proche de vous.

Une fois que vous voyez une page comme celle-ci, cela signifie que vous avez réussi à créer votre Cloud Base de données Firestore.

Terminons par la mise en place de la logique de l'application. Revenez à l'application et installez Firebase:

 yarn add firebase 

Ajoutez un nouveau fichier, firebase.js dans le répertoire racine. Collez-y ce contenu:

 importez firebase depuis "firebase / app"
importer "firebase / firestore"

var firebaseConfig = 'votreFirebaseConfig'

firebase.initializeApp (firebaseConfig)

export const firestore = firebase.firestore ()

exporter firebase par défaut 

Vous devrez remplacer yourFirebaseConfig par celui de votre projet. Pour le trouver, cliquez sur l'icône d'engrenage à côté de «Aperçu du projet» dans l'application Firebase.

Cela ouvre la page des paramètres. Sous le sous-titre de votre application, cliquez sur l'icône Web, qui ressemble à ceci:

Une fenêtre contextuelle s'ouvre. Dans le champ «Pseudo de l'application», saisissez un nom, puis cliquez sur «Enregistrer l'application». Cela donnera votre objet firebaseConfig .

Copiez uniquement le contenu de l'objet firebaseConfig et collez-le dans le fichier firebase.js .

Pouvez-vous exposer votre clé API Firebase?

Oui. Comme l'a déclaré un ingénieur de Google exposer votre clé API est OK.

Le seul but de la clé API est d'identifier votre projet avec la base de données de Google. Si vous avez défini des règles de sécurité strictes pour Cloud Firestore, vous n'avez pas à vous inquiéter si quelqu'un récupère votre clé API.

Nous parlerons des règles de sécurité dans la dernière section.

Pour l'instant, nous exécutez Firestore en mode test, vous ne devez donc pas révéler la clé API au public.

Comment utiliser Firestore?

Vous pouvez stocker des données dans l'un des deux types suivants:

• collection
  Une collection contient des documents. C'est comme un tableau de documents.
• document
  Un document contient des données dans une paire champ-valeur.

N'oubliez pas qu'une collection ne peut contenir que des documents et pas d'autres collections . Mais un document peut contenir d'autres collections.

Cela signifie que si nous voulons stocker une collection dans une collection, alors nous stockerons la collection dans un document et stocker ce document dans une collection, comme ceci:

 {collection -1} / {document} / {collection-2} 

Comment structurer les données?

Cloud Firestore est de nature hiérarchique, les gens ont donc tendance à stocker des données comme ceci:

 blog / {blog-post -1} / content / comments / {comment-1} 

Mais stocker des données de cette manière pose souvent des problèmes.

Supposons que vous vouliez obtenir un commentaire. Vous devrez rechercher le commentaire stocké au plus profond de la collection de blogs. Cela rendra votre code plus sujet aux erreurs. Chris Esplin recommande de ne jamais utiliser de sous-collections .

Je recommanderais de stocker les données sous forme d'objet aplati:

 blog-posts / {blog-post-1}
comments / {comment-1} 

De cette façon, vous pouvez obtenir et envoyer des données facilement.

Comment obtenir des données de Firestore?

Pour obtenir des données, Firebase vous propose deux méthodes:

• get ()
  Ceci est pour obtenir le contenu une fois.
• onSnapshot ()
  Cette méthode vous envoie des données et continue d'envoyer des mises à jour sauf si vous vous désabonnez.

Comment envoyer des données à Firestore ?

Tout comme pour obtenir des données, Firebase dispose de deux méthodes pour enregistrer les données:

• set ()
  Ceci est utilisé pour spécifier l'ID d'un document.
• add ()
  Ceci est utilisé pour créer des documents avec des identifiants automatiques.

Je sais, cela a été beaucoup à comprendre. Mais ne vous inquiétez pas, nous reviendrons sur ces concepts lorsque nous atteindrons le projet.

2. Créer un exemple de date

L'étape suivante consiste à créer des exemples de données à interroger. Pour ce faire, accédez à Firebase.

Accédez à Cloud Firestore. Cliquez sur «Démarrer une collection». Entrez commentaires pour «ID de la collection», puis cliquez sur «Suivant».

Pour «ID de document», cliquez sur «Auto-ID. Entrez les données suivantes et cliquez sur "Enregistrer".

Pendant que vous saisissez des données, assurez-vous que les "Champs" et "Types" correspondent aux capture d'écran ci-dessus. Cliquez ensuite sur "Enregistrer".

C'est ainsi que vous ajoutez manuellement un commentaire dans Firestore. Le processus semble fastidieux, mais ne vous inquiétez pas: à partir de maintenant, notre application se chargera d'ajouter des commentaires.

À ce stade, notre base de données ressemble à ceci: comments / {comment} . [19659010] Nos exemples de données sont prêts à être interrogés. Commençons par obtenir les données de notre blog.

Accédez à blog-post.js et importez le Firestore à partir du fichier Firebase que nous venons de créer.

 import {firestore} from " ../../firebase.js"[19659021unityPourinterrogernousallonsutiliserlehook useEffect  de React. Si vous ne l’avez pas déjà fait, importons-le également. 
 useEffect (() => {
    firestore
      .collection (`commentaires`)
      .onSnapshot (instantané => {
        const posts = snapshot.docs
        .filter (doc => doc.data (). slug === slug)
        .map (doc => {
          return {id: doc.id, ... doc.data ()}
        })
        setComments (messages)
      })
}, [slug]) 
 La méthode utilisée pour obtenir les données est  onSnapshot . C'est parce que nous voulons également écouter les changements d'état. Ainsi, les commentaires seront mis à jour sans que l'utilisateur n'ait à actualiser le navigateur.
 Nous avons utilisé les méthodes  filter  et  map  pour trouver les commentaires dont le slug correspond au slug actuel. [19659010] Une dernière chose à laquelle nous devons penser est le nettoyage. Comme  onSnapshot  continue d'envoyer des mises à jour, cela pourrait introduire une fuite de mémoire dans notre application. Heureusement, Firebase fournit une  correctif .
 useEffect (() => {
    const cleanUp = firestore
      .doc (`commentaires / $ {slug}`)
      .collection ("commentaires")
      .onSnapshot (instantané => {
        const posts = snapshot.docs.map (doc => {
          return {id: doc.id, ... doc.data ()}
        })
        setComments (messages)
      })
    return () => nettoyer ()
  }, [slug]) 
 Une fois que vous avez terminé, exécutez  gatsby develop  pour voir les changements. Nous pouvons maintenant voir notre section de commentaires obtenir des données de Firebase.
 Travaillons sur le stockage des commentaires.
 Pour stocker les commentaires, accédez à le fichier  CommentForm.js . Importons également Firestore dans ce fichier.
 import {firestore} à partir de "../../firebase.js"[19659021[]) Pour enregistrer un commentaire dans Firebase, nous utiliserons le  add () car nous voulons que Firestore crée des documents avec un identifiant automatique. 
 Faisons cela dans la méthode  handleCommentSubmission . 
 firestore
.collection (`commentaires`)
.ajouter un commentaire)
.catch (err => {
   console.error ('erreur lors de l'ajout d'un commentaire:', err)
 }) 
 Premièrement, nous obtenons la référence à la collection de commentaires, puis ajoutons le commentaire. Nous utilisons également la méthode  catch  pour détecter les erreurs lors de l'ajout de commentaires.
 À ce stade, si vous ouvrez un navigateur, vous pouvez voir la section des commentaires fonctionner. Nous pouvons ajouter de nouveaux commentaires, ainsi que publier des réponses. Ce qui est plus étonnant, c'est que tout fonctionne sans que nous ayons à actualiser la page.
 Vous pouvez également vérifier Firestore pour voir qu'il stocke les données.
 Enfin, parlons d'une chose cruciale dans Firebase: les règles de sécurité.
 5. Renforcer les règles de sécurité
 Jusqu'à présent, nous exécutions Cloud Firestore en mode test. Cela signifie que toute personne ayant accès à l'URL peut ajouter et lire notre base de données. C'est effrayant.
 Pour y remédier, Firebase nous fournit des règles de sécurité. Nous pouvons créer un modèle de base de données et restreindre certaines activités dans Cloud Firestore.
 En plus des deux opérations de base (lecture et écriture), Firebase propose des opérations plus granulaires: obtenir, répertorier, créer, mettre à jour et supprimer.
 Une opération de lecture peut être décomposée comme suit:
  get 
 Obtenez un seul document.
  list 
 Obtenez une liste de documents ou une collection.
 Une opération d'écriture peut être ventilé comme suit:
  create 
 Créer un nouveau document.
  update 
 Mettre à jour un document existant.
  delete 
 Supprimer un document. [19659009] Pour sécuriser l'application, retournez dans Cloud Firestore. Sous "Règles", saisissez ceci:
 service cloud.firestore {
    match / databases / {base de données} / documents {
    match / commentaires / {id = **} {
        autoriser la lecture, la création;
    }
    }
} 
 Sur la première ligne, nous définissons le service, qui, dans notre cas, est Firestore. Les lignes suivantes indiquent à Firebase que tout ce qui se trouve dans la collection  comments  peut être lu et créé.
 Si nous avions utilisé ceci:
 autoriser la lecture, l'écriture; 
… cela signifierait que les utilisateurs pourraient mettre à jour et supprimer les commentaires existants, ce dont nous ne voulons pas.
 Les règles de sécurité de Firebase sont extrêmement puissantes, nous permettant de restreindre certaines données, activités et même les utilisateurs.
 Félicitations! Vous venez de voir la puissance de Firebase. C'est un excellent outil pour créer des applications sûres et rapides.
 Nous avons créé une section de commentaires très simple. Mais rien ne vous empêche d'explorer d'autres possibilités:
 Ajoutez des photos de profil et stockez-les dans Cloud Storage pour Firebase;
 Utilisez Firebase pour permettre aux utilisateurs de créer un compte et de les authentifier à l'aide de l'authentification Firebase;
 Utilisez Firebase pour créer des commentaires de type Medium en ligne.
 Une bonne façon de commencer serait de vous rendre dans la documentation de  Firestore .
 Enfin, passons à la section commentaires ci-dessous et discutons de votre expérience avec création d'une section de commentaires à l'aide de Firebase.
 (ra, yk, al, il)