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!?

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!

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!🎊

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

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!

  • 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!🥳

Solución de Problemas🛠️

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

Software Engineer, currently working as Xamarin Mobile Developer🙈, ❤’s sharing knowledge, food, sports, learning new things, and growing the community!

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store