Writing NFC Apps with Apache Cordova

ApacheCon North America - April 7, 2014

Presented by Don Coleman / @doncoleman

NFC Plugin

https://github.com/chariotsolutions/phonegap-nfc

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

not kilobytes, megabytes, or gigabytes

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

Start with NFC, complete with WiFi or Bluetooth

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

Technical Specs

http://www.nfc-forum.org/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

 

 

Creative Commons License
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.