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

Windows (Phone) 8 NFC App Scenarios

May 11, 2015

Download

Technology

Andreas Jakl

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.
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: Windows (Phone) 8 NFC App Scenarios

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.

Page 2: Windows (Phone) 8 NFC App Scenarios

Andreas JaklTwitter: @mopius

Email: [email protected]

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

Page 3: Windows (Phone) 8 NFC App Scenarios

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

Page 4: Windows (Phone) 8 NFC App Scenarios

PROXIMITY & TAPPING

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

Page 5: Windows (Phone) 8 NFC App Scenarios

NFC Scenarios

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

Connect Devices Exchange Digital Objects Acquire Content

5

Page 6: Windows (Phone) 8 NFC App Scenarios

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

Page 7: Windows (Phone) 8 NFC App Scenarios

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

Page 8: Windows (Phone) 8 NFC App Scenarios

APP SCENARIOS

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

Page 9: Windows (Phone) 8 NFC App Scenarios

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

Page 10: Windows (Phone) 8 NFC App Scenarios

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

Page 11: Windows (Phone) 8 NFC App Scenarios

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

Page 12: Windows (Phone) 8 NFC App Scenarios

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*

Page 13: Windows (Phone) 8 NFC App Scenarios

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

Page 14: Windows (Phone) 8 NFC App Scenarios

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

Page 15: Windows (Phone) 8 NFC App Scenarios

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

Page 16: Windows (Phone) 8 NFC App Scenarios

User Experience

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

No app installed 1 app installed 2+ apps installed

Page 17: Windows (Phone) 8 NFC App Scenarios

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

Page 18: Windows (Phone) 8 NFC App Scenarios

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

Page 19: Windows (Phone) 8 NFC App Scenarios

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."));

Page 20: Windows (Phone) 8 NFC App Scenarios

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

Page 21: Windows (Phone) 8 NFC App Scenarios

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

Page 22: Windows (Phone) 8 NFC App Scenarios

User Experience

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

Win 8

22

Page 23: Windows (Phone) 8 NFC App Scenarios

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

Page 24: Windows (Phone) 8 NFC App Scenarios

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

Page 25: Windows (Phone) 8 NFC App Scenarios

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

Page 26: Windows (Phone) 8 NFC App Scenarios

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

Page 27: Windows (Phone) 8 NFC App Scenarios

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

Page 28: Windows (Phone) 8 NFC App Scenarios

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.

Page 29: Windows (Phone) 8 NFC App Scenarios

Tap to Trigger

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

App not installed

App installed

Page 30: Windows (Phone) 8 NFC App Scenarios

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)

Page 31: Windows (Phone) 8 NFC App Scenarios

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

Page 32: Windows (Phone) 8 NFC App Scenarios

TOOLS & RESOURCES

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

Page 33: Windows (Phone) 8 NFC App Scenarios

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

Page 34: Windows (Phone) 8 NFC App Scenarios

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

Page 35: Windows (Phone) 8 NFC App Scenarios

nfcinteractor.com

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

Page 36: Windows (Phone) 8 NFC App Scenarios

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

Page 37: Windows (Phone) 8 NFC App Scenarios

NDEF HANDLINGStandardized NFC Tag Contents

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

Page 38: Windows (Phone) 8 NFC App Scenarios

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

Page 39: Windows (Phone) 8 NFC App Scenarios

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

Page 40: Windows (Phone) 8 NFC App Scenarios

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/

Page 41: Windows (Phone) 8 NFC App Scenarios

_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

Page 42: Windows (Phone) 8 NFC App Scenarios

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)

Page 43: Windows (Phone) 8 NFC App Scenarios

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

Page 44: Windows (Phone) 8 NFC App Scenarios

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

Page 45: Windows (Phone) 8 NFC App Scenarios

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());

Page 46: Windows (Phone) 8 NFC App Scenarios

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

Page 47: Windows (Phone) 8 NFC App Scenarios

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

Page 48: Windows (Phone) 8 NFC App Scenarios

Thank You.

Andreas Jakl@mopius

mopius.comnfcinteractor.com

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