Erste Schritte mit AWS

Erstellen eine Flutter-Anwendung

Erstellen Sie eine einfache Flutter-Anwendung mit AWS Amplify

Modul 5: Hinzufügen einer Analytikkategorie

In diesem Modul fügen Sie eine Analysekategorie hinzu, erstellen benutzerdefinierte Ereignisse und sehen Ihre Analysen, die verfolgt werden.

Einführung

Die Fotogalerie-App ist jetzt voll funktionsfähig und bietet die Möglichkeit, einen Benutzer zu authentifizieren und ihm zu erlauben, Bilder aufzunehmen, die in den Speicher hochgeladen werden. Jetzt müssen wir uns auf die Analyse der Aufzeichnung konzentrieren, um zu verstehen, wie die Benutzer mit unserer Anwendung interagieren.

In diesem Modul fügen wir unserer Amplify-Anwendung die Kategorie Analytics hinzu, erstellen benutzerdefinierte Analyse-Ereignisse, implementieren diese Ereignisse und zeigen das Amazon Pinpoint Dashboard an, um zu sehen, wie unsere Analysen verfolgt werden.

Lerninhalte

  • Erstellen Sie die Analytik-Kategorie
  • Analyse-Ereignisse auf Amazon Pinpoint aufzeichnen
  • Sehen Sie sich das Amazon Pinpoint Dashboard an

Wichtige Konzepte

Analytik: Die Aufzeichnung, wann Ereignisse für jede Instanz der Anwendung auftreten, kann eine wertvolle Methode sein, um Analysen des Benutzerverhaltens zu sammeln, die zu einem besseren Verständnis der für die Anwendung wichtigsten Funktionen führen.

 Veranschlagte Zeit

10 Minuten

 Verwendete Services

Implementierung

  • Erstellen Sie den Analytik-Service

    Fügen Sie den Analytik-Service zu Ihrem Amplify-Projekt hinzu, indem Sie im Terminal im Stammverzeichnis Ihres Projekts Folgendes ausführen

    amplify add analytics

    Die Amplify CLI wird eine Reihe von Fragen stellen, um den Analytics Service zu konfigurieren. Drücken Sie die Eingabetaste, um die Standardantwort auf jede Frage bereitzustellen. Die Ausgabe sollte wie folgt aussehen:

    ➜  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

    Nachdem die Ressource vollständig konfiguriert ist, erhalten Sie eine Ausgabe wie die folgende:

    Successfully updated auth resource locally.
    Successfully added resource photogallery locally

    Beachten Sie, dass das Hinzufügen von Analytics unsere Auth-Kategorie aktualisieren wird. Wir werden in der Lage sein, dies zu bestätigen, bevor wir das Backend durch Ausführen konfigurieren:

    amplify push

    Wir sollten einen Statusbericht über die an unserer Amplify-Anwendung vorgenommenen Änderungen erhalten:

    ➜  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

    Nachdem die Analyse-Ressource im Backend konfiguriert wurde, sollten Sie eine Erfolgsmeldung zusammen mit einem Link zum Pinpoint-Dashboard Ihrer Anwendung sehen:

    ✔ 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
    

    Klicken Sie auf den Link, um das Dashboard anzuzeigen. Es sollte so aussehen:

    FlutterApp-Module5Photo1

    Wir werden das Dashboard nach der Aufzeichnung einiger analytischer Ereignisse erneut aufgreifen.

  • Installieren der Abhängigkeit

    Öffnen Sie in Visual Studio Code pubspec.yaml und fügen Sie Amplify Analytics als Abhängigkeit hinzu:

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

    Speichern Sie jetzt die Datei, damit Visual Studio Code das Plugin Amplify Auth Cognito installiert. Sie können auch $ flutter pub get vom Terminal ausführen, wenn die Abhängigkeit nicht auf save installiert ist.

    Sie sollten folgende Ausgabe erhalten:

    exit code 0
  • Konfigurieren des Plugins

    Öffnen Sie main.dart und fügen Sie das Analytics-Plugin zu der Instanz von Amplify hinzu, die zur Konfiguration der anderen Plugins verwendet wird:

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

    Führen Sie die App aus Sie sollten in den Protokollen immer noch die Erfolgsmeldung sehen, die anzeigt, dass Amplify immer noch richtig konfiguriert ist und das Analytik-Plugin einschließt.

    flutter: Successfully configured Amplify 🎉
  • Funktionalität implementieren

    Amplify Analytics macht es extrem einfach, Analytikereignisse aufzuzeichnen, indem man etwas wie folgt macht:

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

    Die Definition und Erstellung von Ereignissen an beliebigen Stellen in der App kann jedoch mühsam in der Pflege werden. Stattdessen werden wir alle Analyseereignisse in einer einzigen Datei definieren und jedes Ereignis zu einem eigenen Objekt machen.

    Erstellen Sie eine neue Datei namens analytics_events.dart und fügen Sie Folgendes hinzu:

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

    Durch die Erstellung von AbstractAnalyticsEvent können wir benutzerdefinierte Analyse-Ereignisobjekte erstellen, die alle eine gemeinsame Eigenschaft, einen gemeinsamen Wert, haben, die die Instanz AnalyticsEvent enthalten wird. Mit einer Codezeile werden wir in der Lage sein, ein AbstractAnalyticsEvent zu instanziieren, während die Implementierungsdetails in einer einzigen Datei bleiben.

    Wir können noch einen Schritt weiter gehen. Erstellen wir ein AbstractAnalyticsEvent für den Fall, dass ein Benutzer ein Bild aufnimmt, aber geben wir ihm auch die Möglichkeit zu verfolgen, ob der Benutzer die Vorder- oder Rückkamera seines Geräts benutzt hat. Um dies erreichen zu können, müssen wir zunächst einen weiteren Konstruktor zu AbstractAnalyticsEvents hinzufügen, der ein AnalyticsEvent als Parameter akzeptiert.

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

    Jetzt können wir TakePictureEvent implementieren:

    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. Wir erstellen einen privaten Konstruktor namens _fromEvent, der es uns ermöglicht, den Superkonstruktor aufzurufen, der ein AnalyticsEvent als Parameter akzeptiert.
    2. Der Fabrikkonstrukteur wird derjenige sein, den wir zum Erstellen dieses Ereignisses verwenden und der einen String-Parameter akzeptiert, wodurch eine Kamerarichtung als Eigenschaft des AnalyticsEvents aufgenommen werden kann.

    Lassen Sie uns nun ein Objekt mit der Fähigkeit erstellen, eine Instance unseres AbstractAnalyticsEvents in ein AnalyticsEvent zu verwandeln. Erstellen Sie eine neue Datei namens analytics_service und fügen Sie Folgendes hinzu:

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

    Der AnalyticsService ist einfach, er verfügt über eine statische Methode namens log, die ein AbstractAnalyticsEvent nimmt und den Wert an Amplify.Analytics übergibt. Das war's.

    Jetzt können wir jede unserer Concreate AbstractAnalyticsEvent-Klassen implementieren.

    Fügen Sie LoginEvent zur _login-Funktion in login_page.dart hinzu:

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

    SignUpEvent zur _signUp-Funktion in sign_up_page.dart hinzufügen:

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

    Fügen Sie VerificationEvent zur _Verify-Funktion in verification_page.dart hinzu:

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

    Fügen Sie ViewGalleryEvent zum Konstruktor in gallery_page.dart hinzu:

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

    Fügen Sie schließlich TakePictureEvent zu _takePicture in camera_page.dart hinzu:

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

    Wir sind in der Lage, die LinseDirection an unser Ereignis weiterzugeben, da der Konstrukteur eine String-Argumentation macht.

    Gehen Sie die App durch und versuchen Sie, alle verschiedenen Ereignisse zu treffen, damit sie mindestens einmal aufgezeichnet werden.

    Sobald Sie die Aufzeichnung einiger der Analyseereignisse ausgelöst haben, gehen Sie zum Pinpoint-Dashboard. Wenn Sie dieses Fenster geschlossen haben, können Sie durch Ausführen der folgenden Schritte zurückkehren:

    amplify console

    Sie sollten den Überblick über Ihr Amplify-Projekt sehen:

    FlutterApp-Module5Photo2

    Navigieren Sie zur Registerkarte Analytics und klicken Sie auf die Schaltfläche "Ansicht in Pinpoint":

    FlutterApp-Module5Photo3

    Navigieren Sie zum Abschnitt Analytikereignisse und Sie sollten sehen können, wie viele Analytikereignisse aufgezeichnet wurden:

    FlutterApp-Module5Photo4

    In diesem Fall konnte ich 20 verschiedene Ereignisse in der Fotogalerie-Anwendung auslösen, was zeigt, dass wir Amplify Analytics erfolgreich in unsere Anwendung implementiert haben.

    Es steht Ihnen frei, noch mehr Analysen hinzuzufügen oder die aktuellen ausführlicher zu gestalten. Dann werden Sie in der Lage sein, wirklich zu verstehen, wie Benutzer mit Ihrer Anwendung interagieren, so dass Sie wissen, auf welche Bereiche Sie sich auf Verbesserungen konzentrieren müssen.

Fazit

Sie haben mit AWS Amplify eine Flutter-Anwendung gebaut! Nun, da die Fotogalerie fertiggestellt ist und Sie die Authentifizierungs-, Speicher-Services und Analyse-Dienste implementiert haben, gibt es nur noch wenige Wege, um von hier aus weiterzugehen: Machen Sie den Code öffentlich sichtbar, erweitern Sie das Projekt auf eine andere Plattform oder löschen Sie das Projekt.

In diesem Modul werden wir die Schritte untersuchen, die erforderlich sind, um jeden dieser Wege zu beschreiten.

  • Ihr Projekt sicher teilen

    Wenn Sie die Fotogalerie als App für andere sichtbar machen möchten, indem Sie den Code auf einem öffentlichen Repo hosten oder generell für andere zugänglich machen wollen, wird empfohlen, sensible Informationen aus Ihrem Projekt zu entfernen, die zu einem Missbrauch Ihrer AWS Ressourcen führen könnten. Die meisten der sensiblen Dateien sollten bereits in .gitignore aufgeführt sein, aber es wird empfohlen, dass Sie sicherstellen, dass diese beiden Zeilen in Ihrem Repo enthalten sind:

    amplify/
    **/amplifyconfiguration.dart

    Diese Zeilen stellen sicher, dass das amplify-Verzeichnis und die Datei amplifyconfiguration.dart nicht enthalten sind, wenn Sie Ihren Code in ein Repo schieben.

  • Ihr Backend teilen

    AWS Amplify macht es einfach, Ihr konfiguriertes Amplify Backend über mehrere Plattformen oder mit Teammitgliedern gemeinsam zu nutzen. Wenn Sie die Anwendung auf einer neuen Plattform, z. B. Web, erstellen möchten, navigieren Sie einfach zum Stammverzeichnis Ihres Projekts und führen Sie den folgenden Befehl aus:

    ? 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

    Die obige Ausgabe ist die Ausgabe, wenn Sie eine JavaScript-Plattform mit React wählen würden.

    Sie würden immer noch $ amplify pull ausführen, wenn Sie beabsichtigen, in einem Team zu arbeiten, aber das Teammitglied müsste Zugriff auf dasselbe AWS-Profil haben, in dem die Fotogalerie Amplify-Anwendung gespeichert ist.

  • Löschen des Projekts

    Wenn Sie mit dem Projekt fertig sind und nicht beabsichtigen, weiter daran zu arbeiten, sollten Sie in Betracht ziehen, die Amplify-Anwendung zu löschen. Dadurch wird sichergestellt, dass Ihre Ressourcen nicht missbraucht werden, falls jemand Zugang zu den Zugangsdaten Ihrer Projekte erhält.

    Um alle lokalen Amplify-Verknüpfungsdateien und das Amplify-Projekt im Amplify Backend zu löschen, führen Sie den folgenden Befehl aus:

    amplify delete

    Wenn Sie das Löschen des Amplify-Projekts zu Ende führen, erhalten Sie eine Ausgabe wie diese:

    ✔ Project deleted in the cloud
    Project deleted locally.

    ⚠️ Diese Aktion kann nicht rückgängig gemacht werden. Wenn das Projekt einmal gelöscht ist, können Sie es nicht wiederherstellen und müssen die Kategorien und die Projektkonfigurationsdateien neu konfigurieren, wenn Sie das Projekt wieder verwenden möchten.

Vielen Dank, dass Sie dieses Tutorial bis zum Ende verfolgt haben. Bitte teilen Sie uns Ihr Feedback mit Hilfe des unten stehenden Tools mit.

War das Modul hilfreich?

Vielen Dank
Bitte teilen Sie uns mit, was Ihnen gefallen hat.
Schließen
Es tut uns Leid Sie zu enttäuschen
Ist etwas veraltet, verwirrend oder ungenau? Bitte helfen Sie uns, dieses Tutorial zu verbessern, indem Sie Feedback geben.
Schließen

Herzlichen Glückwunsch!

Sie haben erfolgreich eine Flutter-Anwendung auf AWS gebaut! Als großen nächsten Schritt sollten Sie tiefer in spezifische AWS-Technologien eintauchen und Ihre Anwendung auf die nächste Stufe bringen.