Aprendiendo a crear Plugins en Xamarin

Hey Compañeros/as!

Recientemente, recibí varios mensajes de la comunidad que me hacian mayormente 2 preguntas: “¿Cómo creaste 2 plugins de Xamarin para la comunidad en estos ultimos meses?” y “¿Cuál fue tue experiencia al crearlos, qué herramientas utilizaste?”, así que la publicación de esta semana está inspirada en esas dos preguntas, y haré todo lo posible por responderlas en su plenitud, ¡esperando que una vez llegues al final de esta publicación también puedas crear tu propio plugin y contribuir con algo nuevo y de utilidad para todos en la comunidad!

Espera. . . Pero ¿Qué es un Plugin!?

Antes de comenzar con el código, debemos primero descubrir que es un plugin y por qué en realidad los necesitamos y utilizamos en Xamarin actualmente (Jajaj, sí, sí, sé que a la mayoria de nosotros nos encanta ir directamente a la parte práctica y ver como se hacen las cosas, pero siempre hay una historia de fondo que es importante para entender que estamos haciendo y por qué lo hacemos).

Un plugin de Xamarin es básicamente un caso de uso común (Feature) que solíamos implementar de forma nativa en nuestros proyectos. Un buen ejemplo, es el que tuve en mi experiencia persona, en la cual noté que cada vez que quería desarrollar una nueva aplicación y permitir que mis usuarios se autentiquen con sus cuentas de redes sociales (Facebook, Google, LinkedIn), podia eventualmente ofrecerles este feature, pero debido a que solo estaban disponibles nativamente en cada plataforma, debia implementar la logica para cada una en cada proyecto por separado (Android, iOS). Poco después de hacerlo en aproximadamente 2 o 3 aplicaciones diferentes, me di cuenta de que literalmente siempre estaba implementando el mismo código una y otra vez en cada una de mis aplicaciones para habilitar esencialmente el mismo conjunto de features.

Por lo tanto, me pude dar cuenta rápidamente de que debia haber una mejor manera de abstraer mi código y ahorrar tiempo para mi mismo, para mis compañeros de equipo, y cualquier otra persona de la comunidad que tuviera el mismo caso de uso en el futuro.

Y ahí fue cuando comencé a investigar y los plugins entraron a escena, aprendí que los plugins de Xamarin son básicamente:

Los plugins son una interfaz abstracta multiplataforma, que se implementa en varias plataformas móviles y se puede acceder a cada una de ellas mediante Xamarin Forms por el uso del Servicio de Dependencias. [Más información]

Aja!! Exactamente lo que necesitamos, pero ¿cómo podemos crearlos?

Bueno, ¡comencemos a crear un plugin!

Una vez que hayamos identificado nuestro caso de uso (Feature), las siguientes preguntas problematicas que tenemos son: ¿cómo podemos crear nuestro plugin?, ¿cuál es la estructura que deberia tener? y ¿cómo podemos usarlo en nuestros proyectos de Xamarin? Bueno, no estan complicado como parece, ya que tenemos a nuestra disposicion muy buenas plantillas creadas por uno de los miembros de nuestra comunidad James Montemagno y buenas herramientas para facilitarnos el desarrollo, y publicación de nuestros plugins para la comunidad creadas por Microsoft.

Prerrequisitos

Esta es una gran plantilla de plugin y estructura de proyecto creada por James, que nos permite crear una única libreria basada en multi-targeting de plataformas, lo que nos permite dirigirnos facilemnte a Android, iOS y cualquier otra plataforma que deseamos dar soporte en nuestro Plugin. Pero a la vez tambien manteniendo nuestra estructura de proyecto limpia y simplificada.

Estructura de Proyecto:

Como puedes ver, la estructura del proyecto para nuestro complemento es bastante simple, esta conformado por las siguientes carpetas:

Platforms:

Dentro de esta carpeta, es donde tendrémos todas las plataformas soportadas por nuestro plugin, y cada subcarpeta, esta encargada de contener las implementaciones nativas de cada plataforma de nuestro plugin. (Hablaremos un poco mas detallado de esto, más adelante en el post).

Shared:

Esta carpeta compartida es donde vamos a colocar todas nuestas abstracciones y código reutilizable entre nuestras implementaciones, básicamente nuestras interfaces, excepciones, modelos, y cualquier código que desees compartir que no dependa de una plataforma en especifico. (Hablaremos un poco mas detallado de esto, más adelante en el post).

Por último, pero no menos importante, deberíamos revisar la ventaja mas interesante que nos ofrece esta plantilla, y es el archivo .csproj y como esté genera automáticamente nuestro paquete Nuget en una vez compilamos nuestro proyecto del plugin.

Una vez que abra este archivo, veremos algo similar a nuestro archivo de ejemplo GoogleClient.csproj el cual contiene la configuración básica de nuestro plugin y Nuget:

  • Configuraciones base para nuestro archivo de especificaciones Nuget
  • Plataformas soportadas por nuestro plugin.
  • Dependencias requeridas para cada plataforma.

Si deseas obtener más información sobre la estructura de este proyecto, James Montemagno también tiene un muy buen video tratando cada sección en detalle.

Este es básicamente la herramienta que utilizamos para publicar nuestro Plugin una vez, hemos compilado nuestro proyecto y se ha generado nuestro archivo Nuget para publicar en modo lanzamiento.

Ahora si, estamos listos para comenzar!🎊

Una vez tenemos nuestro caso de uso (Feature), plantilla de proyecto y Nuget Package Explorer. Crear nuestro plugin se vuelve tan simple como copiar nuestro código nativo de nuestro caso de uso desde nuestra aplicación Xamarin y agregarlo a nuestra plantilla de Plugin, luego de esto lo publicamos en la Galería Nuget y podremos utilizarlo directamente desde nuestrro proyectos de Xamarin Forms!

Les mostraré cómo hacerlo, utilizando el código de mi Google Plugin como ejemplo, recuerden que siempre pueden visitar el repositorio del proyecto o cualquier otro plugin que este publicado como Open Source, y mirar directamente como fueron implementados y aprender mas de como funcionan.

PASO 1: Agregar la Interfaz de nuestro plugin en la carpeta compartida

PASO 2: Implementar nuestra Interfaz en cada plataforma que soportamos en el proyecto

Android

Codigo completo de implementación puede ser encontrado Aqui.

iOS

Codigo completo de implementación puede ser encontrado Aqui.

PASO 3: Modificar nuestro .csproj y prepararnos para publicar nuestro Plugin!

Antes de publicar nuestro Nuget, debemos estar seguros y volver a verificar que no hay un proyecto existente en la comunidad que ya este dando soporte al feature que queremos publicar, de ser asi es mucho mejor unirnos al proyecto ya existente y colaborar entre todos para hacerlo un proyecto excelente!, de no ser este el caso, debemos asegurarnos que nuestro proyecto cumpla con los requisitos mínimos para ser admitido como un plugin en la Galería Nuget:

  • Nuestro proyecto es OpenSource
  • Posee Documentacion en el README file del GitHub del proyecto
  • El nombre sigue la nomenclatura: “Feature_Name Plugin for Xamarin”
  • Licencia OSS amigable a las App-store (MIT es una de las preferidas por la comunidad)
  • El proyecto no contiene Dependencias de Xamarin Forms en nuestro codigo nativo en cada plataformas
  • Tener una lista de Sistemas Operativas Soportados y No soportados en el Wiki de GitHub del proyecto.

[Lista de Plugins Xamarin Populares]

Agregando Info del Proyecto a nuestras propiedades del CSPROJ

Compilar el Proyecto⚙

Una vez que nuestro proyecto se haya compilado con éxito, ahora podemos encontrar nuestro Nuget list para publicar en nuestra Carpeta del Proyecto > Bin > Release

Ahora solo tenemos que abrir nuestro archivo Nuget, verificar que todos los datos sean correctos, e ir a la opcion de Archivo > Publicar, agregar nuestra clave de publicación de la Galería Nuget y publicar nuestro nuevo Plugin!

CE FINITO!🥳

Y eso es todo, compañeros/as ahora que hemos publicado con éxito nuestro nuevo plugin, todos en lacomunidad podran disfrutar de la colaboración que hemos realizado, e utilizar nuestra implementación a diario en sus projects, una vez que Nuget Gallery haya publicado su paquete con éxito, deberia tener este aspecto. (Nuget Gallery tarda un tiempo en indexar nuestro paquete en su repositorio, alrededor de unos 10 a 15 minutos. Luego de que se elimine la notificación de indexación de nuestra página, podremos descargar nuestro Plugin directamente desde el Nuget Package Manager dentro de nuestro Visual Studio).

Solución de Problemas🛠️

Es posible que tengas algunos problemas al intentar compilar tu proyecto del plugin, esto es probablemente debido a que no estas conectado a tu cliente de Mac, en tu Visual studio (recuerda que para compilar proyectos de iOS necesitamos un cliente de Mac activo, y es por eso que nuestro proyecto no puede compilar por completo hasta que lo activemos).

Pueden aprender como activar tu cliente de Mac Aqui.

Codigo Fuente completo del Google Plugin for Xamarin puede ser encontrado en el repo de GitHub del proyecto.

Made with ♥ by Pujols


Buenas referencias para aprender a hacer tus propios Plugins en Xamarin

Creditos arte de Iconos Mobiles para Banner:
Mobile Icons for the banner of the post made by Freepik