NFC Ionic | Cómo enviar y recibir datos con esta tecnología

¿Pensando en elaborar algún sistema de comunicación por cercanía en tu aplicación hecha en Ionic? O, quizás ya sabes cómo utilizar NFC Ionic para tal fin, pero aún te falta conocer algún detalle sobre algún campo o función para dejarlo como tú quieres ¿verdad?

Mi nombre es Aitor Sánchez, hago aplicaciones móviles desde 2014, y en este artículo aprenderás cómo implementar NFC Ionic en tu aplicación para poder realizar conexiones por contacto con otros dispositivos.

Pero antes de continuar, esta es la Flutter Mafia. Es mi newsletter donde aprenderás desarrollo de apps móviles, aso y monetización junto con otros genietes que ya están dentro. Y si te suscribes te regalo mi ebook "Duplica los ingreso de tus apps en 5 minutos" No es broma, quizás te interese.

Y ahora si, comenzamos. Let´s go!

Instalación de NFC en Ionic

Cómo todo componente desacoplado del core del sistema, es necesario de una instalación para poder usarlo. Para ello vamos a realizar las dos siguientes líneas de consola:

ionic cordova plugin add phonegap-nfc 
npm install @awesome-cordova-plugins/nfc

La primera instalará el plugin que nos permitirá la comunicación nativa con el dispositivo. La segunda instalará el código necesario para que nos podamos comunicar con el plugin desde nuestra app.

Configuración de NFC

Una vez esté instalado, necesitamos incluirlo en los providers de nuestros componentes para poder usarlos.

Recuerda que, si usas Ionic 4 o superior, y estás utilizando el módulo NGX, no es necesario que hagas esto.

El código es el siguiente:

...

import { NFC } from '@awesome-cordova-plugins/nfc/ngx';

...

providers: [
...,
NFC,
...
]

...

Nota: Es recomendable NO agregar la clase a los providers del AppModule.ts a menos que lo vayamos a usar en toda la app, o nuestra app solo tenga ese componente. Es mejor incluirlo solo en los modules de los componentes que hagan uso de él. Así mejoraremos el rendimiento, el consumo de la app y también la experiencia de usuario.

Plataformas soportadas por NFC en Ionic

La verdad que me sorprende que aún haya en las filas de Ionic cabida para las BB. Pero bueno, ahí están…

• Android
• BlackBerry 10
• Windows
• Windows Phone 8

Cómo se usa el componente NFC de Ionic

Cómo ya es costumbre, lo sabrás si pasas por aquí, que siempre me gusta empezar esta sección con un ejemplo de código. Esta no va a ser menos, allá vamos…

import { NFC, Ndef } from '@awesome-cordova-plugins/nfc/ngx';


constructor(private nfc: NFC, private ndef: Ndef) { }


...


this.nfc.addNdefListener(() => {
  console.log('successfully attached ndef listener');
}, (err) => {
  console.log('error attaching ndef listener', err);
}).subscribe((event) => {
  console.log('received ndef message. the tag contains: ', event.tag);
  console.log('decoded tag id', this.nfc.bytesToHexString(event.tag.id));
  let message = this.ndef.textRecord('Hello world');
  this.nfc.share([message]).then(onSuccess).catch(onError);
});

1. Para comenzar, importamos las clases NFC y Ndef para poder hacer uso de ellas en nuestro ejemplo.
2. Posteriormente, al tratarse de servicios, los inyectamos a través del constructor.
3. Ahora, con el método “addNdelListener”, pegamos un oyente al componente que será llamado cuando este todo disponible y listo para ser usado.
4. Nos suscribimos a observable que nos devuelve dicho método que será el código que se ejecute cuando tengamos una interacción de algún tipo de NFC con el sistema.
5. En última instancia, cuando recibimos alguna notificación mediante este, en el ejemplo, hemos utilizado la interface Ndef para enviar una respuesta a través del método “share” de la clase NFC.

La verdad que es un pelín lioso el ejemplo, pero si lo analizas detenidamente, es muy sencillo de leer.

Bueno, pues habiendo entendido el ejemplo, estamos en disposición de continuar con el tutorial.

Métodos y funciones de la clase NFC

Ahora les toca la sección a las funciones. La verdad que, analizándolo la mayoría de las funciones te darás cuenta de que son eventos, ya lo verás.

beginSession(onSuccess, onFailure)

• Esta función solo está disponible para IOS. Y nos permite, de una manera muy cómoda, inicializar el sistema para leer tarjetas NFC
• Paráemtros:
  • onSuccess -> Será una función que se llamará cuando todo esté correcto.
  • onFailure -> Será una función que se llamará si algo ha ido mal.
• Retorna un observable al que nos tenemos que suscribir. A través de él llegan los eventos nfc que se ejecuten. Cómo, por ejemplo, la lectura de una tarjeta nfc.

addNdefListener(onSuccess, onFailure)

• Será similar a la anterior, pero para dispositivos Ndef y en todas las plataformas soportadas.
• Parámetros:
  • onSuccess -> Una función que será llamada cuando el sistema esté listo.
  • onFailure -> Una función que será llamada si algo fallase.
• Retorna un observable al que nos tenemos que suscribir. A través de él llegan los eventos nfc que se ejecuten. Cómo, por ejemplo, la lectura de una tarjeta Ndef.

addTagDiscoveredListener(onSuccess, onFailure)

• Es similar a las dos funciones anteriores, pero para cualquier tipo de dispositivo NFC.
• Parámetros:
  • onSuccess -> Una función que será llamada cuando el sistema esté listo.
  • onFailure -> Una función que será llamada si algo fallase.
• Retorna un observable al que nos tenemos que suscribir. A través de él llegan los eventos nfc que se ejecuten. Cómo, por ejemplo, la lectura de una tarjeta Ndef, Nfc, etc…

addMimeTypeListener(mimeType, onSuccess, onFailure)

• Esta función solo notificará de evento cuando el dispositivo NFC sea NDEF y emita su contenido con el mimeType que nosotros queramos.
• Parámetros:
  • onSuccess -> Una función que será llamada cuando el sistema esté listo.
  • onFailure -> Una función que será llamada si algo fallase.
• Retorna un observable al que nos tenemos que suscribir. A través de él llegan los eventos nfc que se ejecuten desde un dispositivo NDEF y con el mimeType que nosotros hayamos especificado.

write(message)

• Escribe un mensaje sobre el dispositivo NFC de la que acabamos de obtener en un evento.
• Parámetros:
  • message -> any[] -> Serán los mensajes que se envíen. Por regla general será un array de cadenas de texto.
• Retorna una promesa que tenemos que controlar. Si se resuelve es que todo ha ido bien. De lo contrario, algo ha fallado.

makeReadOnly()

• Hace que el dispositivo sea de solo lectura. Hay que tener cuidado con esta función porque una vez sea llamada no se podrá revertir hasta que reiniciemos la app.
• Retorna una promesa que tendremos que controlar. Si todo ha ido bien, se resolverá. En caso contrario, fallará y saldrá por le catch.

share(message)

• Esta función comparte un mensaje dado con todos los dispositivos NDEF del entorno vía p2p.
• Parámetros:
  • message -> any[] -> Será un array de cadenas con los mensajes dentro.
• Retorna una promesa que tenemos que controlar. Si se resuelve es que todo ha ido correctamente.

unshare()

• Detiene el envío de mensajes p2p.
• Retorna una promesa que tenemos que controlar. Si se resuelve es que todo ha ido bien.

erase()

• Borra el contenido de la tarjeta NDEF que hemos generado en el dispositivo para permitir la comunicación con otros dispositivos.

handover(uris)

• Envía un archivo/s a otro dispositivo usando el método handover.
• Parámetros:
  • uris -> string[] -> Serán las URL locales de los archivos que queremos enviar.
• Retorna una promesa que tenemos que controlar. Si se resuelve es que todo se ha realizado correctamente. De lo contrario fallará.

stopHandover()

• Detiene el envío handover.
• Retorna una promesa que tenemos que controlar y se resolverá cuando todo haya salido bien.

showSettings()

• Con esta función podemos abrir los ajustes NFC del dispositivo.
• Retorna una promesa que se resolverá cuando hayamos terminado de editar estos ajustes.

enabled()

• Comprueba si el NFC está disponible y activado en el dispositivo.
• Retorna una promesa que se resolverá si está disponible y que fallará y saldrá por el catch en caso de que falle.

bytesToString(bytes)

• Parsea un array de bytes a una cadena de texto legible.
• Parámetros:
  • bytes -> number[] -> Será el array de bytes que queremos parsear.
• Retorna una cadena con la decodificación del array.

stringToBytes(str)

• El paso contrario de la anterior función.

bytesToHexString(bytes)

• Esta función parsea un array de bytes a un formato hexadecimal.

readerMode()

• Pone el sistema en formato de lectura cuando se ha llamado satisfactoriamente a un callback de cualquier da las funciones antes mencionadas.

Algo más que quizás te interese

La mejora constante de los logos es una estrategia que hace que recibas más descargas, y por extensión más dinero, con tus apps. Dicho esto, hemos hecho esta herramienta para ti. Para que puedas aumentar las descargas de tu app mejorando sus logos y, además, puedas investigar los logos de tu competencia. No te espoileo más, entra al enlace.

Pues hasta aquí llegamos con el artículo hoy. Solo queda despedirme hasta el siguiente. Hasta entonces, que vaya bien :)