Automatización de procesos en la nube en apps móviles con Xamarin y Azure
Este Taller se realiza en el marco del 1er Congreso Internacional de Innovación, Investigación y Tecnología en Tecnologías de la Información y Comunicación organizado por la Facultad de Ingeniería de la Universidad Nacional de Chimborazo en Riobamba, Ecuador el 14 de Diciembre de 2020.
Descripción: En este taller crearemos una aplicación móvil que permite al usuario tomar una fotografía y subirla a un repositorio. Un proceso en la nube será ejecutado automáticamente para analizar la fotografía, describirla aplicando inteligencia artificial y devolviendo imágenes similares subidas por otros usuarios.
Parte 1. Creación de recursos en Azure
Ingresa al portal de Azure e inicia sesión con tu cuenta. https://portal.azure.com/
1.1 Creación de Azure Resource group
Da clic en el botón Create a resource y teclea Resource group. Una vez localizado el recurso, da clic en el botón Create
El nombre del grupo de recursos es ICTalk-RG y la región es South America (Brazil South).
Da clic en Review + create, y si no hay errores, confirma la operación dando clic en Create.
1.2 Creación de Azure Storage account
De regreso en la página de inicio del portal, da clic en el botón Create a resource y teclea Storage account. Una vez localizado el recurso, da clic en el botón Create.
En el formulario, ingresa la siguiente información:
- Grupo de recurso: ICTalk-RG (elige de la lista)
- Nombre de la cuenta de almacenamiento: Una palabra compuesta por:
- ictalkstorage
- 2 letras de tus iniciales
- 2 digitos cualquiera
- Ejemplo: ictalkstoragelb01
- Nota 1: Todo debe estar en minúsculas, se aceptan máximo 24 caracteres (solo letras y dígitos, no símbolos especiales)
- Nota 2: Este identificador debe ser único de manera universal
- Ubicación: (South America) Brazil South
- Tipo de cuenta: StorageV2 (propósito general)
- Replicación: LRS (opcional, no necesario)
Da clic en Review + create, y si no hay errores, confirma la operación dando clic en Create. Cuando finalice la creación, da clic en Go to resource.
Dentro de la cuenta de almacenamiento, da clic en Containers
Da clic en el botón + Container
Ingresa el nombre imagenes, el nivel de acceso Container (acceso anónimo) y da clic en Create.
Confirma la creación del contenedor en la cuenta de almacenamiento
De regreso a la sección Overview de la cuenta de almacenamiento, da clic en Tables
Da clic en el botón + Table y escribe el nombre analisis. Crea la tabla
Para finalizar esta parte, en la sección Access keys, da clic en el botón Show keys y copia los valores indicados a continuación (usando el botón de la derecha) y pégalos en un bloc de notas.
- Storage account name
- Key 1 Key
- Key 1 Connection string
Estos valores serán utilizados posteriormente por la aplicación móvil y la Azure Function App.
1.3 Creación de Azure Cognitive Services
De regreso en la página de inicio del portal, da clic en el botón Create a resource y teclea Cognitive Services. Una vez localizado el recurso, da clic en el botón Create.
Ingresa los siguientes datos en el formulario:
- Grupo de recursos: ICTalk-RG (elige de la lista)
- Región: Brazil South
- Nombre: Una palabra compuesta por
- ictalkcognitive
- 2 letras de tus iniciales
- 2 digitos cualquiera
- Ejemplo: ictalkcognitivelb01
- Nota 1: Este identificador debe ser único de manera universal
- Esquema de precios: Free (si no ofrece la opción, elige Standard)
- Clic en el checkbox
Da clic en Review + create, y si no hay errores, confirma la operación dando clic en Create. Cuando finalice la creación, da clic en Go to resource.
En la sección Keys and Endpoint, copia la siguiente información usando el botón de la derecha en cada caso. Pégalos en un bloc de notas.
- Key 1
- Endpoint
- Location
Estos valores serán utilizados posteriormente por la Azure Function App.
1.4 Creación de Azure Function App
De regreso en la página de inicio del portal, da clic en el botón Create a resource y teclea Function App. Una vez localizado el recurso, da clic en el botón Create.
En el formulario, ingresa la siguiente información:
- Grupo de recurso: ICTalk-RG (elige de la lista)
- Nombre: Una palabra compuesta por:
- ictalkfunction
- 2 letras de tus iniciales
- 2 digitos cualquiera
- Ejemplo: ictalkfunctionlb01
- Nota: Este identificador debe ser único de manera universal
- Publicación: Código
- Stack runtime: .NET Core
- Versión: 3.1
- Región: (South America) Brazil South
Da clic en Hosting y selecciona la cuenta de almacenamiento ictalkstorage que creaste con anterioridad. El resto de las opciones permanece con los datos predeterminados (Sistema operativo Windows y Tipo de plan Serverless).
Da clic en Review + create, y si no hay errores, confirma la operación dando clic en Create. Cuando finalice la creación, da clic en Go to resource.
En la sección Functions, da clic en el botón + Add
De la lista, realiza la siguiente configuración y da clic en Agregar.
- Selecciona el tipo Azure Blob Storage Trigger
- Escribe el nombre AnalizaImagen
- Ingresa la ruta imagenes/{name}
En la sección Integration, da clic en Add output.
En el formulario, ingresa la siguiente información y da clic en OK.
- Tipo de enlace: Azure Table Storage
- Nombre del parámetro: outputTable
- Nombre de la tabla: analisis
- Conexión a la cuenta de almacenamiento: AzureWebJobsStorage
El resultado es el siguiente:
Ahora, en la sección Code + Test ingresa el siguiente código de C# (disponible aquí), el cual procesa un blob que llega al contenedor imagenes, lo envía al servicio de Visión de computadora (uno de los Cognitive Services disponibles), registra el resultado en la tabla analisis (Table Storage) y devuelve un resultado en formato JSON. NOTA: No olvides reemplazar la llave y endpoint del Servicio Cognitivo (líneas 49 y 50)
Ahora vamos a crear una segunda función que devuelva una lista de imágenes con tags similares al de una imagen que suministremos como entrada.
En la sección Functions, da clic en el botón + Add
De la lista, en esta ocasión realiza la siguiente configuración y da clic en Agregar.
- Selecciona el tipo Http Trigger
- Escribe el nombre BuscaImagenesSimilares
En la sección Integration, da clic en Add input.
En el formulario, ingresa la siguiente información y da clic en OK.
- Tipo de enlace: Azure Table Storage
- Nombre del parámetro: inputTable
- Nombre de la tabla: analisis
- Conexión a la cuenta de almacenamiento: AzureWebJobsStorage
El resultado es el siguiente:
Ahora, en la sección Code + Test ingresa el siguiente código de C# (disponibe aquí), el cual obtiene primero los tags de una entrada específica en la tabla analisis. El resultado es la colección de registros que comparten por lo menos uno de los tags de dicha entrada.
Obtén la URL de esta función dando clic en el botón Get function URL:
Cópiala y pégala en un bloc de notas. Será utilizada en la aplicación móvil.
Con esto hemos concluido la configuración de Azure. Ahora vamos con el desarrollo de la aplicación móvil de Xamarin.
Parte 2. Desarrollo de aplicación móvil cross-platform con Xamarin
2.1 Creación de la solución móvil
Abre Visual Studio 2019 y da clic en Crear un nuevo proyecto.
Localiza el tipo Mobile App (Xamarin.Forms) y da clic en Siguiente.
En la siguiente pantalla, ingresa la siguiente información y da clic en Crear:
- Nombre del proyecto: ICTalkMobileApp
- Ubicación: Elige una ruta corta (recomendado crear una carpeta en raiz y ahí colocar el proyecto)
En la siguiente pantalla elige la plantilla Blank y selecciona los sistemas operativos móviles donde desees probar tu aplicación móvil. Da clic en Crear.
2.2 Configuración del proyecto .NET Standard
Da clic derecho en el proyecto ICTalkMobileApp y crea las siguientes carpetas:
- Models
- ViewModels
- Views
- Services
Da clic derecho en la solución ICTalkMobileApp y selecciona Manage Nuget packages for solution.
En la sección Installed selecciona Xamarin.Essentials y actualízalo a la versión 1.6.0-rc1 eligiendo todos los proyectos de la solución. Da clic en Install y acepta la licencia en caso de que se solicite:
Regresa a la ventana de paquetes Nuget y ahora cambia a Browse. Instala el paquete Newtonsoft.Json (la última versión disponible) en todos los proyectos de la solución. Acepta la licencia en caso de que se solicite:
En la misma pantalla, busca el paquete Azure.Storage.Blobs e instálalo en todos los proyectos (recomendable la última versión estable disponible). Acepta la licencia si se solicita:
Ahora localiza el paquete Microsoft.Azure.Cosmos.Table e instálalo (recomendable la última versión estable disponible) en todos los proyectos. Acepta la licencia si se solicita:
2.3 Configuración específica por plataforma
A continuación hay que configurar cada proyecto de plataforma específica que desees utilizar. Puedes ver en general los cambios que necesitas realizar en cada proyecto a continuación:
2.3.1 Configuración del proyecto de Android
NOTA: Esta sección solo debes realizarla si probarás la aplicación en un emulador o dispositivo físico Android
En el proyecto ICTalkMobileApp.Android, accede a las Properties y añade 3 permisos:
- Camera
- Read External Storage
- Write External Storage
(Si no se presenta la herramienta visual, abre el archivo AndroidManifest.xml y añade los permisos manualmente, según se especifica al inicio de esta sección)
Guarda los cambios
2.3.2 Configuración del proyecto de iOS
NOTA: Esta sección solo debes realizarla si probarás la aplicación en un emulador o dispositivo físico iOS (además, para compilar requires un equipo con MacOS)
En el proyecto ICTalkMobileApp.iOS, abre el archivo Info.plist en modo texto (o XML) y escribe el siguiente bloque de permisos (toma el código respectivo del bloque mostrado al inicio de la sección):
Guarda los cambios.
2.3.3 Configuración del proyecto de UWP
NOTA: Esta sección solo debes realizarla si probarás la aplicación en un emulador de Windows 10
Abre las Properties del proyecto ICTalkMobileApp.UWP y da clic en el botón Package Manifest en la sección Application.
En la pestaña Capabilities, activa Microphone y Webcam.
Guarda los cambios.
2.4 Creando los Modelos
Sobre la carpeta Models da clic derecho y elige Agregar > Clase con el nombre Analisis. El código se muestra a continuación (aunque ya lo conoces, es la definición de la tabla en Azure) y también está disponible aquí:
2.5 Creando los Servicios
Sobre la carpeta Services, añade dos clases: ServicioImagen y ServicioStorage. La clase ServicioImagen.cs permite al usuario capturar una foto usando la cámara o seleccionándola de la biblioteca de medios del dispositivo, y su código es el siguiente (disponible aquí):
La clase ServicioStorage.cs permite subir una imagen al contenedor imagenes de la cuenta de almacenamiento en la nube y también tiene un método para obtener imágenes similares (que comparten al menos un tag). Disponible aquí, se muestra a continuación:
2.6 Creando los ViewModels
En la carpeta ViewModels agrega dos clases: BaseViewModel y AnalisisImagenViewModel. La clase BaseViewModel sirve para notificar cambios entre los modelos y la interfaz de usuario (es la base de MVVM) y está disponible aquí.
Por su parte, AnalisisImagenViewModel es el elemento principal que se comunica con la capa de servicios para brindar la funcionalidad principal de nuestra aplicación móvil. Su código, disponible aquí, es el siguiente:
2.7 Creando las Vistas
En la carpeta Views agrega un nuevo elemento de tipo Content Page llamado AnalisisImagenView.xaml
En esta página defines la interfaz de usuario y conectas el ViewModel anteriormente creado. El código XAML se muestra a continuación, también lo tienes disponible aquí:
2.9 Modificando la página de inicio
En el archivo App.xaml.cs, modifica el constructor para que se muestre la página recién creada:
2.10 Compilando y probando la app
Elige una plataforma (en este caso elegiré Android) y da clic en el botón Ejecutar. Si no hay errores de compilación, la aplicación debería ejecutarse correctamente y mostrarse. A continuación, se muestran capturas de pantalla en secuencia de la app funcionando:
Clic en seleccionar foto (o tomar foto)
Acepta los permisos de la aplicación
Elige la foto o tómala con la cámara
Aparece la foto, da clic en subir imagen
Da clic en obtener similares
En este taller aprendiste a conectar varios servicios de Azure que interactúan para ofrecer una solución de Inteligencia Artificial automatizada. Simplemente envía un archivo a la nube y se desencadena un proceso de análisis y almacenamiento. Posteriormente, puedes obtener imágenes similares o relacionadas.
Espero esta sesión haya sido de tu interés. El código fuente de la aplicación estará disponible muy pronto en mi GitHub.
Saludos,
Luis
