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...

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.

DEMO

Q&A

Recursos

Código fuente demo

https://github.com/AresDev/angular-medellin-demo

Documentación Oficial Cordova

https://cordova.apache.org/docs/en/latest/guide/hybrid/plugins/index.html

Artículo de acerca de como crear Cordova plugins

https://medium.com/ionic-and-the-mobile-web/how-to-write-cordova-plugins-864e40025f2

Blog post de como escribir Cordova plugins en iOS usando Swift

https://moduscreate.com/blog/writing-a-cordova-plugin-in-swift-for-ios/

Especificación del plugin.xml

https://cordova.apache.org/docs/es/latest/plugin_ref/spec.html

Happy Coding!!!

Made with Slides.com