NFC Developmentwith Qt on Symbian and MeeGoAndreas Jakl                                                      NFC Introduct...
NFC Development2   © 2012 Nokia Nokia NFC Development with Qt v2.2.0 November 5, 2012 Andreas Jakl
NFC Development Alternatives       Java ME                         Qt Mobility                              Symbian Native...
NFC Developer Offering             Tools                                                          Channel             Qt D...
Java ME NFC Development                                                     Both free IDEs                                ...
Contactless Communication API                                     • JSR 257                                              –...
Symbian Platform NFC API• Exposes NFC middleware at the platform level    – Aimed at Symbian platform developers    – Plat...
Qt Mobility NFC8   © 2012 Nokia Nokia NFC Development with Qt v2.2.0 November 5, 2012 Andreas Jakl
What is Qt?                                             Using Qt SDK for                                                  ...
Qt NFC Development                                                   • Requirements                                       ...
Qt Mobility                                                                Mobility 1.1     Mobility 1.0                  ...
Qt Mobility 1.2 NFC• Interact with     – NFC Forum tags        – Target detection        – NDEF message handlers        – ...
API Overview** Not a class diagram, but explains sequential usage order                                                   ...
Qt NFC Source Code• Qt Mobility is Open Source     – How does a method work? How to make best      use of it? Take a look ...
Refresh your Qt Knowledge• The following tutorials require basic C++ & Qt skills• Need more?15     © 2012 Nokia Nokia NFC ...
Nfc Corkboard                             https://projects.developer.nokia.com/nfccorkboards                              ...
Importing the Example• From Qt Creator’s Getting Started screen     – Search for Corkboards example     – Or open:      C:...
Choosing Targets• Select at least the Symbian Anna target     – Qt 4.7.4 & Qt Mobility 1.2 is required18      © 2012 Nokia...
Test!• Connect phone via USB ^     – Ovi/Nokia Suite mode     – Start CODA on device• Check      Selected Symbian target  ...
We will add this:App Overview                                                                                 ndefmanager....
Model, View & Delegate                  ListModel                                  ListView                        Delegat...
Add Connectivity• Edit the Qt project file (corkboards.pro)     – Uncomment & add mobility component: connectivity     CON...
Good to Know: Symbian Security ** Qt apps are native apps; therefore, the security model of the target operating system ap...
Good to Know: Symbian Security3. Get the right certificate during development     No / Basic Capabilities                 ...
Good to Know: Symbian Security  4. Publish                                                  No / Basic Capabilities       ...
NdefManager• New C++ class     – Right-click the project      → Add New ...      → C++ Class     – Class name: NdefManager...
Qt Meta-Object System• C++ extended with QObject     – Introspection: meta-information at runtime     – Inter-object commu...
Include• Headers, define member variable                    ndefmanager.h                     #include <qnearfieldmanager....
Start Waitingndefmanager.cppNdefManager::NdefManager(QObject *parent) : QObject(parent){    // NdefManager (this) is the p...
Signals & Slots• Signal      – Emitted when a particular event occurs (e.g., clicked())      – Qt objects: predefined sign...
Signals & Slots• Type safe     – Signal signature must match signature of receiving slot     – (Slot might also have short...
Lost & Found• Methods to handle lost & found tags = Slots                 ndefmanager.h                  private slots:   ...
React• New target: write debug output to console for now      ndefmanager.cpp      void NdefManager::targetDetected(const ...
Register C++ with QML• Make your C++ class available in QML     – QML Name: NdefManager     – QML Library: Nfc 1.0       m...
NdefManager in QML• Import module     corkboards.qml     import Nfc 1.0• Create Instance     corkboards.qml     NdefManage...
Test! #2• Run the app• Touch a URI formatted NDEF tag• Observe the Application Output36    © 2012 Nokia Nokia NFC Developm...
Parse Tag & Emit Contents• Revisit and extend the target detection slot              ndefmanager.cpp               void Nd...
Define the Signal• Signals have no implementation     – They represent information, not a method to execute      ndefmanag...
Create new Notes• Handle our new signal   – on<signal> : <javascript code>     – Get current corkboard page → append new n...
Test! #3• Touch Uri-formatted NDEF NFC tags to create notes on the current page!40   © 2012 Nokia Nokia NFC Development wi...
Interactive Nfc Corkboard                             https://projects.developer.nokia.com/nfccorkboards                  ...
Overview – BeforeRegister NDEF filters and detect targetsQNdefFilter filter;filter.appendRecord<QNdefNfcUriRecord>();nfcMa...
Overview – AfterDetect any kind of targetsconnect(nfcManager, SIGNAL(targetDetected(QNearFieldTarget*)),        this, SLOT...
React to all targets• Generic target detection instead of listening to specific tag  message(s)      – Remove previous tar...
Start Generic Target Detection     ndefmanager.cpp     NdefManager::NdefManager(QObject *parent) : QObject(parent)     {  ...
Read NDEF Message• Detected a target? Read its message.     ndefmanager.cpp     void NdefManager::targetDetected(QNearFiel...
Target Lost• Set cached target to NULL          ndefmanager.cpp            void NdefManager::targetLost(QNearFieldTarget *...
Parse NDEF Message• Same code as before, different method     ndefmanager.cpp     void NdefManager::ndefMessageRead(const ...
Write URI Ndef Message     ndefmanager.cpp     void NdefManager::nfcWriteTag(const QString &nfcTagText) {         // The d...
Extend UI with Write Button        Day.qml, between lines 122 / 123 (below MouseArea with id: mouse)          Image {     ...
Test!                                                                  https://projects.developer.nokia.com/nfccorkboards•...
Nfc Chat                                  https://projects.developer.nokia.com/nfcchat                                    ...
App Overview            main.cpp                                             main.qml                    nfcpeertopeer.cpp...
New Project• Qt Quick Application     – Name: NfcChat     – Built-in elements only     – Targets: Symbian Device      (inc...
Add Connectivity• Edit the Qt project file (nfcchat.pro)     – Uncomment & add mobility component: connectivity     CONFIG...
UI Design – NFC Send Button• Button Image      – Copy NfcButton.png to the project’s qml folder        C:QtdevNfcChatqmlNf...
UI Design – Message Editor• Hello World cleanup      – Delete the “Hello World” text and the window-wide        mouse area...
UI Design – Message View• ListView      – Will display messages stored in a        data model      – From Library → Items:...
NfcPeerToPeer• Go to the “Edit” view• New C++ class     – Right-click the project      → Add New ...      → C++ Class     ...
Include• Headers, define member variable                    nfcpeertopeer.h                     #include <qnearfieldmanage...
Search for Targets• Save own unique service Uri and start target detectionnfcpeertopeer.cppNfcPeerToPeer::NfcPeerToPeer(QO...
Signals & Slots• Handle targets             nfcpeertopeer.h               private slots:                   void targetDete...
React• New target: emit info message     nfcpeertopeer.cpp      void NfcPeerToPeer::targetDetected(QNearFieldTarget *targe...
Register C++ with QML• Make your C++ class available in QML     – QML Name: NfcPeerToPeer     – QML Library: NfcPeerToPeer...
NfcPeerToPeer in QML• Import module     main.qml     import NfcPeerToPeer 1.0• Update the list model when a NFC chat messa...
Test!• Run the app on two phones     – Switch phones in the Run Settings• Touch both phones     – Admire how they detect e...
NFC LLCP Server Socket• Define slots for new server connections & sending text     nfcpeertopeer.h     public slots:      ...
Connections & Sending• Create a socket for a new server connection     nfcpeertopeer.cpp     void NfcPeerToPeer::handleNew...
Sending Chat Messages• Call the sendText() slot in MouseArea’s onClicked handler     main.qml     onClicked: nfcPeerToPeer...
NFC LLCP Client Socket• Define slot to read incoming text     nfcpeertopeer.h     private slots:         void readText();•...
Connections & Reading• Connect the socket to a target in targetDetected()      nfcpeertopeer.cpp      nfcClientSocket->con...
Test! #2                                                                           https://projects.developer.nokia.com/nf...
NFC Summary73   © 2012 Nokia Nokia NFC Development with Qt v2.2.0 November 5, 2012 Andreas Jakl
Nfc Examples                                                                                  http://www.nfcinteractor.com...
Summary                                                           developer.nokia.com/NFC      Design                     ...
Thank You.Andreas Jakl                                                     NFC Introduction                               ...
Upcoming SlideShare
Loading in...5
×

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

42,602

Published on

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.

Published in: Technology, Business
6 Comments
7 Likes
Statistics
Notes
  • NFC with Qt
    Excellent info
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Thank you Andreas for this interesting presentation.
    Could you please provide some hint/link on which device and development environment can be used to work in Card Emulation mode? Thanks.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • @dkainer: auto-starting Qt apps in response to custom records on an NFC tag will be supported by Qt as well - see the Qt Mobility documentation for more information. This is not yet enabled with the current beta releases. If you need autostart-functionality right now, you can simply adapt the Symbian C++ example: https://projects.developer.nokia.com/nfccontenthandlerplugin
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • @mossmatt: Sure, NFC device kits are still available - just sign up for the Nokia Developer Launchpad program to access it. More information: http://www.developer.nokia.com/Community/Wiki/Developing_NFC_Applications#Obtaining_an_NFC_enabled_phone
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Are NFC Device Kits still available? I would like to start developing a few ideas for apps.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
42,602
On Slideshare
0
From Embeds
0
Number of Embeds
40
Actions
Shares
0
Downloads
806
Comments
6
Likes
7
Embeds 0
No embeds

No notes for slide

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

  1. 1. NFC Developmentwith Qt on Symbian and MeeGoAndreas Jakl NFC Introduction Related Presentations bit.ly/NfcIntro[@mopius] Windows (Phone) 8 NFC App Scenariosnfcinteractor.com bit.ly/NFCAppScenariosTechnology WizardNokia NFC Development on the Windows 8 Platform bit.ly/Win8NFC 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.
  2. 2. NFC Development2 © 2012 Nokia Nokia NFC Development with Qt v2.2.0 November 5, 2012 Andreas Jakl
  3. 3. NFC Development Alternatives Java ME Qt Mobility Symbian Native Windows Phone 8Works on Series 40 and Cross-platform API. Low level control over Proximity APIs Symbian devices. devices’ NFC support. Best flexibility and Similar on Windows 8 Limited use of More complex, platformsmartphone features. ease of app knowledge required. Extra presentation: development. bit.ly/Win8NFC Lumia 610 NFC – WP7 bit.ly/WpNfc 3 © 2012 Nokia Nokia NFC Development with Qt v2.2.0 November 5, 2012 Andreas Jakl
  4. 4. NFC Developer Offering Tools Channel Qt Development Qt SDK 1.2 Qt Mobility 1.2 Nokia Store Symbian Development NFC Collection Symbian Belle SDK Java ME development Nokia 6212 Classic NFC SDK or Symbian Belle SDK4 © 2012 Nokia Nokia NFC Development with Qt v2.2.0 November 5, 2012 Andreas Jakl
  5. 5. 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_development5 © 2012 Nokia Nokia NFC Development with Qt v2.2.0 November 5, 2012 Andreas Jakl
  6. 6. Contactless Communication API • JSR 257 – Tag discovery and data exchange – NDEF messages • Example project: Nfc Creator – https://projects.developer.nokia.com/ nfccreator6 © 2012 Nokia Nokia NFC Development with Qt v2.2.0 November 5, 2012 Andreas Jakl
  7. 7. 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 Symbian7 © 2012 Nokia Nokia NFC Development with Qt v2.2.0 November 5, 2012 Andreas Jakl
  8. 8. Qt Mobility NFC8 © 2012 Nokia Nokia NFC Development with Qt v2.2.0 November 5, 2012 Andreas Jakl
  9. 9. What is Qt? Using Qt SDK for – Dev. environment – Testing – Translation Publish to – Help – Nokia Store (Symbian, MeeGo) Developer App Source Code – Windows – Linux Using Qt framework for – Mac – User Interface – Embedded – Networking – Location (GPS) – Web integration – ...9 © 2012 Nokia Nokia NFC Development with Qt v2.2.0 November 5, 2012 Andreas Jakl
  10. 10. 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 More information: bit.ly/StartNfc – Nokia N9 – Install Qt SDK’s MeeGo Harmattan target10 © 2012 Nokia Nokia NFC Development with Qt v2.2.0 November 5, 2012 Andreas Jakl * Apps compiled with the Symbian Anna target are compatible to Symbian^3, Anna & Belle.
  11. 11. Qt Mobility Mobility 1.1 Mobility 1.0 Camera Bearer Management API Document Gallery Contacts Feedback Location Landmarks Messaging Maps/Navigation Multimedia Organizer Publish and Subscribe Service Framework – Out of process Service Framework Mobility 1.2 Sensors System Information Connectivity (Bluetooth, NFC) Versit11 © 2012 Nokia Nokia NFC Development with Qt v2.2.0 November 5, 2012 Andreas Jakl
  12. 12. 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 sockets12 © 2012 Nokia Nokia NFC Development with Qt v2.2.0 November 5, 2012 Andreas Jakl
  13. 13. API Overview** Not a class diagram, but explains sequential usage order QNearFieldManager QLlcpServer Detects and filters Listen for new server targets socket connections. QNearFieldTarget QNdefMessage Query properties, QLlcpSocket Collection of 0 or more read/write messages, Read / write data. For records send commands or server & client sockets. establish a client socket QNdefRecord Generic NFC Access to NDEF data. Subclasses for handling Tag access specific details. Peer to peer 13 © 2012 Nokia Nokia NFC Development with Qt v2.2.0 November 5, 2012 Andreas Jakl
  14. 14. 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:QtMobilitysrcconnectivitynfc14 © 2012 Nokia Nokia NFC Development with Qt v2.2.0 November 5, 2012 Andreas Jakl
  15. 15. 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
  16. 16. Nfc Corkboard https://projects.developer.nokia.com/nfccorkboards Tasks – Extend Qt SDK example with NFC: Touch tag to create note – Qt Quick based UI – C++ based NFC – Integrate C++ with QML16 © 2012 Nokia Nokia NFC Development with Qt v2.2.0 November 5, 2012 Andreas Jakl
  17. 17. Importing the Example• From Qt Creator’s Getting Started screen – Search for Corkboards example – Or open: C:QtSDKExamples4.7declarative toyscorkboardscorkboards.pro17 © 2012 Nokia Nokia NFC Development with Qt v2.2.0 November 5, 2012 Andreas Jakl
  18. 18. Choosing Targets• Select at least the Symbian Anna target – Qt 4.7.4 & Qt Mobility 1.2 is required18 © 2012 Nokia Nokia NFC Development with Qt v2.2.0 November 5, 2012 Andreas Jakl
  19. 19. 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
  20. 20. We will add this:App Overview ndefmanager.cpp/.h NFC Tag discovery and reading main.cpp corkboards.qml Day.qml Application startup UI definition Delegate for drawing Loads and shows Defines data model the UI for a single day corkboards.qml and view Interaction for notes20 © 2012 Nokia Nokia NFC Development with Qt v2.2.0 November 5, 2012 Andreas Jakl
  21. 21. Model, View & Delegate ListModel ListView Delegate Defines free-form list Shows data from a Template defining each data source model in a list item instantiated by the view Container for Horizontal or vertical ListElement definitions in: corkboards.qml in: corkboards.qml in: Day.qml id: list id: flickable21 © 2012 Nokia Nokia NFC Development with Qt v2.2.0 November 5, 2012 Andreas Jakl
  22. 22. Add Connectivity• Edit the Qt project file (corkboards.pro) – Uncomment & add mobility component: connectivity CONFIG += mobility MOBILITY += connectivity – Add LocalServices Capability (for Symbian) symbian:TARGET.CAPABILITY += NetworkServices LocalServices Allows Internet access Allows NFC22 © 2012 Nokia Nokia NFC Development with Qt v2.2.0 November 5, 2012 Andreas Jakl
  23. 23. Good to Know: Symbian Security ** Qt apps are native apps; therefore, the security model of the target operating system applies.1. Determine the required security / privacy features – Most common: (See: developer.nokia.com/Community/Wiki/Capabilities) Feature Capability Internet access, telephony, messaging NetworkServices Access location (GPS, etc.) Location Camera, record audio UserEnvironment Basic / User Capabilities Contacts, Calendar ReadUserData / WriteUserData Bluetooth, NFC LocalServices Extended / System IMEI, model name, battery status ReadDeviceData Capabilities2. Add to Qt project file (.pro) symbian:TARGET.CAPABILITY += Location LocalServices23 © 2012 Nokia Nokia NFC Development with Qt v2.2.0 November 5, 2012 Andreas Jakl
  24. 24. Good to Know: Symbian Security3. Get the right certificate during development No / Basic Capabilities Extended Capabilities Use auto-generated self signed certificate Sign up for Nokia Publish account (€1) (default, no action required) 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)24 © 2012 Nokia Nokia NFC Development with Qt v2.2.0 November 5, 2012 Andreas Jakl
  25. 25. 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)Need Certified Signed capabilities? Publish to the Nokia Storedeveloper.nokia.com/Community/Wiki/Capabilities-> Purchase a Publisher ID ($200 / year)Submit to Certified Signed process @ www.symbiansigned.com 25 © 2012 Nokia Nokia NFC Development with Qt v2.2.0 November 5, 2012 Andreas Jakl
  26. 26. NdefManager• New C++ class – Right-click the project → Add New ... → C++ Class – Class name: NdefManager – Base class: QObject26 © 2012 Nokia Nokia NFC Development with Qt v2.2.0 November 5, 2012 Andreas Jakl
  27. 27. Qt Meta-Object System• C++ extended with QObject – Introspection: meta-information at runtime – Inter-object communication: signals & slots – Parent / Child hierarchy: easier memory management27 © 2012 Nokia Nokia NFC Development with Qt v2.2.0 November 5, 2012 Andreas Jakl
  28. 28. Include• Headers, define member variable ndefmanager.h #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;28 © 2012 Nokia Nokia NFC Development with Qt v2.2.0 November 5, 2012 Andreas Jakl
  29. 29. Start Waitingndefmanager.cppNdefManager::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*)));} 29 © 2012 Nokia Nokia NFC Development with Qt v2.2.0 November 5, 2012 Andreas Jakl
  30. 30. 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
  31. 31. 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 them31 © 2012 Nokia Nokia NFC Development with Qt v2.2.0 November 5, 2012 Andreas Jakl
  32. 32. Lost & Found• Methods to handle lost & found tags = Slots ndefmanager.h private slots: void targetDetected(const QNdefMessage &message, QNearFieldTarget *target); void targetLost(QNearFieldTarget *target);• 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
  33. 33. React• New target: write debug output to console for now ndefmanager.cpp void NdefManager::targetDetected(const QNdefMessage &message, QNearFieldTarget *target) { qDebug() << "Uri Target detected!"; }• Target out of range: delayed object delete ndefmanager.cpp void NdefManager::targetLost(QNearFieldTarget *target) { target->deleteLater(); }33 © 2012 Nokia Nokia NFC Development with Qt v2.2.0 November 5, 2012 Andreas Jakl
  34. 34. Register C++ with QML• Make your C++ class available in QML – QML Name: NdefManager – QML Library: Nfc 1.0 main.cpp #include <QtDeclarative> #include "ndefmanager.h" int main(int argc, char *argv[]) { QApplication app(argc, argv); qmlRegisterType<NdefManager>("Nfc", 1, 0, "NdefManager"); [...] }34 © 2012 Nokia Nokia NFC Development with Qt v2.2.0 November 5, 2012 Andreas Jakl
  35. 35. NdefManager in QML• Import module corkboards.qml import Nfc 1.0• Create Instance corkboards.qml NdefManager { id: ndefManager }35 © 2012 Nokia Nokia NFC Development with Qt v2.2.0 November 5, 2012 Andreas Jakl
  36. 36. Test! #2• Run the app• Touch a URI formatted NDEF tag• Observe the Application Output36 © 2012 Nokia Nokia NFC Development with Qt v2.2.0 November 5, 2012 Andreas Jakl
  37. 37. Parse Tag & Emit Contents• Revisit and extend the target detection slot ndefmanager.cpp 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()); } } }37 © 2012 Nokia Nokia NFC Development with Qt v2.2.0 November 5, 2012 Andreas Jakl
  38. 38. Define the Signal• Signals have no implementation – They represent information, not a method to execute ndefmanager.h signals: void nfcReadTagUri(const QUrl& nfcTagUri);38 © 2012 Nokia Nokia NFC Development with Qt v2.2.0 November 5, 2012 Andreas Jakl
  39. 39. 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 messagecorkboards.qmlNdefManager { id: ndefManager onNfcReadTagUri: list.get(flickable.currentIndex).notes.append({"noteText":nfcTagUri})}39 © 2012 Nokia Nokia NFC Development with Qt v2.2.0 November 5, 2012 Andreas Jakl
  40. 40. 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
  41. 41. Interactive Nfc Corkboard https://projects.developer.nokia.com/nfccorkboards Tasks – Extend previous example – React to any kind of tags – Write tags by pressing the red flag while touching a tag41 © 2012 Nokia Nokia NFC Development with Qt v2.2.0 November 5, 2012 Andreas Jakl
  42. 42. Overview – BeforeRegister NDEF filters and detect targetsQNdefFilter filter;filter.appendRecord<QNdefNfcUriRecord>();nfcManager->registerNdefMessageHandler(filter, this, SLOT(targetDetected(QNdefMessage,QNearFieldTarget*))); Signal is only emitted when a tag containing all records defined in the filter are found The slot directly gets the NDEF message void targetDetected(const QNdefMessage &message, QNearFieldTarget *target);42 © 2012 Nokia Nokia NFC Development with Qt v2.2.0 November 5, 2012 Andreas Jakl
  43. 43. Overview – AfterDetect any kind of targetsconnect(nfcManager, SIGNAL(targetDetected(QNearFieldTarget*)), this, SLOT(targetDetected(QNearFieldTarget*)));nfcManager->startTargetDetection(); Signals is emitted for every target that is detected void targetDetected(QNearFieldTarget *target); { const bool hasNdefMessage = target->hasNdefMessage(); if (hasNdefMessage) { connect(target, SIGNAL(ndefMessageRead(QNdefMessage)), this, SLOT(ndefMessageRead(QNdefMessage))); target->readNdefMessages(); } } Another signal is emitted when reading the message from the target is finished void NdefManager::ndefMessageRead(const QNdefMessage &message) ;43 © 2012 Nokia Nokia NFC Development with Qt v2.2.0 November 5, 2012 Andreas Jakl
  44. 44. React to all targets• Generic target detection instead of listening to specific tag message(s) – Remove previous targetDetected() with two parametersndefmanager.hpublic slots: void nfcWriteTag(const QString& nfcTagText); // Newprivate slots: void targetDetected(QNearFieldTarget *target); // Modified from prev. void ndefMessageRead(const QNdefMessage &message); // Newprivate: QNearFieldTarget *cachedTarget; // New 44 © 2012 Nokia Nokia NFC Development with Qt v2.2.0 November 5, 2012 Andreas Jakl
  45. 45. Start Generic Target Detection ndefmanager.cpp 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(); }45 © 2012 Nokia Nokia NFC Development with Qt v2.2.0 November 5, 2012 Andreas Jakl
  46. 46. Read NDEF Message• Detected a target? Read its message. ndefmanager.cpp 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; }46 © 2012 Nokia Nokia NFC Development with Qt v2.2.0 November 5, 2012 Andreas Jakl
  47. 47. Target Lost• Set cached target to NULL ndefmanager.cpp void NdefManager::targetLost(QNearFieldTarget *target) { cachedTarget = NULL; // New target->deleteLater(); }47 © 2012 Nokia Nokia NFC Development with Qt v2.2.0 November 5, 2012 Andreas Jakl
  48. 48. Parse NDEF Message• Same code as before, different method ndefmanager.cpp 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()); } } }48 © 2012 Nokia Nokia NFC Development with Qt v2.2.0 November 5, 2012 Andreas Jakl
  49. 49. Write URI Ndef Message ndefmanager.cpp 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"; } }49 © 2012 Nokia Nokia NFC Development with Qt v2.2.0 November 5, 2012 Andreas Jakl
  50. 50. Extend UI with Write Button Day.qml, between lines 122 / 123 (below MouseArea with id: mouse) 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) } } NfcFlag.png <project dir>qml50 © 2012 Nokia Nokia NFC Development with Qt v2.2.0 November 5, 2012 Andreas Jakl
  51. 51. Test! https://projects.developer.nokia.com/nfccorkboards• Touch a tag, at the same time press the NFC flag of a note – Writes the note text to the tag The extended solution on Nokia Developer Projects handles – Remember to enter a valid URI! additional record types and potential errors.51 © 2012 Nokia Nokia NFC Development with Qt v2.2.0 November 5, 2012 Andreas Jakl
  52. 52. Nfc Chat https://projects.developer.nokia.com/nfcchat Tasks – Develop an NFC chat from scratch – NFC Peer to Peer mode – LLCP Protocol (server & client sockets) – Qt Quick UI52 © 2012 Nokia Nokia NFC Development with Qt v2.2.0 November 5, 2012 Andreas Jakl
  53. 53. App Overview main.cpp main.qml nfcpeertopeer.cpp/.h Application startup UI definition Target discovery Loads and shows Defines data model NFC Peer to peer main.qml and view sockets (client & server)53 © 2012 Nokia Nokia NFC Development with Qt v2.2.0 November 5, 2012 Andreas Jakl
  54. 54. New Project• Qt Quick Application – Name: NfcChat – Built-in elements only – Targets: Symbian Device (including Symbian Anna) – Accept defaults for the rest54 © 2012 Nokia Nokia NFC Development with Qt v2.2.0 November 5, 2012 Andreas Jakl
  55. 55. Add Connectivity• Edit the Qt project file (nfcchat.pro) – Uncomment & add mobility component: connectivity CONFIG += mobility MOBILITY += connectivity – Add LocalServices Capability symbian:TARGET.CAPABILITY += NetworkServices LocalServices Allows Internet access Allows NFC55 © 2012 Nokia Nokia NFC Development with Qt v2.2.0 November 5, 2012 Andreas Jakl
  56. 56. UI Design – NFC Send Button• Button Image – Copy NfcButton.png to the project’s qml folder C:QtdevNfcChatqmlNfcChatNfcButton.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
  57. 57. 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
  58. 58. 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
  59. 59. NfcPeerToPeer• Go to the “Edit” view• New C++ class – Right-click the project → Add New ... → C++ Class – Class name: NfcPeerToPeer – Base class: QObject59 © 2012 Nokia Nokia NFC Development with Qt v2.2.0 November 5, 2012 Andreas Jakl
  60. 60. Include• Headers, define member variable nfcpeertopeer.h #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;60 © 2012 Nokia Nokia NFC Development with Qt v2.2.0 November 5, 2012 Andreas Jakl
  61. 61. Search for Targets• Save own unique service Uri and start target detectionnfcpeertopeer.cppNfcPeerToPeer::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);}61 © 2012 Nokia Nokia NFC Development with Qt v2.2.0 November 5, 2012 Andreas Jakl
  62. 62. Signals & Slots• Handle targets nfcpeertopeer.h private slots: void targetDetected(QNearFieldTarget *target); void targetLost(QNearFieldTarget *target);• Emit chat messages to the UI nfcpeertopeer.h signals: void chatMessage(const QString& nfcClientMessage);62 © 2012 Nokia Nokia NFC Development with Qt v2.2.0 November 5, 2012 Andreas Jakl
  63. 63. React• New target: emit info message nfcpeertopeer.cpp void NfcPeerToPeer::targetDetected(QNearFieldTarget *target) { emit chatMessage("Target detected"); }• Target out of range: emit message & delayed object delete nfcpeertopeer.cpp void NfcPeerToPeer::targetLost(QNearFieldTarget *target) { target->deleteLater(); emit chatMessage("Target lost"); }63 © 2012 Nokia Nokia NFC Development with Qt v2.2.0 November 5, 2012 Andreas Jakl
  64. 64. Register C++ with QML• Make your C++ class available in QML – QML Name: NfcPeerToPeer – QML Library: NfcPeerToPeer 1.0 main.cpp #include <QtDeclarative> #include "nfcpeertopeer.h" int main(int argc, char *argv[]) { QApplication app(argc, argv); qmlRegisterType<NfcPeerToPeer>("NfcPeerToPeer", 1, 0, "NfcPeerToPeer"); [...] }64 © 2012 Nokia Nokia NFC Development with Qt v2.2.0 November 5, 2012 Andreas Jakl
  65. 65. NfcPeerToPeer in QML• Import module main.qml import NfcPeerToPeer 1.0• Update the list model when a NFC chat message arrives main.qml NfcPeerToPeer { id: nfcPeerToPeer onChatMessage: { messageModel.append( {"chatMessage": nfcClientMessage} ) } } ListModel { id: messageModel } ListView { model: messageModel delegate: Text { text: chatMessage } // [...] }65 © 2012 Nokia Nokia NFC Development with Qt v2.2.0 November 5, 2012 Andreas Jakl
  66. 66. 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
  67. 67. NFC LLCP Server Socket• Define slots for new server connections & sending text nfcpeertopeer.h public slots: void sendText(const QString& text); private slots: void handleNewConnection();• Listen for new server connections nfcpeertopeer.cpp NfcPeerToPeer::NfcPeerToPeer(QObject *parent) // [...] nfcServer = new QLlcpServer(this); connect(nfcServer, SIGNAL(newConnection()), this, SLOT(handleNewConnection())); nfcServer->listen(nfcUri); }67 © 2012 Nokia Nokia NFC Development with Qt v2.2.0 November 5, 2012 Andreas Jakl
  68. 68. Connections & Sending• Create a socket for a new server connection nfcpeertopeer.cpp void NfcPeerToPeer::handleNewConnection() { if (nfcServerSocket) { nfcServerSocket->deleteLater(); } nfcServerSocket = nfcServer->nextPendingConnection(); }• Slot to send chat messages over the server socket nfcpeertopeer.cpp void NfcPeerToPeer::sendText(const QString& text) { if (nfcServerSocket && nfcServerSocket->isOpen()) { nfcServerSocket->write(text.toUtf8()); emit chatMessage("Message sent"); } }68 © 2012 Nokia Nokia NFC Development with Qt v2.2.0 November 5, 2012 Andreas Jakl
  69. 69. Sending Chat Messages• Call the sendText() slot in MouseArea’s onClicked handler main.qml onClicked: nfcPeerToPeer.sendText(sendTextEdit.text)69 © 2012 Nokia Nokia NFC Development with Qt v2.2.0 November 5, 2012 Andreas Jakl
  70. 70. NFC LLCP Client Socket• Define slot to read incoming text nfcpeertopeer.h private slots: void readText();• Create the client socket (to be connected to NFC targets) nfcpeertopeer.cpp NfcPeerToPeer::NfcPeerToPeer(QObject *parent) // [...] nfcClientSocket = new QLlcpSocket(this); connect(nfcClientSocket, SIGNAL(readyRead()), this, SLOT(readText())); }70 © 2012 Nokia Nokia NFC Development with Qt v2.2.0 November 5, 2012 Andreas Jakl
  71. 71. Connections & Reading• Connect the socket to a target in targetDetected() nfcpeertopeer.cpp nfcClientSocket->connectToService(target, nfcUri);• Read text from the socket and emit a signal nfcpeertopeer.cpp void NfcPeerToPeer::readText() { QByteArray rawData = nfcClientSocket->readAll(); QString data = QString::fromUtf8(rawData.constData(), rawData.size()); emit chatMessage(data); }• Cleanup in targetLost() nfcpeertopeer.cpp nfcClientSocket->disconnectFromService(); 71 © 2012 Nokia Nokia NFC Development with Qt v2.2.0 November 5, 2012 Andreas Jakl
  72. 72. Test! #2 https://projects.developer.nokia.com/nfcchat The extended solution on Nokia Developer Projects includes MeeGo support, cached text sending, error handling and is based on• Touch upper back of two phones Qt Quick Components. Note: if installing the solution, uninstall your own app first to avoid a name conflict.. – While touching, press the send button72 © 2012 Nokia Nokia NFC Development with Qt v2.2.0 November 5, 2012 Andreas Jakl
  73. 73. NFC Summary73 © 2012 Nokia Nokia NFC Development with Qt v2.2.0 November 5, 2012 Andreas Jakl
  74. 74. Nfc Examples http://www.nfcinteractor.com/ Tech. Tag / p2p Showcase Powerful tag & NDEF reading, dynamic NDEF message Nfc Interactor Qt Tag composer, reusable tag handling classes, Nfc detection Higher-level tag reading / writing, app autostart, Nfc Nfc Corkboard Qt Tag 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/74 © 2012 Nokia Nokia NFC Development with Qt v2.2.0 November 5, 2012 Andreas Jakl
  75. 75. Summary developer.nokia.com/NFC Design Develop Distribute Guidelines75 © 2012 Nokia Nokia NFC Development with Qt v2.2.0 November 5, 2012 Andreas Jakl
  76. 76. Thank You.Andreas Jakl NFC Introduction Related Presentations bit.ly/NfcIntro[@mopius] Windows (Phone) 8 NFC App Scenariosnfcinteractor.com bit.ly/NFCAppScenariosTechnology WizardNokia NFC Development on the Windows 8 Platform bit.ly/Win8NFC 76 © 2012 Nokia Nokia NFC Development with Qt v2.2.0 November 5, 2012 Andreas Jakl
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×