Windows (Phone) 8 NFC App Scenarios

Preview:

DESCRIPTION

The three most important NFC (Near Field Communication) scenarios for Windows 8 / Windows Phone 8 (WP8) app developers: - Discover Your App - Share to Others - Seamless Multi-User Games & Collaboration This presentation describes these three scenarios, and shows you how to implement them in C# from a technical perspective. It contains examples for both Windows 8 and Windows Phone 8 development, based on the new Windows Proximity APIs. In addition, this presentation contains a quick overview of NFC as a technology, as well as pointers towards tools and documentation, including the open source NDEF library for more powerful and sophisticated NFC tag writing and reading tasks.

Citation preview

Windows (Phone) 8NFC App Scenarios

Andreas Jakl, Mopius

Windows (Phone) 8 NFC App Scenarios v3.0.0 © 2014 Andreas Jakl 1NFC Forum and the NFC Forum logo are trademarks of the Near Field Communication Forum.

Andreas JaklTwitter: @mopius

Email: andreas.jakl@mopius.com

Trainer & app developer– mopius.com

– nfcinteractor.com

Nokia: Technology Wizard

FH Hagenberg, Mobile Computing: Assistant Professor

Siemens / BenQ Mobile: Augmented Reality-Apps

Windows (Phone) 8 NFC App Scenarios v3.0.0 © 2014 Andreas Jakl 2

Windows (Phone) 8 NFC App Scenarios v3.0.0 © 2014 Andreas Jakl 3

Seamless Multi-User Games & CollaborationShare to OthersDiscover Your App

Near Field Communication Nfc InteractorNDEF Library

PROXIMITY & TAPPING

Windows (Phone) 8 NFC App Scenarios v3.0.0 © 2014 Andreas Jakl 4

NFC Scenarios

Windows (Phone) 8 NFC App Scenarios v3.0.0 © 2014 Andreas Jakl

Connect Devices Exchange Digital Objects Acquire Content

5

Tap and Do

Windows (Phone) 8 NFC App Scenarios v3.0.0 © 2014 Andreas Jakl 6

A gesture that is a natural interaction between people in close proximity used to trigger doing something together between the devices they are holding.

System: Near Field Proximity(e.g., NFC)

Documentation: bit.ly/ProximitySpec

Windows (Phone) 8 NFC App Scenarios v3.0.0 © 2014 Andreas Jakl

Prox

imit

y A

PIs

Win

dow

s Ph

one

8 +

Win

dow

s 8

DocumentationWin8: bit.ly/ProximityAPI

WP8: bit.ly/ProximityAPIwp8

7

APP SCENARIOS

Windows (Phone) 8 NFC App Scenarios v3.0.0 © 2014 Andreas Jakl 8

Seamless Multi-User Games & CollaborationDiscover Your App Share to OthersShare to Others

Windows (Phone) 8 NFC App Scenarios v3.0.0 © 2014 Andreas Jakl 9

Seamless Multi-User Games & Collaboration

General Project Setup

Windows (Phone) 8 NFC App Scenarios v3.0.0 © 2014 Andreas Jakl 10

1 Add Proximity Capability

2 Initialize ProximityDevice_device = ProximityDevice.GetDefault();

Connect to HWDetect devices in rangePublish & subscribe to messages

How to Launch Apps

Windows (Phone) 8 NFC App Scenarios v3.0.0 © 2014 Andreas Jakl

Custom URI schemelaunches app.App needs to register.

Tag directly containsapp name andcustom data.No registration necessary.

eith

er o

r

Win8 + WP8

11

Windows (Phone) 8 NFC App Scenarios v3.0.0 © 2014 Andreas Jakl 12

Directly launch App

parameters app name 1platform 1 platform 2 app name 2 …

* For your low-level interest: type: Absolute URI, type name format: windows.com/LaunchApp. Contents re-formatted, e.g., with string lengths before each value

Encoded into NDEF message*

Write LaunchApp Tags

Windows (Phone) 8 NFC App Scenarios v3.0.0 © 2014 Andreas Jakl 13

// Arguments to pass to app, valid for all platformsvar launchArgs = "user=default";

// WP8: app's product id from the app manifest, wrapped in {}var wp8App = "{5e506af4‐4586‐4c90‐bc5f‐428b12cf48bc}"; 

// Win8: app ID: Package.appxmanifest ‐> source ‐> <Application Id="...">var win8AppId = "Proximity.App";var win8App = Windows.ApplicationModel.Package.Current.Id.FamilyName +

"!" + win8AppId;

// Combine to LaunchApp Messagevar launchAppMessage = launchArgs + 

"\tWindowsPhone\t" + wp8App + "\tWindows\t" + win8App;

1 Launch parameters, platforms + app IDs

Write LaunchApp Tags

Windows (Phone) 8 NFC App Scenarios v3.0.0 © 2014 Andreas Jakl 14

3 Write to tags_device.PublishBinaryMessage("LaunchApp:WriteTag",

dataWriter.DetachBuffer());

var dataWriter = new Windows.Storage.Streams.DataWriter{UnicodeEncoding = Windows.Storage.Streams.UnicodeEncoding.Utf16LE};   

dataWriter.WriteString(launchAppMessage); 

2 Convert to byte array

Windows (Phone) 8 NFC App Scenarios v3.0.0 © 2014 Andreas Jakl 15

nearspeak: Good+morning.

Custom dataProtocol name

Encoded Launch URI

Examples*skype:mopius?call

spotify:search:17th%20boulevard

* Definition & examples: http://en.wikipedia.org/wiki/URI_scheme

User Experience

Windows (Phone) 8 NFC App Scenarios v3.0.0 © 2014 Andreas Jakl 16

No app installed 1 app installed 2+ apps installed

WP Protocol Association

Windows (Phone) 8 NFC App Scenarios v3.0.0 © 2014 Andreas Jakl 17

1 Specify protocol name in WMAppManifest.xml

...</Tokens><Extensions><Protocol Name="nearspeak"

NavUriFragment="encodedLaunchUri=%s"TaskID="_default" />

</Extensions>

Protocol name

Fixed

Note: different in Win8 / WP8

WP Protocol Association

Windows (Phone) 8 NFC App Scenarios v3.0.0 © 2014 Andreas Jakl 18

2 Create UriMapper class to parse parametersclass NearSpeakUriMapper : UriMapperBase{

public override Uri MapUri(Uri uri){

// Example: "Protocol?encodedLaunchUri=nearspeak:Good+morning."var tempUri = HttpUtility.UrlDecode(uri.ToString());var launchContents = Regex.Match(tempUri, @"nearspeak:(.*)$").Groups[1].Value;if (!String.IsNullOrEmpty(launchContents)){

// Launched from associated "nearspeak:" protocol// Call MainPage.xaml with parametersreturn new Uri("/MainPage.xaml?ms_nfp_launchargs=" + launchContents, UriKind.Relative);

}

// Include the original URI with the mapping to the main pagereturn uri;

}} Argument already handled in step 9 of LaunchApp tags (MainPage.OnNavigatedTo)

Note: different in Win8 / WP8

WP Protocol Association

Windows (Phone) 8 NFC App Scenarios v3.0.0 © 2014 Andreas Jakl 19

3 Use UriMapper in App.xaml.cs(region: )

private void InitializePhoneApplication() {RootFrame = new PhoneApplicationFrame();RootFrame.UriMapper = new NearSpeakUriMapper();

}

– If needed: launch protocol from app (for app2app comm)

await Windows.System.Launcher.LaunchUriAsync(new Uri("nearspeak:Good+morning."));

Register for URI Schemes

Windows (Phone) 8 NFC App Scenarios v3.0.0 © 2014 Andreas Jakl

Win 8

Specify URI scheme, display name + optional im

20

Tag Data After Launch

Activtion arguments in App.xaml.cs

Windows (Phone) 8 NFC App Scenarios v3.0.0 © 2014 Andreas Jakl

protected override async void OnActivated(IActivatedEventArgs args){

if (args.Kind == ActivationKind.Protocol){

ProtocolActivatedEventArgs protocolArgs = args asProtocolActivatedEventArgs;

}}

Win 8

21

User Experience

Windows (Phone) 8 NFC App Scenarios v3.0.0 © 2014 Andreas Jakl

Win 8

22

Seamless Multi-User Games & CollaborationDiscover Your App Share to OthersDiscover Your App

Windows (Phone) 8 NFC App Scenarios v3.0.0 © 2014 Andreas Jakl 23

Seamless Multi-User Games & Collaboration

Publish Messages

Proximity devices only

– (doesn’t write tags)

Windows Protocol + URI record

– Encapsulated in NDEF

Windows (Phone) 8 NFC App Scenarios v3.0.0 © 2014 Andreas Jakl 24

_publishingMessageId = _device.PublishUriMessage(new Uri("nfcinteractor:compose"));

1 Start publishing

Contains scheme,

platform & App ID

Write Tags

Windows (Phone) 8 NFC App Scenarios v3.0.0 © 2014 Andreas Jakl 25

1 Prepare & convert datavar dataWriter = 

new Windows.Storage.Streams.DataWriter { UnicodeEncoding = Windows.Storage.Streams.

UnicodeEncoding.Utf16LE};

dataWriter.WriteString("nfcinteractor:compose");var dataBuffer = dataWriter.DetachBuffer();

2 Write tag (no device publication)_device.PublishBinaryMessage("WindowsUri:WriteTag", dataBuffer);

Mandatory encoding

bit.ly/PublishTypes

Seamless Multi-User Games & CollaborationDiscover Your App Share to OthersDiscover Your App

Windows (Phone) 8 NFC App Scenarios v3.0.0 © 2014 Andreas Jakl 26

Share to Others

Tap for

Windows (Phone) 8 NFC App Scenarios v3.0.0 © 2014 Andreas Jakl 27

Quick Data Exchange

ProximityDeviceExchange Windows /

NDEF messages,SNEP protocol

Long Term Connection

PeerFinderAutomatically builds

Bt / WiFi Directsocket connection

Seamless Multi-User Games & Collaboration

Establishing

Windows (Phone) 8 NFC App Scenarios v3.0.0 © 2014 Andreas Jakl 28

Long Term Connection

Trigger

Interact with TapNFC

Browse

Start SearchBt, WiFi, etc.

Tap to Trigger

Windows (Phone) 8 NFC App Scenarios v3.0.0 © 2014 Andreas Jakl 29

App not installed

App installed

Connection State

Windows (Phone) 8 NFC App Scenarios v3.0.0 © 2014 Andreas Jakl 30

PeerFound

1Proximity gesture completeDevices can be pulled away

Connecting /Listening

2Which device initiated tap gesture?→ Connecting, other device Listening

Completed

3Access socket of persistent transport

(e.g., TCP/IP, Bt)

Find Peers

Windows (Phone) 8 NFC App Scenarios v3.0.0 © 2014 Andreas Jakl 31

PeerFinder.TriggeredConnectionStateChanged +=TriggeredConnectionStateChanged;

PeerFinder.Start();

1 Start waiting for triggered connections

2 Peer found & connection established? Send message over socket

* For URI records + simple Smart Poster (w/o title), use the WindowsUri type.

private async void TriggeredConnectionStateChanged(object sender, TriggeredConnectionStateChangedEventArgs eventArgs) {

if (eventArgs.State == TriggeredConnectState.Completed) {// Socket connection established!var dataWriter = new DataWriter(eventArgs.Socket.OutputStream);dataWriter.WriteString("Hello Peer!");var numBytesWritten = await dataWriter.StoreAsync();

}}Completed

3

TOOLS & RESOURCES

Windows (Phone) 8 NFC App Scenarios v3.0.0 © 2014 Andreas Jakl 32

UX Recommendations*

User initiated peer search only Ask for consent Show connection

state

Failed connection?

Inform & revert to single-user mode

Let user get out of proximity

experience

Proximity: only if connection details

not relevant

Windows (Phone) 8 NFC App Scenarios v3.0.0 © 2014 Andreas Jakl 33* bit.ly/ProximityUX

NFC ToolsProximity Tapper for WP emulator

– http://proximitytapper.codeplex.com/

Open NFC Simulator

– http://open-nfc.org/wp/editions/android/

NFC plugin for Eclipse: NDEF Editor

– https://code.google.com/p/nfc-eclipse-plugin/

Windows (Phone) 8 NFC App Scenarios v3.0.0 © 2014 Andreas Jakl 34

nfcinteractor.com

Windows (Phone) 8 NFC App Scenarios v3.0.0 © 2014 Andreas Jakl 35

NFC Resources NFC News: nfcworld.com

NFC developer comparison

(WP, Android, BlackBerry):

bit.ly/NfcDevCompare

Specifications: nfc-forum.org

Windows (Phone) 8 NFC App Scenarios v3.0.0 © 2014 Andreas Jakl 36

NDEF HANDLINGStandardized NFC Tag Contents

Windows (Phone) 8 NFC App Scenarios v3.0.0 © 2014 Andreas Jakl 37

NDEF Message

NFC Data

Windows (Phone) 8 NFC App Scenarios v3.0.0 © 2014 Andreas Jakl

NDEF Record(e.g., URL) …

NDEF = NFC Data Exchange Format

38

SNEP = Simple NDEF Exchange Protocol

Windows (Phone) 8 NFC App Scenarios v3.0.0 © 2014 Andreas Jakl

NDEF Message

NDEF Record(e.g., URL) …

39

Reading NDEF

Windows (Phone) 8 NFC App Scenarios v3.0.0 © 2014 Andreas Jakl 40

_subscribedMessageId = _device.SubscribeForMessage("NDEF", MessageReceivedHandler);

1 Subscribe to all NDEF messages

2 Parse raw byte array in handler

http://www.nfc-forum.org/specs/

_subscribedMessageId = _device.SubscribeForMessage("NDEF", MessageReceivedHandler);

Subscribe to all NDEF messages

Parse raw byte array in handler

http://www.nfc-forum.org/specs/

// Convert the language code to a byte arrayvar languageEncoding = Encoding.UTF8;var encodedLanguage = languageEncoding.GetBytes(languageCode);// Encode and convert the text to a byte arrayvar encoding = (textEncoding == TextEncodingType.Utf8) ? Encoding.UTF8 : Encoding.BigEndianUnicode;var encodedText = encoding.GetBytes(text);// Calculate the length of the payload & create the arrayvar payloadLength = 1 + encodedLanguage.Length + encodedText.Length;Payload = new byte[payloadLength];

// Assemble the status bytePayload[0] = 0; // Make sure also the RFU bit is set to 0// Text encodingif (textEncoding == TextEncodingType.Utf8)

Payload[0] &= 0x7F; // ~0x80else

Payload[0] |= 0x80;

// Language code lengthPayload[0] |= (byte)(0x3f & (byte)encodedLanguage.Length);

// Language codeArray.Copy(encodedLanguage, 0, Payload, 1, encodedLanguage.Length);

// TextArray.Copy(encodedText, 0, Payload, 1 + encodedLanguage.Length, encodedText.Length);Si

mpl

e ex

ampl

e:as

sem

blin

g pa

yloa

d of

Text

reco

rd

Reading NDEF

Windows (Phone) 8 NFC App Scenarios v3.0.0 © 2014 Andreas Jakl 41

1

2

NDEF.codeplex.com

Windows (Phone) 8 NFC App Scenarios v3.0.0 © 2014 Andreas Jakl 42

Reusable NDEF classes

Create NDEFmessages & records

(standard compliant)

Parse informationfrom raw byte arrays

Fully documentedOpen Source LGPL license

(based on Qt Mobility)

NDEF Subscriptions

Windows (Phone) 8 NFC App Scenarios v3.0.0 © 2014 Andreas Jakl 43

_subscribedMessageId = _device.SubscribeForMessage("NDEF",MessageReceivedHandler);

1 Subscribe to all NDEF formatted tags

private void MessageReceivedHandler(ProximityDevice sender, ProximityMessage message){

var msgArray = message.Data.ToArray();NdefMessage ndefMessage = NdefMessage.FromByteArray(msgArray);[...]

}

2 Parse NDEF message

NDEF Subscriptions

Windows (Phone) 8 NFC App Scenarios v3.0.0 © 2014 Andreas Jakl 44

foreach (NdefRecord record in ndefMessage) {

Debug.WriteLine("Record type: " + Encoding.UTF8.GetString(record.Type, 0, record.Type.Length));

// Check the type of each record ‐ handling a Smart Poster in this exampleif (record.CheckSpecializedType(false) == typeof(NdefSpRecord)) {

// Convert and extract Smart Poster infovar spRecord = new NdefSpRecord(record);Debug.WriteLine("URI: " + spRecord.Uri);Debug.WriteLine("Titles: " + spRecord.TitleCount());Debug.WriteLine("1. Title: " + spRecord.Titles[0].Text);Debug.WriteLine("Action set: " + spRecord.ActionInUse());

}}

3 Analyze all contained NDEF records with specialized classes

Write NDEF

Windows (Phone) 8 NFC App Scenarios v3.0.0 © 2014 Andreas Jakl 45

1 Prepare & convert data// Initialize Smart Poster record with URI, Action + 1 Titlevar spRecord = new NdefSpRecord

{ Uri = "http://www.nfcinteractor.com" };spRecord.AddTitle(new NdefTextRecord

{ Text = "Nfc Interactor", LanguageCode = "en" });

// Add record to NDEF messagevar msg = new NdefMessage { spRecord };

2a Write tag// Publish NDEF message to a tag_device.PublishBinaryMessage("NDEF:WriteTag", msg.ToByteArray().AsBuffer());

2b Publish to devices// Alternative: send NDEF message to another NFC device_device.PublishBinaryMessage("NDEF", msg.ToByteArray().AsBuffer());

Supported Record Types

Windows (Phone) 8 NFC App Scenarios v3.0.0 © 2014 Andreas Jakl 46

Smart Poster URI

Text LaunchApp

Android Application Record (AAR)Windows Phone SettingsNokia Accessories Record

NearSpeak Voice Messages

Geo tagsSocial tagsSMS tagsTelephone callMailto tags

ndef.mopius.com

Windows (Phone) 8 NFC App Scenarios v3.0.0 © 2014 Andreas Jakl 47

Seamless Multi-User Games & CollaborationShare to OthersDiscover Your App

Near Field Communication Nfc InteractorNDEF Library

Thank You.

Andreas Jakl@mopius

mopius.comnfcinteractor.com

Windows (Phone) 8 NFC App Scenarios v3.0.0 © 2014 Andreas Jakl 48

Recommended