Por Miguel Merelli, Desarrollador FrontEnd en Fx2
Previamente comentamos sobre IONIC y algunas de las ventajas que nos motivan a elegirlo para plataforma para desarrollo de aplicaciones móviles y aplicaciones hibridas.
El propósito del siguiente post es brindarles una guía básica para crear un plugin de Capacitor para Ionic, en el cual, por el momento, solo contemplaré Android.
Indagar y conocer sobre este tema me ha llevado varios días de investigación, ya que gran parte de lo que encontraba ya era obsoleto, es una tecnología que está actualizándose constantemente.
De esta manera, espero que el siguiente post ayude a personas que quieran crear un pluing en Capacitor y no sepan cómo comenzar. El ejemplo que les compartiré fue probado y puesto en práctica en setiembre del 2021, por lo que es garantía de que funciona.
Comandos varios comunes Ionic
Recopilación de algunos de los comandos más usados en ionic y otros que pueden ser de utilidad.
npm init @capacitor/plugin | Crea un plugin capacitor base |
npm install | Instala las dependencias del package.json |
npm run build | Genera el plugin importable |
ionic start myApp | Genera un proyecto App nuevo |
ionic build | Genera/actualiza la plataforma www |
ionic cap add android | Genera la plataforma android |
ionic cap open android | Abre el proyecto de android con Android Studio |
ionic cap sync | Sincroniza el proyecto de ionic con la app Nativa |
Crear proyecto ionic
Crear un proyecto ionic, esta app va a consumir el plugin que crearemos.
Luego de crear el proyecto, entrar a la carpeta de la App cd exampleApp y levantar en el browser local ejecutando ionic serve
Si no hay ningún error, se debe abrir una pestaña del navegador con la App así: 
Luego lo matamos para continuar Ctrl + C
Crear plugin base capacitor
Ahora creamos el plugin base para Capacitor para que muestre una pantalla con pasaje de parámetros.
Parados en la carpeta base (al lado de la App) ejecutamos el siguiente comando en la terminal:
Nos va a hacer una serie de preguntas como nombre en NPM y la url del repo.
Como debe quedar tras la creación del plugin
Instalación de dependencias
Entramos a la carpeta del plugin cd example-capacitor e instalamos las dependencias con npm install
Dentro del ./src tenemos 3 .ts importantes:
- definitions.ts: Se colocan las definiciones de los métodos a utilizar en el plugin
- index.ts: No se toca
- web.ts: Se colocan lo que va a ejecutar si se corre en un navegador web.
Declarar definición del método (definitions.ts)
En el archivo definitions.ts declaramos el método que usaremos para desplegar un activity más adelante (solo copiar la línea con color):
Declarar método para browsers (web.ts)
En el archivo web.ts declaramos el método se ejecutará cuando se corra la App en un browser (ej: PWA).
En el caso de web, no es compatible, por lo que se mostrará un log de consola para verificar que llega el parámetro y retornaremos el result con el texto.
Luego corremos el comando npm run build. Para generar el importable en el proyecto de la App.
Instalar plugin en exampleApp
Llegados a este punto, tenemos por un lado la App básica corriendo localmente en el browser y por otro lado el plugin que por el momento solo mostrará en consola él parámetro y que no es compatible con el browser.
Para instalar el plugin correr npm install ../example-capacitor dentro de la carpeta de la App.
En las dependencias de la App (Package.json), el plugin se vera de la siguiente forma:
Utilizar plugin
Colocaremos un botón en la vista de home.html para lanzar el evento del plugin con el método openActivity():
Integrar plugins nativos a la App
Primero precompilamos la app corriendo ionic build. dentro de la carpeta de la app (exampleApp en este caso).
Luego de que haya generado/actualizado la carpeta www ejecutar ionic cap sync android
Éste comando actualiza la carpeta android en la raíz del proyecto, el cual se puede abrir con android studio, siendo el mismo el siguiente paso:
Abrir el proyecto con android studio: ionic cap open android
Si levantamos la app en el navegador ionic serve. se verá así:
En la consulta se puede ver que se muestra “Text: Hello word!” que lo escribe el plugin mismo.
También se ve el result: con el texto “Browser not compatible” que lo retorna el plugin.
El plugin funciona correctamente por ahora.
En el archivo: android/app/src/main/java/io/ionic/starter/MainActivity.java agregar el método onCreate()
Código nativo Android
Primero vamos a crear la Activity nueva para mostrar desde la App.
Ir al proyecto de android del Plugin con Android Studio:
Crear una Activity (empty) y colocar un texto para probar
En el package del plugin clic derecho > New > Activity > Empty Activity
Crear método para desplegar la activity
En el archivo com/fx2/plugins/example/ExamplePlugin.java implementar el método showActivity
El mismo levanta el Activity que creamos y le pasa el parámetro con el “Hello Word”
Desplegar texto con Hello Word
En el archivo com/fx2/plugins/example/ExampleActivity.java procesar el parámetro y cargarlo en un TextView.
En el diseñador del activity (example-capacitor/res/layout/activity_example.xml), colocar un TextView y asignarle como id textoPantalla
Salvar todos los cambios y ejecutar:
Notas importantes
Tras tener un ejemplo ya corriendo y funcionando, si se quieren hacer cambios en el código:
Si se cambia el código de Ionic (app):
Se debe buildear y sincronizar el proyecto ionic build. y después ionic cap sync.
Sincronizar NO MODIFICA EL PLUGIN NI LA IMPLEMENTACIÓN DE LA MISMA EN EL MainActivity.
Si se cambia el código en el plugin nativo (typescript -> definitions, web, etc…):
Se debe volver a correr el comando npm run build. en la raíz del plugin.
Si se cambia el código en el plugin nativo (android):
Solamente Ctrl + S para salvar 