Acerca de...

¿No encontraste ese plugin?

¡Desarróllalo tu!

Una introducción al desarrollo de plugins nativos

Agenda

Algo de historia
¿Qué es Cordova?
¿Qué es un plugin?
Lo que necesitamos
Creando nuestro primer plugin
Estructura
Configuración
Integración
Demo
Sugerencias
Errores comunes
Q&A

Algo de historia...

Aplicación móvil
Se debe integrar a una aplicación nativa existente
Nativa Android
Nativa en iOS
Detecte ubicación del usuario
Que se integre a una aplicación híbrida existente

Algo de historia...

Aplicación móvil
Híbrida
Android
iOS
Autenticación
Que abra la aplicación desde email
Que reproduzca videos online
Que grabe videos y los suba a un servidor
Que la calidad de los videos sea configurable desde backend

¿Qué es Cordova?

Conjunto de herramientas de línea de comandos y plantillas contenedoras por plataforma que nos permiten construir aplicaciones móviles nativas que pueden ser publicadas en tiendas y que ejecutan código JavaScript en un webview.

¿Qué es un plugin?

Un plugin es un conjunto de código JavaScript que ejecuta código Nativo de las plataformas y que nos permite acceder a funcionalidades nativas de los dispositivos que no tienen correspondencia con las Web API existentes.

¿Qué necesitamos?

iOS
- Xcode 8+
Android
- Android Studio 2.3+(Recomendable 3)
Plugman(Opcional)

Ionic 3 with Cordova Tools

Conocimiento de las Apis nativas para la plataforma que en la que queramos desarrollar

npm install -g plugman

npm install -g ionic

Y/O

Mucha paciencia
Mucho Stackoverflow(SODD)

Creando nuestro primer plugin

$ plugman --help

$ plugman create --name <pluginName> --plugin_id <pluginID> 
--plugin_version <version> [--path <directory>] [--variable NAME=VALUE]

Parameters:

 - <pluginName>: The name of the plugin
 - <pluginID>: An ID for the plugin, ex: org.bar.foo
 - <version>: A version for the plugin, ex: 0.0.1
 - <directory>: An absolute or relative path for the directory 
   where the plugin project will be created
 - variable NAME=VALUE: Extra variables such as description or Author

Creando nuestro primer plugin


 plugman create --name testplugin --plugin_id com.aresdev.testplugin


 plugman createpackagejson .

1. Generamos nuestro plugin

3. Generamos el archivo package.json, este paso es necesario para poder instalarlo en nuestra aplicación Ionic


 plugman platform add --platform_name android

2. Agregamos la plataforma deseada(android en este caso)

Estructura del plugin

Configuración del plugin

Integración

ionic cordova plugin add ../testplugin

ionic start testapp blank

declare var cordova: any;

3. Hacemos feliz a Typescript :P

1. Creamos nuestra aplicación Ionic

2. Instalamos nuestro plugin a la aplicación

Integración

cordova.plugins.testplugin.coolMethod('Hello Angular Medellín', (response)=>{
      this.responseString = response;
    });

4. Realizamos el llamado a nuestro plugin

Flujo de trabajo simplificado

Sugerencias

Encapsular la funcionalidad que queremos implementar
Si es una funcionalidad que necesita una o más pantallas, se sugiere la creación de:
- .framework - iOS
- .aar - Android
Explorar código fuente otros plugins
Uso de delegates en iOS
Uso de startActivityForResult

Errores comunes

Si debemos actualizar nuestra interfaz(botón, label, etc) es posible que necesitemos usar ngZone o detectChanges para forzar la actualización, ya que en ocasiones la ejecución del plugin se realiza por fuera de los ciclos de Angular.

En Android, verificar los namespaces or import packages al pasar la funcionalidad al plugin
En Android, los recursos que se acceden a través de R no funcionan, es necesario configurarlos desde el JavaScript o quemarlos en el código con su correspondiente valor int.
En iOS si trabajamos con swift debemos crear nuestras clases públicas y con el decorado @objc, esto hace que sean accesibles desde código Objective-C que es como está construido Cordova.