1. Vue d'ensemble
Dans cet atelier de programmation, vous apprendrez à utiliser AngularFire pour créer des applications Web en implémentant et en déployant un client de chat à l'aide des produits et services Firebase.
Ce que vous apprendrez
- Créez une application Web à l'aide d'Angular et de Firebase.
- Synchronisez les données à l'aide de Cloud Firestore et Cloud Storage pour Firebase.
- Authentifiez vos utilisateurs à l'aide de Firebase Authentication.
- Déployez votre application Web sur Firebase Hosting.
- Envoyez des notifications avec Firebase Cloud Messaging.
- Collectez les données de performance de votre application Web.
Ce dont vous aurez besoin
- L'éditeur IDE/texte de votre choix, tel que WebStorm , Atom , Sublime ou VS Code
- Le gestionnaire de packages npm , qui est généralement fourni avec Node.js
- Un terminal/console
- Un navigateur de votre choix, tel que Chrome
- L'exemple de code du laboratoire de programmation (voir l'étape suivante du laboratoire de programmation pour savoir comment obtenir le code.)
2. Obtenez l'exemple de code
Clonez le dépôt GitHub de l'atelier de programmation à partir de la ligne de commande :
git clone https://github.com/firebase/codelab-friendlychat-web
Alternativement, si vous n'avez pas installé git, vous pouvez télécharger le référentiel sous forme de fichier ZIP .
Importer l'application de démarrage
À l'aide de votre IDE, ouvrez ou importez le répertoire 📁 angularfire-start
à partir du référentiel cloné. Ce répertoire 📁 angularfire-start
contient le code de démarrage du codelab, qui sera une application Web de chat entièrement fonctionnelle.
3. Créer et configurer un projet Firebase
Créer un projet Firebase
- Connectez-vous à Firebase .
- Dans la console Firebase, cliquez sur Ajouter un projet , puis nommez votre projet Firebase FriendlyChat . N'oubliez pas l'ID de projet pour votre projet Firebase.
- Décochez Activer Google Analytics pour ce projet
- Cliquez sur Créer un projet .
L'application que vous allez créer utilise des produits Firebase disponibles pour les applications Web :
- Firebase Authentication pour permettre à vos utilisateurs de se connecter facilement à votre application.
- Cloud Firestore pour enregistrer des données structurées sur le cloud et recevoir une notification instantanée lorsque les données changent.
- Cloud Storage pour Firebase pour enregistrer des fichiers dans le cloud.
- Firebase Hosting pour héberger et servir vos actifs.
- Firebase Cloud Messaging pour envoyer des notifications push et afficher les notifications contextuelles du navigateur.
- Firebase Performance Monitoring pour collecter des données sur les performances des utilisateurs pour votre application.
Certains de ces produits nécessitent une configuration spéciale ou doivent être activés à l'aide de la console Firebase.
Ajouter une application Web Firebase au projet
- Cliquez sur l'icône Internet
pour créer une nouvelle application Web Firebase.
- Enregistrez l'application avec le surnom Friendly Chat , puis cochez la case à côté de Configurer également l'hébergement Firebase pour cette application . Cliquez sur Enregistrer l'application .
- À l'étape suivante, vous verrez un objet de configuration. Copiez uniquement l'objet JS (pas le HTML environnant) dans firebase-config.js
Activer la connexion Google pour l'authentification Firebase
Pour permettre aux utilisateurs de se connecter à l'application Web avec leurs comptes Google, vous utiliserez la méthode de connexion Google .
Vous devez activer la connexion Google :
- Dans la console Firebase, recherchez la section Build dans le panneau de gauche.
- Cliquez sur Authentification , puis cliquez sur l'onglet Méthode de connexion (ou cliquez ici pour y accéder directement).
- Activez le fournisseur de connexion Google , puis cliquez sur Enregistrer .
- Définissez le nom public de votre application sur Conversation conviviale et choisissez un e-mail de support de projet dans le menu déroulant.
- Configurez votre écran de consentement OAuth dans Google Cloud Console et ajoutez un logo :
Activer Cloud Firestore
L'application Web utilise Cloud Firestore pour enregistrer les messages de chat et recevoir de nouveaux messages de chat.
Vous devrez activer Cloud Firestore :
- Dans la section Build de la console Firebase, cliquez sur Firestore Database .
- Cliquez sur Créer une base de données dans le volet Cloud Firestore.
- Sélectionnez l'option Démarrer en mode test , puis cliquez sur Suivant après avoir lu la clause de non-responsabilité concernant les règles de sécurité.
Le mode test garantit que vous pouvez écrire librement dans la base de données pendant le développement. Vous renforcerez la sécurité de notre base de données plus tard dans cet atelier de programmation.
- Définissez l'emplacement où vos données Cloud Firestore sont stockées. Vous pouvez laisser cela par défaut ou choisir une région proche de chez vous. Cliquez sur Terminé pour provisionner Firestore.
Activer le stockage en nuage
L'application Web utilise Cloud Storage pour Firebase pour stocker, télécharger et partager des images.
Vous devez activer Cloud Storage :
- Dans la section Build de la console Firebase, cliquez sur Stockage .
- S'il n'y a pas de bouton Démarrer , cela signifie que le stockage Cloud est déjà activé et que vous n'avez pas besoin de suivre les étapes ci-dessous.
- Cliquez sur Commencer .
- Lisez la clause de non-responsabilité concernant les règles de sécurité de votre projet Firebase, puis cliquez sur Suivant .
Avec les règles de sécurité par défaut, tout utilisateur authentifié peut écrire n'importe quoi dans Cloud Storage. Vous rendrez notre stockage plus sécurisé plus tard dans cet atelier de programmation.
- L'emplacement Cloud Storage est présélectionné avec la même région que vous avez choisie pour votre base de données Cloud Firestore. Cliquez sur Terminé pour terminer la configuration.
4. Installez l'interface de ligne de commande Firebase
L'interface de ligne de commande (CLI) Firebase vous permet d'utiliser Firebase Hosting pour servir votre application Web localement, ainsi que de déployer votre application Web sur votre projet Firebase.
- Installez la CLI en exécutant la commande npm suivante :
npm -g install firebase-tools
- Vérifiez que la CLI a été correctement installée en exécutant la commande suivante :
firebase --version
Assurez-vous que la version de la CLI Firebase est v4.1.0 ou ultérieure.
- Autorisez la CLI Firebase en exécutant la commande suivante :
firebase login
Vous avez configuré le modèle d'application Web pour extraire la configuration de votre application pour l'hébergement Firebase à partir du répertoire local de votre application (le référentiel que vous avez cloné précédemment dans l'atelier de programmation). Mais pour extraire la configuration, vous devez associer votre application à votre projet Firebase.
- Assurez-vous que votre ligne de commande accède au répertoire
angularfire-start
local de votre application. - Associez votre application à votre projet Firebase en exécutant la commande suivante :
firebase use --add
- Lorsque vous y êtes invité, sélectionnez votre ID de projet , puis attribuez un alias à votre projet Firebase.
Un alias est utile si vous avez plusieurs environnements (production, staging, etc.). Cependant, pour cet atelier de programmation, utilisons simplement l'alias de default
.
- Suivez les instructions restantes sur votre ligne de commande.
5. Installez AngularFire
Avant d'exécuter le projet, assurez-vous que la CLI angulaire et AngularFire sont configurés.
- Dans une console, exécutez la commande suivante :
npm install -g @angular/cli
- Ensuite, dans une console du répertoire
angularfire-start
, exécutez la commande CLI angulaire suivante :
ng add @angular/fire
Cela installera toutes les dépendances nécessaires à votre projet.
- Lorsque vous y êtes invité, sélectionnez les fonctionnalités qui ont été configurées dans la console Firebase (
ng deploy -- hosting
,Authentication
,Firestore
,Cloud Functions (callable)
,Cloud Messaging
,Cloud Storage
) et suivez les invites sur la console.
6. Exécutez l'application de démarrage localement
Maintenant que vous avez importé et configuré votre projet, vous êtes prêt à exécuter l'application Web pour la première fois.
- Dans une console du répertoire
angularfire-start
, exécutez la commande CLI Firebase suivante :
firebase emulators:start
- Votre ligne de commande doit afficher la réponse suivante :
✔ hosting: Local server: http://localhost:5000
Vous utilisez l'émulateur Firebase Hosting pour servir notre application localement. L'application Web devrait maintenant être disponible à partir de http://localhost:5000 . Tous les fichiers situés dans le sous-répertoire src
sont servis.
- À l'aide de votre navigateur, ouvrez votre application à l'adresse http://localhost:5000 .
Vous devriez voir l'interface utilisateur de votre application FriendlyChat, qui ne fonctionne pas (encore !) :
L'application ne peut rien faire pour le moment, mais avec votre aide, elle le fera bientôt ! Jusqu'à présent, vous n'avez défini l'interface utilisateur que pour vous.
Construisons maintenant un chat en temps réel !
7. Importer et configurer Firebase
Configurer Firebase
Vous devrez configurer le SDK Firebase pour lui indiquer quel projet Firebase vous utilisez.
- Accédez aux paramètres de votre projet dans la console Firebase
- Dans la carte "Vos applications", sélectionnez le pseudo de l'application pour laquelle vous avez besoin d'un objet de configuration.
- Sélectionnez "Config" dans le volet d'extraits du SDK Firebase.
Vous constaterez qu'un fichier d'environnement /angularfire-start/src/environments/environment.ts
a été généré pour vous.
- Copiez l'extrait d'objet de configuration, puis ajoutez-le à
angularfire-start/src/firebase-config.js
.
environnement.ts
export const environment = {
firebase: {
apiKey: "API_KEY",
authDomain: "PROJECT_ID.firebaseapp.com",
databaseURL: "https://PROJECT_ID.firebaseio.com",
projectId: "PROJECT_ID",
storageBucket: "PROJECT_ID.appspot.com",
messagingSenderId: "SENDER_ID",
appId: "APP_ID",
measurementId: "G-MEASUREMENT_ID",
},
};
Importer AngularFire
Vous constaterez que les fonctionnalités que vous avez sélectionnées dans la console ont été automatiquement routées dans le fichier /angularfire-start/src/app/app.module.ts
. Cela permet à votre application d'utiliser les fonctions et fonctionnalités de Firebase. Cependant, pour développer dans un environnement local, vous devez les connecter pour utiliser la suite Emulator.
- Dans
/angularfire-start/src/app/app.module.ts
, recherchez la sectionimports
et modifiez les fonctions fournies pour vous connecter à la suite Emulator dans des environnements hors production.
// ...
import { provideAuth,getAuth, connectAuthEmulator } from '@angular/fire/auth';
import { provideFirestore,getFirestore, connectFirestoreEmulator } from '@angular/fire/firestore';
import { provideFunctions,getFunctions, connectFunctionsEmulator } from '@angular/fire/functions';
import { provideMessaging,getMessaging } from '@angular/fire/messaging';
import { provideStorage,getStorage, connectStorageEmulator } from '@angular/fire/storage';
// ...
provideFirebaseApp(() => initializeApp(environment.firebase)),
provideAuth(() => {
const auth = getAuth();
if (location.hostname === 'localhost') {
connectAuthEmulator(auth, 'http://127.0.0.1:9099', { disableWarnings: true });
}
return auth;
}),
provideFirestore(() => {
const firestore = getFirestore();
if (location.hostname === 'localhost') {
connectFirestoreEmulator(firestore, '127.0.0.1', 8080);
}
return firestore;
}),
provideFunctions(() => {
const functions = getFunctions();
if (location.hostname === 'localhost') {
connectFunctionsEmulator(functions, '127.0.0.1', 5001);
}
return functions;
}),
provideStorage(() => {
const storage = getStorage();
if (location.hostname === 'localhost') {
connectStorageEmulator(storage, '127.0.0.1', 5001);
}
return storage;
}),
provideMessaging(() => {
return getMessaging();
}),
// ...
app.module.ts
Au cours de cet atelier de programmation, vous allez utiliser Firebase Authentication, Cloud Firestore, Cloud Storage, Cloud Messaging et Performance Monitoring. Vous importez donc toutes leurs bibliothèques. Dans vos futures applications, assurez-vous de n'importer que les parties de Firebase dont vous avez besoin, afin de raccourcir le temps de chargement de votre application.
8. Configurer la connexion de l'utilisateur
AngularFire devrait maintenant être prêt à l'emploi puisqu'il est importé et initialisé dans app.module.ts
. Vous allez maintenant mettre en œuvre la connexion des utilisateurs à l'aide de Firebase Authentication .
Authentifiez vos utilisateurs avec Google Sign-In
Dans l'application, lorsqu'un utilisateur clique sur le bouton Se connecter avec Google , la fonction login
est déclenchée. (Vous avez déjà configuré cela pour vous !) Pour cet atelier de programmation, vous souhaitez autoriser Firebase à utiliser Google en tant que fournisseur d'identité. Vous utiliserez une fenêtre contextuelle, mais plusieurs autres méthodes sont disponibles auprès de Firebase.
- Dans le répertoire
angularfire-start
, dans le sous-répertoire/src/app/services/
, ouvrezchat.service.ts
. - Trouvez la fonction
login
. - Remplacez la fonction entière par le code suivant.
chat.service.ts
// Signs-in Friendly Chat.
login() {
signInWithPopup(this.auth, this.provider).then((result) => {
const credential = GoogleAuthProvider.credentialFromResult(result);
this.router.navigate(['/', 'chat']);
return credential;
})
}
La fonction logout
est déclenchée lorsque l'utilisateur clique sur le bouton Déconnexion .
- Retournez au fichier
src/app/services/chat.service.ts
. - Trouvez la fonction
logout
. - Remplacez la fonction entière par le code suivant.
chat.service.ts
// Logout of Friendly Chat.
logout() {
signOut(this.auth).then(() => {
this.router.navigate(['/', 'login'])
console.log('signed out');
}).catch((error) => {
console.log('sign out error: ' + error);
})
}
Suivre l'état de l'authentification
Pour mettre à jour notre interface utilisateur en conséquence, vous avez besoin d'un moyen de vérifier si l'utilisateur est connecté ou déconnecté. Avec Firebase Authentication, vous pouvez récupérer un observable sur l'état de l'utilisateur qui sera déclenché à chaque changement d'état d'authentification.
- Retournez au fichier
src/app/services/chat.service.ts
. - Trouvez l'affectation de variable
user$
. - Remplacez l'intégralité de l'affectation par le code suivant.
chat.service.ts
// Observable user
user$ = user(this.auth);
Le code ci-dessus appelle l' user
de la fonction AngularFire qui renvoie un utilisateur observable. Il se déclenchera à chaque changement d'état d'authentification (lorsque l'utilisateur se connecte ou se déconnecte). C'est à ce stade que vous mettrez à jour l'interface utilisateur pour rediriger, afficher l'utilisateur dans la navigation d'en-tête, etc. Toutes ces parties de l'interface utilisateur ont déjà été implémentées.
Testez la connexion à l'application
- Si votre application est toujours diffusée, actualisez votre application dans le navigateur. Sinon, exécutez
firebase emulators:start
sur la ligne de commande pour commencer à servir l'application à partir de http://localhost:5000 , puis ouvrez-la dans votre navigateur. - Connectez-vous à l'application à l'aide du bouton de connexion et de votre compte Google. Si vous voyez un message d'erreur indiquant
auth/operation-not-allowed
, vérifiez que vous avez activé Google Sign-in en tant que fournisseur d'authentification dans la console Firebase. - Une fois connecté, votre photo de profil et votre nom d'utilisateur doivent s'afficher :
9. Écrivez des messages sur Cloud Firestore
Dans cette section, vous allez écrire des données dans Cloud Firestore afin de pouvoir remplir l'interface utilisateur de l'application. Cela peut être fait manuellement avec la console Firebase , mais vous le ferez dans l'application elle-même pour démontrer une écriture Cloud Firestore de base.
Modèle de données
Les données Cloud Firestore sont divisées en collections, documents, champs et sous-collections. Vous stockerez chaque message du chat en tant que document dans une collection de niveau supérieur appelée messages
.
Ajouter des messages à Cloud Firestore
Pour stocker les messages de discussion écrits par les utilisateurs, vous utiliserez Cloud Firestore .
Dans cette section, vous allez ajouter la fonctionnalité permettant aux utilisateurs d'écrire de nouveaux messages dans votre base de données. Un utilisateur cliquant sur le bouton ENVOYER déclenchera l'extrait de code ci-dessous. Il ajoute un objet de message avec le contenu des champs de message à votre instance Cloud Firestore dans la collection messages
. La méthode add()
ajoute un nouveau document avec un ID généré automatiquement à la collection.
- Retournez au fichier
src/app/services/chat.service.ts
. - Trouvez la fonction
addMessage
. - Remplacez la fonction entière par le code suivant.
chat.service.ts
// Adds a text or image message to Cloud Firestore.
addMessage = async(textMessage: string | null, imageUrl: string | null): Promise<void | DocumentReference<DocumentData>> => {
let data: any;
try {
this.user$.subscribe(async (user) =>
{
if(textMessage && textMessage.length > 0) {
data = await addDoc(collection(this.firestore, 'messages'), {
name: user?.displayName,
text: textMessage,
profilePicUrl: user?.photoURL,
timestamp: serverTimestamp(),
uid: user?.uid
})}
else if (imageUrl && imageUrl.length > 0) {
data = await addDoc(collection(this.firestore, 'messages'), {
name: user?.displayName,
imageUrl: imageUrl,
profilePicUrl: user?.photoURL,
timestamp: serverTimestamp(),
uid: user?.uid
});
}
return data;
}
);
}
catch(error) {
console.error('Error writing new message to Firebase Database', error);
return;
}
}
Tester l'envoi de messages
- Si votre application est toujours diffusée, actualisez votre application dans le navigateur. Sinon, exécutez
firebase emulators:start
sur la ligne de commande pour commencer à servir l'application à partir de http://localhost:5000 , puis ouvrez-la dans votre navigateur. - Après vous être connecté, saisissez un message tel que "Salut !", puis cliquez sur ENVOYER . Cela écrira le message dans Cloud Firestore. Cependant, vous ne verrez pas encore les données dans votre application Web réelle , car vous devez toujours implémenter la récupération des données (la section suivante du codelab).
- Vous pouvez voir le message nouvellement ajouté dans votre console Firebase. Ouvrez l'interface utilisateur de votre suite d'émulateur. Sous la section Build , cliquez sur Firestore Database (ou cliquez ici et vous devriez voir la collection de messages avec votre message nouvellement ajouté :
10. Lire les messages
Synchroniser les messages
Pour lire les messages dans l'application, vous devez ajouter un observable qui se déclenchera lorsque les données changent, puis créer un élément d'interface utilisateur qui affiche les nouveaux messages.
Vous allez ajouter du code qui écoute les nouveaux messages ajoutés à partir de l'application. Dans ce code, vous allez récupérer l'instantané de la collection messages
. Vous n'afficherez que les 12 derniers messages du chat pour éviter d'afficher un très long historique lors du chargement.
- Retournez au fichier
src/app/services/chat.service.ts
. - Trouvez la fonction
loadMessages
. - Remplacez la fonction entière par le code suivant.
chat.service.ts
// Loads chat message history and listens for upcoming ones.
loadMessages = () => {
// Create the query to load the last 12 messages and listen for new ones.
const recentMessagesQuery = query(collection(this.firestore, 'messages'), orderBy('timestamp', 'desc'), limit(12));
// Start listening to the query.
return collectionData(recentMessagesQuery);
}
Pour écouter les messages dans la base de données, vous créez une requête sur une collection en utilisant la fonction collection
pour spécifier dans quelle collection se trouvent les données que vous souhaitez écouter. Dans le code ci-dessus, vous écoutez les changements dans les messages
collection, qui est l'endroit où les messages de chat sont stockés. Vous appliquez également une limite en n'écoutant que les 12 derniers messages à l'aide limit(12)
et en triant les messages par date à l'aide de orderBy('timestamp', 'desc')
pour obtenir les 12 messages les plus récents.
La fonction collectionData
utilise des instantanés sous le capot. La fonction de rappel sera déclenchée en cas de modification des documents correspondant à la requête. Cela peut se produire si un message est supprimé, modifié ou ajouté. Vous pouvez en savoir plus à ce sujet dans la documentation de Cloud Firestore .
Tester la synchronisation des messages
- Si votre application est toujours diffusée, actualisez votre application dans le navigateur. Sinon, exécutez
firebase emulators:start
sur la ligne de commande pour commencer à servir l'application à partir de http://localhost:5000 , puis ouvrez-la dans votre navigateur. - Les messages que vous avez créés précédemment dans la base de données doivent être affichés dans l'interface utilisateur de FriendlyChat (voir ci-dessous). N'hésitez pas à écrire de nouveaux messages; ils devraient apparaître instantanément.
- (Facultatif) Vous pouvez essayer de supprimer, de modifier ou d'ajouter manuellement de nouveaux messages directement dans la section Firestore de la suite Emulator ; toute modification doit être reflétée dans l'interface utilisateur.
Toutes nos félicitations! Vous lisez des documents Cloud Firestore dans votre application !
11. Envoyer des images
Vous allez maintenant ajouter une fonctionnalité qui partage des images.
Alors que Cloud Firestore est bon pour stocker des données structurées, Cloud Storage est mieux adapté pour stocker des fichiers. Cloud Storage pour Firebase est un service de stockage de fichiers/blobs, et vous l'utiliserez pour stocker toutes les images qu'un utilisateur partage à l'aide de notre application.
Enregistrer des images dans Cloud Storage
Pour cet atelier de programmation, vous avez déjà ajouté un bouton qui déclenche une boîte de dialogue de sélection de fichiers. Après avoir sélectionné un fichier, la fonction saveImageMessage
est appelée et vous pouvez obtenir une référence au fichier sélectionné. La fonction saveImageMessage
accomplit ce qui suit :
- Crée un message de chat "espace réservé" dans le flux de chat, afin que les utilisateurs voient une animation "Chargement" pendant que vous téléchargez l'image.
- Importe le fichier image dans Cloud Storage vers ce chemin :
/<uid>/<file_name>
- Génère une URL publiquement lisible pour le fichier image.
- Met à jour le message de chat avec l'URL du fichier image nouvellement téléchargé au lieu de l'image de chargement temporaire.
Vous allez maintenant ajouter la fonctionnalité pour envoyer une image :
- Revenez au fichier
src/index.js
. - Trouvez la fonction
saveImageMessage
. - Remplacez la fonction entière par le code suivant.
index.js
// Saves a new message containing an image in Firebase.
// This first saves the image in Firebase storage.
saveImageMessage = async(file: any) => {
try {
// 1 - You add a message with a loading icon that will get updated with the shared image.
const messageRef = await this.addMessage(null, this.LOADING_IMAGE_URL);
// 2 - Upload the image to Cloud Storage.
const filePath = `${this.auth.currentUser?.uid}/${file.name}`;
const newImageRef = ref(this.storage, filePath);
const fileSnapshot = await uploadBytesResumable(newImageRef, file);
// 3 - Generate a public URL for the file.
const publicImageUrl = await getDownloadURL(newImageRef);
// 4 - Update the chat message placeholder with the image's URL.
messageRef ?
await updateDoc(messageRef,{
imageUrl: publicImageUrl,
storageUri: fileSnapshot.metadata.fullPath
}): null;
} catch (error) {
console.error('There was an error uploading a file to Cloud Storage:', error);
}
}
Tester l'envoi d'images
- Si votre application est toujours diffusée, actualisez votre application dans le navigateur. Sinon, exécutez
firebase emulators:start
sur la ligne de commande pour commencer à servir l'application à partir de http://localhost:5000 , puis ouvrez-la dans votre navigateur. - Après vous être connecté, cliquez sur le bouton de téléchargement d'image en bas à gauche
et sélectionnez un fichier image à l'aide du sélecteur de fichiers. Si vous cherchez une image, n'hésitez pas à utiliser cette jolie photo d'une tasse de café .
- Un nouveau message devrait apparaître dans l'interface utilisateur de l'application avec l'image sélectionnée :
Si vous essayez d'ajouter une image alors que vous n'êtes pas connecté, vous devriez voir une erreur vous indiquant que vous devez vous connecter pour ajouter des images.
12. Afficher les notifications
Vous allez maintenant ajouter la prise en charge des notifications du navigateur. L'application avertira les utilisateurs lorsque de nouveaux messages seront publiés dans le chat. Firebase Cloud Messaging (FCM) est une solution de messagerie multiplateforme qui vous permet d'envoyer des messages et des notifications de manière fiable et sans frais.
Ajouter le service worker FCM
L'application Web a besoin d'un agent de service qui recevra et affichera les notifications Web.
Le fournisseur de messagerie doit déjà avoir été configuré lors de l'ajout d'AngularFire, assurez-vous que le code suivant existe dans la section des importations de /angularfire-start/src/app/app.module.ts
provideMessaging(() => {
return getMessaging();
}),
app/app.module.ts
Le service worker doit simplement charger et initialiser le SDK Firebase Cloud Messaging, qui se chargera d'afficher les notifications.
Obtenir des jetons d'appareil FCM
Lorsque les notifications ont été activées sur un appareil ou un navigateur, vous recevez un jeton d'appareil . Ce jeton d'appareil est ce que vous utilisez pour envoyer une notification à un appareil particulier ou à un navigateur particulier.
Lorsque l'utilisateur se connecte, vous appelez la fonction saveMessagingDeviceToken
. C'est là que vous obtiendrez le jeton d'appareil FCM à partir du navigateur et que vous l'enregistrerez dans Cloud Firestore.
chat.service.ts
- Recherchez la fonction
saveMessagingDeviceToken
. - Remplacez la fonction entière par le code suivant.
chat.service.ts
// Saves the messaging device token to Cloud Firestore.
saveMessagingDeviceToken= async () => {
try {
const currentToken = await getToken(this.messaging);
if (currentToken) {
console.log('Got FCM device token:', currentToken);
// Saving the Device Token to Cloud Firestore.
const tokenRef = doc(this.firestore, 'fcmTokens', currentToken);
await setDoc(tokenRef, { uid: this.auth.currentUser?.uid });
// This will fire when a message is received while the app is in the foreground.
// When the app is in the background, firebase-messaging-sw.js will receive the message instead.
onMessage(this.messaging, (message) => {
console.log(
'New foreground notification from Firebase Messaging!',
message.notification
);
});
} else {
// Need to request permissions to show notifications.
this.requestNotificationsPermissions();
}
} catch(error) {
console.error('Unable to get messaging token.', error);
};
}
Cependant, ce code ne fonctionnera pas initialement. Pour que votre application puisse récupérer le jeton d'appareil, l'utilisateur doit accorder à votre application l'autorisation d'afficher des notifications (étape suivante de l'atelier de programmation).
Demander des autorisations pour afficher les notifications
Lorsque l'utilisateur n'a pas encore accordé à votre application l'autorisation d'afficher des notifications, vous ne recevrez pas de jeton d'appareil. Dans ce cas, vous appelez la méthode requestPermission()
, qui affichera une boîte de dialogue de navigateur demandant cette autorisation ( dans les navigateurs pris en charge ).
- Retournez au fichier
src/app/services/chat.service.ts
. - Trouvez la fonction
requestNotificationsPermissions
. - Remplacez la fonction entière par le code suivant.
chat.service.ts
// Requests permissions to show notifications.
requestNotificationsPermissions = async () => {
console.log('Requesting notifications permission...');
const permission = await Notification.requestPermission();
if (permission === 'granted') {
console.log('Notification permission granted.');
// Notification permission granted.
await this.saveMessagingDeviceToken();
} else {
console.log('Unable to get permission to notify.');
}
}
Obtenez votre jeton d'appareil
- Si votre application est toujours diffusée, actualisez votre application dans le navigateur. Sinon, exécutez
firebase emulators:start
sur la ligne de commande pour commencer à servir l'application à partir de http://localhost:5000 , puis ouvrez-la dans votre navigateur. - Une fois connecté, la boîte de dialogue d'autorisation des notifications devrait apparaître :
- Cliquez sur Autoriser .
- Ouvrez la console JavaScript de votre navigateur. Vous devriez voir le message suivant :
Got FCM device token: cWL6w:APA91bHP...4jDPL_A-wPP06GJp1OuekTaTZI5K2Tu
- Copiez le jeton de votre appareil. Vous en aurez besoin pour la prochaine étape de l'atelier de programmation.
Envoyer une notification à votre appareil
Maintenant que vous avez votre jeton d'appareil, vous pouvez envoyer une notification.
- Ouvrez l' onglet Cloud Messaging de la console Firebase .
- Cliquez sur "Nouvelle notification"
- Entrez un titre de notification et un texte de notification.
- Sur le côté droit de l'écran, cliquez sur "envoyer un message de test"
- Entrez le jeton d'appareil que vous avez copié depuis la console JavaScript de votre navigateur, puis cliquez sur le signe plus ("+")
- Cliquez sur "tester"
Si votre application est au premier plan, vous verrez la notification dans la console JavaScript.
Si votre application est en arrière-plan, une notification doit apparaître dans votre navigateur, comme dans cet exemple :
13. Règles de sécurité Cloud Firestore
Afficher les règles de sécurité de la base de données
Cloud Firestore utilise un langage de règles spécifique pour définir les droits d'accès, la sécurité et les validations de données.
Lors de la configuration du projet Firebase au début de cet atelier de programmation, vous avez choisi d'utiliser les règles de sécurité par défaut du "mode test" afin de ne pas restreindre l'accès au magasin de données. Dans la console Firebase , dans l'onglet Règles de la section Base de données , vous pouvez afficher et modifier ces règles.
À l'heure actuelle, vous devriez voir les règles par défaut, qui ne restreignent pas l'accès au magasin de données. Cela signifie que n'importe quel utilisateur peut lire et écrire dans n'importe quelle collection de votre magasin de données.
rules_version = '2';
service cloud.firestore {
match /databases/{database}/documents {
match /{document=**} {
allow read, write;
}
}
}
Vous allez mettre à jour les règles pour limiter les choses en utilisant les règles suivantes :
firestore.rules
rules_version = '2';
service cloud.firestore {
match /databases/{database}/documents {
// Messages:
// - Anyone can read.
// - Authenticated users can add and edit messages.
// - Validation: Check name is same as auth token and text length below 300 char or that imageUrl is a URL.
// - Deletes are not allowed.
match /messages/{messageId} {
allow read;
allow create, update: if request.auth != null
&& request.resource.data.name == request.auth.token.name
&& (request.resource.data.text is string
&& request.resource.data.text.size() <= 300
|| request.resource.data.imageUrl is string
&& request.resource.data.imageUrl.matches('https?://.*'));
allow delete: if false;
}
// FCM Tokens:
// - Anyone can write their token.
// - Reading list of tokens is not allowed.
match /fcmTokens/{token} {
allow read: if false;
allow write;
}
}
}
Les règles de sécurité doivent être mises à jour automatiquement dans votre suite d'émulateurs.
Afficher les règles de sécurité de Cloud Storage
Cloud Storage pour Firebase utilise un langage de règles spécifique pour définir les droits d'accès, la sécurité et les validations de données.
Lors de la configuration du projet Firebase au début de cet atelier de programmation, vous avez choisi d'utiliser la règle de sécurité Cloud Storage par défaut qui autorise uniquement les utilisateurs authentifiés à utiliser Cloud Storage. Dans la console Firebase , dans l'onglet Règles de la section Stockage , vous pouvez afficher et modifier les règles. Vous devriez voir la règle par défaut qui permet à tout utilisateur connecté de lire et d'écrire n'importe quel fichier dans votre compartiment de stockage.
rules_version = '2';
service firebase.storage {
match /b/{bucket}/o {
match /{allPaths=**} {
allow read, write: if request.auth != null;
}
}
}
Vous allez mettre à jour les règles pour effectuer les opérations suivantes :
- Autoriser chaque utilisateur à écrire uniquement dans ses propres dossiers spécifiques
- Autoriser tout le monde à lire à partir de Cloud Storage
- Assurez-vous que les fichiers téléchargés sont des images
- Restreindre la taille des images pouvant être téléchargées à 5 Mo maximum
Cela peut être mis en œuvre en utilisant les règles suivantes :
règles.de.stockage
rules_version = '2';
// Returns true if the uploaded file is an image and its size is below the given number of MB.
function isImageBelowMaxSize(maxSizeMB) {
return request.resource.size < maxSizeMB * 1024 * 1024
&& request.resource.contentType.matches('image/.*');
}
service firebase.storage {
match /b/{bucket}/o {
match /{userId}/{messageId}/{fileName} {
allow write: if request.auth != null && request.auth.uid == userId && isImageBelowMaxSize(5);
allow read;
}
}
}
14. Déployez votre application à l'aide de Firebase Hosting
Firebase propose un service d'hébergement pour servir vos actifs et vos applications Web. Vous pouvez déployer vos fichiers sur Firebase Hosting à l'aide de la CLI Firebase. Avant de déployer, vous devez spécifier dans votre fichier firebase.json
quels fichiers locaux doivent être déployés. Pour cet atelier de programmation, vous l'avez déjà fait pour vous, car cette étape était nécessaire pour servir nos fichiers pendant cet atelier de programmation. Les paramètres d'hébergement sont spécifiés sous l'attribut hosting
:
firebase.json
{
// If you went through the "Cloud Firestore Security Rules" step.
"firestore": {
"rules": "firestore.rules"
},
// If you went through the "Storage Security Rules" step.
"storage": {
"rules": "storage.rules"
},
"hosting": {
"public": "./public"
}
}
Ces paramètres indiquent à la CLI que vous souhaitez déployer tous les fichiers du répertoire ./public
( "public": "./public"
).
- Assurez-vous que votre ligne de commande accède au répertoire
angularfire-start
local de votre application. - Déployez vos fichiers dans votre projet Firebase en exécutant la commande suivante :
ng deploy
Sélectionnez ensuite l'option Firebase et suivez les invites de la ligne de commande.
- La console doit afficher les éléments suivants :
=== Deploying to 'friendlychat-1234'...
i deploying firestore, storage, hosting
i storage: checking storage.rules for compilation errors...
✔ storage: rules file storage.rules compiled successfully
i firestore: checking firestore.rules for compilation errors...
✔ firestore: rules file firestore.rules compiled successfully
i storage: uploading rules storage.rules...
i firestore: uploading rules firestore.rules...
i hosting[friendlychat-1234]: beginning deploy...
i hosting[friendlychat-1234]: found 8 files in ./public
✔ hosting[friendlychat-1234]: file upload complete
✔ storage: released rules storage.rules to firebase.storage/friendlychat-1234.appspot.com
✔ firestore: released rules firestore.rules to cloud.firestore
i hosting[friendlychat-1234]: finalizing version...
✔ hosting[friendlychat-1234]: version finalized
i hosting[friendlychat-1234]: releasing new version...
✔ hosting[friendlychat-1234]: release complete
✔ Deploy complete!
Project Console: https://console.firebase.google.com/project/friendlychat-1234/overview
Hosting URL: https://friendlychat-1234.firebaseapp.com
- Visitez votre application Web qui est désormais entièrement hébergée sur un CDN mondial à l'aide de Firebase Hosting sur deux de vos propres sous-domaines Firebase :
-
https://<firebase-projectId>.firebaseapp.com
-
https://<firebase-projectId>.web.app
Alternativement, vous pouvez exécuter firebase open hosting:site
dans la ligne de commande.
Consultez la documentation pour en savoir plus sur le fonctionnement de Firebase Hosting .
Accédez à la section Hébergement de la console Firebase de votre projet pour afficher des informations et des outils d'hébergement utiles, y compris l'historique de vos déploiements, la fonctionnalité permettant de revenir aux versions précédentes de votre application et le flux de travail pour configurer un domaine personnalisé.
15. Félicitations !
Vous avez utilisé Firebase pour créer une application Web de chat en temps réel !
Ce que vous avez couvert
- Authentification Firebase
- Cloud Firestore
- SDK Firebase pour Cloud Storage
- Messagerie cloud Firebase
- Surveillance des performances de Firebase
- Hébergement Firebase