Introducción a AWS

Crear una aplicación Flutter

Crear una aplicación Flutter sencilla con AWS Amplify

Módulo 5: agregar una categoría de análisis

En este módulo, agregará una categoría de análisis, creará eventos personalizados y verá el seguimiento de sus análisis.

Introducción

La aplicación Photo Gallery ahora es completamente funcional con la capacidad de autenticar a un usuario y permitirle tomar fotografías que se cargan en el almacenamiento. Ahora debemos centrarnos en registrar análisis para comprender cómo los usuarios interactúan con nuestra aplicación.

En este módulo, agregaremos la categoría de análisis a nuestra aplicación de Amplify, crearemos eventos de análisis personalizados, implementaremos esos eventos y visualizaremos el panel de Amazon Pinpoint para ver el seguimiento de nuestro análisis.

Lo que aprenderá

  • Crear la categoría de análisis
  • Registrar eventos de análisis en Amazon Pinpoint
  • Visualizar el panel de Amazon Pinpoint

Conceptos clave

Análisis: registrar cuándo ocurren los eventos para cada instancia de la aplicación puede ser una forma valiosa de recopilar análisis sobre el comportamiento del usuario, lo que lleva a comprender mejor qué funciones son las más importantes para la aplicación.

 Tiempo de realización

10 minutos

 Servicios utilizados

Implementación

  • Crear el servicio de análisis

    Agregue el servicio de análisis a su proyecto de Amplify mediante la ejecución de lo siguiente en la terminal en el directorio raíz de su proyecto:

    amplify add analytics

    La CLI de Amplify formulará una serie de preguntas para configurar el servicio de análisis. Presione la tecla Enter (Intro) para proporcionar la respuesta predeterminada a cada pregunta. El resultado debería verse así:

    ➜  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 vez que el recurso de autenticación esté totalmente configurado, obtendrá un resultado como el siguiente:

    Successfully updated auth resource locally.
    Successfully added resource photogallery locally

    Tenga en cuenta que agregar análisis actualizará nuestra categoría de autenticación. Podremos confirmar esto antes de configurar el backend al ejecutar:

    amplify push

    Deberíamos obtener un informe del estado de los cambios realizados en nuestra aplicación 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

    Después de configurar el recurso de análisis en el backend, debería ver un mensaje de éxito junto con un enlace al panel de Pinpoint de su aplicación.

    ✔ 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
    

    Haga clic en el enlace para ver el panel. Debería verse así:

    FlutterApp-Module5Photo1

    Volveremos a ver el panel luego de registrar algunos eventos de análisis.

  • Instalar la dependencia

    En Visual Studio Code, abra pubspec.yaml y agregue análisis de Amplify como una dependencia.

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

    Ahora, guarde el archivo para que Visual Studio Code instale el complemento Cognito de autenticación de Amplify. También puede ejecutar $ flutter pub get desde la terminal si la dependencia no está instalada al guardar.

    Debería obtener un resultado de:

    exit code 0
  • Configurar el complemento

    Abra main.dart y agregue el complemento de análisis a la instancia de Amplify utilizada para configurar los otros complementos.

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

    Ejecutar la aplicación. Debería seguir viendo el mensaje de éxito en los registros que indica que Amplify está bien configurado y el complemento de análisis está incluido.

    flutter: Successfully configured Amplify 🎉
  • Implementar la funcionalidad

    El análisis de Amplify hace que sea extremadamente fácil registrar eventos de análisis al hacer algo como esto:

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

    Sin embargo, la definición y la creación de eventos en puntos arbitrarios de la aplicación pueden resultar tediosas de mantener. En cambio, definiremos todos los eventos de análisis en un solo archivo y haremos que cada evento sea su propio objeto.

    Cree un nuevo archivo llamado analytics_events.dart y agregue lo siguiente:

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

    Al crear AbstractAnalyticsEvent, podemos crear objetos de eventos de análisis personalizados que tienen una propiedad o un valor común que contendrá la instancia de AnalyticsEvent. Con una línea de código, podremos crear una instancia de AbstractAnalyticsEvent y mantener los detalles de implementación en un solo archivo.

    Podemos dar un paso más. Vamos a crear un AbstractAnalyticsEvent para cuando un usuario tome una foto y también le daremos la capacidad de detectar si el usuario usó la cámara frontal o trasera de su dispositivo. Para poder lograr esto, primero necesitamos agregar otro constructor para que AbstractAnalyticsEvents acepte un AnalyticsEvent como parámetro.

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

    Ahora podemos implementar 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. Creamos un constructor privado llamado _fromEvent que nos permitirá llamar al superconstructor que acepta un AnalyticsEvent como parámetro.
    2. El constructor Factory que usaremos para crear este evento acepta un parámetro String, lo que permite incluir una dirección de cámara como una propiedad del AnalyticsEvent.

    Ahora creemos un objeto con la capacidad de convertir una instancia de nuestro AbstractAnalyticsEvent en un AnalyticsEvent. Cree un nuevo archivo llamado analytics_service y agregue lo siguiente:

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

    AnalyticsService es simple, tiene un método estático llamado log que tomará un AbstractAnalyticsEvent y pasará el valor a Amplify.Analytics. Eso es todo.

    Ahora podemos implementar cada una de nuestras clases AbstractAnalyticsEvent concreadas.

    Agregue LoginEvent a la función _login en login_page.dart.

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

    Agregue SignUpEvent a la función _signUp en sign_up_page.dart.

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

    Agregue VerificationEvent a la función _verify en verify_page.dart.

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

    Agregue ViewGalleryEvent al constructor en gallery_page.dart.

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

    Por último, agregue TakePictureEvent a _takePicture en camera_page.dart.

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

    Podemos pasar lensDirection a nuestro evento, ya que el constructor toma un argumento de cadena.

    Ejecute la aplicación e intente acceder a todos los diferentes eventos para que se registren al menos una vez.

    Una vez que haya activado algunos de los eventos de análisis para que se registren, diríjase al panel de Pinpoint. Si ha cerrado esa ventana, puede volver si ejecuta lo siguiente:

    amplify console

    Debería ver la descripción general de su proyecto de Amplify.

    FlutterApp-Module5Photo2

    Navegue a la pestaña Analytics (Análisis) y haga clic en el botón View in Pinpoint (Ver en Pinpoint).

    FlutterApp-Module5Photo3

    Navegue a la sección de eventos de análisis donde debería poder ver cuántos eventos de análisis se registraron.

    FlutterApp-Module5Photo4

    En este caso, pude activar 20 eventos diferentes en la aplicación Photo Gallery, lo que demuestra que hemos implementado con éxito el análisis de Amplify en nuestra aplicación.

    Siéntase libre de agregar aún más análisis o hacer que los actuales sean más detallados. Entonces podrá comprender realmente cómo los usuarios interactúan con su aplicación para saber en qué áreas enfocarse para mejorar.

Conclusión

¡Ha creado una aplicación Flutter con AWS Amplify! Ahora que Photo Gallery está terminada y ha implementado los servicios de autenticación, almacenamiento y análisis, puede optar por alguna de las siguientes opciones: hacer que el código sea visible públicamente, expandir el proyecto a una plataforma diferente o eliminar el proyecto.

En este módulo, exploraremos los pasos necesarios para llevar a cabo cada una de estas opciones.

  • Comparta su proyecto de forma segura

    Si desea que otras personas puedan ver la aplicación Photo Gallery al alojar el código en un repositorio público o accesible para otras personas en general, se recomienda que elimine la información confidencial de su proyecto que podría hacer que abusen de sus recursos de AWS. La mayoría de los archivos confidenciales ya deberían aparecer en .gitignore, pero se recomienda que se asegure de que estas dos líneas estén incluidas en su repositorio:

    amplify/
    **/amplifyconfiguration.dart

    Estas líneas asegurarán que el directorio amplify y el archivo amplifyconfiguration.dart no se incluyan al enviar su código a un repositorio.

  • Compartir su backend

    AWS Amplify facilita compartir su backend de Amplify configurado en múltiples plataformas o con miembros del equipo. Si está buscando crear la aplicación en una nueva plataforma, web por ejemplo, simplemente navegue hasta el directorio raíz de su proyecto y ejecute el siguiente 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

    Lo anterior es el resultado si tuviera que elegir una plataforma JavaScript con React.

    Seguiría ejecutando $ amplify pull si tiene la intención de trabajar en un equipo, pero el miembro del equipo debería tener acceso al mismo perfil de AWS donde se almacena la aplicación Amplify Photo Gallery.

  • Eliminar el proyecto

    Si ha terminado con el proyecto y no tiene la intención de trabajar más en él, debería considerar eliminar la aplicación Amplify. Esto garantiza que no abusen de sus recursos en caso de que alguien obtenga acceso a las credenciales de sus proyectos.

    Para eliminar todos los archivos asociados locales de Amplify y el proyecto de Amplify en el backend, ejecute el siguiente comando:

    amplify delete

    Si elimina el proyecto de Amplify, obtendrá un resultado como este:

    ✔ Project deleted in the cloud
    Project deleted locally.

    ⚠️ Esta acción no se puede deshacer. Una vez que se elimine el proyecto, no podrá recuperarlo y tendrá que volver a configurar las categorías y los archivos de configuración del proyecto si necesita usar el proyecto nuevamente.

Gracias por haber seguido este tutorial hasta el final. Háganos saber sus comentarios con la siguiente herramienta.

¿Este módulo le resultó útil?

Gracias
Indíquenos lo que le gustó.
Cerrar
Lamentamos haberlo decepcionado
¿Hay información desactualizada, confusa o inexacta? Ayúdenos a mejorar este tutorial con sus comentarios.
Cerrar

¡Felicitaciones!

¡Creó correctamente una aplicación Flutter en AWS! Como paso siguiente, profundice aún más en las tecnologías específicas de AWS y lleve su aplicación al siguiente nivel.