ngCordova: Envolviendo un plugin de Apache Cordova en AngularJS

687474703a2f2f696f6e69636672616d65776f726b2e636f6d2f696d672f6e67636f72646f76612d636f6e746578742d6c6f676f2e706e67

El desarrollo de aplicaciones móviles multiplataforma cada vez está madurando más y sin duda se ha debido a la aportación de iniciativas como Apache Cordova y de Ionic Framework que han hecho que los desarrolladores de todo el mundo, nos encontremos muchos más cómodos y seguros de lo que hacemos.

Ionic Framework es una plataforma que nos está empezando a aportar muchas posibilidades: Desde contar con un framework de componentes de interfaz optimizados para dispositivos móviles y con las últimas innovaciones de HTML5 y CSS3, hasta la disposición de incorporar en el flujo de trabajo a AngularJS como frameworks JavaScript. Gracias a todo esto, el framework nos está permitiendo ser más rápidos y hacer aplicaciones de gran calidad.

Otra de sus aportaciones a la comunidad ha sido la creación de una librería denominada ngCordova que nos permite el uso de los típicos plugins Cordova para poder tener acceso a los recursos del dispositivo. La librería es un nexo entre los plugins convencionales que se podían usar de toda la vida en JavaScript y AngularJs. ngCordova se comporta como un envoltorio que presenta los plugins como factorías inyectables dentro de nuestros controladores, otros servicios o nuestras directivas.

Actualmente el proyecto cuenta con un buen numero de plugins que han sido envueltos para su uso en AngularJS, sin embargo no se encuentran todos. Puede darse la casualidad que hayamos encontrado aquel plugin que necesitamos para nuestro aplicativo, pero que no se encuentre todavía incorporado en ngCordova.

Aunque el uso de los plugins dentro de nuestros módulos de AngularJs es posible, es considerado una mala práctica. Usar funcionalidad que se encuentra en el ámbito global puede hacer que nuestro código sea poco mantenible y el número de dependencias entre ficheros y módulos crezca.

Además, para mi gusto el inyector de dependencia de AngularJS me parece uno de sus mayores éxitos y el ensuciar el código de está manera nos será perjudicial. De hecho si nos damos cuenta, la propia gente de Google ha creado envoltorios para los propios objetos de windows, console o localStorage por poner solo un ejemplo. Crear envoltorios es una buena práctica para abstraer funcionalidad y para la reutilización de código.

Creando nuestro propio envoltorio

Debido a un proyecto en el que me encuentro embarcado, voy a tener que hacer uso de un plugin que permite la comunicación de los dispositivos móviles con la nueva tecnología denominada Estimote Beacon. El plugin actualmente no se encuentra envuelto por el proyecto ngCordova y me he propuesto usarlo dentro de una aplicación de Ionic Framework con AngularJs. Para ello me he propuesto crear un envoltorio que nos permita inyectar el plugin alli donde lo necesitemos.

Para realizar un envoltorio para AngularJS simplemente tenemos que desarrollar una nueva factoría. El siguiente fragmento de código es la factoría que yo he deseado crear. El código se encuentra reducido para que podamos estudiarlo un poco en detenimiento a continuación:

[gist https://gist.github.com/jdonsan/5ac200b3f631bbc1944d /]

Vayamos por partes:

  • Fijémonos en la linea 1: Lo primero que hacemos es encerrar nuestra implementación dentro de una funciona anónima que se autoejecuta. Este ‘clousure‘ nos permite proteger lo que vamos a hacer del espacio global del entorno. De esta manera no lo ensuciamos con nuestra factoria y nadie más podrá invocar el servicio si no es por medio de una inyección de AngularJs.
  • Continuemos definiendo el fragmento de de lineas 3 a 5: En estas lineas lo que hacemos es definir el módulo al que va a pertenecer la factoría (en este caso es el módulo ‘ngCordova.plugins.estimote.beacons‘), las dependencias que tiene a otros módulos (en este caso ninguna ya que se indica un [] array vacío) y  el nombre de la función donde se encuentra la factoría (cordovaEstimoteBeacons).
  • En la linea 7: indico manualmente la inyección de factorías o servicios que se tienen que hacer dentro de mi factoría-envoltorio. En este caso, vamos a usar el servicio $q ya que quiero aprovechar el envoltorio para que la API devuelva las respuestas asíncronas por medio de promesas y no de callbacks como lo hacen la mayoría de plugins Cordova.
  • Después en las lineas 10 a 14: Este ‘return’ define los atributos y las funciones públicas que va a tener nuestra factoría. Tendremos tantas funciones publicas como llamadas al plugins queremos exponer al resto de elementos AngularJs. En este caso vamos a enseñar como he expuesto la función de la API startRangingBeaconsInRegion.
  • Por último y mas importante, tenemos las lineas 24 a 34: Esta es la función que expone la funcionalidad de la API. Como vemos hacemos la llamada muy parecida solo que el callback hace uso de promesas. Aunque aquí la función es muy sencilla, puede que antes de la llamada necesitemos realizar una serie de acciones útiles como validar datos de entradas, serializar parámetros, comprobar los resultados. Gracias a que lo hemos abtraido en esta factoría, solo tendriamos que hacerlo aquí una vez y todas las llamadas que se hicieran en nuestra aplicación, se comportarían de la misma manera

Como veis, es muy sencillo envolver un plugin de Cordova para ser usado en AngularJS. Si os ha gustado la forma en que he estructura el código, pasaros por este post donde muestro la guía de estilos que he empezado a usar para programar en AngularJS.

Espero que os haya sido útil.

Nos leemos 🙂

Imagen | driftyco

Anuncios

8 comments

  1. Moises linares oscco · octubre 20, 2015

    Muy interesante tutorial estimado amigo sigue así.

    Me gusta

  2. Asier · julio 13

    Hola, buenos días.
    Es posible conectarse a un beacon a través de algún plugin de cordova o simplemente se puede monitorizar?
    Muchas gracias

    Me gusta

    • jdonsan · julio 13

      Buenos días Asier,

      Yo entiendo que solo se puede monitorizar. Al final el dispositivo móvil lo único que hace es ir comprobando que beacons se encuentran a su alcance y si existe alguno obtener la info de ese beacon en particular. ¿Por qué necesitarías una conexión con un beacon? ¿Cual es tu causística?

      Un saludo,

      Me gusta

      • Asier · julio 13

        Buenos días, muchas gracias por la rápida respuesta.
        Estoy intentando realizar una aplicación con Ionic para el tema de la multiplataforma, que pueda modificar los valores de los beacons (major, minor,uuid). Existen en el Play Store aplicaciones que lo permiten (p.ej eBeacon) sin embargo en muchas ocasiones están creadas por los fabricantes del propio dispositivo. Aún así he indagado por la web buscando plugins y demás para conectarme a los beacons, y realizar tales operaciones. Los plugins de beacons aparentemente solo permiten monitorizar, yo necesitaría ir más allá, sin embargo no sé me ocurre cómo.
        He intentado también conectarme directamente con el plugin de bluetooth pero los datos que leo no son legibles (parece existir algún problema con los beacons, que tienen contraseña).
        ¿Se te ocurre alguna opción?
        Gracias de nuevo,
        Un saludo.

        Me gusta

      • jdonsan · julio 13

        No se me ocurre nada, solo he tenido que monitorizar. Seguro que tu sabes mucho más que yo del tema :). Si encuentras una solución, no dudes en decirnosla.

        Un saludo

        Me gusta

  3. ysraelcm · octubre 21

    Efectivamente este artículo está excelente, y qué decir del tutorial, es superútil
    Muchas gracias por compartir tu conocimiento y experiencia.
    Estaremos esperando con entusiasmo tus próximos posts acerca de Ionic y ngCordova.
    Saludos.

    Le gusta a 1 persona

  4. Ysrael Mertz · octubre 21

    Efectivamente este artículo está excelente, y qué decir del tutorial, es superútil
    Muchas gracias por compartir tu conocimiento y experiencia.
    Estaremos esperando con entusiasmo tus próximos posts acerca de Ionic y ngCordova.
    Saludos.

    Le gusta a 1 persona

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s