Démarrer avec AWS

Créer une application Flutter

Créer une application Flutter simple avec AWS Amplify

Module 5 : Ajout d'une catégorie Analytics

Dans ce module, vous allez ajouter une catégorie Analytics, créer des événements personnalisés et consulter le suivi de vos analyses.

Introduction

L'application Photo Gallery est à présent entièrement fonctionnelle, et peut authentifier un utilisateur et lui permettre de prendre des photos qui sont chargées dans Storage. Nous devons à présent nous concentrer sur l'enregistrement d'analyses afin de comprendre comment les utilisateurs interagissent avec notre application.

Dans ce module, vous allez ajouter la catégorie Analytics à votre application Amplify, créer des événements d'analyse personnalisés, les implémenter et afficher le tableau de bord Amazon Pinpoint afin de voir le suivi de vos analyses.

Ce que vous apprendrez

  • Création de la catégorie Analytics
  • Enregistrement des événements d'analyse sur Amazon Pinpoint
  • Affichage du tableau de bord Amazon Pinpoint

Concepts clés

Analytics - Enregistrer le moment où les événements se produisent pour chaque instance de l'application peut être un moyen intéressant pour collecter des analyses sur le comportement de l'utilisateur, ce qui permet de mieux comprendre les fonctionnalités les plus importantes pour l'application.

 Durée

10 minutes

 Services utilisés

Implémentation

  • Création du service Analytics

    Ajoutez le service Analytics à votre projet Amplify en exécutant ce qui suit dans le terminal, dans le répertoire principal de votre projet :

    amplify add analytics

    L’interface de ligne de commande d’Amplify pose une série de questions pour configurer le service Analytics. Appuyez sur la touche Entrée pour fournir la réponse par défaut à chaque question. La sortie doit ressembler à ceci :

    ➜  photo_gallery git:(master) ✗ amplify add analytics
    ? Select an Analytics provider Amazon Pinpoint
    ? Provide your pinpoint resource name: photogallery
    Adding analytics would add the Auth category to the project if not already added.
    ? Apps need authorization to send analytics events. Do you want to allow guests
    and unauthenticated users to send analytics events? (we recommend you allow this
     when getting started) Yes

    Une fois la ressource entièrement configurée, vous recevez une sortie comme celle-ci :

    Successfully updated auth resource locally.
    Successfully added resource photogallery locally

    Notez que l’ajout d’Analytics met à jour la catégorie Auth (Authentification). Nous pouvons confirmer ceci avant de configurer le backend en exécutant :

    amplify push

    Nous devrions recevoir un rapport d’état des changements apportés à notre application Amplify :

    ➜  photo_gallery git:(master) ✗ amplify push
    ✔ Successfully pulled backend environment dev from the cloud.
    
    Current Environment: dev
    
    | Category  | Resource name        | Operation | Provider plugin   |
    | --------- | -------------------- | --------- | ----------------- |
    | Analytics | photogallery         | Create    | awscloudformation |
    | Auth      | photogallery42b5391b | Update    | awscloudformation |
    | Storage   | s33daafe54           | No Change | awscloudformation |
    ? Are you sure you want to continue? Yes

    Une fois la ressource Analytics configurée en backend, vous devriez voir un message de confirmation, ainsi qu’un lien vers le tableau de bord Pinpoint de votre application :

    ✔ All resources are updated in the cloud
    
    Pinpoint URL to track events https://us-west-2.console.aws.amazon.com/pinpoint/home/?region=us-west-2#/apps/ca14fce9dd034d6dbd7ca3ec27afc67c/analytics/overview
    

    Cliquez sur le lien pour afficher le tableau de bord. Il doit ressembler à ceci :

    FlutterApp-Module5Photo1

    Nous reviendrons sur le tableau de bord après avoir enregistré quelques événements d’analyse.

  • Installation de la dépendance

    Dans Visual Studio Code, ouvrez pubspec.yaml et ajoutez Amplify Analytics en tant que dépendance :

    ... # amplify_storage_s3: '<1.0.0'
    
    amplify_analytics_pinpoint: '<1.0.0'
    
    ... # cached_network_image: ^2.3.3

    Enregistrez ensuite le fichier afin que Visual Studio Code installe le module d’extension Amplify Auth Cognito. Vous pouvez également exécuter $ flutter pub get depuis le terminal si la dépendance ne s’installe pas lors de l’enregistrement.

    Vous devriez obtenir la sortie suivante :

    exit code 0
  • Configuration du module d’extension

    Ouvrez main.dart et ajoutez le module d’extension Analytics à l’instance d’Amplify utilisée pour configurer les autres modules d’extension :

    ... // void _configureAmplify() async {
    
    _amplify.addPlugin(
        authPlugins: [AmplifyAuthCognito()],
        storagePlugins: [AmplifyStorageS3()],
        analyticsPlugins: [AmplifyAnalyticsPinpoint()]);
    
    ... // try {

    Exécutez l’application. Vous devriez toujours voir le message de confirmation dans les journaux, indiquant qu’Amplify est toujours correctement configuré et comprend le module d’extension Analytics.

    flutter: Successfully configured Amplify 🎉
  • Implémentation de la fonctionnalité

    Amplify Analytics permet d’enregistrer très facilement des événements d’analyse en faisant quelque chose comme suit :

    final myEvent = AnalyticsEvent('my_event_name');
    myEvent.properties.addStringProperty('property_name', 'property_value');
    Amplify.Analytics.recordEvent(event: myEvent);

    Néanmoins, la définition et la création d’événements à des endroits arbitraires de l’application peut devenir fastidieux à tenir à jour. Nous allons donc plutôt définir tous les événements d’analyse dans un seul fichier et faire de chaque événement son propre objet.

    Créez un nouveau fichier appelé analytics_events.dart et ajoutez ceci :

    import 'package:amplify_analytics_pinpoint/amplify_analytics_pinpoint.dart';
    
    abstract class AbstractAnalyticsEvent {
      final AnalyticsEvent value;
    
      AbstractAnalyticsEvent.withName({String eventName})
          : value = AnalyticsEvent(eventName);
    }
    
    class LoginEvent extends AbstractAnalyticsEvent {
      LoginEvent() : super.withName(eventName: 'login');
    }
    
    class SignUpEvent extends AbstractAnalyticsEvent {
      SignUpEvent() : super.withName(eventName: 'sign_up');
    }
    
    class VerificationEvent extends AbstractAnalyticsEvent {
      VerificationEvent() : super.withName(eventName: 'verification');
    }
    
    class ViewGalleryEvent extends AbstractAnalyticsEvent {
      ViewGalleryEvent() : super.withName(eventName: 'view_gallery');
    }

    En créant l’événement AbstractAnalyticsEvent, nous pouvons créer des objets d’événement d’analyse personnalisés ayant tous une propriété commune, value, qui contient l’instance AnalyticsEvent. Avec une seule ligne de code, nous sommes en mesure d’instancier un événement AbstractAnalyticsEvent tout en conservant les détails de l’implémentation dans un seul fichier.

    Nous pouvons aller un peu plus loin. Créons un événement AbstractAnalyticsEvent pour lorsqu’un utilisateur prend une photo, mais donnons-lui également la possibilité de suivre si l’utilisateur a utilisé l’appareil photo avant ou arrière de son appareil. Pour ce faire, nous devons d’abord ajouter un autre constructeur aux événements AbstractAnalyticsEvents qui accepte un événement AnalyticsEvent en tant que paramètre.

    ... // : value = AnalyticsEvent(eventName);
    
    AbstractAnalyticsEvent.withEvent({AnalyticsEvent event}) 
          : value = event;
    
    ... // AbstractAnalyticsEvent closing }

    Nous pouvons maintenant implémenter l’événement TakePictureEvent :

    class TakePictureEvent extends AbstractAnalyticsEvent {
      // 1
      TakePictureEvent._fromEvent(AnalyticsEvent event)
          : super.withEvent(event: event);
    
      // 2
      factory TakePictureEvent({@String cameraDirection}) {
        final event = AnalyticsEvent('take_picture');
        event.properties.addStringProperty('camera_direction', cameraDirection);
        return TakePictureEvent._fromEvent(event);
      }
    }
    1. Nous créons un constructeur privé appelé _fromEvent, qui nous permet d’appeler le super constructeur acceptant un événement AnalyticsEvent en tant que paramètre.
    2. Le constructeur d’usine sera celui que nous utilisons pour créer cet événement et accepte un paramètre String, ce qui permet d’inclure une orientation d’appareil photo en tant que propriété de l’événement AnalyticsEvent.

    Créons à présent un objet ayant la capacité de transformer une instance de l’événement AbstractAnalyticsEvent en événement AnalyticsEvent. Créez un fichier appelé analytics_service et ajoutez ce qui suit :

    import 'package:amplify_core/amplify_core.dart';
    import 'analytics_events.dart';
    
    class AnalyticsService {
      static void log(AbstractAnalyticsEvent event) {
        Amplify.Analytics.recordEvent(event: event.value);
      }
    }

    Le service AnalyticsService est simple, il possède une méthode statique appelé log, qui va prendre un événement AbstractAnalyticsEvent et envoyer la valeur à Amplify.Analytics. C’est tout.

    Nous pouvons maintenant implémenter chacune de nos classes AbstractAnalyticsEvent concrètes.

    Ajoutez l’événement LoginEvent à la fonction _login dans login_page.dart :

    ... // widget.didProvideCredentials(credentials);
    
    AnalyticsService.log(LoginEvent());
    
    ... // _login closing }

    Ajoutez l’événement SignUpEvent à la fonction _signUp dans sign_up_page.dart :

    ... // widget.didProvideCredentials(credentials);
    
    AnalyticsService.log(SignUpEvent());
    
    ... // _signUp closing }

    Ajoutez l’événement VerificationEvent à la fonction _verify dans verification_page.dart :

    ... // widget.didProvideVerificationCode(verificationCode);
    
    AnalyticsService.log(VerificationEvent());
    
    ... // _verify closing }

    Ajoutez l’événement ViewGalleryEvent au constructeur dans gallery_page.dart :

    ... // : super(key: key) {
    
    AnalyticsService.log(ViewGalleryEvent());
    
    ... // constructor closing }

    Enfin, ajoutez l’événement TakePictureEvent à _takePicture dans camera_page.dart :

    ... // widget.didProvideImagePath(path);
    
    AnalyticsService.log(TakePictureEvent(
        cameraDirection: widget.camera.lensDirection.toString()));
    
    ... // } catch (e) {

    Nous avons été en mesure de passer lensDirection à notre événement puisque le constructeur prend un argument de chaîne.

    Exécutez l’application et essayez d’appuyer sur tous les différents événements afin qu’ils soient enregistrés au moins une fois.

    Une fois que vous avez déclenché certains des événements d’analyse à enregistrer, accédez au tableau de bord Pinpoint. Si vous avez fermé cette fenêtre, vous pouvez y revenir en exécutant ce qui suit :

    amplify console

    Vous devriez voir un aperçu de votre projet Amplify :

    FlutterApp-Module5Photo2

    Accédez à l’onglet Analytics et cliquez sur le bouton Afficher dans Pinpoint :

    FlutterApp-Module5Photo3

    Accédez à la section des événements d’analyse afin de pouvoir voir combien d’entre eux ont été enregistrés :

    FlutterApp-Module5Photo4

    Dans ce cas, j’ai pu déclencher 20 événements différents dans l’application Photo Gallery, ce qui montre que nous avons réussi à implémenter Amplify Analytics dans notre application.

    N’hésitez pas à ajouter d’autres analyses ou à détailler davantage les analyses actuelles. Vous serez alors en mesure de réellement comprendre comment les utilisateurs interagissent avec votre application afin de savoir quels domaines vous devez améliorer en priorité.

Conclusion

Vous avez créé une application Flutter avec AWS Amplify. Maintenant que l'application Photo Gallery est terminée et que vous avez implémenté les services Authentication, Storage et Analytics, il ne vous reste que quelques possibilités : rendre le code visible au public, développer le projet sur une autre plateforme ou supprimer le projet.

Dans ce module, nous allons explorer les étapes requises pour effectuer chacune de ces possibilités.

  • Partage de votre projet en toute sécurité

    Si vous cherchez à rendre l'application Photo Gallery accessible en hébergeant le code sur un référentiel public ou autre, nous vous recommandons de supprimer les informations sensibles de votre projet, qui pourraient conduire à un abus de vos ressources AWS. La plupart des fichiers sensibles doivent déjà être répertoriés dans .gitignore mais il est recommandé de vérifier que ces deux lignes sont présentes dans votre référentiel :

    amplify/
    **/amplifyconfiguration.dart

    Ces lignes vont garantir que le répertoire et le fichier de configuration.dart d'Amplify ne sont pas inclus lors de l'ajout de votre code à un référentiel.

  • Partage de votre backend

    AWS Amplify permet de facilement partager votre backend Amplify configuré sur plusieurs plateformes ou auprès des membres de votre équipe. Si vous cherchez à créer l'application sur une nouvelle plateforme, sur Internet par exemple, il vous suffit d'accéder au répertoire source de votre projet et d'exécuter la commande suivante :

    ? Do you want to use an AWS profile? Yes
    ? Please choose the profile you want to use default
    ? Which app are you working on? d3p0ir7eqcu4le
    Backend environment 'dev' found. Initializing...
    ? Choose your default editor: Visual Studio Code
    ? Choose the type of app that you're building javascript
    Please tell us about your project
    ? What javascript framework are you using react
    ? Source Directory Path:  src
    ? Distribution Directory Path: build
    ? Build Command:  npm run-script build
    ? Start Command: npm run-script start
    
    ? Do you plan on modifying this backend? Yes

    Vous voyez ci-dessus la sortie si vous choisissez une plateforme JavaScript avec React.

    Vous devez néanmoins exécuter $ amplify pull si vous avez l'intention de travailler en équipe, mais le membre de l'équipe aura besoin d'accéder au même profil AWS que celui où est stockée l'application Photo Gallery.

  • Suppression du projet

    Si vous avez terminé de travailler sur le projet et n'avez pas l'intention de travailler encore dessus, vous devriez envisager de supprimer l'application Amplify. Cela permet à vos ressources de ne pas subir d'abus dans le cas où quelqu'un réussirait à accéder aux informations d'identification de vos projets.

    Pour supprimer tous les fichiers Amplify associés en local et le projet Amplify dans le backend, exécutez la commande suivante :

    amplify delete

    Si vous allez au bout de la suppression du projet Amplify, vous obtiendrez une sortie comme celle-ci :

    ✔ Project deleted in the cloud
    Project deleted locally.

    ⚠️ Cette action ne peut pas être annulée. Une fois le projet supprimé, vous ne pouvez pas le récupérer et vous devrez reconfigurer les catégories et les fichiers de configuration du projet si vous devez à nouveau utiliser le projet.

Merci d'avoir suivi ce tutoriel jusqu'à la fin. Merci de nous faire part de vos commentaires à l'aide de l'outil ci-dessous.

Ce module vous a-t-il été utile ?

Merci
Merci de nous indiquer ce que vous avez aimé.
Fermer
Nous sommes désolés de vous décevoir.
Quelque chose est-il obsolète, déroutant ou inexact ? Aidez-nous à améliorer ce didacticiel en fournissant des commentaires.
Fermer

Félicitations !

Vous avez créé une application Flutter dans AWS ! Prochaine grande étape : approfondissez la découverte de technologies AWS spécifiques pour faire évoluer votre application au niveau supérieur.