Nozioni di base su AWS

Creazione di un'applicazione Flutter

Creazione di una semplice applicazione Flutter utilizzando AWS Amplify

Modulo 5: Aggiunta di una categoria di analisi

In questo modulo, aggiungerai una categoria di analisi, creerai eventi personalizzati e visualizzerai la traccia delle tue analisi.

Introduzione

L'applicazione della galleria fotografica è ora perfettamente funzionante e offre la possibilità di autenticare un utente e consentirgli di scattare foto da caricare in storage. Ora dobbiamo concentrarci sulla registrazione delle analisi per comprendere in che modo gli utenti interagiscono con la nostra applicazione.

In questo modulo, aggiungeremo la categoria Analisi alla nostra applicazione Amplify, creeremo eventi di analisi personalizzati, implementeremo questi eventi e visualizzeremo il pannello di controllo di Amazon Pinpoint per analizzare la traccia delle nostre analisi.

Avrai modo di approfondire i seguenti aspetti

  • Creazione della categoria di analisi
  • Registrazione di eventi di analisi su Amazon Pinpoint
  • Visualizzazione del pannello di controllo di Amazon Pinpoint

Concetti chiave

Analisi - Registrare il momento in cui gli eventi si verificano per ciascuna istanza dell'applicazione può essere un modo prezioso per raccogliere analisi sul comportamento dell'utente e comprendere quali sono le funzionalità più importanti dell'applicazione.

 Tempo richiesto per il completamento

10 minuti

 Servizi utilizzati

Implementazione

  • Creazione del servizio di analisi

    Aggiungi il servizio di analisi al tuo progetto Amplify eseguendo questo comando nel terminale, nella directory root del progetto:

    amplify add analytics

    Nell'interfaccia a riga di comando (CLI) di Amplify viene visualizzata una serie di domande per configurare il servizio di analisi. Premi il tasto Invio per fornire la risposta predefinita a ciascuna domanda. L'output dovrebbe avere il seguente aspetto:

    ➜  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

    Una volta configurata interamente la risorsa, riceverai un output simile a questo:

    Successfully updated auth resource locally.
    Successfully added resource photogallery locally

    L'aggiunta del servizio di analisi aggiornerà la nostra categoria di autorizzazione. Saremo in grado di dare conferma prima di configurare il back-end eseguendo questo comando:

    amplify push

    Dovremmo ricevere un report sullo stato delle modifiche apportate alla nostra applicazione 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

    Una volta che la risorsa di analisi è stata configurata nel back-end, dovresti visualizzare un messaggio di corretta esecuzione con un link al pannello di controllo Pinpoint dell'applicazione:

    ✔ 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
    

    Fai clic per visualizzare il pannello di controllo. Dovrebbe avere il seguente aspetto:

    FlutterApp-Module5Photo1

    Controlleremo di nuovo il pannello di controllo dopo aver registrato alcuni eventi di analisi.

  • Installazione della dipendenza

    In Visual Studio Code, apri pubspec.yaml e aggiungi Amplify Analytics come dipendenza:

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

    Ora salva il file in modo che Visual Studio Code installi il plug-in Amplify Auth Cognito. Se la dipendenza non viene installata al momento del salvataggio, puoi anche eseguire $ flutter pub get dal terminale.

    L'output dovrebbe essere questo:

    exit code 0
  • Configurazione del plug-in

    Apri main.dart e aggiungi il plug-in Analytics all'istanza di Amplify utilizzata per configurare gli altri plug-in:

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

    Esegui l'app. Nei log, dovresti visualizzare il messaggio di corretta esecuzione, che indica che Amplify è ancora configurato correttamente e include il plug-in Analytics.

    flutter: Successfully configured Amplify 🎉
  • Implementazione della funzionalità

    Con Amplify Analytics è estremamente facile registrare eventi di analisi eseguendo comandi come questo:

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

    Tuttavia, può diventare noioso continuare a definire e creare eventi in punti arbitrari dell'applicazione. Per questo motivo, definiremo tutti gli eventi di analisi in un unico file e creeremo per ogni evento il relativo oggetto.

    Crea un nuovo file chiamato analytics_events.dart e aggiungi i seguenti elementi:

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

    Creando AbstractAnalyticsEvent, possiamo creare oggetti di eventi analitici personalizzati con una proprietà comune, il valore, che conterranno l'istanza AnalyticsEvent. Con una sola riga di codice, saremo in grado di avviare le istanze di un AbstractAnalyticsEvent, mantenendo i dettagli dell'implementazione in un unico file.

    Possiamo fare un passo avanti. Creiamo un AbstractAnalyticsEvent da utilizzare quando un utente scatta una foto, ma diamo anche la possibilità di tracciare se viene utilizzata la fotocamera anteriore o posteriore del suo dispositivo. Per poterlo fare, dobbiamo prima aggiungere un altro costruttore, in modo che AbstractAnalyticsEvents accetti un AnalyticsEvent come parametro.

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

    Ora possiamo implementare 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. Creiamo un costruttore privato chiamato _fromEvent che ci permetterà di chiamare il super costruttore che accetta un AnalyticsEvent come parametro.
    2. Il costruttore di fabbrica sarà quello che useremo per creare questo evento e accetterà un parametro String, consentendoci di includere la direzione della fotocamera come proprietà dell'AnalyticsEvent.

    Ora creiamo un oggetto con la possibilità di trasformare un'istanza di AbstractAnalyticsEvent in un AnalyticsEvent. Crea un nuovo file chiamato analytics_service e aggiungi i seguenti elementi:

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

    Il funzionamento di AnalyticsService è semplice, ha un metodo statico chiamato log che acquisisce un AbstractAnalyticsEvent e passa il valore ad Amplify.Analytics. È tutto.

    Ora possiamo implementare ciascuna delle nostre classi AbstractAnalyticsEvent concrete.

    Aggiungi LoginEvent alla funzione _login in login_page.dart:

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

    Aggiungi SignUpEvent alla funzione _signUp in sign_up_page.dart:

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

    Aggiungi VerificationEvent alla funzione _verify in verification_page.dart:

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

    Aggiungi ViewGalleryEvent al costruttore in gallery_page.dart:

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

    Infine, aggiungi TakePictureEvent a _takePicture in camera_page.dart:

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

    Siamo in grado di passare la lensDirection al nostro evento in quanto il costruttore utilizza un argomento di stringa.

    Esegui l'applicazione e prova a individuare tutti i diversi eventi in modo che siano registrati almeno una volta.

    Una volta attivati alcuni degli eventi di analisi da registrare, passa al pannello di controllo di Pinpoint. Se hai chiuso la finestra, puoi tornare indietro eseguendo questo comando:

    amplify console

    Dovresti visualizzare la panoramica del progetto Amplify:

    FlutterApp-Module5Photo2

    Passa alla scheda Analytics (Analisi) e fai clic sul pulsante "View in Pinpoint (Visualizza in Pinpoint)":

    FlutterApp-Module5Photo3

    Nella sezione relativa agli eventi di analisi, dovresti visualizzare la quantità di eventi di analisi registrati:

    FlutterApp-Module5Photo4

    In questo caso, nell'applicazione della galleria fotografica abbiamo attivato 20 eventi diversi, il che dimostra che Amplify Analytics è stato implementato correttamente.

    Puoi aggiungere anche altri eventi o rendere quelli esistenti più complessi. A questo punto, sarai in grado di comprendere perfettamente in che modo gli utenti interagiscono con la tua applicazione e individuare le aree che richiedono un miglioramento.

Conclusione

Hai creato un'applicazione Flutter utilizzando AWS Amplify! Ora che la galleria fotografica è completa e che hai implementato i servizi di autenticazione, storage e analisi, restano pochi passaggi da seguire: rendere il codice pubblicamente visibile, espandere il progetto su un'altra piattaforma o eliminare il progetto.

In questo modulo, esamineremo i passaggi necessari per completare l'attività.

  • Condivisione sicura del progetto

    Se desideri che altri utenti possano visualizzare l'applicazione della galleria fotografica ospitando il codice su un repository pubblico o accessibile ad altri in generale, ti suggeriamo di rimuovere dal progetto le informazioni sensibili che potrebbero determinare un abuso delle tue risorse AWS. La maggior parte dei file sensibili è già elencata in .gitignore, ma ti suggeriamo di verificare che queste due righe siano incluse nel repository:

    amplify/
    **/amplifyconfiguration.dart

    Queste righe garantiscono che la directory Amplify e il file amplifyconfiguration.dart non vengano inclusi quando inserisci il codice in un repository.

  • Condivisione del back-end

    AWS Amplify consente di condividere facilmente il back-end di configurazione di Amplify su più piattaforme o con i membri del team. Se desideri creare l'applicazione in una nuova piattaforma, ad esempio sul Web, basta accedere alla directory root del progetto ed eseguire il seguente comando:

    ? 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

    Sopra viene riportato l'output che verrebbe emesso se dovessi scegliere una piattaforma JavaScript con React.

    Se prevedi di lavorare in team, eseguirai comunque il comando $ amplify pull, ma il membro del team dovrà avere accesso allo stesso profilo AWS in cui è archiviata l'applicazione della galleria fotografica di Amplify.

  • Eliminazione del progetto

    Se hai finito di lavorare al progetto e non prevedi ulteriori modifiche, dovresti considerare la possibilità di eliminare l'applicazione Amplify. In questo modo le tue risorse non subiranno abusi qualora qualcuno ottenga l'accesso alle credenziali dei tuoi progetti.

    Per eliminare tutti i file locali associati ad Amplify ed il progetto Amplify nel back-end, esegui il comando seguente:

    amplify delete

    Se continui con l'eliminazione del progetto Amplify, visualizzerai un output come questo:

    ✔ Project deleted in the cloud
    Project deleted locally.

    ⚠️ Questa azione non può essere annullata. Una volta eliminato il progetto, non è possibile ripristinarlo e sarà necessario riconfigurare le categorie e i file di configurazione del progetto per utilizzarlo nuovamente.

Grazie per aver seguito questo tutorial fino alla fine. Inviaci il tuo feedback utilizzando lo strumento in basso.

Questo modulo è stato utile?

Grazie
Facci sapere cosa ti è piaciuto.
Chiudi
Spiacenti di non esserti stati d'aiuto
C'è qualcosa di obsoleto, ambiguo o approssimativo? Aiutaci a migliorare questo tutorial con il tuo feedback.
Chiudi

Complimenti!

Hai creato un'applicazione Flutter in AWS! Il passo successivo è approfondire le tecnologie specifiche di AWS e migliorare ulteriormente la tua applicazione.