Integrando Google Sheets en una app móvil de Xamarin.Forms a través de Azure Functions

 

Esta publicación es parte del Primer Calendario de Adviento de C# en Español, una iniciativa liderada por Benjamín Camacho. Revisa ésta y muchas más publicaciones interesantes relacionadas con el lenguaje C# publicadas por y para miembros de la comunidad. ¿Quieres ser parte de esta iniciativa apoyando con una publicación en tu blog? ¡Aún hay lugares disponibles! Da clic en el enlace anterior para más información al respecto. 

 

Hoy en día existen diversas opciones para almacenar información: algunas son muy conocidas o tradicionales, como las bases de datos y archivos de texto, y otras poco convencionales pero que con el cómputo en la nube toman una relevancia mayor. Un ejemplo de este caso podrían ser las Google Drive Sheets, que para ciertos proyectos pueden fungir como un almacenamiento de fácil acceso, rápido y sin costo.

 

Aprovechando el poder, muy bajo costo y sobre todo versatilidad de Azure Functions, podemos tener un código/servicio en la nube que lea la información de una hoja de cálculo almacenada en Google Drive y consumir este servicio desde una aplicación. Como ya has de adivinar, lo haremos con una aplicación móvil desarrollada en Xamarin. Eso sí, recuerda que el consumo se puede hacer en cualquier tipo de aplicación y tecnología.

 

La manera de hacerlo es muy sencilla aunque sí se requieren varios pasos, los cuales voy a detallar a continuación. (El código fuente de la app de Xamarin está disponible en mi repositorio de GitHub).

 

¡Manos a la obra!

 

Parte 1. Google Drive Sheets

Paso 1. Accede a tu página de Google Drive y da clic en New.

 

Paso 2. Selecciona Google Sheets y elige el template vacío Blank spreadsheet.

 

Paso 3. Realiza lo siguiente:

a) Coloca un título en la hoja. Para este caso es Video Game Music.

b) El primer renglón de la hoja úsalo para definir las columnas (trátalas como si fueran variables, es decir, sin espacios ni caracteres especiales). Para este demo es Game y Title.

c) Ingresa algunos datos. En este ejemplo he generado 10 registros.

d) Escribe un nombre a la hoja en la parte inferior. En este caso he puesto Songs.

e) Finalmente, toma nota del ID de la hoja ubicado en la dirección URL.

 

Ya hemos preparado nuestra fuente de datos. Ahora vamos a crear el acceso.

 

Parte 2. Azure Functions

Paso 1. Ingresa al portal de Azure y crea una nueva Function App desde el menú Crear recurso –> Proceso.

 

Paso 2. La configuración es muy sencilla:

• El nombre de la app es único (yo usé videogamemusic).
• Te recomiendo que generes un nuevo Grupo de Recursos (advientocsharp-rg por ejemplo)
• También te recomiendo el Plan de Consumo en Hosting Plan a fin de reducir costos.
• En storage también es recomendable crear uno nuevo si no quieres utilizar uno existente.

 

Paso 3. Da clic en Crear y una vez que se provisione el recurso en tu suscripción, da clic en Ir a recurso.

 

Paso 4. En la sección de Overview da clic en Function app settings.

 

Paso 5. Y modifica la versión del Runtime. A fecha de hoy es la 2. Da clic en la versión 1.

Y una vez cambiada la versión, se reflejará la modificación (NOTA: Esto solo es posible con un proyecto de Azure Functions vacío. Si ya tienes un proyecto existente con algunas funciones/códigos, no podrás modificar la versión del runtime)

 

Paso 6. Da clic en el botón de Agregar (+) y selecciona Función personalizada (Custom function) en la sección inferior.

 

Paso 7. Elige el template de HTTP Trigger con el lenguaje C#.

 

Paso 8. Escribe un nombre para tu función, por ejemplo get-songs, y da clic en Crear.

 

Paso 9. Ahora da clic en la opción Integrate y luego en New input. Selecciona External Table (Experimental). Esto representa una fuente de datos que nuestra función podrá leer a través de una conexión.

 

Paso 10. Configura los parámetros de la siguiente manera:

• Data Set Name es el ID de tu Google Sheet del paso 3e de la sección anterior.
• Table Name es el nombre de la hoja donde se encuentran los datos (paso 3d de la sección anterior).
• Para External Table connection requerimos autenticarnos con Google Drive así que damos clic en new.

 

Paso 11. En Api selecciona Google Sheets. Da clic en Connection, después en Create new y luego en el botón Autorizar.

 

Paso 12. Selecciona tu cuenta de Google y permite el acceso a Azure AppService Logic Apps.

 

 

Una vez permitido el acceso, recibirás una notificación.

 

Paso 13. Simplemente confirma la conexión.

 

Paso 14. Y observa cómo aparece una cadena de conexión en External Table connection. Guarda los cambios.

 

Paso 15. ¡Código, por fin! Regresa a get-songs y escribe el código siguiente en el espacio de trabajo. Básicamente estás definiendo un modelo (Song) de los datos que vas a leer. inputTable representa la tabla de datos obtenidos a partir de la conexión con tu Sheet de Google. La lectura es secuencial (foreach) porque el método ListEntitiesAsync devuelve los datos paginados, así que para asegurar que vamos a tener todos los datos de nuestro origen se utiliza un token de continuación, el cual será nulo una vez llegado el apuntador a la última página. Al final, la lista de canciones se devuelve como una cadena serializada en formato JSON de manera automática.

 

 

Da clic en Save and run para que se guarden los cambios y se pruebe el servicio.

 

Paso 16. En la parte inferior de la pantalla verás el resultado de la compilación y ejecución (correcta, sin errores), mientras que del lado derecho aparece la salida en formato json con la información obtenida desde Google Sheets. ¡Funciona!

 

Paso 17. Da clic en Get function URL y copia la dirección generada. La vamos a utilizar en nuestra aplicación para consumir este servicio recién creado.

 

Nota: Si regresas a tu hoja en Google Drive, observarás que se ha creado una columna adicional (__PowerAppsId__) con algunos identificadores. Esta columna la genera Azure Functions al acceder a este origen de datos y es necesaria para mantener el control de la lectura (y edición, como veremos en otra entrada). Aunque la elimines volverá a aparecer…

 

Así que mi recomendación es que simplemente la ocultes.

 

Aunque esté oculta, Azure Functions podrá acceder a ella y ejecutar códigos correctamente (de nuevo te comento, si la eliminas, Azure Functions la volverá a crear así que es mejor no pelearse con ella xD)

 

Parte 3. Xamarin 

Paso 1. Crea una nueva Cross-Platform Mobile App de Xamarin.Forms llamada VideoGameMusicApp.

 

Paso 2. La tecnología de código compartido es .NET Standard y el template es de proyecto vacío. Además, he elegido todas las plataformas.

 

Paso 3. Instala el paquete Nuget Newtonsoft.Json a nivel de solución (todos los proyectos).

 

Paso 4. En el proyecto compartido agrega 5 carpetas: Helpers, Models, Services, ViewModels y Views.

 

Paso 5. En la clase Helpers crea la clase Constantes, la cual tiene dos elementos: La URL base de tu app service y la función. Estos datos los obtienes a partir de la URL de tu Azure Function (paso 17 de la sección anterior). Observa cómo la he partido a continuación

 

Paso 6. Ahora genera la clase Cancion en la carpeta Models (representa el modelo Song que tienes en Azure Functions y que corresponde con la estructura de tu Google Sheet).

 

Paso 7. Lo que sigue es crear la clase ServicioCanciones en la carpeta Services. Esta clase es la importante porque es la que consume la Azure Function a través de la clase HttpClient en el método ObtenerCanciones.

 

Paso 8. En la carpeta ViewModels genera 2 clases: BaseViewModel y CancionesViewModel, las cuales siguen el patrón MVVM (no hay mucho qué decir aquí).

BaseViewModel.cs:

 

CancionesViewModel.cs:

 

Paso 9. Ahora en la carpeta Views agrega una nueva Content Page de Xamarin.Forms. En la interfaz mostramos los datos usando un ListView y en el code-behind se asigna el BindingContext a CancionViewModel, obteniendo los datos con una llamada al método ObtenerCanciones (del View Model). Código a continuación.

 

PaginaListaCanciones.xaml

 

PaginaListaCanciones.xaml.cs:

 

Paso 10. Finalmente, no olvides modificar App.xaml.cs para establecer la página de inicio de la aplicación móvil.

 

Paso 11. ¡Listo! Compila y ejecuta. Observa cómo la aplicación muestra la información de tu Google Sheet (vía Azure Functions).

 

¿Qué tal? Estuvo fácil, ¿no? Como pudiste observar, es muy sencilla la integración entre Google Sheets, Azure Functions y Xamarin para leer datos y mostrarlos en una aplicación móvil.

 

Te recuerdo que el código fuente de esta app está disponible en mi repositorio de GitHub.

 

Seguramente te estás preguntado. ¿Es posible agregar, modificar o eliminar información de la Google Sheet desde la app móvil? La respuesta es ¡Por supuesto! Pero eso lo dejamos para la siguiente publicación 😉 de momento, te daré una pista: CloudTable.

 

Espero que esta publicación haya sido interesante para tí. En caso afirmativo, no dudes compartirla con tus amigos en redes sociales.

 

¡Gracias por tu visita al blog y nos vemos la próxima!

 

Te deseo un excelente fin de semana,

Luis