Atelier de programmation Web AngularFire

1. Présentation

Dans cet atelier de programmation, vous allez apprendre à utiliser AngularFire pour créer des applications Web en mettant en place et en déployant un client de chat à l'aide des produits et services Firebase.

Une application de chat dans laquelle les utilisateurs discutent de Firebase

Points abordés

  • Créez une application Web à l'aide d'Angular et de Firebase.
  • Synchroniser des données à l'aide de Cloud Firestore et de Cloud Storage for Firebase
  • Authentifiez vos utilisateurs à l'aide de Firebase Authentication.
  • Déployez votre application Web sur Firebase App Hosting.
  • Envoyer des notifications avec Firebase Cloud Messaging
  • Collectez les données de performances de votre application Web.

Prérequis

  • Un compte GitHub
  • La possibilité de passer votre projet Firebase au forfait Blaze
  • L'IDE/éditeur de texte de votre choix, tel que WebStorm, Sublime ou VS Code
  • Le gestionnaire de paquets npm, généralement fourni avec Node.js
  • Un terminal/une console
  • Un navigateur de votre choix, tel que Chrome
  • L'exemple de code de l'atelier de programmation (voir l'étape suivante de l'atelier de programmation pour savoir comment obtenir le code)

2. Obtenir l'exemple de code

Créer un dépôt GitHub

Le code source de l'atelier de programmation est disponible à l'adresse https://github.com/firebase/codelab-friendlychat-web. Le dépôt contient des exemples de projets adaptés à différentes plates-formes. Cependant, cet atelier de programmation n'utilise que le répertoire angularfire-start.

Copiez le dossier angularfire-start dans votre propre dépôt:

  1. À l'aide d'un terminal, créez un dossier sur votre ordinateur et accédez au nouveau répertoire:
    mkdir codelab-friendlyeats-web

cd codelab-friendlyeats-web
  2. Utilisez le package npm giget pour ne récupérer que le dossier angularfire-start:
    npx giget@latest gh:firebase/codelab-friendlychat-web/angularfire-start#master . --install
  3. Suivez les modifications localement avec git:
    git init

git add .

git commit -m "codelab starting point"

git branch -M main
  4. Créez un dépôt GitHub: https://github.com/new. Vous pouvez lui donner le nom que vous souhaitez.
    1. GitHub vous fournira une nouvelle URL de dépôt qui ressemble à https://github.com/[user-name]/[repository-name].git ou git@github.com:[user-name]/[repository-name].git. Copiez cette URL.
  5. Transférez les modifications locales vers votre nouveau dépôt GitHub. Exécutez la commande suivante en remplaçant l'espace réservé your-repository-url par l'URL de votre dépôt.
    git remote add origin your-repository-url

git push -u origin main
  6. Le code de démarrage devrait maintenant s'afficher dans votre dépôt GitHub.

3. Créer et configurer un projet Firebase

Créer un projet Firebase

  1. Connectez-vous à la console Firebase.
  2. Dans la console Firebase, cliquez sur Ajouter un projet, puis nommez votre projet Firebase FriendlyChat. Prenez note de l'ID de votre projet Firebase.
  3. Décochez Activer Google Analytics pour ce projet.
  4. 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 sauvegarder des données structurées sur le cloud et être notifié instantanément en cas de modification des données.
  • Cloud Storage for Firebase, pour sauvegarder des fichiers dans le cloud.
  • Firebase App Hosting pour créer, héberger et diffuser l'application.
  • Firebase Cloud Messaging, pour envoyer des notifications push et afficher les notifications pop-up du navigateur.
  • Firebase Performance Monitoring pour collecter les données sur les performances des utilisateurs de votre application.

Certains de ces produits nécessitent une configuration particulière ou doivent être activés via la console Firebase.

Passer à un forfait Firebase supérieur

Pour utiliser Firebase App Hosting et Cloud Storage for Firebase, votre projet Firebase doit être associé au forfait Blaze avec paiement à l'usage, ce qui signifie qu'il est associé à un compte de facturation Cloud.

  • Un compte de facturation Cloud nécessite un mode de paiement, comme une carte de crédit.
  • Si vous débutez avec Firebase et Google Cloud, vérifiez si vous êtes éligible à un crédit de 300$et à un compte de facturation Cloud en essai sans frais.
  • Si vous suivez cet atelier de programmation dans le cadre d'un événement, demandez à l'organisateur s'il existe des crédits Cloud disponibles.

Pour passer à la formule Blaze, procédez comme suit:

  1. Dans la console Firebase, sélectionnez Mettre à niveau votre forfait.
  2. Sélectionnez le forfait Blaze. Suivez les instructions à l'écran pour associer un compte de facturation Cloud à votre projet.
    Si vous avez dû créer un compte de facturation Cloud dans le cadre de cette migration, vous devrez peut-être revenir au flux de migration dans la console Firebase pour la finaliser.

Ajouter une application Web Firebase au projet

  1. Cliquez sur l'icône Web 58d6543a156e56f9.png pour créer une application Web Firebase.
  2. Enregistrez l'application sous le nom Friendly Chat. Ne cochez pas la case Configurer également Firebase Hosting pour cette application. Cliquez sur Enregistrer l'application.
  3. À l'étape suivante, un objet de configuration s'affiche. Vous n'en avez pas besoin pour le moment. Cliquez sur Accéder à la console.

Capture d'écran de l'application Web d'enregistrement

Configurer l'authentification

Pour permettre aux utilisateurs de se connecter à l'application Web avec leur compte Google, vous allez utiliser la méthode de connexion Google.

  1. Dans la console Firebase, accédez à Authentification.
  2. Cliquez sur Commencer.
  3. Dans la colonne Fournisseurs supplémentaires, cliquez sur Google > Activer.
  4. Dans la zone de texte Nom public du projet, saisissez un nom facile à retenir, par exemple My Next.js app.
  5. Dans la liste déroulante Adresse e-mail d'assistance pour le projet, sélectionnez votre adresse e-mail.
  6. Cliquez sur Enregistrer.

Configurer Cloud Firestore

L'application Web utilise Cloud Firestore pour enregistrer des messages de chat et en recevoir.

Voici comment configurer Cloud Firestore dans votre projet Firebase:

  1. Dans le panneau de gauche de la console Firebase, développez Build (Compilation), puis sélectionnez Firestore database (Base de données Firestore).
  2. Cliquez sur Créer une base de données.
  3. Laissez le champ Database ID (ID de la base de données) défini sur (default).
  4. Sélectionnez un emplacement pour votre base de données, puis cliquez sur Suivant.
    Pour une application réelle, choisissez un emplacement proche de vos utilisateurs.
  5. Cliquez sur Démarrer en mode test. Lisez la clause de non-responsabilité concernant les règles de sécurité.
    Plus tard dans cet atelier de programmation, vous ajouterez des règles de sécurité pour sécuriser vos données. Ne distribuez pas ni n'exposez pas publiquement une application sans ajouter de règles de sécurité à votre base de données.
  6. Cliquez sur Créer.

Configurer Cloud Storage for Firebase

L'application Web utilise Cloud Storage for Firebase pour stocker, importer et partager des photos.

Voici comment configurer Cloud Storage for Firebase dans votre projet Firebase:

  1. Dans le panneau de gauche de la console Firebase, développez Build (Compilation), puis sélectionnez Storage (Stockage).
  2. Cliquez sur Commencer.
  3. Sélectionnez un emplacement pour votre bucket Storage par défaut.
    Les buckets dans US-WEST1, US-CENTRAL1 et US-EAST1 peuvent profiter du niveau "Toujours sans frais" pour Google Cloud Storage. Les buckets situés dans toutes les autres zones géographiques sont soumis aux tarifs et à l'utilisation de Google Cloud Storage.
  4. Cliquez sur Démarrer en mode test. Lisez la clause de non-responsabilité concernant les règles de sécurité.
    Plus tard dans cet atelier de programmation, vous ajouterez des règles de sécurité pour sécuriser vos données. Ne distribuez pas ni n'exposez pas publiquement une application sans ajouter de règles de sécurité à votre bucket Storage.
  5. Cliquez sur Créer.

4. Installer l'interface de ligne de commande Firebase

L'interface de ligne de commande (CLI) Firebase vous permet d'utiliser Firebase Hosting pour diffuser votre application Web en local, ainsi que de la déployer dans votre projet Firebase.

  1. Installez la CLI en exécutant la commande npm suivante:
npm -g install firebase-tools@latest
  1. Exécutez la commande suivante pour vérifier que la CLI a été installée correctement:
firebase --version

Assurez-vous que la version de la CLI Firebase est la version 13.9.0 ou ultérieure.

  1. 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 Firebase Hosting à partir du répertoire local de votre application (le dépôt que vous avez cloné précédemment dans l'atelier de programmation). Toutefois, pour extraire la configuration, vous devez associer votre application à votre projet Firebase.

  1. Assurez-vous que votre ligne de commande accède au répertoire angularfire-start local de votre application.
  2. Pour associer votre application à votre projet Firebase, exécutez la commande suivante:
firebase use --add
  1. Lorsque vous y êtes invité, sélectionnez votre ID de projet, puis attribuez un alias à votre projet Firebase.

Un alias est utile si vous disposez de plusieurs environnements (production, préproduction, etc.). Cependant, pour cet atelier de programmation, utilisons simplement l'alias default.

  1. Suivez le reste des instructions dans votre ligne de commande.

5. Installer AngularFire

Avant d'exécuter le projet, assurez-vous d'avoir configuré la CLI Angular et AngularFire.

  1. Dans une console, exécutez la commande suivante:
npm install -g @angular/cli
  1. Ensuite, dans une console à partir du répertoire angularfire-start, exécutez la commande CLI Angular suivante:
ng add @angular/fire

Toutes les dépendances nécessaires à votre projet seront installées.

  1. Lorsque vous y êtes invité, décochez ng deploy -- hosting à l'aide de la barre d'espace. Sélectionnez les fonctionnalités suivantes à l'aide des touches fléchées et de la barre d'espace:
    • Authentication
    • Firestore
    • Cloud Messaging
    • Cloud Storage
  2. Appuyez sur enter, puis suivez les instructions restantes.
  3. Créez un commit avec le message "Install AngularFire" (Installer AngularFire) et transférez-le vers votre dépôt GitHub.

6. Créer un backend App Hosting

Dans cette section, vous allez configurer un backend App Hosting pour surveiller une branche de votre dépôt Git.

À la fin de cette section, vous disposerez d'un backend App Hosting connecté à votre dépôt GitHub. Il recompilera et déploiera automatiquement une nouvelle version de votre application chaque fois que vous enverrez un nouveau commit dans votre branche main.

  1. Accédez à la page Hébergement d'applications dans la console Firebase:

État initial de la console App Hosting, avec un bouton "Commencer"

  1. Cliquez sur "Commencer" pour lancer le flux de création du backend. Configurez votre backend comme suit:
  2. Suivez les instructions de la première étape pour connecter le dépôt GitHub que vous avez créé précédemment.
  3. Définissez les paramètres de déploiement:
    1. Conserver le répertoire racine en tant que /
    2. Définissez la branche en direct sur main.
    3. Activer les déploiements automatiques
  4. Nommez votre backend friendlychat-codelab.
  5. Dans "Créer ou associer une application Web Firebase", sélectionnez l'application Web que vous avez configurée précédemment dans le menu déroulant "Sélectionner une application Web Firebase existante".
  6. Cliquez sur "Terminer et déployer". Après un moment, vous serez redirigé vers une nouvelle page où vous pourrez consulter l'état de votre nouveau backend d'hébergement d'applications.
  7. Une fois le déploiement terminé, cliquez sur votre domaine sans frais sous "domaines". La propagation du DNS peut prendre quelques minutes.

Vous avez déployé l'application Web initiale. Chaque fois que vous envoyez un nouveau commit vers la branche main de votre dépôt GitHub, une nouvelle compilation et un nouveau déploiement commencent dans la console Firebase. Votre site est automatiquement mis à jour une fois le déploiement terminé.

État initial de la console App Hosting, avec un bouton "Commencer"

Vous devriez voir l'écran de connexion de votre application FriendlyChat, qui ne fonctionne pas (pas encore !).

L'application ne peut rien faire pour le moment, mais avec votre aide, elle le pourra bientôt.

Créons maintenant une application de chat en temps réel.

7. Importer et configurer Firebase

Configurer Firebase

Vous devez configurer le SDK Firebase pour lui indiquer le projet Firebase que vous utilisez.

  1. Accédez aux paramètres de votre projet dans la console Firebase.
  2. Dans la fiche "Vos applications", sélectionnez le surnom de l'application pour laquelle vous avez besoin d'un objet de configuration.
  3. Sélectionnez "Config" (Configuration) dans le volet de l'extrait du SDK Firebase.

Vous constaterez qu'un fichier d'environnement /angularfire-start/src/environments/environment.ts a été généré pour vous.

  1. Copiez l'extrait d'objet de configuration, puis ajoutez-le à angularfire-start/src/firebase-config.js.

environment.ts

export const environment = {
  firebase: {
    apiKey: "API_KEY",
    authDomain: "PROJECT_ID.firebaseapp.com",
    projectId: "PROJECT_ID",
    storageBucket: "PROJECT_ID.firebasestorage.app",
    messagingSenderId: "SENDER_ID",
    appId: "APP_ID",
  },
};

Afficher la configuration d'AngularFire

Vous constaterez que les fonctionnalités que vous avez sélectionnées dans la console ont été automatiquement ajoutées au fichier /angularfire-start/src/app/app.config.ts. Votre application pourra ainsi utiliser les fonctionnalités de Firebase.

8. Configurer la connexion des utilisateurs

AngularFire devrait maintenant être prêt à l'emploi, car il est importé et initialisé dans app.config.ts. Vous allez maintenant implémenter la connexion des utilisateurs à l'aide de Firebase Authentication.

Ajouter un domaine autorisé

Firebase Authentication n'autorise que les connexions à partir d'une liste définie de domaines que vous contrôlez. Ajoutez votre domaine d'hébergement d'applications sans frais à la liste des domaines:

  1. Accédez à Hébergement d'applications.
  2. Copiez le domaine de votre backend.
  3. Accédez à Authentication settings (Paramètres d'authentification).
  4. Sélectionnez l'onglet Domaines autorisés.
  5. Cliquez sur Ajouter un domaine, puis collez le domaine de votre backend App Hosting.

Authentifier 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. Pour cet atelier de programmation, vous souhaitez autoriser Firebase à utiliser Google comme fournisseur d'identité. Vous utiliserez une fenêtre pop-up, mais plusieurs autres méthodes sont disponibles dans Firebase.

  1. Dans le sous-répertoire /src/app/services/, ouvrez chat.service.ts.
  2. Recherchez la fonction login.
  3. Remplacez toute la fonction 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 Log out (Se déconnecter).

  1. Revenez au fichier src/app/services/chat.service.ts.
  2. Recherchez la fonction logout.
  3. Remplacez toute la fonction 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 l'UI en conséquence, vous devez pouvoir vérifier si l'utilisateur est connecté ou déconnecté. AngularFire fournit une fonction permettant d'obtenir un observable qui est mis à jour chaque fois que l'état d'authentification change. Cette fonctionnalité a déjà été implémentée, mais il est intéressant de la consulter.

  1. Revenez au fichier src/app/services/chat.service.ts.
  2. Recherchez l'attribution de variable user$.

chat.service.ts

// observable that is updated when the auth state changes
user$ = user(this.auth);

Le code ci-dessus appelle la fonction AngularFire user, qui renvoie un utilisateur observable. Elle se déclenche chaque fois que l'état d'authentification change (lorsque l'utilisateur se connecte ou se déconnecte). Les composants des modèles Angular dans FriendlyChat utilisent cet observable pour mettre à jour l'UI afin de rediriger l'utilisateur, de l'afficher dans la barre de navigation de l'en-tête, etc.

Tester la connexion à l'application

  1. Créez un commit avec le message "Ajout de l'authentification Google" et transférez-le vers votre dépôt GitHub.
  2. Ouvrez la page Hébergement d'applications dans la console Firebase, puis attendez que le déploiement soit terminé.
  3. Dans l'application Web, actualisez la page, puis connectez-vous à l'application à l'aide du bouton de connexion et de votre compte Google. Si le message d'erreur auth/operation-not-allowed s'affiche, vérifiez que vous avez activé la connexion Google en tant que fournisseur d'authentification dans la console Firebase.
  4. Une fois connecté, votre photo de profil et votre nom d'utilisateur doivent s'afficher: angularfire-3.png

9. Écrire des messages dans Cloud Firestore

Dans cette section, vous allez écrire des données dans Cloud Firestore afin de renseigner l'UI de l'application. Vous pouvez effectuer cette opération manuellement à l'aide de la console Firebase, mais vous le ferez dans l'application elle-même pour voir comment se déroule un processus basique d'écriture Cloud Firestore.

Modèle de données

Les données Cloud Firestore sont divisées en collections, documents, champs et sous-collections. Vous allez stocker chaque message de la discussion en tant que document dans une collection de premier niveau appelée messages.

688d7bc5fb662b57.png

Ajouter des messages à Cloud Firestore

Pour stocker les messages de chat écrits par les utilisateurs, vous utiliserez Cloud Firestore.

Dans cette section, vous allez ajouter la fonctionnalité permettant aux utilisateurs d'écrire des messages dans votre base de données. Un utilisateur cliquant sur le bouton SEND (ENVOYER) déclenchera l'extrait de code ci-dessous. Il ajoute un objet message avec le contenu des champs de message à votre instance Cloud Firestore, dans la collection messages. La méthode add() ajoute à la collection un nouveau document avec un ID généré automatiquement.

  1. Revenez au fichier src/app/services/chat.service.ts.
  2. Recherchez la fonction addMessage.
  3. Remplacez toute la fonction 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>> => {
  // ignore empty messages
  if (!textMessage && !imageUrl) {
    console.log(
      "addMessage was called without a message",
      textMessage,
      imageUrl,
    );
    return;
  }

  if (this.currentUser === null) {
    console.log("addMessage requires a signed-in user");
    return;
  }

  const message: ChatMessage = {
    name: this.currentUser.displayName,
    profilePicUrl: this.currentUser.photoURL,
    timestamp: serverTimestamp(),
    uid: this.currentUser?.uid,
  };

  textMessage && (message.text = textMessage);
  imageUrl && (message.imageUrl = imageUrl);

  try {
    const newMessageRef = await addDoc(
      collection(this.firestore, "messages"),
      message,
    );
    return newMessageRef;
  } catch (error) {
    console.error("Error writing new message to Firebase Database", error);
    return;
  }
};

Tester l'envoi de messages

  1. Créez un commit avec le message "Publier de nouveaux chats dans Firestore", puis transférez-le vers votre dépôt GitHub.
  2. Ouvrez la page Hébergement d'applications dans la console Firebase, puis attendez que le déploiement soit terminé.
  3. Actualisez FriendlyChat. Après vous être connecté, saisissez un message tel que "Bonjour", puis cliquez sur SEND (ENVOYER). Le message sera écrit dans Cloud Firestore. Toutefois, les données ne s'afficheront pas dans votre application Web actuelle, car vous devez toujours mettre en œuvre la récupération des données (la section suivante de l'atelier de programmation y est consacrée).
  4. Vous pouvez voir le nouveau message dans votre console Firebase. Ouvrez l'interface utilisateur de la suite d'émulateurs. Dans la section Build (Compilation), cliquez sur Firestore Database (Base de données Firestore) (ou cliquez ici). Vous devriez voir la collection messages avec votre nouveau message:

6812efe7da395692.png

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 changeront, puis créer un élément d'UI qui affichera les nouveaux messages.

Vous allez ajouter du code qui écoute les nouveaux messages ajoutés par l'application. Dans ce code, vous allez récupérer l'instantané de la collection messages. Vous n'afficherez que les 12 derniers messages de la discussion pour éviter d'afficher un historique très long lors du chargement.

  1. Revenez au fichier src/app/services/chat.service.ts.
  2. Recherchez la fonction loadMessages.
  3. Remplacez toute la fonction 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, 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 voulez écouter. Dans le code ci-dessus, vous écoutez les modifications apportées à la collection messages, où sont stockés les messages du chat. Vous appliquez également une limite en n'écoutant que les 12 derniers messages à l'aide de limit(12) et en classant 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 en arrière-plan. La fonction de rappel est déclenchée en cas de modification des documents correspondant à la requête. Cela peut être le cas si un message est supprimé, modifié ou ajouté. Pour en savoir plus, consultez la documentation Cloud Firestore.

Tester la synchronisation des messages

  1. Créez un commit avec le message "Afficher les nouveaux chats dans l'UI", puis transférez-le vers votre dépôt GitHub.
  2. Ouvrez la page Hébergement d'applications dans la console Firebase, puis attendez que le déploiement soit terminé.
  3. Actualisez FriendlyChat. Les messages que vous avez créés précédemment dans la base de données devraient s'afficher dans l'UI de FriendlyChat (voir ci-dessous). N'hésitez pas à écrire de nouveaux messages. Ils devraient apparaître instantanément.
  4. (Facultatif) Vous pouvez essayer de supprimer, de modifier ou d'ajouter manuellement de nouveaux messages directement dans la section Firestore de la suite d'émulateurs. Les modifications devraient apparaître dans l'UI.

Félicitations ! Vous lisez des documents Cloud Firestore dans votre application.

angularfire-2.png

11. Ajouter des fonctionnalités d'IA

Vous utiliserez l'IA de Google pour ajouter des fonctionnalités d'assistance utiles à l'application de chat.

Obtenir une clé API Google AI

  1. Accédez à Google AI Studio, puis cliquez sur Créer une clé API.
  2. Sélectionnez le projet Firebase que vous avez créé pour cet atelier de programmation. L'invite s'applique à un projet Google Cloud, mais chaque projet Firebase est un projet Google Cloud.
  3. Cliquez sur Créer une clé API dans un projet existant.
  4. Copiez la clé API générée.

Installer une extension

Cette extension déploie une fonction Cloud déclenchée chaque fois qu'un nouveau document est ajouté à la collection messages dans Firestore. La fonction appelle Gemini et réécrit sa réponse dans le champ response du document.

  1. Cliquez sur Installer dans la console Firebase sur la page de l'extension Build Chatbot with the Gemini API (Créer un chatbot avec l'API Gemini).
  2. Suivez les invites. Une fois que vous êtes arrivé à l'étape Configurer l'extension, définissez les valeurs de paramètre suivantes:
    • Fournisseur de l'API Gemini: Google AI
    • Clé API Google AI: collez la clé que vous avez créée précédemment, puis cliquez sur Créer un secret.
    • Chemin d'accès à la collection Firestore: messages
    • Champ de requête: text
    • Champ de réponse: response
    • Champ d'ordre: timestamp
    • Contexte: Keep your answers short, informal, and helpful. Use emojis when possible.
  3. Cliquez sur Installer l'extension.
  4. Attendez que l'extension soit installée.

Tester la fonctionnalité d'IA

FriendlyChat dispose déjà d'un code permettant de lire les réponses de l'extension d'IA. Il vous suffit d'envoyer un nouveau message pour le tester.

  1. Ouvrez FriendlyChat et envoyez un message.
  2. Après quelques instants, une réponse devrait s'afficher à côté de votre message. Une note ✨ ai generated s'affiche à la fin pour indiquer clairement qu'elle a été créée à l'aide de l'IA générative, et non par un véritable utilisateur.

12. Envoyer des images

Vous allez maintenant ajouter une fonctionnalité qui permet de partager des images.

Bien que Cloud Firestore soit efficace pour stocker des données structurées, Cloud Storage est plus adapté au stockage de fichiers. Cloud Storage for Firebase est un service de stockage de fichiers/blobs. Vous l'utiliserez pour stocker toutes les images qu'un utilisateur partage à l'aide de notre application.

Enregistrer les images dans Cloud Storage

Pour cet atelier de programmation, un bouton qui déclenche une boîte de dialogue de sélecteur de fichier a déjà été ajouté. Une fois un fichier sélectionné, la fonction saveImageMessage est appelée, et vous pouvez obtenir une référence au fichier sélectionné. La fonction saveImageMessage effectue les opérations suivantes:

  1. crée un message de chat "placeholder" (espace réservé) dans le flux de chat, de sorte que les utilisateurs voient une animation "Loading" (Chargement) pendant que vous importez l'image ;
  2. Importe le fichier image dans Cloud Storage, dans ce chemin d'accès: /<uid>/<file_name>
  3. génère une URL lisible par le public pour le fichier image ;
  4. met à jour le message de chat avec l'URL du fichier image importé au lieu de l'image de chargement temporaire.

Vous allez maintenant ajouter la fonctionnalité permettant d'envoyer une image:

  1. Revenez au fichier src/chat.service.ts.
  2. Recherchez la fonction saveImageMessage.
  3. Remplacez toute la fonction par le code suivant :

chat.service.ts

// Saves a new message containing an image in Firestore.
// This first saves the image in Firebase storage.
saveImageMessage = async(file: any) => {
  try {
    // 1 - 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

  1. Créez un commit avec le message "Ajouter la possibilité de publier des images" et transférez-le vers votre dépôt GitHub.
  2. Ouvrez la page Hébergement d'applications dans la console Firebase, puis attendez que le déploiement soit terminé.
  3. Actualisez FriendlyChat. Après vous être connecté, cliquez sur le bouton d'importation d'image en bas à gauche angularfire-4.png, puis sélectionnez un fichier image à l'aide du sélecteur de fichier. Si vous cherchez une image, n'hésitez pas à utiliser cette jolie photo d'une tasse de café.
  4. Un nouveau message devrait apparaître dans l'UI de l'application, avec l'image que vous avez sélectionnée: angularfire-2.png

Si vous essayez d'ajouter une image alors que vous n'êtes pas connecté, un message d'erreur vous indique que vous devez vous connecter pour ajouter des images.

13. Afficher les notifications

Vous allez maintenant ajouter la prise en charge des notifications du navigateur. L'application envoie une notification aux utilisateurs lorsqu'un nouveau message est publié dans le chat. Firebase Cloud Messaging (FCM) est une solution de messagerie multi-plateforme qui vous permet de transmettre des messages et des notifications de manière fiable et gratuite.

Ajouter le service worker FCM

L'application Web a besoin d'un service worker qui reçoit et affiche les notifications Web.

Le fournisseur de messagerie doit déjà avoir été configuré lorsque AngularFire a été ajouté. Assurez-vous que le code suivant existe dans la section "Importations" de /angularfire-start/src/app/app.config.ts.

provideMessaging(() => {
    return getMessaging();
}),

app/app.config.ts

Le service worker doit simplement charger et initialiser le SDK Firebase Cloud Messaging, qui se chargera d'afficher les notifications.

Obtenir les jetons d'appareil FCM

Lorsque les notifications ont été activées sur un appareil ou un navigateur, un jeton d'appareil vous est attribué. Ce jeton d'appareil vous permet d'envoyer une notification à un appareil ou à un navigateur spécifique.

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

  1. Recherchez la fonction saveMessagingDeviceToken.
  2. Remplacez toute la fonction 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);
    };
}

Toutefois, ce code ne fonctionnera pas au départ. Pour que votre application puisse récupérer le jeton d'appareil, l'utilisateur doit lui accorder l'autorisation d'afficher des notifications (étape suivante de l'atelier de programmation).

Demander l'autorisation d'afficher les notifications

Si l'utilisateur n'a pas encore autorisé votre application à afficher des notifications, vous ne recevrez pas de jeton d'appareil. Dans ce cas, vous appelez la méthode requestPermission(), qui affiche une boîte de dialogue de navigateur demandant cette autorisation ( dans les navigateurs compatibles).

8b9d0c66dc36153d.png

  1. Revenez au fichier src/app/services/chat.service.ts.
  2. Recherchez la fonction requestNotificationsPermissions.
  3. Remplacez toute la fonction 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.');
    }
}

Obtenir votre jeton d'appareil

  1. Créez un commit avec le message "Ajouter la possibilité de publier des images" et transférez-le vers votre dépôt GitHub.
  2. Ouvrez la page Hébergement d'applications dans la console Firebase, puis attendez que le déploiement soit terminé.
  3. Actualisez FriendlyChat. Une fois connecté, la boîte de dialogue d'autorisation des notifications doit s'afficher: bd3454e6dbfb6723.png
  4. Cliquez sur Autoriser.
  5. Ouvrez la console JavaScript de votre navigateur. Le message suivant doit s'afficher: Got FCM device token: cWL6w:APA91bHP...4jDPL_A-wPP06GJp1OuekTaTZI5K2Tu.
  6. Copiez le jeton de votre appareil. Vous en aurez besoin pour la prochaine étape de l'atelier de programmation.

Envoyer une notification sur votre appareil

Maintenant que vous disposez du jeton de l'appareil, vous pouvez envoyer une notification.

  1. Ouvrez l'onglet Cloud Messaging de la console Firebase.
  2. Cliquez sur "Nouvelle notification".
  3. Saisissez un titre et un texte de notification.
  4. Sur le côté droit de l'écran, cliquez sur "Envoyer un message de test".
  5. Saisissez le jeton de l'appareil que vous avez copié dans la console JavaScript de votre navigateur, puis cliquez sur le signe plus (+).
  6. Cliquez sur "test".

Si votre application est au premier plan, la notification s'affiche dans la console JavaScript.

Si votre application est en arrière-plan, une notification devrait s'afficher dans votre navigateur, comme dans cet exemple:

de79e8638a45864c.png

14. Règles de sécurité Cloud Firestore

Afficher les règles de sécurité des bases 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 la validation des 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 datastore. Dans la console Firebase, dans l'onglet Rules (Règles) de la section Database (Base de données), vous pouvez consulter et modifier ces règles.

Vous devriez voir les règles par défaut, qui ne limitent pas l'accès au datastore. Cela signifie que n'importe quel utilisateur peut lire et écrire dans toutes les collections de votre datastore.

Vous allez modifier les règles pour les restreindre 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é devraient être mises à jour automatiquement dans votre suite d'émulateurs.

Afficher les règles de sécurité de Cloud Storage

Cloud Storage for Firebase utilise un langage de règles spécifique pour définir les droits d'accès, la sécurité et la validation des 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 n'autorise que les utilisateurs authentifiés à utiliser Cloud Storage. Dans la console Firebase, dans l'onglet Rules (Règles) de la section Storage (Stockage), vous pouvez afficher et modifier les règles. La règle par défaut, qui autorise tous les utilisateurs connectés à lire et à écrire des fichiers dans votre bucket de stockage, devrait s'afficher.

Vous allez modifier les règles pour:

  • permettre à chaque utilisateur d'écrire uniquement dans ses propres dossiers spécifiques ;
  • permettre à n'importe qui de lire à partir de Cloud Storage ;
  • vous assurer que les fichiers importés sont des images ;
  • limiter la taille des images qui peuvent être importées à un maximum de 5 Mo.

Pour ce faire, vous pouvez utiliser les règles suivantes:

storage.rules

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;
    }
  }
}

15. Félicitations !

Vous avez utilisé Firebase pour créer une application Web de chat en temps réel.

Points abordés

  • Firebase App Hosting
  • Firebase Authentication
  • Cloud Firestore
  • SDK Firebase pour Cloud Storage
  • Firebase Cloud Messaging
  • Firebase Performance Monitoring

Étapes suivantes

En savoir plus

16. [Facultatif] Appliquer avec App Check

Firebase App Check vous aide à protéger vos services contre le trafic indésirable et à protéger votre backend contre les utilisations abusives. Au cours de cette étape, vous allez ajouter une validation des identifiants et bloquer les clients non autorisés avec App Check et reCAPTCHA Enterprise.

Vous devez d'abord activer App Check et reCaptcha.

Activer reCaptcha Enterprise

  1. Dans la console Cloud, recherchez et sélectionnez reCAPTCHA Enterprise sous "Sécurité".
  2. Activez le service comme indiqué, puis cliquez sur Créer une clé.
  3. Saisissez un nom à afficher lorsque vous y êtes invité, puis sélectionnez Site Web comme type de plate-forme.
  4. Ajoutez vos URL déployées à la liste des domaines et assurez-vous que l'option "Utiliser la case à cocher pour l'authentification n'est pas sélectionnée.
  5. Cliquez sur Créer une clé, puis conservez la clé générée dans un endroit sûr. Vous en aurez besoin plus tard dans cette étape.

Activer App Check

  1. Dans la console Firebase, localisez la section Créer dans le panneau de gauche.
  2. Cliquez sur App Check (Vérification des applications), puis sur l'onglet Sign-in method (Méthode de connexion) pour accéder à App Check (Vérification des applications).
  3. Cliquez sur Enregistrer, saisissez votre clé reCaptcha Enterprise lorsque vous y êtes invité, puis cliquez sur Enregistrer.
  4. Dans la vue "API", sélectionnez Stockage, puis cliquez sur Appliquer. Faites de même pour Cloud Firestore.

App Check devrait maintenant être appliqué. Actualisez votre application et essayez d'afficher ou d'envoyer des messages instantanés. Le message d'erreur suivant doit s'afficher:

Uncaught Error in snapshot listener: FirebaseError: [code=permission-denied]: Missing or insufficient permissions.

Cela signifie qu'App Check bloque les requêtes non validées par défaut. Ajoutons maintenant une validation à votre application.

Accédez à votre fichier environment.ts et ajoutez reCAPTCHAEnterpriseKey à l'objet environment.

export const environment = {
  firebase: {
    apiKey: 'API_KEY',
    authDomain: 'PROJECT_ID.firebaseapp.com',
    databaseURL: 'https://PROJECT_ID.firebaseio.com',
    projectId: 'PROJECT_ID',
    storageBucket: 'PROJECT_ID.firebasestorage.app',
    messagingSenderId: 'SENDER_ID',
    appId: 'APP_ID',
    measurementId: 'G-MEASUREMENT_ID',
  },
  reCAPTCHAEnterpriseKey: {
    key: "Replace with your recaptcha enterprise site key"
  },
};

Remplacez la valeur de key par votre jeton reCaptcha Enterprise.

Accédez ensuite au fichier app.config.ts et ajoutez les importations suivantes:

import { getApp } from '@angular/fire/app';
import {
  ReCaptchaEnterpriseProvider,
  initializeAppCheck,
  provideAppCheck,
} from '@angular/fire/app-check';

Dans le même fichier app.config.ts, ajoutez la déclaration de variable globale suivante:

declare global {
  var FIREBASE_APPCHECK_DEBUG_TOKEN: boolean;
}

@NgModule({ ...

Dans les importations, ajoutez l'initialisation d'App Check avec ReCaptchaEnterpriseProvider et définissez isTokenAutoRefreshEnabled sur true pour autoriser l'actualisation automatique des jetons.

imports: [
BrowserModule,
AppRoutingModule,
CommonModule,
FormsModule,
provideFirebaseApp(() => initializeApp(environment.firebase)),
provideAppCheck(() => {
const appCheck = initializeAppCheck(getApp(), {
  provider: new ReCaptchaEnterpriseProvider(
  environment.reCAPTCHAEnterpriseKey.key
  ),
  isTokenAutoRefreshEnabled: true,
  });
  if (location.hostname === 'localhost') {
    self.FIREBASE_APPCHECK_DEBUG_TOKEN = true;
  }
  return appCheck;
}),

Pour autoriser les tests en local, définissez self.FIREBASE_APPCHECK_DEBUG_TOKEN sur true. Lorsque vous actualisez votre application dans localhost, un jeton de débogage est enregistré dans la console, semblable à celui-ci:

App Check debug token: CEFC0C76-7891-494B-B764-349BDFD00D00. You will need to add it to your app's App Check settings in the Firebase console for it to work.

Accédez maintenant à la vue Applications d'App Check dans la console Firebase.

Cliquez sur le menu à développer, puis sélectionnez Gérer les jetons de débogage.

Cliquez ensuite sur Ajouter un jeton de débogage et collez le jeton de débogage de votre console lorsque vous y êtes invité.

Accédez au fichier chat.service.ts, puis ajoutez l'importation suivante:

import { AppCheck } from '@angular/fire/app-check';

Dans le même fichier chat.service.ts, injectez App Check avec les autres services Firebase.

export class ChatService {
appCheck: AppCheck = inject(AppCheck);
...
  1. Créez un commit avec le message "Bloquer les clients non autorisés avec App Check" et transférez-le vers votre dépôt GitHub.
  2. Ouvrez la page Hébergement d'applications dans la console Firebase, puis attendez que le déploiement soit terminé.

Félicitations ! App Check devrait maintenant fonctionner dans votre application.