+ All Categories
Home > Technology > NFC Development with Qt - v2.2.0 (5. November 2012)

NFC Development with Qt - v2.2.0 (5. November 2012)

Date post: 12-May-2015
Category:
Upload: andreas-jakl
View: 38,785 times
Download: 2 times
Share this document with a friend
Description:
Learn developing Near Field Communication (NFC) apps for Nokia's Symbian and MeeGo phones with step-by-step tutorials! The three development options Qt, Symbian native and Java ME are outlined. A more detailed explanation shows the Qt Mobility 1.2 APIs to create modern NFC applications for smartphones. In the final part, step-by-step hands-on tutorials walk you through developing your first two NFC apps. The first demo extends an example from the Qt SDK with reading & writing both URI and text NDEF records to create new sticky notes on the virtual corkboards visible on the screen. The second demo uses the LLCP protocol to create a peer-to-peer chat application between two NFC Forum compatible devices.
Popular Tags:
76
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 Related Presentations
Transcript
Page 1: NFC Development with Qt - v2.2.0 (5. November 2012)

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

Page 2: NFC Development with Qt - v2.2.0 (5. November 2012)

2

NFC Development

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

Page 3: NFC Development with Qt - v2.2.0 (5. November 2012)

NFC Development Alternatives

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

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

Page 4: NFC Development with Qt - v2.2.0 (5. November 2012)

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

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

Page 5: NFC Development with Qt - v2.2.0 (5. November 2012)

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

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

Page 6: NFC Development with Qt - v2.2.0 (5. November 2012)

Contactless Communication API

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

• JSR 257

– Tag discovery and data exchange

– NDEF messages

• Example project: Nfc Creator

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

nfccreator

Page 7: NFC Development with Qt - v2.2.0 (5. November 2012)

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

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

Page 8: NFC Development with Qt - v2.2.0 (5. November 2012)

8

Qt Mobility NFC

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

Page 9: NFC Development with Qt - v2.2.0 (5. November 2012)

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

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 – ...

Page 10: NFC Development with Qt - v2.2.0 (5. November 2012)

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 SDK’s Symbian Anna or Belle target *

• MeeGo

– Nokia N9

– Install Qt SDK’s MeeGo Harmattan target

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

More information: bit.ly/StartNfc

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

Page 11: NFC Development with Qt - v2.2.0 (5. November 2012)

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

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)

Page 12: NFC Development with Qt - v2.2.0 (5. November 2012)

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

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

Page 13: NFC Development with Qt - v2.2.0 (5. November 2012)

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

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

Page 14: NFC Development with Qt - v2.2.0 (5. November 2012)

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

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

Page 15: NFC Development with Qt - v2.2.0 (5. November 2012)

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

• Need more?

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

Page 16: NFC Development with Qt - v2.2.0 (5. November 2012)

16

Nfc Corkboard

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

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

Page 17: NFC Development with Qt - v2.2.0 (5. November 2012)

Importing the Example

• From Qt Creator’s Getting

Started screen

– Search for Corkboards example

– Or open:

C:\QtSDK\Examples\4.7\declarative\

toys\corkboards\corkboards.pro

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

Page 18: NFC Development with Qt - v2.2.0 (5. November 2012)

Choosing Targets

• Select at least the Symbian Anna target

– Qt 4.7.4 & Qt Mobility 1.2 is required

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

Page 19: NFC Development with Qt - v2.2.0 (5. November 2012)

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!

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

Page 20: NFC Development with Qt - v2.2.0 (5. November 2012)

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

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:

Page 21: NFC Development with Qt - v2.2.0 (5. November 2012)

in: corkboards.qml id: list

in: corkboards.qml id: flickable

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

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

Page 22: NFC Development with Qt - v2.2.0 (5. November 2012)

Add Connectivity

• Edit the Qt project file (corkboards.pro)

– Uncomment & add mobility component: connectivity

– Add LocalServices Capability (for Symbian)

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

CONFIG += mobility

MOBILITY += connectivity

symbian:TARGET.CAPABILITY += NetworkServices LocalServices

Allows Internet access Allows NFC

Page 23: NFC Development with Qt - v2.2.0 (5. November 2012)

Good to Know: Symbian Security *

1. Determine the required security / privacy features

– Most common:

2. Add to Qt project file (.pro)

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

* 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

Page 24: NFC Development with Qt - v2.2.0 (5. November 2012)

Good to Know: Symbian Security

3. Get the right certificate during development

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

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)

Page 25: NFC Development with Qt - v2.2.0 (5. November 2012)

Good to Know: Symbian Security

4. Publish

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

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

Page 26: NFC Development with Qt - v2.2.0 (5. November 2012)

NdefManager

• New C++ class

– Right-click the project

→ Add New ...

→ C++ Class

– Class name: NdefManager

– Base class: QObject

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

Page 27: NFC Development with Qt - v2.2.0 (5. November 2012)

Qt Meta-Object System

• C++ extended with QObject

– Introspection: meta-information at runtime

– Inter-object communication: signals & slots

– Parent / Child hierarchy: easier memory

management

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

Page 28: NFC Development with Qt - v2.2.0 (5. November 2012)

Include

• Headers, define member variable

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

#include <qnearfieldmanager.h>

#include <qndeffilter.h>

#include <qnearfieldtarget.h>

#include <qndefmessage.h>

#include <qndefrecord.h>

#include <qndefnfcurirecord.h>

#include <QUrl>

#include <QDebug> // we will test first!

QTM_USE_NAMESPACE // Use Qt Mobility namespace

[...]

private:

QNearFieldManager *nfcManager;

ndefmanager.h

Page 29: NFC Development with Qt - v2.2.0 (5. November 2012)

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

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

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

Page 30: NFC Development with Qt - v2.2.0 (5. November 2012)

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

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

Page 31: NFC Development with Qt - v2.2.0 (5. November 2012)

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 doesn’t know or care which slots receive signal

– Information encapsulation

• Integrated, independent components

– Slots are normal C++ member functions

– Don’t know if signals are connected to them

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

Page 32: NFC Development with Qt - v2.2.0 (5. November 2012)

Lost & Found

• Methods to handle lost & found tags = Slots

• Tip

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

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

private slots:

void targetDetected(const QNdefMessage &message,

QNearFieldTarget *target);

void targetLost(QNearFieldTarget *target);

ndefmanager.h

Page 33: NFC Development with Qt - v2.2.0 (5. November 2012)

React

• New target: write debug output to console for now

• Target out of range: delayed object delete

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

void NdefManager::targetDetected(const QNdefMessage &message,

QNearFieldTarget *target)

{

qDebug() << "Uri Target detected!";

}

ndefmanager.cpp

void NdefManager::targetLost(QNearFieldTarget *target)

{

target->deleteLater();

}

ndefmanager.cpp

Page 34: NFC Development with Qt - v2.2.0 (5. November 2012)

Register C++ with QML

• Make your C++ class available in QML

– QML Name: NdefManager

– QML Library: Nfc 1.0

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

#include <QtDeclarative>

#include "ndefmanager.h"

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

QApplication app(argc, argv);

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

[...]

}

main.cpp

Page 35: NFC Development with Qt - v2.2.0 (5. November 2012)

NdefManager in QML

• Import module

• Create Instance

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

import Nfc 1.0

corkboards.qml

NdefManager {

id: ndefManager

}

corkboards.qml

Page 36: NFC Development with Qt - v2.2.0 (5. November 2012)

Test! #2

• Run the app

• Touch a URI formatted NDEF tag

• Observe the Application Output

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

Page 37: NFC Development with Qt - v2.2.0 (5. November 2012)

Parse Tag & Emit Contents

• Revisit and extend the target detection slot

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

void NdefManager::targetDetected(const QNdefMessage &message,

QNearFieldTarget *target) {

qDebug() << "Uri Target detected!";

// Go through all records in the message

foreach (const QNdefRecord &record, message) {

// Check type again, just to make sure

if (record.isRecordType<QNdefNfcUriRecord>()) {

// Convert to the specialized URI record class

QNdefNfcUriRecord uriRecord(record);

// Emit a signal with the URI

emit nfcReadTagUri(uriRecord.uri());

}

}

}

ndefmanager.cpp

Page 38: NFC Development with Qt - v2.2.0 (5. November 2012)

Define the Signal

• Signals have no implementation

– They represent information, not a method to execute

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

signals:

void nfcReadTagUri(const QUrl& nfcTagUri);

ndefmanager.h

Page 39: NFC Development with Qt - v2.2.0 (5. November 2012)

Create new Notes

• Handle our new signal

– on<signal> : <javascript code>

– Get current corkboard page → append new notes element →

key: “noteText”, value: URI from NDEF message

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

NdefManager {

id: ndefManager

onNfcReadTagUri:

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

}

corkboards.qml

Page 40: NFC Development with Qt - v2.2.0 (5. November 2012)

Test! #3

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

current page!

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

Page 41: NFC Development with Qt - v2.2.0 (5. November 2012)

41

Interactive Nfc Corkboard

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

Tasks

– Extend previous example

– React to any kind of tags

– Write tags by pressing the red flag

while touching a tag

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

Page 42: NFC Development with Qt - v2.2.0 (5. November 2012)

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

Overview – Before QNdefFilter filter;

filter.appendRecord<QNdefNfcUriRecord>();

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

Page 43: NFC Development with Qt - v2.2.0 (5. November 2012)

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

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

Page 44: NFC Development with Qt - v2.2.0 (5. November 2012)

React to all targets

• Generic target detection instead of listening to specific tag

message(s)

– Remove previous targetDetected() with two parameters

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

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

Page 45: NFC Development with Qt - v2.2.0 (5. November 2012)

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

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

{

// [...]

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

QNdefFilter filter;

filter.appendRecord<QNdefNfcUriRecord>();

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

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

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

nfcManager->startTargetDetection();

}

ndefmanager.cpp

Page 46: NFC Development with Qt - v2.2.0 (5. November 2012)

Read NDEF Message

• Detected a target? Read its message.

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

void NdefManager::targetDetected(QNearFieldTarget *target)

{

qDebug() << "Target detected!";

const bool hasNdefMessage = target->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

Page 47: NFC Development with Qt - v2.2.0 (5. November 2012)

Target Lost

• Set cached target to NULL

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

void NdefManager::targetLost(QNearFieldTarget *target) {

cachedTarget = NULL; // New

target->deleteLater();

}

ndefmanager.cpp

Page 48: NFC Development with Qt - v2.2.0 (5. November 2012)

Parse NDEF Message

• Same code as before, different method

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

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

// Go through all records in the message

foreach (const QNdefRecord &record, message) {

// Check type

if (record.isRecordType<QNdefNfcUriRecord>()) {

// Convert to the specialized URI record class

QNdefNfcUriRecord uriRecord(record);

// Emit a signal with the URI

emit nfcReadTagUri(uriRecord.uri());

}

}

}

ndefmanager.cpp

Page 49: NFC Development with Qt - v2.2.0 (5. November 2012)

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

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

// Write NDEF message to the tag

cachedTarget->writeNdefMessages(QList<QNdefMessage>() << message);

} else {

qDebug() << "No valid URI";

}

} else {

qDebug() << "No cached target available";

}

}

ndefmanager.cpp

Page 50: NFC Development with Qt - v2.2.0 (5. November 2012)

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

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 <project dir>\qml\

Page 51: NFC Development with Qt - v2.2.0 (5. November 2012)

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!

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

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

potential errors.

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

Page 52: NFC Development with Qt - v2.2.0 (5. November 2012)

52

Nfc Chat

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

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

Page 53: NFC Development with Qt - v2.2.0 (5. November 2012)

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

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)

Page 54: NFC Development with Qt - v2.2.0 (5. November 2012)

New Project

• Qt Quick Application

– Name: NfcChat

– Built-in elements only

– Targets: Symbian Device

(including Symbian Anna)

– Accept defaults for the rest

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

Page 55: NFC Development with Qt - v2.2.0 (5. November 2012)

Add Connectivity

• Edit the Qt project file (nfcchat.pro)

– Uncomment & add mobility component: connectivity

– Add LocalServices Capability

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

CONFIG += mobility

MOBILITY += connectivity

symbian:TARGET.CAPABILITY += NetworkServices LocalServices

Allows Internet access Allows NFC

Page 56: NFC Development with Qt - v2.2.0 (5. November 2012)

UI Design – NFC Send Button • Button Image

– Copy NfcButton.png to the project’s 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 isn’t)

– In Properties Layout, set anchors to fill the parent

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

Page 57: NFC Development with Qt - v2.2.0 (5. November 2012)

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)

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

Page 58: NFC Development with Qt - v2.2.0 (5. November 2012)

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.

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

Page 59: NFC Development with Qt - v2.2.0 (5. November 2012)

NfcPeerToPeer

• Go to the “Edit” view

• New C++ class

– Right-click the project

→ Add New ...

→ C++ Class

– Class name: NfcPeerToPeer

– Base class: QObject

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

Page 60: NFC Development with Qt - v2.2.0 (5. November 2012)

Include

• Headers, define member variable

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

#include <qnearfieldmanager.h>

#include <qllcpserver.h>

#include <qllcpsocket.h>

QTM_USE_NAMESPACE // Use Qt Mobility namespace

[...]

private:

QLatin1String nfcUri;

QNearFieldManager *nfcManager;

QLlcpServer *nfcServer;

QLlcpSocket *nfcClientSocket;

QLlcpSocket *nfcServerSocket;

nfcpeertopeer.h

Page 61: NFC Development with Qt - v2.2.0 (5. November 2012)

Search for Targets

• Save own unique service Uri and start target detection

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

NfcPeerToPeer::NfcPeerToPeer(QObject *parent) :

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

{

nfcManager = new QNearFieldManager(this);

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

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

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

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

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

nfcManager->startTargetDetection(QNearFieldTarget::NfcForumDevice);

}

nfcpeertopeer.cpp

Page 62: NFC Development with Qt - v2.2.0 (5. November 2012)

Signals & Slots

• Handle targets

• Emit chat messages to the UI

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

private slots:

void targetDetected(QNearFieldTarget *target);

void targetLost(QNearFieldTarget *target);

nfcpeertopeer.h

signals:

void chatMessage(const QString& nfcClientMessage);

nfcpeertopeer.h

Page 63: NFC Development with Qt - v2.2.0 (5. November 2012)

React

• New target: emit info message

• Target out of range: emit message & delayed object delete

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

void NfcPeerToPeer::targetDetected(QNearFieldTarget *target)

{

emit chatMessage("Target detected");

}

nfcpeertopeer.cpp

void NfcPeerToPeer::targetLost(QNearFieldTarget *target)

{

target->deleteLater();

emit chatMessage("Target lost");

}

nfcpeertopeer.cpp

Page 64: NFC Development with Qt - v2.2.0 (5. November 2012)

Register C++ with QML

• Make your C++ class available in QML

– QML Name: NfcPeerToPeer

– QML Library: NfcPeerToPeer 1.0

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

#include <QtDeclarative>

#include "nfcpeertopeer.h"

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

QApplication app(argc, argv);

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

[...]

}

main.cpp

Page 65: NFC Development with Qt - v2.2.0 (5. November 2012)

NfcPeerToPeer in QML • Import module

• Update the list model when a NFC chat message arrives

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

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

Page 66: NFC Development with Qt - v2.2.0 (5. November 2012)

Test!

• Run the app on two phones

– Switch phones in the Run Settings

• Touch both phones

– Admire how they detect each other!

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

Page 67: NFC Development with Qt - v2.2.0 (5. November 2012)

NFC LLCP Server Socket

• Define slots for new server connections & sending text

• Listen for new server connections

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

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

Page 68: NFC Development with Qt - v2.2.0 (5. November 2012)

Connections & Sending

• Create a socket for a new server connection

• Slot to send chat messages over the server socket

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

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

Page 69: NFC Development with Qt - v2.2.0 (5. November 2012)

Sending Chat Messages

• Call the sendText() slot in MouseArea’s onClicked handler

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

onClicked: nfcPeerToPeer.sendText(sendTextEdit.text)

main.qml

Page 70: NFC Development with Qt - v2.2.0 (5. November 2012)

NFC LLCP Client Socket

• Define slot to read incoming text

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

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

NfcPeerToPeer::NfcPeerToPeer(QObject *parent)

// [...]

nfcClientSocket = new QLlcpSocket(this);

connect(nfcClientSocket, SIGNAL(readyRead()),

this, SLOT(readText()));

}

nfcpeertopeer.cpp

private slots:

void readText();

nfcpeertopeer.h

Page 71: NFC Development with Qt - v2.2.0 (5. November 2012)

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

• Read text from the socket and emit a signal

• Cleanup in targetLost()

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

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

Page 72: NFC Development with Qt - v2.2.0 (5. November 2012)

Test! #2

• Touch upper back of two phones

– While touching, press the send button

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

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

Page 73: NFC Development with Qt - v2.2.0 (5. November 2012)

73

NFC Summary

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

Page 74: NFC Development with Qt - v2.2.0 (5. November 2012)

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

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/

Page 75: NFC Development with Qt - v2.2.0 (5. November 2012)

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

Summary Design

Guidelines

developer.nokia.com/NFC

Develop Distribute

Page 76: NFC Development with Qt - v2.2.0 (5. November 2012)

Thank You.

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

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


Recommended