Cette page a été traduite par l'API Cloud Translation.

Votre première expérience de messagerie dans l'application

1. Introduction

Objectifs

Dans cet atelier de programmation, vous allez instrumenter un test de messagerie dans une application mobile de recommandation de restaurants multiplates-formes utilisant Flutter et Cloud Firestore.

Une fois terminé, vous pourrez concevoir et implémenter des tests de messagerie dans l'application pour augmenter efficacement l'engagement des utilisateurs de n'importe quelle application iOS ou Android tout en écrivant un minimum de code.

Points abordés

Utiliser la messagerie dans l'application Firebase (FIAM) dans une application Flutter
Personnaliser l'apparence de vos messages dans l'application
Concevoir un test de la messagerie dans l'application et l'implémenter dans votre application
Interpréter les résultats d'un test de la messagerie dans l'application

Qu'attendez-vous de cet atelier de programmation ?

Je suis novice en la matière et je voudrais avoir un bon aperçu.

Je connais un peu le sujet, mais j'aimerais revoir certains points.

Je recherche un exemple de code à utiliser dans mon projet.

Je cherche des explications sur un point spécifique.

Messagerie dans l'application Firebase

Firebase In-App Messaging (FIAM) vous aide à susciter l'engagement des utilisateurs qui utilisent activement votre application en leur envoyant des messages ciblés et contextuels les incitant à effectuer des actions clés dans l'application (par exemple, dépasser un niveau de jeu, acheter un article ou s'abonner à du contenu).

Firebase A/B Testing

Basé sur Google Optimize, Firebase A/B Testing vous aide à optimiser l'expérience dans votre application en vous permettant d'exécuter, d'analyser et d'adapter facilement vos tests produits et vos expériences marketing. Vous pourrez tester les modifications apportées à l'UI ou aux fonctionnalités de votre application, ou encore aux campagnes axées sur l'engagement, afin de déterminer si ces changements sont vraiment efficaces.

Conditions requises

Si vous ne connaissez pas bien Flutter ou Firestore, commencez par suivre l'atelier de programmation Firebase pour Flutter:

Vous pouvez exécuter cet atelier de programmation sur l'un des appareils suivants :

Un appareil physique (Android ou iOS) connecté à votre ordinateur et réglé en mode développeur
Le simulateur iOS (outils Xcode à installer)
L'émulateur Android (doit être configuré dans Android Studio)

En plus des éléments ci-dessus, vous devez également disposer des éléments suivants:

Un navigateur de votre choix, comme Chrome
Un IDE ou un éditeur de texte de votre choix, tel qu'Android Studio ou VS Code configuré avec les plug-ins Dart et Flutter. Nous vous recommandons d'utiliser VS Code avec Flutter.
La dernière version stable de Flutter (ou la version bêta si vous aimez vivre à la pointe de la technologie).
Un compte Google, comme un compte Gmail, pour créer et gérer votre projet Firebase.
Exemple de code de l'atelier de programmation Consultez l'étape suivante pour savoir comment obtenir le code.

2. Configuration

Obtenir le code

Clonez le dépôt GitHub à partir de la ligne de commande :

git clone https://github.com/FirebaseExtended/codelab-friendlyeats-flutter.git friendlyeats-flutter

L'exemple de code sera cloné dans le répertoire friendlyeats-flutter. À partir de maintenant, assurez-vous d'exécuter des commandes à partir du répertoire ci-dessous:

cd friendlyeats-flutter

Accédez ensuite au répertoire de l'atelier de programmation et extrayez la branche fiam-abt:

git checkout fiam-abt

Cette branche contient tout le code nécessaire à cet atelier de programmation, y compris une version finalisée dans le dossier done. Les autres branches de ce dépôt contiennent du code permettant de créer l'application FriendlyEats, comme indiqué dans l'atelier de programmation Flutter Firestore multiplate-forme. Pour les besoins de cet atelier de programmation, nous avons supprimé l'intégration Web dans cette branche.

Importer l'application de démarrage

Ouvrez ou importez le répertoire codelab-fiam-abt dans l'IDE de votre choix. Ce répertoire contient le code de départ de l'atelier de programmation, qui consiste en une application de recommandation de restaurants. Au cours de cet atelier, vous allez instrumenter un test de messagerie dans l'application pour les utilisateurs de cette application.

Créer un projet Firebase

Dans la console Firebase, cliquez sur Ajouter un projet, puis nommez le projet Firebase FriendlyEats. Prenez note de l'ID de votre projet Firebase (ou cliquez sur l'icône Modifier pour définir l'ID de projet souhaité).
Assurez-vous que Google Analytics est activé pour le projet, puis cliquez sur Continuer.
Cliquez sur Create Project (Créer un projet).

Félicitations ! Vous venez de créer votre premier projet Firebase. Vous pouvez maintenant cliquer sur le nom du projet pour accéder à la console.

Vous allez ensuite apprendre à configurer et activer les services nécessaires à l'aide de la console Firebase.

Activer l'authentification anonyme

Bien que cet aspect ne soit pas l'objectif principal de cet atelier de programmation, il est important d'avoir une forme d'authentification dans votre application. Vous utiliserez une connexion anonyme, ce qui signifie que l'utilisateur sera automatiquement connecté sans être invité à fournir ses identifiants.

Pour activer la connexion anonyme :

Dans la console Firebase, recherchez Authentification dans la barre de navigation de gauche.
Cliquez sur Authentication (Authentification), puis sur Get started (Commencer), puis sélectionnez l'onglet Sign-in method (Méthode de connexion). Vous pouvez également accéder directement à la console Firebase.
Activez le fournisseur de connexion Anonyme, puis cliquez sur Enregistrer.

L'activation de l'option Connexion anonyme permet à l'application de connecter les utilisateurs à l'application sans leur demander leurs identifiants. Pour en savoir plus, consultez la documentation sur l'authentification anonyme pour Android et iOS.

Configurer Cloud Firestore

L'application utilise Cloud Firestore pour enregistrer et recevoir des informations et des notes sur un restaurant.

Voici comment configurer Cloud Firestore dans votre projet Firebase:

Dans le panneau de gauche de la console Firebase, développez Build (Compilation), puis sélectionnez Firestore database (Base de données Firestore).
Cliquez sur Créer une base de données.
Laissez le champ Database ID (ID de la base de données) défini sur (default).
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.
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.
Cliquez sur Créer.

3. Configuration Firebase pour les mobiles

La plupart des modifications de code requises pour activer la compatibilité Firebase sont déjà activées dans le projet sur lequel vous travaillez. Toutefois, pour ajouter la compatibilité avec les plates-formes mobiles, vous devez:

Enregistrez la plate-forme souhaitée sur le projet Firebase.
Téléchargez le fichier de configuration correspondant à la plate-forme, puis ajoutez-le au code.

Dans le répertoire de premier niveau de votre application Flutter, vous trouverez des sous-répertoires appelés ios et android. Ces répertoires contiennent les fichiers de configuration propres aux plates-formes iOS et Android.

Configurer iOS

Dans la console Firebase, sélectionnez Project Settings (Paramètres du projet) en haut de la barre de navigation de gauche, puis cliquez sur le bouton iOS sous Your apps (Vos applications) sur la page General (Général).

La boîte de dialogue suivante doit s'afficher:

La valeur importante à indiquer est l'ID du bundle iOS. Pour obtenir l'ID du bundle, vous devez effectuer les trois opérations suivantes.

Dans l'outil de ligne de commande, accédez au répertoire de premier niveau de votre application Flutter.
Exécutez la commande open ios/Runner.xcworkspace pour ouvrir Xcode.

Dans Xcode, cliquez sur le premier niveau.Runner dans le volet de gauche pour afficher General dans le volet de droite, comme illustré. Copiez la valeur de l'identifiant de groupe.

Revenez à la boîte de dialogue Firebase, collez l'identifiant du bundle copié dans le champ ID du bundle iOS, puis cliquez sur Enregistrer l'application.

Dans Firebase, suivez les instructions pour télécharger le fichier de configuration GoogleService-Info.plist.
Revenez à Xcode. Notez que l'élément Runner possède un sous-dossier également nommé Runner (illustré dans l'image précédente).
Faites glisser le fichier GoogleService-Info.plist (que vous venez de télécharger) dans ce sous-dossier Runner.
Dans la boîte de dialogue qui apparaît dans Xcode, cliquez sur Finish (Terminer).
Revenez à la console Firebase. À l'étape de configuration, cliquez sur Suivant, ignorez les étapes restantes, puis revenez à la page principale de la console Firebase.

La configuration de votre application Flutter pour iOS est terminée.

Configurer Android

Dans la console Firebase, sélectionnez Project Settings (Paramètres du projet) en haut de la barre de navigation de gauche, puis cliquez sur le bouton Android sous Your apps (Vos applications) sur la page General (Général).

La boîte de dialogue suivante doit s'afficher :

La valeur importante à indiquer est le nom du package Android. Effectuez les deux opérations suivantes pour l'obtenir:

Dans le répertoire de votre application Flutter, ouvrez le fichier android/app/src/main/AndroidManifest.xml.
Dans l'élément manifest, recherchez la valeur de chaîne de l'attribut package. Cette valeur correspond au nom du package Android (du type com.yourcompany.yourproject). Copiez cette valeur.
Dans la boîte de dialogue Firebase, collez le nom du package copié dans le champ Nom du package Android.
Vous n'avez pas besoin du certificat de signature de débogage SHA-1 pour cet atelier de programmation. Laissez ce champ vide.
Cliquez sur Register App (Enregistrer l'application).
Dans Firebase, suivez les instructions pour télécharger le fichier de configuration google-services.json.
Accédez au répertoire de votre application Flutter et déplacez le fichier google-services.json (que vous venez de télécharger) dans le répertoire android/app.
Revenez dans la console Firebase, ignorez les étapes restantes, puis accédez de nouveau à la page principale de la console Firebase.
Toute la configuration Gradle est déjà activée. Si votre application est toujours en cours d'exécution, fermez-la et générez-la de nouveau pour permettre à Gradle d'installer des dépendances.

La configuration de votre application Flutter pour Android est à présent terminée.

4. Exécutez l'application en local

Vous êtes prêt à travailler sur votre application. Commencez par exécuter l'application en local. Vous pouvez désormais exécuter l'application sur toutes les plates-formes que vous avez configurées (et pour lesquelles un appareil et un émulateur sont disponibles).

Découvrez quels appareils sont disponibles à l'aide de la commande suivante:

flutter devices

Selon les appareils disponibles, le résultat de la commande précédente peut se présenter ainsi:

Exécutez maintenant l'application en local à l'aide de la commande suivante:

flutter run

Votre copie de FriendlyEats doit maintenant être associée à votre projet Firebase.

L'application se connecte automatiquement à votre projet Firebase, puis vous connecte automatiquement en tant qu'utilisateur anonyme.

5. Créer et tester votre premier message

Intégrer la messagerie dans l'application Firebase à votre application

L'intégration de base de la messagerie dans l'application est totalement sans code. Il vous suffit d'ajouter la dépendance pour commencer. Ajoutez la dépendance suivante à votre fichier pubspec.yaml

dependencies:
  # ...
  firebase_in_app_messaging: ^0.4.0
  # ...

Rédiger un message dans la console Firebase

Maintenant que vous avez ajouté FIAM à votre application, rédigez un message qui se déclenchera lors de la première ouverture de votre application.

Pour rédiger votre premier message:

Dans la section Engage (Engagement) de la console Firebase, cliquez sur In-App Messaging (Messagerie dans l'application).
Cliquez sur Créer votre première campagne dans le volet "Messages dans l'application".

Composons un message modal de base pour nous assurer que l'intégration fonctionne. N'hésitez pas à personnaliser le message comme vous le souhaitez : vous pouvez ajouter des images, des boutons ou modifier les couleurs.

Veillez à cibler l'application avec laquelle vous souhaitez effectuer le test. En fonction du chemin d'intégration que vous suivez, vous pouvez avoir iOS, Android ou les deux.

Nous voulons nous assurer que le message se déclenche lorsque l'application s'ouvre. La configuration de planification par défaut fonctionnera donc ici.

Une fois la planification terminée, nous pourrons publier le message. Cliquez sur "Examiner". Un écran semblable à celui-ci devrait s'afficher :

Afficher le message dans votre application

Désinstallez et réinstallez votre application. Le message que vous avez créé devrait s'afficher à l'ouverture. Félicitations, vous venez d'envoyer votre premier message dans l'application. À l'étape suivante, vous allez apprendre à ajouter un événement d'analyse afin de déclencher un message dans l'application en fonction des actions de vos utilisateurs.

6. Intégrer Firebase Analytics pour déclencher des messages de manière avancée

Intégrer Firebase Analytics à votre application

Pour comprendre comment les utilisateurs interagissent avec notre application et déclencher un message intégré à l'application en fonction de leurs actions, nous allons maintenant ajouter un événement Analytics lorsqu'un utilisateur clique sur un restaurant.

Ajouter la dépendance Firebase Analytics à Flutter dans pubspec.yaml

dependencies:
  # ...
  firebase_analytics: ^1.0.1
  # ...

Importer des données analytiques dans home_page.dart

import 'package:firebase_analytics/firebase_analytics.dart';

Ajouter une instance de Firebase Analytics à la classe HomePage dans home_page.dart

class HomePage extends StatefulWidget {
  static const route = '/';
  static FirebaseAnalytics analytics = FirebaseAnalytics();
  HomePage({Key key}) : super(key: key);
  @override
  _HomePageState createState() => _HomePageState();
}

Générer un événement Analytics lorsque l'utilisateur clique sur une fiche de restaurant dans home_page.dart

onRestaurantPressed: (id) async {
  await HomePage.analytics.logEvent(name: 'click_restaurant');
  Navigator.pushNamed(context,
                      RestaurantPage.route,
                      arguments: RestaurantPageArguments(id: id));
})

Modifier votre message pour le déclencher sur l'événement d'analyse

Maintenant que nous avons un événement "click_restaurant", déclenchons notre message dans l'application en fonction de celui-ci plutôt que lorsque l'utilisateur ouvre l'application.

Dans la console Firebase, revenez à "Message dans l'application", puis modifiez votre campagne existante.

Modifiez maintenant la section de planification pour déclencher le message à partir du nouvel événement.

Nous pouvons alors publier nos modifications en cliquant sur le bouton "Examiner".

Tester votre déclencheur dans l'application

À ce stade, vous devriez pouvoir exécuter votre application avec

flutter run

Lorsque vous cliquez sur un restaurant, votre message intégré à l'application devrait s'afficher.

7. Créer une campagne FIAM+ABT

Commencer par un objectif

Notre application Friendlyeats est déjà très bien, mais pour qu'elle soit utile, nous avons besoin d'avis. Ces avis proviendront des utilisateurs de Friendlyeats. Trouvons un moyen de les inciter à en laisser.

Commençons par définir notre événement de conversion.

Comme nous voulons savoir si les utilisateurs écrivent des avis sur des restaurants, ajoutons un événement d'analyse pour mesurer ce comportement.

Importez Firebase Analytics comme précédemment et ajoutez une instance d'Analytics à RestaurantPage dans restaurant_page.dart.

class RestaurantPage extends StatefulWidget {
  static const route = '/restaurant';
  static FirebaseAnalytics analytics = FirebaseAnalytics();
  final String _restaurantId;
  RestaurantPage({Key key, @required String restaurantId})
      : _restaurantId = restaurantId,
        super(key: key);
  @override
  _RestaurantPageState createState() =>
      _RestaurantPageState(restaurantId: _restaurantId);
}

Déclenchons maintenant un événement dans _onCreateReviewPressed lorsque nous enregistrons un avis dans restaurant_page.dart.

 if (newReview != null) {
   // Log successful review
   await RestaurantPage.analytics.logEvent(name: 'review_success');
   // Save the review
   return data.addReview(restaurantId: _restaurant.id, review: newReview);
 }

Configurer un test A/B dans la console Firebase

Maintenant que vous savez comment créer des campagnes de messages dans l'application, il est temps de réfléchir au type de comportement que vous souhaitez encourager dans votre application grâce à ces campagnes. Pour FriendlyEats, nous aimerions que plus de personnes laissent des avis, ce qui rendrait l'application plus utile. Il existe plusieurs façons de les encourager à le faire à l'aide de messages dans l'application. Vous pouvez par exemple envoyer un message simple dans l'application pour demander à l'utilisateur d'écrire un avis sur le restaurant afin d'améliorer l'application FriendlyEats. Vous pouvez également proposer un type d'incitation pour qu'il rédige un avis, comme un bon de réduction ou un code de réduction pour un restaurant donné.

Les deux approches peuvent augmenter la fréquence à laquelle les utilisateurs rédigent des avis sur les restaurants sur FriendlyEats. Il semble que l'envoi d'un bon de réduction puisse avoir un impact encore plus fort dans ce cas. Mais dans quelle mesure ce bon de réduction incitera-t-il les utilisateurs à rédiger un avis ? Le coût du bon de réduction vaut-il la peine ? Pour le déterminer, nous allons effectuer un test de la messagerie dans l'application. Nous pouvons utiliser Firebase A/B Testing pour afficher de manière aléatoire l'un de nos messages dans l'application aux utilisateurs et mesurer l'impact de cette action sur leur comportement, un peu comme un essai clinique. Mieux encore, vous pouvez le faire entièrement dans la console Firebase, sans avoir à écrire de code.

Pour créer votre premier test de la messagerie dans l'application:

Dans la section Engager (Engager) de la console Firebase, cliquez sur A/B Testing (Tests A/B).
Cliquez sur Créer un test, puis indiquez que vous souhaitez tester la messagerie dans l'application. Vous accédez alors au composeur de test ci-dessous.

Attribuez un nom et éventuellement une description à votre test.

L'étape suivante consiste à rédiger les différents messages intégrés à l'application que vous enverrez aux utilisateurs dans le cadre de votre test. Le premier message intégré à l'application que nous allons composer est la "ligne de base", ou le contrôle de notre test. Nous pouvons utiliser ce message simple pour demander aux utilisateurs de rédiger un avis:

Maintenant que nous avons une référence, nous allons composer une variante, le message dans l'application qui propose aux utilisateurs un code promotionnel pour les inciter à laisser un avis. Il n'est pas entièrement visible dans l'aperçu ci-dessous, mais le titre du message est "Profitez d'un bon de réduction, laissez un avis !" et le corps du message est "La prochaine fois que vous irez au Burrito Cafe, utilisez le code promotionnel FRIENDLYEATS-15 au moment du règlement pour bénéficier de 15% de remise sur votre commande. N'oubliez pas de laisser un avis !" Cela devrait inciter certains utilisateurs à découvrir le Burrito Cafe.

À l'étape suivante, nous allons cibler notre application et définir l'exposition. Il s'agit du pourcentage d'utilisateurs éligibles (ceux qui répondent aux conditions de ciblage/déclenchement) qui verront l'un des messages du test. Pour cet exemple, nous pouvons simplement définir cette valeur sur 100 %, car nous souhaitons que tous les utilisateurs voient soit le groupe de référence, soit notre variante de bon de réduction. Si vous souhaitez créer un groupe de contrôle qui ne voit aucun message dans l'application, vous pouvez réduire ce pourcentage d'exposition.

Vous allez ensuite définir des objectifs pour le test. Il s'agit du résultat du test que nous souhaitons mesurer. Nous allons définir cet événement comme l'événement d'analyse review_success que nous avons défini dans la section précédente, car nous souhaitons voir l'impact de nos différents messages dans l'application sur les utilisateurs qui laissent des avis sur les restaurants.
Pour la planification, nous allons laisser la campagne commencer immédiatement et définir click_restaurant comme condition de déclenchement afin que les utilisateurs voient l'un des deux messages dans l'application lorsqu'ils cliquent sur un restaurant.

Il ne nous reste plus qu'à examiner notre test et à cliquer sur Démarrer le test. Nous pouvons ensuite nous détendre et attendre que les données de notre test soient disponibles.

Consulter la collecte des données en temps réel

Maintenant que nous avons lancé notre test, les utilisateurs de FriendlyEats verront de manière aléatoire l'un des deux messages intégrés à l'application que nous avons composés lorsqu'ils cliquent sur un restaurant : le message de référence ou la variante. Cela divisera nos utilisateurs en deux groupes, en fonction du message qu'ils ont vu. Nous pouvons ensuite consulter la console Firebase (toujours dans la section "Test A/B") pour comparer les données analytiques en direct des deux groupes. Il faudra un certain temps pour que les données soient collectées, car nous devons attendre que les utilisateurs voient les messages dans l'application et réagissent en conséquence. Voici à quoi pourraient ressembler vos résultats une fois que vous aurez suffisamment de données:

Dans ce cas, la variante a amélioré de manière significative la référence. Nous pouvons donc choisir de sélectionner Déployer la variante, ce qui déploiera le message dans l'application avec le bon de réduction auprès de tous les utilisateurs.

8. Félicitations

Félicitations, vous avez créé et exécuté votre premier test de messagerie dans l'application. Vous pouvez désormais effectuer un test dans votre propre application et utiliser les résultats pour rendre vos campagnes de messages dans l'application plus efficaces.

Étapes suivantes

Découvrez quelques-uns des ateliers de programmation...

Complément d'informations

Nous n'avons fait qu'effleurer les possibilités offertes par Firebase In-App Messaging et Firebase A/B Testing. Pour en savoir plus, consultez les ressources suivantes :

Documents de référence

Créer des tests de la messagerie dans l'application avec des tests A/B