Nokianfcdevelopment1 0-1-110423141942 Phpapp02

NFC Development with Qt on Symbian and MeeGo

1 2012 Nokia Nokia NFC Development with Qt v2.2.0 November 5, 2012 Andreas Jakl

NFC Forum and the NFC Forum logo are trademarks of the Near Field Communication Forum.

Andreas Jakl

[@mopius]

nfcinteractor.com

Technology Wizard

Nokia

NFC Introduction bit.ly/NfcIntro Windows (Phone) 8 NFC App Scenarios bit.ly/NFCAppScenarios NFC Development on the Windows 8 Platform bit.ly/Win8NFC R

ela

ted

Pre

sen

tati

on

s

2

NFC Development

2012 Nokia Nokia NFC Development with Qt v2.2.0 November 5, 2012 Andreas Jakl

NFC Development Alternatives


Java ME

Works on Series 40 and Symbian devices.

Limited use of smartphone features.

Qt Mobility

Cross-platform API.

Best flexibility and ease of app

development.

Symbian Native

Low level control over devices NFC support.

More complex, platform knowledge required.

Windows Phone 8

Proximity APIs Similar on Windows 8

Extra presentation: bit.ly/Win8NFC

Lumia 610 NFC WP7 bit.ly/WpNfc


NFC Developer Offering

Tools

Qt Development

Qt SDK 1.2 Qt Mobility 1.2

Symbian Development

Symbian Belle SDK

Java ME development

Nokia 6212 Classic NFC SDK or Symbian Belle SDK

Channel

Nokia Store NFC Collection


Java ME NFC Development

Both free IDEs come with

extensive, generic Java ME support

on board.

Extend with Nokia 6212 Classic NFC SDK (or Symbian Belle SDK)*

* http://www.developer.nokia.com/Community/Wiki/Developing_NFC_Applications#Java_ME_based_development

Contactless Communication API


JSR 257

Tag discovery and data exchange

NDEF messages

Example project: Nfc Creator

https://projects.developer.nokia.com/

nfccreator

Symbian Platform NFC API Exposes NFC middleware at the platform level

Aimed at Symbian platform developers

Platform specific coding/skills needed

Low abstraction

Development

Carbide.c++ IDE

Symbian Belle SDK

Optional: Qt for Symbian


8

Qt Mobility NFC



What is Qt?

Developer

Publish to Nokia Store (Symbian, MeeGo) Windows Linux Mac Embedded

App Source Code

Using Qt SDK for Dev. environment Testing Translation Help

Using Qt framework for User Interface Networking Location (GPS) Web integration ...

Qt NFC Development Requirements

Qt SDK 1.2 Contains: Qt 4.7.4, Qt Mobility 1.2

Windows: Nokia Suite

Symbian Nokia C7 / 801T with Symbian Anna / Belle

or 603 / 700 / 701 / 808 with Nokia Belle+

Install Qt SDKs Symbian Anna or Belle target *

MeeGo Nokia N9

Install Qt SDKs MeeGo Harmattan target


More information: bit.ly/StartNfc

* Apps compiled with the Symbian Anna target are compatible to Symbian^3, Anna & Belle.


Qt Mobility

Mobility 1.0

Bearer Management API Contacts Location Messaging Multimedia Publish and Subscribe Service Framework Sensors System Information Versit

Mobility 1.1

Camera Document Gallery Feedback Landmarks Maps/Navigation Organizer Service Framework Out of process

Mobility 1.2

Connectivity (Bluetooth, NFC)

Qt Mobility 1.2 NFC Interact with

NFC Forum tags

Target detection

NDEF message handlers

Reading and writing NDEF messages

Send tag specific commands

Register for app autostart on tag touch

NFC Forum devices

LLCP peer-to-peer sockets



API Overview* QNearFieldManager

Detects and filters targets

QLlcpServer Listen for new server socket connections.

QNearFieldTarget Query properties,

read/write messages, send commands or

establish a client socket

QNdefMessage Collection of 0 or more

records

QNdefRecord Access to NDEF data.

Subclasses for handling specific details.

QLlcpSocket Read / write data. For

server & client sockets.

* Not a class diagram, but explains sequential usage order

Generic NFC

Tag access

Peer to peer

Qt NFC Source Code Qt Mobility is Open Source

How does a method work? How to make best

use of it? Take a look at the source code!

Download complete source package

Latest source:

http://qt.gitorious.org/qt-mobility/

Find implementation in:

C:\QtMobility\src\connectivity\nfc


Refresh your Qt Knowledge The following tutorials require basic C++ & Qt skills

Need more?


16

Nfc Corkboard


Tasks

Extend Qt SDK example with NFC:

Touch tag to create note

Qt Quick based UI

C++ based NFC

Integrate C++ with QML

https://projects.developer.nokia.com/nfccorkboards

Importing the Example

From Qt Creators Getting

Started screen

Search for Corkboards example

Or open:

C:\QtSDK\Examples\4.7\declarative\

toys\corkboards\corkboards.pro


Choosing Targets

Select at least the Symbian Anna target

Qt 4.7.4 & Qt Mobility 1.2 is required


Test!

Connect phone via USB ^

Ovi/Nokia Suite mode

Start CODA on device

Check

Selected Symbian target

Device is recognized

Play to compile and deploy!



App Overview

main.cpp

Application startup

Loads and shows corkboards.qml

corkboards.qml

UI definition

Defines data model and view

Day.qml

Delegate for drawing the UI for a single day

Interaction for notes

ndefmanager.cpp/.h

NFC Tag discovery and reading

We will add this:

in: corkboards.qml id: list

in: corkboards.qml id: flickable


Model, View & Delegate

ListModel

Defines free-form list data source

Container for ListElement definitions

ListView

Shows data from a model in a list

Horizontal or vertical

Delegate

Template defining each item instantiated by the view

in: Day.qml

Add Connectivity

Edit the Qt project file (corkboards.pro)

Uncomment & add mobility component: connectivity

Add LocalServices Capability (for Symbian)


CONFIG += mobility

MOBILITY += connectivity

symbian:TARGET.CAPABILITY += NetworkServices LocalServices

Allows Internet access Allows NFC

Good to Know: Symbian Security *

1. Determine the required security / privacy features

Most common:

2. Add to Qt project file (.pro)


* Qt apps are native apps; therefore, the security model of the target operating system applies.

Feature Capability

Internet access, telephony, messaging NetworkServices

Access location (GPS, etc.) Location

Camera, record audio UserEnvironment

Contacts, Calendar ReadUserData / WriteUserData

Bluetooth, NFC LocalServices

IMEI, model name, battery status ReadDeviceData

(See: developer.nokia.com/Community/Wiki/Capabilities)

symbian:TARGET.CAPABILITY += Location LocalServices

Basic / User Capabilities

Extended / System Capabilities

Good to Know: Symbian Security

3. Get the right certificate during development


No / Basic Capabilities Extended Capabilities

Sign up for Nokia Publish account (1) publish.nokia.com

Request development certificate (free) developer.nokia.com/Distribute/Packaging_and_signing.xhtml

Sign your app (Qt Creator build settings)

Test on your develoment device(s)

Use auto-generated self signed certificate (default, no action required)

Good to Know: Symbian Security

4. Publish


No / Basic Capabilities Extended Capabilities

Sign up for Nokia Publish account (1) publish.nokia.com

Request unique UID in 0x2... range and development certificate (free)

developer.nokia.com/Distribute/Packaging_and_signing.xhtml

Package your Qt app with the Smart Installer (Qt Creator build settings)

Publish to the Nokia Store Need Certified Signed capabilities? developer.nokia.com/Community/Wiki/Capabilities -> Purchase a Publisher ID ($200 / year) Submit to Certified Signed process @ www.symbiansigned.com

NdefManager

New C++ class

Right-click the project

Add New ...

C++ Class

Class name: NdefManager

Base class: QObject


Qt Meta-Object System

C++ extended with QObject

Introspection: meta-information at runtime

Inter-object communication: signals & slots

Parent / Child hierarchy: easier memory

management


Include

Headers, define member variable


#include

#include

#include

#include

#include

#include

#include

#include // we will test first!

QTM_USE_NAMESPACE // Use Qt Mobility namespace

[...]

private:

QNearFieldManager *nfcManager;

ndefmanager.h


Start Waiting NdefManager::NdefManager(QObject *parent) : QObject(parent)

{

// NdefManager (this) is the parent; will automatically delete nfcManager

nfcManager = new QNearFieldManager(this);

nfcManager->setTargetAccessModes(QNearFieldManager::NdefReadTargetAccess);

// React only to Uri records (NfcRtd, "U")

QNdefFilter filter;

filter.appendRecord();

nfcManager->registerNdefMessageHandler(filter,

this, SLOT(targetDetected(QNdefMessage,QNearFieldTarget*)));

// Get notified when the tag gets out of range

connect(nfcManager, SIGNAL(targetLost(QNearFieldTarget*)),

this, SLOT(targetLost(QNearFieldTarget*)));

}

ndefmanager.cpp

Signals & Slots Signal

Emitted when a particular event occurs (e.g., clicked())

Qt objects: predefined signals

Also create your own signals

Slot

Function called in response to a signal

Qt objects: predefined slots (e.g., quit())

Also create your own slots

Connection signals slots established by developer,

handled by Qt framework


Signals & Slots Type safe

Signal signature must match signature of receiving slot

(Slot might also have shorter signature and ignore the rest of the

arguments)

Loosely coupled

Emitter doesnt know or care which slots receive signal

Information encapsulation

Integrated, independent components

Slots are normal C++ member functions

Dont know if signals are connected to them


Lost & Found

Methods to handle lost & found tags = Slots

Tip

Alt + Enter, and Qt Creator writes the .cpp method definition!


private slots:

void targetDetected(const QNdefMessage &message,

QNearFieldTarget *target);

void targetLost(QNearFieldTarget *target);

ndefmanager.h

React

New target: write debug output to console for now

Target out of range: delayed object delete


void NdefManager::targetDetected(const QNdefMessage &message,

QNearFieldTarget *target)

{

qDebug() deleteLater();

}

ndefmanager.cpp

Register C++ with QML

Make your C++ class available in QML

QML Name: NdefManager

QML Library: Nfc 1.0


#include

#include "ndefmanager.h"

int main(int argc, char *argv[]) {

QApplication app(argc, argv);

qmlRegisterType("Nfc", 1, 0, "NdefManager");

[...]

}

main.cpp

NdefManager in QML

Import module

Create Instance


import Nfc 1.0

corkboards.qml

NdefManager {

id: ndefManager

}

corkboards.qml

Test! #2

Run the app

Touch a URI formatted NDEF tag

Observe the Application Output


Parse Tag & Emit Contents

Revisit and extend the target detection slot


void NdefManager::targetDetected(const QNdefMessage &message,

QNearFieldTarget *target) {

qDebug()

Define the Signal

Signals have no implementation

They represent information, not a method to execute


signals:

void nfcReadTagUri(const QUrl& nfcTagUri);

ndefmanager.h

Create new Notes

Handle our new signal

on :

Get current corkboard page append new notes element

key: noteText, value: URI from NDEF message


NdefManager {

id: ndefManager

onNfcReadTagUri:

list.get(flickable.currentIndex).notes.append({"noteText":nfcTagUri})

}

corkboards.qml

Test! #3

Touch Uri-formatted NDEF NFC tags to create notes on the

current page!


41

Interactive Nfc Corkboard


Tasks

Extend previous example

React to any kind of tags

Write tags by pressing the red flag

while touching a tag



Overview Before QNdefFilter filter;


nfcManager->registerNdefMessageHandler(filter, this,

SLOT(targetDetected(QNdefMessage,QNearFieldTarget*)));

void targetDetected(const QNdefMessage &message,

QNearFieldTarget *target);

Signal is only emitted when a tag containing all records defined in the filter are found

Register NDEF filters and detect targets

The slot directly gets the NDEF message


Overview After connect(nfcManager, SIGNAL(targetDetected(QNearFieldTarget*)),

this, SLOT(targetDetected(QNearFieldTarget*)));

nfcManager->startTargetDetection();

void targetDetected(QNearFieldTarget *target); {

const bool hasNdefMessage = target->hasNdefMessage();

if (hasNdefMessage) {

connect(target, SIGNAL(ndefMessageRead(QNdefMessage)),

this, SLOT(ndefMessageRead(QNdefMessage)));

target->readNdefMessages();

}

}

Signals is emitted for every target that is detected

Detect any kind of targets

void NdefManager::ndefMessageRead(const QNdefMessage &message) ;

Another signal is emitted when reading the message from the target is finished

React to all targets

Generic target detection instead of listening to specific tag

message(s)

Remove previous targetDetected() with two parameters


public slots:

void nfcWriteTag(const QString& nfcTagText); // New

private slots:

void targetDetected(QNearFieldTarget *target); // Modified from prev.

void ndefMessageRead(const QNdefMessage &message); // New

private:

QNearFieldTarget *cachedTarget; // New

ndefmanager.h


Start Generic Target Detection NdefManager::NdefManager(QObject *parent) : QObject(parent)

{

// [...]

// React only to Uri records (NfcRtd, "U")

QNdefFilter filter;


nfcManager->registerNdefMessageHandler(filter,

this, SLOT(targetDetected(QNdefMessage,QNearFieldTarget*)));

// Get notified when the tag gets out of range



connect(nfcManager, SIGNAL(targetDetected(QNearFieldTarget*)),


nfcManager->startTargetDetection();

}

ndefmanager.cpp

Read NDEF Message

Detected a target? Read its message.


void NdefManager::targetDetected(QNearFieldTarget *target)

{

qDebug() hasNdefMessage();

if (hasNdefMessage) {

connect(target, SIGNAL(ndefMessageRead(QNdefMessage)),

this, SLOT(ndefMessageRead(QNdefMessage)));

target->readNdefMessages();

}

// Cache target to member variable for writing

cachedTarget = target;

}

ndefmanager.cpp

Target Lost

Set cached target to NULL


void NdefManager::targetLost(QNearFieldTarget *target) {

cachedTarget = NULL; // New

target->deleteLater();

}

ndefmanager.cpp

Parse NDEF Message

Same code as before, different method


void NdefManager::ndefMessageRead(const QNdefMessage &message) {

// Go through all records in the message

foreach (const QNdefRecord &record, message) {

// Check type

if (record.isRecordType()) {

// Convert to the specialized URI record class

QNdefNfcUriRecord uriRecord(record);

// Emit a signal with the URI

emit nfcReadTagUri(uriRecord.uri());

}

}

}

ndefmanager.cpp


Write URI Ndef Message void NdefManager::nfcWriteTag(const QString &nfcTagText) {

// The device currently has a target in reach

if (cachedTarget) {

// Convert text to a URI, adding missing http:// if necessary

QUrl convertedUrl = QUrl::fromUserInput(nfcTagText);

// Check if it is a valid URL

if (convertedUrl.isValid() && nfcTagText.contains('.')) {

QNdefMessage message;

// Create a URI NDEF record

QNdefNfcUriRecord uriRecord;

uriRecord.setUri(convertedUrl);

message.append(uriRecord);

qDebug() writeNdefMessages(QList()


Extend UI with Write Button Image {

id: writeButton

source: "NfcFlag.png"

rotation: -8 // Note image itself is rotated

anchors { bottom: parent.bottom; right:parent.right }

MouseArea {

anchors.fill: parent

onClicked: ndefManager.nfcWriteTag(myText.text)

}

}

Day.qml, between lines 122 / 123 (below MouseArea with id: mouse)

NfcFlag.png \qml\

Test! Touch a tag, at the same time press the NFC flag of a note

Writes the note text to the tag

Remember to enter a valid URI!


The extended solution on Nokia Developer Projects handles additional record types and

potential errors.


52

Nfc Chat


Tasks

Develop an NFC chat from scratch

NFC Peer to Peer mode

LLCP Protocol (server & client sockets)

Qt Quick UI

https://projects.developer.nokia.com/nfcchat


App Overview

main.cpp

Application startup

Loads and shows main.qml

main.qml

UI definition

Defines data model and view

nfcpeertopeer.cpp/.h

Target discovery

NFC Peer to peer sockets (client & server)

New Project

Qt Quick Application

Name: NfcChat

Built-in elements only

Targets: Symbian Device

(including Symbian Anna)

Accept defaults for the rest


Add Connectivity

Edit the Qt project file (nfcchat.pro)

Uncomment & add mobility component: connectivity

Add LocalServices Capability


CONFIG += mobility

MOBILITY += connectivity

symbian:TARGET.CAPABILITY += NetworkServices LocalServices

Allows Internet access Allows NFC

UI Design NFC Send Button Button Image

Copy NfcButton.png to the projects qml folder

C:\Qt\dev\NfcChat\qml\NfcChat\NfcButton.png

Open Switch to UI Designer for main.qml

Create the Button Image

From Library Resources: drag the button image to the top

right window corner

In Properties, change the id to sendButton

In Properties Layout, set top and right anchors to Parent

(rectangle1) (Margin: 0)

Interactivity

From Library Items: drag the Mouse Area on top of the

button image (gets a child in the Navigator drag the

mouse_area1 on the sendButton if it isnt)

In Properties Layout, set anchors to fill the parent


UI Design Message Editor Hello World cleanup

Delete the Hello World text and the window-wide

mouse area

Text Edit element

From Library Items: drag the Text Edit element

to the top left window corner

In Properties, change the Id to sendTextEdit

In Properties TextEdit, change the text to Hello

NFC

In Properties TextEdit, change the font size to

10 points

In Properties Layout, set top and left anchors to

Parent (rectangle1) and the right anchor to

sendButton (Margin: 0)


UI Design Message View ListView

Will display messages stored in a

data model

From Library Items: drag the List

View element to the window

In Properties, change the id to

messageView

In Properties Layout, set top

anchor to sendButton. Other edges:

Parent (rectangle1). All Margin: 0.


NfcPeerToPeer

Go to the Edit view

New C++ class

Right-click the project

Add New ...

C++ Class

Class name: NfcPeerToPeer

Base class: QObject


Include

Headers, define member variable


#include

#include

#include

QTM_USE_NAMESPACE // Use Qt Mobility namespace

[...]

private:

QLatin1String nfcUri;

QNearFieldManager *nfcManager;

QLlcpServer *nfcServer;

QLlcpSocket *nfcClientSocket;

QLlcpSocket *nfcServerSocket;

nfcpeertopeer.h

Search for Targets

Save own unique service Uri and start target detection


NfcPeerToPeer::NfcPeerToPeer(QObject *parent) :

QObject(parent), nfcUri("urn:nfc:xsn:nokia.com:nfcchat")

{

nfcManager = new QNearFieldManager(this);

connect(nfcManager, SIGNAL(targetDetected(QNearFieldTarget*)),




// Only detect other NFC devices. Leave the phone to handle NFC tags.

nfcManager->startTargetDetection(QNearFieldTarget::NfcForumDevice);

}

nfcpeertopeer.cpp

Signals & Slots

Handle targets

Emit chat messages to the UI


private slots:

void targetDetected(QNearFieldTarget *target);

void targetLost(QNearFieldTarget *target);

nfcpeertopeer.h

signals:

void chatMessage(const QString& nfcClientMessage);

nfcpeertopeer.h

React

New target: emit info message

Target out of range: emit message & delayed object delete


void NfcPeerToPeer::targetDetected(QNearFieldTarget *target)

{

emit chatMessage("Target detected");

}

nfcpeertopeer.cpp

void NfcPeerToPeer::targetLost(QNearFieldTarget *target)

{

target->deleteLater();

emit chatMessage("Target lost");

}

nfcpeertopeer.cpp

Register C++ with QML

Make your C++ class available in QML

QML Name: NfcPeerToPeer

QML Library: NfcPeerToPeer 1.0


#include

#include "nfcpeertopeer.h"

int main(int argc, char *argv[]) {

QApplication app(argc, argv);

qmlRegisterType("NfcPeerToPeer", 1, 0, "NfcPeerToPeer");

[...]

}

main.cpp

NfcPeerToPeer in QML Import module

Update the list model when a NFC chat message arrives


import NfcPeerToPeer 1.0

main.qml

NfcPeerToPeer {

id: nfcPeerToPeer

onChatMessage: {

messageModel.append( {"chatMessage": nfcClientMessage} )

}

}

ListModel { id: messageModel }

ListView { model: messageModel

delegate: Text { text: chatMessage }

// [...]

}

main.qml

Test!

Run the app on two phones

Switch phones in the Run Settings

Touch both phones

Admire how they detect each other!


NFC LLCP Server Socket

Define slots for new server connections & sending text

Listen for new server connections


NfcPeerToPeer::NfcPeerToPeer(QObject *parent)

// [...]

nfcServer = new QLlcpServer(this);

connect(nfcServer, SIGNAL(newConnection()),

this, SLOT(handleNewConnection()));

nfcServer->listen(nfcUri);

}

nfcpeertopeer.cpp

public slots:

void sendText(const QString& text);

private slots:

void handleNewConnection();

nfcpeertopeer.h

Connections & Sending

Create a socket for a new server connection

Slot to send chat messages over the server socket


void NfcPeerToPeer::sendText(const QString& text) {

if (nfcServerSocket && nfcServerSocket->isOpen()) {

nfcServerSocket->write(text.toUtf8());

emit chatMessage("Message sent");

}

}

nfcpeertopeer.cpp

void NfcPeerToPeer::handleNewConnection() {

if (nfcServerSocket) { nfcServerSocket->deleteLater(); }

nfcServerSocket = nfcServer->nextPendingConnection();

}

nfcpeertopeer.cpp

Sending Chat Messages

Call the sendText() slot in MouseAreas onClicked handler


onClicked: nfcPeerToPeer.sendText(sendTextEdit.text)

main.qml

NFC LLCP Client Socket

Define slot to read incoming text

Create the client socket (to be connected to NFC targets)


NfcPeerToPeer::NfcPeerToPeer(QObject *parent)

// [...]

nfcClientSocket = new QLlcpSocket(this);

connect(nfcClientSocket, SIGNAL(readyRead()),

this, SLOT(readText()));

}

nfcpeertopeer.cpp

private slots:

void readText();

nfcpeertopeer.h

Connections & Reading Connect the socket to a target in targetDetected()

Read text from the socket and emit a signal

Cleanup in targetLost()


void NfcPeerToPeer::readText() {

QByteArray rawData = nfcClientSocket->readAll();

QString data = QString::fromUtf8(rawData.constData(), rawData.size());

emit chatMessage(data);

}

nfcpeertopeer.cpp

nfcClientSocket->connectToService(target, nfcUri);

nfcpeertopeer.cpp

nfcClientSocket->disconnectFromService();

nfcpeertopeer.cpp

Test! #2

Touch upper back of two phones

While touching, press the send button


The extended solution on Nokia Developer Projects includes MeeGo support, cached

text sending, error handling and is based on Qt Quick Components.

Note: if installing the solution, uninstall your own app first to avoid a name conflict..

https://projects.developer.nokia.com/nfcchat

73

NFC Summary



Nfc Examples Tech. Tag / p2p Showcase

Nfc Interactor Qt Tag Powerful tag & NDEF reading, dynamic NDEF message composer, reusable tag handling classes, Nfc detection

Nfc Corkboard Qt Tag Higher-level tag reading / writing, app autostart, Nfc detection

Nfc Chat Qt p2p p2p data transfer, Nfc detection

Nfc Creator Java ME Tag Tag reading / writing

Nfc Settings Qt Quick Qt - Nfc detection

Nfc Content Handler Plug-in Symbian Tag App autostart

Nfc NPP Example Qt p2p p2p data transfer (Google NPP protocol)

Nfc Peer-to-Peer Example Qt p2p p2p data transfer

Simple LLCP Chat Java ME p2p p2p data transfer

http://www.developer.nokia.com/Develop/NFC/Code_examples/

http://www.nfcinteractor.com/


Summary Design

Guidelines

developer.nokia.com/NFC

Develop Distribute

Thank You.


Andreas Jakl

[@mopius]

nfcinteractor.com

Technology Wizard

Nokia

NFC Introduction bit.ly/NfcIntro Windows (Phone) 8 NFC App Scenarios bit.ly/NFCAppScenarios NFC Development on the Windows 8 Platform bit.ly/Win8NFC R

ela

ted

Pre

sen

tati

on

s

Documents

Nokianfcdevelopment1 0-1-110423141942 Phpapp02