Writing NFC Apps with Apache Cordova

ApacheCon North America - April 7, 2014

Presented by Don Coleman / @doncoleman

NFC Plugin

What is NFC?

What can I do with NFC?

• Mobile Payments
• Sharing Data between Phones
• Pair with Bluetooth Device
• Mass Transit Card
• Smart Poster

Devices

Tags hold a tiny amount of data

Think bytes

Each tag type

• Stores data in different binary format
• Has different security features
• Has different ways to read and write

Common properties

• UID
• Type
• Technology
• Capacity
• Is Read Only
• Is Lockable

NDEF

NFC Data Exchange Format

NDEF Message

NDEF Record

NDEF Record

• TNF (Type Name Format)
• Type
• Payload
• Record Id

Payload

Data for the user application

TNF - Type Name Format

Indicates the structure of the value of the type field

TNF Constants

• Empty 0x0
• Well Known 0x1
• Mime Media 0x2
• External 0x4

Type

Identifier describing the type of the Payload

Must follow rules implied by TNF

Text Record

hello, world

• TNF = Well Known
• Type = T
• Payload = 2 + en + hello, world

URI Record

http://cordova.io

• TNF = Well Known
• Type = U
• Payload = 0x3 + cordova.io

Mime Media Record

{ "message": "hello, world" }

• TNF = Mime Media
• Type = application/json
• Payload = { "message": "hello, world" }

Helper Methods

• ndef.textRecord("hello, world");
• ndef.uriRecord("http://cordova.io");
• ndef.mimeMediaRecord("text/json", '{...}');

Quick Review...

NDEF Message

One or more NDEF Records

NDEF Record

Contains a payload of data

Information describing the payload

Cordova NFC Plugin

$ cordova create nfc com.example.nfc NFC

$ cd nfc

$ cordova platform add android

$ cordova plugin add \
    com.chariotsolutions.nfc.plugin                        
                    

Add a Listener

  nfc.addNdefListener(
    eventListener,
    success,
    failure
  );
					

Add a Listener

  nfc.addNdefListener(
    app.onNfc,
    success,
    failure
  );
  					

Handle the Event

onNfc: function(nfcEvent) {
    var tag = nfcEvent.tag,
        ndefMessage = tag.ndefMessage;

    alert(JSON.stringify(ndefMessage));
}
					

Decode the Payload

  util.isType(record, tnf, type);
                

if (util.isType(rec, TNF_WELL_KNOWN, RTD_URI)) {    
  value = ndef.uriHelper.decodePayload(payload);
  
} else if (util.isType(rec, TNF_WELL_KNOWN, RTD_TEXT)) {
  value = ndef.textHelper.decodePayload(payload);
  
} else if // ... 
  

Write Data

Must call write within an event handler

Write Data

var message = [
  ndef.uriRecord("http://cordova.io")
];

ndef.write(message, success, failure);
	

Write Data

var message = [
  ndef.uriRecord("http://cordova.io"),
  ndef.textRecord("hello, world")
];

ndef.write(message, success, failure);
	

Read the Tag

Peer to Peer - Share Data

var message = [
  ndef.uriRecord("http://cordova.io")
];

ndef.share(message, success, failure);
	

Handover

Handover

takePicture: function() {
  navigator.camera.getPicture(
    app.onCameraSuccess, failure);
},

onCameraSuccess: function (imageURI) {
  nfc.handover(imageURI, success, fail);
}

Launching your App

<intent-filter>
  <action android:name=
  "android.nfc.action.NDEF_DISCOVERED"/>
  <data android:mimeType="text/plain"/>
  <category android:name=
  "android.intent.category.DEFAULT"/>
</intent-filter>
	

Recap

• Read message from tag or peer
• Decode payload using TNF and Type
• Write message to a tag
• Share a message with a peer
• Use handover for large messages
• Launch app when scanning a tag

Other NDEF Libraries

• Node https://www.npmjs.org/package/ndef
• Arduino https://github.com/don/NDEF

Technical Specs

Cordova Hackathon

Tomorrow, Tuesday April 8, 2014

10:30am - 5:30pm

McCourt room at ApacheCon

Thank You

Don Coleman

@doncoleman

don@chariotsolutions.com

http://don.github.io/slides

Writing NFC Apps with Apache Cordova by Don Coleman
is licensed under a Creative Commons Attribution-ShareAlike 3.0 Unported License.
Based on a work at https://github.com/don/slides/tree/gh-pages/2014-04-07-apachecon-nfc.