Comment créer une application de chat avec React et Firebase ?

Vous êtes-vous déjà demandé comment fonctionne WhatsApp ? Ou comment différents utilisateurs se connectent et échangent des messages dans les chats ? La création d’une application de chat simplifiée peut être un excellent moyen d’appréhender les fonctionnalités de base des applications de chat.

La création d’une application de chat peut sembler être une tâche ardue, mais Firebase simplifie le processus. Il vous permet d’amorcer rapidement n’importe quelle application, en supprimant la nécessité d’un backend personnalisé ou d’une configuration de base de données.

Qu’est-ce que la base de données Firebase Cloud

Firebase est une plateforme de développement basée sur le cloud qui offre une gamme de services backend tels qu’une base de données en temps réel, l’authentification et l’hébergement. Au cœur de ses services de base de données, se trouve une base de données en nuage NoSQL qui utilise un modèle de document pour stocker des données en temps réel.

Configurer le projet Firebase et le client React

Pour commencer, rendez-vous sur Firebase et créez un compte. Sur le tableau de bord de l’utilisateur, cliquez sur Créer un projet pour créer un nouveau projet.

Après avoir créé votre projet, sélectionnez et cliquez sur l’icône de code sur la page de présentation du projet pour enregistrer votre application. L’enregistrement auprès de Firebase vous permet d’accéder à ses ressources et de les utiliser pour construire votre application web React.

Prenez note des instructions pour intégrer le SDK de Firebase à votre projet sous Ajouter le SDK de Firebase.

Ensuite, créez une application React et installez le SDK Firebase dans votre application. De plus, importez le fichier react-firebase-hooks paquet qui simplifie le travail avec Firebase dans React.

 npm install firebase react-firebase-hooks 

Configurer Firebase dans votre application React

Dans votre src créez un nouveau fichier et nommez-le, firebase-config.js. Copiez les variables d’environnement depuis le tableau de bord de votre projet firebase et collez-les dans ce fichier.

 import { initializeApp } from "firebase/app";
import { getFirestore } from '@firebase/firestore';
import { getAuth, GoogleAuthProvider } from "firebase/auth";

const firebaseConfig = {
  apiKey: "API_KEY",
  authDomain: "authDomain",
  projectId: "project ID",
  storageBucket: "storage Bucket",
  messagingSenderId: "messanging sender ID",
  appId: "App ID"
};
const app = initializeApp(firebaseConfig);
const db = getFirestore(app);
const auth = getAuth(app)
const provider = new GoogleAuthProvider();

export {db, auth, provider} 

En utilisant la configuration de votre projet Firebase, vous initialisez les fonctions d’authentification de Firebase, Firestore et Firebase pour les utiliser dans votre application.

Configuration d’une base de données Firestore

Cette base de données stockera les données des utilisateurs et les messages de chat. Allez sur la page d’aperçu de votre projet et cliquez sur Créer une base de données pour configurer votre Cloud Firestore.

Définissez le mode et l’emplacement de la base de données.

Enfin, mettez à jour les règles de la base de données Firestore pour autoriser les opérations de lecture et d’écriture depuis l’application React. Cliquez sur le bouton Règles et modifiez l’onglet lecture et écriture règle pour vrai.

Une fois la configuration de la base de données terminée, vous pouvez créer une collection de démonstration – il s’agit d’une base de données NoSQL dans Firestore. Les collections sont composées de documents en tant qu’enregistrements.

Pour créer une nouvelle collection, cliquez sur le bouton Démarrer la collection et fournissez un ID de collection – un nom de table.

Intégration de l’authentification des utilisateurs Firebase

Firebase fournit des solutions d’authentification et d’autorisation prêtes à l’emploi, faciles à mettre en œuvre, comme les fournisseurs de connexion sociale ou le fournisseur personnalisé d’email et de mot de passe.

Sur la page d’aperçu de votre projet, sélectionnez Authentification dans la liste des produits affichés. Ensuite, cliquez sur le bouton Configurer la méthode de connexion pour configurer le fournisseur Google. Sélectionnez Google dans la liste des fournisseurs, activez-le et indiquez l’adresse électronique de soutien du projet.

Créer un composant d’identification

Une fois que vous avez terminé de configurer le fournisseur sur Firebase, allez dans le dossier de votre projet et créez un nouveau dossier, composantsdans le /src répertoire. Dans le répertoire composants créez un nouveau fichier : SignIn.js.

Dans l’affaire SignIn.js ajoutez le code ci-dessous :

 import React from 'react';
import { signInWithPopup } from "firebase/auth";
import { auth, provider } from '../firebase-config'
 
function SignIn() {
    const signInWithGoogle = () => {
        signInWithPopup(auth,provider)
        };
    return (
        <div>
           <button onClick={signInWithGoogle}>Sign In With Google</button>
        </div>
    )
}

export default SignIn 

• Ce code importe les objets d’authentification et de fournisseur Google que vous avez initialisés dans le fichier de configuration de Firebase.
• Il définit ensuite un objet Connexion qui implémente la fonction signInWithPopup La méthode de Firebase qui prend en compte le authentification et fournisseur comme paramètres. Cette fonction va authentifier les utilisateurs avec leurs logins sociaux Google.
• Enfin, elle renvoie un div contenant un bouton qui, lorsqu’il est cliqué, appelle la fonction signInWithGoogle fonction.

Créer un composant de chat

Ce composant abritera la principale fonctionnalité de votre application de chat, la fenêtre de chat. Créez un nouveau fichier dans le répertoire composants et nommez-le Chat.js.

Ajoutez le code ci-dessous dans le fichier Chat.js Fichier :

 import React, { useState, useEffect } from 'react'
import { db, auth } from '../firebase-config'
import SendMessage from './SendMessage'
import { collection, query, limit, orderBy, onSnapshot } from "firebase/firestore";

function Chat() {
    const [messages, setMessages] = useState([])
    const { userID } = auth.currentUser
  

  useEffect(() => {
        const q = query(
          collection(db, "messages"),
          orderBy("createdAt"),
          limit(50)
        );
        const data = onSnapshot(q, (QuerySnapshot) => {
              let messages = [];
              QuerySnapshot.forEach((doc) => {
                messages.push({ ...doc.data(), id: doc.id });
              });
              setMessages(messages) 
          
        });
        return () => data; 
   
  }, []);
 
    return (
           <div>
             <button onClick={() => auth.signOut()}>Sign Out</button>
              {messages && messages.map((message, id, uid, photoURL) => 
                 <div 
               key={id} 
               className={`msg ${userID === auth.currentUser.uid ? 'sent' : 'received'}`}>
                  <img src={message.photoURL} />
                  <p>{message.text}</p>
               </div>
              )} 
           <SendMessage />
         </div>
    )
}
export default Chat 

• Ce code importe la base de données, les composants d’authentification initialisés dans le fichier firebase-config.js et des méthodes personnalisées Firestore qui permettent de manipuler facilement les données stockées.
• Il implémente la méthode collection, requête, limite, orderByet onSnapshot Méthodes Firestore permettant d’interroger et de capturer un instantané des données actuellement stockées dans la collection de messages Firestore, ordonnées selon l’heure de leur création, et ne lisant que les 50 messages les plus récents.
• Les méthodes Firestore sont enveloppées et exécutées à l’intérieur d’une méthode de type useEffect hook pour s’assurer que les messages sont rendus immédiatement, chaque fois que vous appuyez sur le bouton d’envoi, sans rafraîchir la fenêtre de la page. Une fois les données lues, elles sont stockées dans l’état des messages.
• Il vérifie ensuite pour différencier les messages envoyés des messages reçus – si l’ID de l’utilisateur stocké avec le message correspond à l’ID de l’utilisateur connecté, et ensuite, il définit le nom de la classe et applique le style approprié pour le message.
• Enfin, il effectue le rendu des messages, un signOut et le bouton SendMessage composant. Le site signOut bouton onClick appelle le gestionnaire auth.signOut() méthode fournie par Firebase.

Créer un composant d’envoi de message

Créer un nouveau fichier, SendMessage.js et ajoutez le code ci-dessous :

 import React, { useState } from 'react'
import { db, auth } from '../firebase-config'
import { collection, addDoc, serverTimestamp} from "firebase/firestore";

function SendMessage() {
    const [msg, setMsg] = useState('')
    const messagesRef = collection(db, "messages");
  
       const sendMsg = async (e) => {
        const { uid, photoURL } = auth.currentUser
        
        await addDoc(messagesRef, {
            text: msg,
            createdAt: serverTimestamp(),
            uid: uid,
            photoURL: photoURL
        })
        setMsg('');
      };

    return (
          <div> 
               <input placeholder='Message...' 
                 type="text" value={msg} 
                 onChange={(e) => setMsg(e.target.value)}
              />
              <button onClick={sendMsg}>Send</button>
        </div>
    )
}

export default SendMessage 

• Semblable à la Chat.js importez les méthodes Firestore et les composants initialisés de base de données et d’authentification.
• Pour envoyer des messages, le composant SendMessage met en œuvre la fonction addDoc Méthode Firestore qui crée un nouveau document dans la base de données et stocke les données transmises.
• Le site addDoc La méthode addDoc prend en compte deux paramètres, l’objet de données et un objet de référence qui indique la collection dans laquelle vous souhaitez stocker les données. La méthode Firestore collection spécifie la collection pour stocker les données.
• Enfin, il rend un champ de saisie et un bouton sur la page Web pour permettre aux utilisateurs de soumettre des messages à la base de données.

Importer les composants dans le fichier App.js

Enfin, dans votre fichier App.js importez le fichier SignIn et Chat pour les rendre sur votre navigateur.

Dans votre App.js supprimez le code passe-partout et ajoutez le code ci-dessous :

 import Chat from './components/Chat';
import SignIn from './components/SignIn';
import { auth } from './firebase-config.js'
import { useAuthState } from 'react-firebase-hooks/auth'
function App() {
  const [user] = useAuthState(auth)
  return (
    <>
      {user ? <Chat /> : <SignIn />}
    </>
  );
}
export default App;  

Ce code rend l’image SignIn et Chat en vérifiant l’état d’authentification d’un utilisateur. L’état d’authentification est déstructuré à partir du composant d’authentification Firebase à l’aide de l’élément useAuthState Le crochet du react-firebase-hooks paquet.

Il vérifie si un utilisateur est authentifié, et rend l’icône Chat composant sinon le Connexion est rendu. Enfin, ajoutez les styles CSS, redémarrez le serveur de développement pour enregistrer les modifications, puis ouvrez votre navigateur pour voir le résultat final.

Fonctionnalités sans serveur de Firebase

Firebase offre une gamme de fonctionnalités allant au-delà d’une base de données et d’une authentification en temps réel. Vous pouvez utiliser ses fonctionnalités sans serveur pour démarrer et faire évoluer rapidement toute application. En outre, Firebase s’intègre de manière transparente aux applications web et mobiles, ce qui facilite la création d’applications multiplateformes.