Generalidades

Compilación de Android con Flutter y AWS Amplify: Parte 3 | Autor: Derek Bingham | Agosto de 2021

1*1LMvY J5MGSkUpid480Fw

Esta es la última parte de una serie de tres partes sobre la creación de aplicaciones móviles de Android con Flutter y AWS Amplify. En la primera parte, usamos Flutter para crear una aplicación de lista de compras para construir nuestra interfaz de usuario, y luego usamos Amplify Datastore para agregar sincronización de datos fuera de línea a la aplicación. Luego, en la segunda parte, creamos una interfaz de usuario de inicio de sesión / registro en Flutter e implementamos el proceso de autenticación de back-end a través de Amazon Cognito utilizando la categoría Amplify Auth.

En la última parte de esta serie, completaremos la solicitud agregando dos funciones adicionales de nuestra lista de tareas pendientes:

  1. Se agregó la capacidad de almacenar imágenes de perfil de usuario en la nube.
  2. Agregue la capacidad de usar análisis para rastrear el comportamiento del usuario.

¿Qué vamos a construir?

En este artículo, comenzaremos a construir un flujo de pantalla que nos permita agregar imágenes a la interfaz de usuario del perfil de usuario.Haga clic en ‘Cambiar avatar’ Comenzará Galería de Android Y nos permite seleccionar una imagen, una vez seleccionada una imagen, volveremos a la pantalla de perfil y mostraremos la imagen seleccionada. Además de mostrarse, la imagen también se cargará en el back-end de la aplicación para que los usuarios puedan mantener sus imágenes de perfil en todos los dispositivos.

Como siempre, el primer paso del proceso es crear la interfaz de usuario en Flutter. Establecer’Widget de imagen de perfil‘Necesitamos dos widgets, 1 / un widget de contorno circular para ver la imagen, 2 / un botón para iniciar la vista de la galería de Android para que podamos seleccionar una nueva imagen. El código de la interfaz de usuario se ve así

profile_view.dart

Entonces, aquí están los dos widgets en la vista de perfil; como puede ver, usamos BLoC para pasar el objeto de estado a la interfaz de usuario. En este caso, una vez que tomemos nuestra imagen de la galería del teléfono, el objeto de estado almacenará nuestra imagen.Si también miramos el código del botón, podemos ver que la llamada para abrir la galería va a Cambiar solicitud de avatar () Método: veamos a continuación.

profile_bloc.dart

Entonces en Profile BloC mapEventToState () Método si Solicitud de cambio de rostro Llega el incidente y estamos haciendo algo.

  1. utilizar _Selector de imágenes configurar Imagen seleccionada
  2. Pasar la imagen a Repositorio Para cargar
  3. Utilice imageKey para actualizar los objetos de usuario a imágenes
  4. Actualice el perfil de usuario y obtenga la URL de la imagen cargada.

Por esta razón, nos falta algo que debe configurarse, a saber _Selector de imágenes con uno RepositorioAsí que hagamos esto a continuación.

Entonces, el selector de imágenes es un paquete que abrirá la aplicación Galería de Android y nos permitirá seleccionar imágenes. Podemos obtener esta característica del repositorio de paquetes pub.dev de Flutter, y queremos llamarlo image_picker. Si navegamos hasta el paquete image_picker en pub.dev, veremos las instrucciones de instalación para Android.

image_picker instrucciones de instalación de Android

Así que todo lo que tenemos que hacer es instalar Selector de imágenes Para usarlo en nuestro dispositivo Android, agréguelo a pubspec.yml.

Crea un repositorio

Como en el artículo anterior, usamos el patrón de repositorio para envolver y abstraer las llamadas a la API del mecanismo de almacenamiento subyacente. En el caso de los repositorios, estamos extrayendo las funciones / categorías de almacenamiento de AWS Amplify. Así que instalemos la categoría antes de continuar.

Para hacer esto, ejecutamos los siguientes comandos desde la terminal en el proyecto.

amplify add storage

Luego se nos pide que ingresemos algunos valores. Excepto por la pregunta de «quién debería tener acceso», principalmente elegimos el valor predeterminado. Solo seleccionamos usuarios de autenticación y les otorgamos permisos CRUD completos.

Una vez que estemos satisfechos con él, llamamos

amplify push

Envíe todos estos cambios a la cuenta de AWS y configure un bucket de S3 para que los archivos que cargamos utilicen el control de acceso correcto integrado.

Agregar dependencias y llamadas a la API
Lo siguiente que debemos hacer es cambiar ‘pubspec.yml’ para agregar el complemento amplifier_storage_s3, y luego actualizar_Zoom de configuración () Métodos en main.dart.Ahora la llamada a AmplifyStorageS3 debería agregarse así

Después de agregar una nueva biblioteca Selector de imágenes y amplify_storage_s3 , Nuestro pubspec.yml ahora debería verse así:

Después de agregar la biblioteca y configurar nuestro backend, la última parte es envolver las llamadas a la API de almacenamiento en el repositorio.

storage_repository.dart

Como puede ver, esto es similar a todos los demás repositorios de la aplicación, porque este repositorio encaja Storage.uploadFile () y Storage.getURL () método Acercar. Tienda api call-también tenga en cuenta que no estamos volviendo a descargar el archivo para ver la imagen, sino usando Flutter Imagen web Widgets (ver profile_view.dart mas que)

Ahora, en la última parte de nuestro viaje, agregaremos algunos análisis a nuestra aplicación para que podamos rastrear cómo nuestros usuarios realmente usan la aplicación. Con este fin, implementaremos un conjunto de análisis rápidos para rastrear el comportamiento del usuario utilizando las categorías de análisis de Amplify.Primero debemos agregarlo a nuestro proyecto siguiendo los pasos habituales, a saber

  1. Corre en la terminal ‘Acercar para agregar análisis‘-Y completa los siguientes consejos

2. Ejecutar en la terminal ‘Agrandar push -y‘- Implementar cambios en el backend. Como todas las demás categorías de Amplify, la categoría Analytics extrae servicios de los desarrolladores para reducir la complejidad de la configuración. En el caso de análisis, el servicio es Amazon Pinpoint, y lo configuramos como un servicio de análisis back-end. También puede transmitir eventos de análisis a una transmisión de Amazon Kenesis y luego implementar otro proveedor para manejar estos eventos en la transmisión.

3. A continuación, agregue ‘amplify_analytics_pinpoint‘Dependencia de pubspec.yml

fragmento pubspec.yaml

4. Por último, actualice el código de configuración de ampliación en main.dart para incluir la nueva clase Analytics.

| Nota: Si todo se hace correctamente, reiniciar la aplicación debería funcionar; si no funciona como se esperaba, verifique Agrandar configuration.dart Este archivo contiene todos los detalles de configuración de la categoría Amplificar. Si la categoría agregada al proyecto no tiene ningún valor de configuración, la aplicación generará una excepción al inicio y proporcionará detalles del contenido que falta.

Suponiendo que todo está bien y la aplicación se está iniciando, el siguiente paso es decidir qué eventos capturar.Para el propósito de esta aplicación, agregaremos lista de la compra Cada usuario. Una gran característica de Amplify Analytics es que puede introspectar los detalles del usuario y agregarlos fácilmente a los eventos que queremos rastrear.Así que configuremos ese evento ahora

Lista de compras Item_view.dart

Aquí, interceptamos llamadas de IU para que los usuarios creen nuevos artículos en su lista de compras.Esta Grabar nuevo evento Luego, el método decorará el evento y lo enviará a Pinpoint.

Lista de compras Item_view.dart

Esto hará algunas decoraciones menores antes de registrar el evento. De manera predeterminada, el evento se actualiza al servicio Pinpoint cada 30 segundos.Este valor predeterminado se puede cambiar dentro Agrandar configuration.dart Si es necesario. Para obtener más información y detalles sobre la información que podemos capturar utilizando la categoría Amplify Analytics, consulte aquí.

Este es nuestro viaje para crear una aplicación de Android Flutter para almacenar los datos de nuestra lista de compras. En la última parte, agregamos la capacidad de cargar imágenes de perfil y usar análisis para rastrear el comportamiento del usuario. Discutimos la capacidad de extraer componentes existentes de flutter pub.get para interactuar con controles nativos. Luego agregamos la categoría Almacenamiento en Amplify al proyecto, que preestablece un bucket de Amazon S3 con los permisos correctos para almacenar las imágenes de nuestra aplicación. Finalmente, agregamos la categoría Analytics para aprovisionar una instancia de Amazon Pinpoint para almacenar cualquier evento que deseemos para rastrear las interacciones del usuario en el dispositivo.

En esta serie de cursos, hemos visto que Flutter y AWS Amplify se pueden utilizar bien juntos para acelerar verdaderamente el desarrollo de aplicaciones y el ciclo de vida de la entrega. Por lo tanto, al final, puede entregar aplicaciones potentes a los usuarios más rápido que nunca.

Si desea seguir este blog y crear esta aplicación usted mismo, recuerde que puede clonar el código completo de https://github.com/deekob/flutter_droidcon, o puede seguir a Kyle (también conocido como Mil locomotoras) En su excelente lista de reproducción de YouTube # 30daysofflutter

Gracias por leer, y si tiene alguna pregunta, contáctenos en Twitter.

Hasta la proxima vez…

LEER  Estimado FTC, repita conmigo: las plataformas publicitarias no fijan precios

Publicaciones relacionadas

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Botón volver arriba