Vous êtes-vous déjà demandé comment WhatsApp ou toute autre application de messagerie fonctionne ? Ou comment différents utilisateurs peuvent communiquer et échanger des messages et des photos de manière transparente dans des conversations ? La création d'une application de chat simplifiée peut être un excellent moyen de comprendre les fonctionnalités de base des applications de chat.
Créer une application de chat peut sembler une tâche ardue, mais Firebase simplifie l'ensemble du processus. Il vous permet de démarrer rapidement n'importe quelle application, éliminant ainsi le besoin d'un backend dédié ou d'une configuration de base de données. Vérifier Meilleures applications de chat privé cryptées pour les utilisateurs de Linux.
Qu'est-ce que la base de données Firebase Cloud ?
Firebase est une plate-forme de développement basée sur le cloud qui fournit des services back-end (BaaS) tels qu'une base de données en temps réel, l'authentification et l'hébergement (SDK) qui est utilisé pour assurer la compatibilité avec différents systèmes.
Il s'agit d'une plate-forme qui vise à fournir une approche globale de la création, de l'amélioration et du développement de sites Web et d'applications mobiles, grâce à de nombreux outils dont tout développeur a besoin pour obtenir des services qui prendront beaucoup de temps et d'efforts à créer manuellement, en particulier pour ceux qui le font. pas suffisamment d'expérience.
Au cœur de ses services de base de données se trouve une base de données cloud NoSQL qui utilise un modèle de document pour stocker les données en temps réel.
Configuration du projet Firebase et client React
Note: Vous pouvez vérifier le code de l'application de chat disponible sur Référentiel GitHub Il est libre d'utiliser sous la licence MIT. Assurez-vous que Firebase est configuré avant d'exécuter l'application.
Pour commencer, dirigez-vous vers Firebase Et créez un compte. Dans le tableau de bord utilisateur, cliquez sur Établissement du projet Pour monter un nouveau projet.
Après avoir créé votre projet, sélectionnez une icône Développement web sur la page Aperçu du projet et cliquez sur pour enregistrer votre candidature. L'inscription à Firebase vous permet d'accéder à ses ressources et de les utiliser pour créer votre propre application Web React.
Notez les instructions d'intégration du SDK Firebase dans votre projet sous Module complémentaire du SDK Firebase.
Ensuite, créez votre application React et installez le SDK Firebase dans votre application. De plus, importez le package react-firebase-hooks, qui simplifie le travail avec Firebase dans React.
npm install firebase react-firebase-hooks
Configurez Firebase dans votre application React
Dans votre répertoire src personnalisé, créez un nouveau fichier et nommez-le, firebase-config.js. Copiez les variables d'environnement du tableau de bord du 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} Avec la configuration du projet Firebase, vous pouvez configurer les fonctions d'authentification Firebase, Firestore et Firebase à utiliser dans votre application.
Configuration de la base de données Firestore
Cloud Firestore est une base de données de développement mobile, Web et serveur flexible et évolutive de Firebase et Google Cloud. Comme Firebase Realtime Database, il synchronise vos données entre les applications clientes via des écouteurs en temps réel et offre une prise en charge hors ligne pour le téléphone et le Web afin que vous puissiez créer des applications réactives qui fonctionnent indépendamment de la latence du réseau ou de la connexion Internet. Cloud Firestore offre également une intégration transparente avec d'autres produits Firebase et Google Cloud, y compris la fonctionnalité cloud.
Cette base de données stockera les données des utilisateurs et les messages de chat. Rendez-vous sur la page de présentation de votre projet et cliquez sur le bouton Créer une base de données Pour configurer Cloud Firestore.
Déterminez le style et l'emplacement de la base de données.
Enfin, mettez à jour les règles de votre base de données Firestore pour autoriser les lectures et les écritures à partir de votre application React. Cliquez sur l'onglet Règles et modifiez la règle de lecture et d'écriture sur Vrai.
Une fois la base de données configurée, vous pouvez créer un cluster de test, qui est la base de données NoSQL dans Firestore. Les collections sont constituées de documents en tant qu'enregistrements.
Pour créer un nouveau groupe, cliquez sur le bouton départ de groupe , et fournissez l'ID de groupe — le nom de la table.
Intégration de l'authentification des utilisateurs Firebase
Firebase fournit des solutions d'authentification et d'autorisation prêtes à l'emploi, telles que des fournisseurs de connexion sociale ou un fournisseur de mot de passe de messagerie personnalisé.
Sur la page de présentation de votre projet, sélectionnez Authentification Liste des produits proposés. Après cela, cliquez sur le bouton Définition de la méthode de connexion Pour configurer le fournisseur Google. Localiser Google Dans la liste des fournisseurs, activez-le et remplissez l'e-mail de support du projet.
Créer le composant de connexion
Une fois que vous avez configuré le fournisseur sur Firebase, accédez à votre dossier de projet et créez un nouveau dossier, nommez-le avec composants électriques , dans le manuel / src. Dans le dossier des composants, créez un nouveau fichier : SignIn.js.
Dans le fichier 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 configurés dans le fichier de configuration Firebase.
- Ensuite, vous définissez la fonction de connexion que la méthode implémente ConnexionAvecPopup de Firebase qui prend les composants d'authentification et de fournisseur comme paramètres. Cette fonction authentifiera les utilisateurs avec leurs identifiants sociaux Google.
- Enfin, il renvoie un div contenant un bouton qui, lorsqu'il est cliqué, appelle une fonction ConnexionAvecGoogle.
Créer un bloc de chat
Ce composant hébergera la principale fonctionnalité de l'application de chat que vous créez, à savoir la fenêtre de chat. Créez un nouveau fichier dans le dossier des composants et nommez-le Chat.js.
Ajoutez le code ci-dessous dans le fichier Chat.js :
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 configurés dans le fichier firebase-config.js et les méthodes Firestore personnalisées qui facilitent la gestion des données stockées.
- Vous mettez en œuvre des méthodes collection و question et limite et commandé par , En plus de surSnapshot Depuis Firestore pour interroger et capturer les données actuellement stockées dans la collection de messages Firestore, triées par heure de création, et lire uniquement les 50 messages les plus récents.
- Les méthodes Firestore sont encapsulées et exécutées dans un Hook useEffet Pour vous assurer que les messages sont affichés 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 de message.
- Vous vérifiez ensuite la distinction entre les messages envoyés et reçus, si l'ID utilisateur stocké avec le message correspond à l'ID utilisateur de l'utilisateur connecté, puis vous définissez le nom de la classe et appliquez le style approprié au message.
- Enfin, il affiche Messages, un bouton de déconnexion et Configuré Envoyer le message. appels de bouton Se déconnecter avec un thérapeute onClick طريقة auth.signOut() fourni par Firebase.
Créer un composant d'envoi de message
Créez un nouveau fichier, le 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 - Comme pour le composant Chat.js, importez les méthodes Firestore, la base de données configurée et les composants d'authentification.
- Pour envoyer des messages, une fonction est exécutée Envoyer le message طريقة ajouterDoc Firestore qui crée un nouveau document dans la base de données et stocke les données transmises.
- prendre la méthode ajouterDoc Deux paramètres, un objet de données et un objet de référence qui indiquent quelle collection vous souhaitez stocker les données. La manière dont Firestore collecte définit le groupe pour stocker les données.
- Enfin, un champ de saisie et un bouton sont affichés sur la page Web pour permettre aux utilisateurs de soumettre des messages à la base de données.
Importer des composants dans un fichier App.js
Enfin, dans votre fichier App.js, importez les composants de connexion et de chat à afficher sur votre navigateur.
Dans le fichier App.js, supprimez le code standard 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 expose conditionnellement les composants de connexion et de chat en vérifiant l'état d'authentification de l'utilisateur. L'état d'authentification est détruit par le composant d'authentification Firebase à l'aide du hook useAuthState du package react-firebase-hooks.
Qui vérifie si l'utilisateur est authentifié et renvoie le composant de chat, sinon le composant de connexion est présenté. Enfin, ajoutez des styles CSS, lancez le serveur de développement pour enregistrer vos modifications et accédez à votre navigateur pour afficher les résultats finaux. Vérifier Comment créer un lecteur vidéo dans React.
Tâches sans serveur Firebase
Firebase offre une gamme de fonctionnalités au-delà de l'authentification et une base de données en temps réel. Vous pouvez utiliser sa fonctionnalité sans serveur pour lancer et faire évoluer rapidement n'importe quelle application. De plus, Firebase s'intègre de manière transparente aux applications Web et mobiles, ce qui facilite la création d'applications multiplateformes. Vous pouvez voir maintenant Comment créer des objets par glisser-déposer dans React.
