Foursquare gets NFC ‘magic’ @ Nokia World

At Nokia World 2011 we have introduced some of the major apps that have gotten "the magic tap".

The latest addition to the growing number of NFC enabled apps like Angry Birds Magic, Poken, Bounce and Asphalt5 is Foursquare.

With the newest version of the application you can use your NFC enabled phone to check-in automatically by just tapping and NFC enabled/tagged poster. No more tedious steps of launching an application waiting for location fix, connecting etc… With NFC this is all done with a simple tap.

Furthermore, the developer made it even easier for the user to check-in – without the need to have the app running – just tap and the app starts automatically and checks you in. Pretty awesome and again demonstrating the convenience of NFC! In a separate post Andreas explains how as a developer you can implement application autostart 

Foursquare with NFC support is available in the Nokia Store for Symbian NFC enabled phones (download Symbian version here,N9 support coming soon) . And the best thing about it is that it is not a separate application just for NFC sake. Developers simply added the support for NFC to the existing application version!

Opportunities for venue owners

Venue owners can now create smart posters asking users to Check-in with embedded NFC tags, so that visitors of their venues that have an NFC enabled phone (from any brand) can easily perform the check-in by just tapping the smart poster. Additionally NFC check-ins can be considered as real check-ins as the user had to physically be there to check-in, giving venue owners the potential to have much more accurate data versus normal check-ins. We have demonstrated this concept as verified check-ins at Nokia World 2011 (read NFC Times article here)

How to create Foursquare Check-in Smart Posters?

There are several ways to do it. All you need is an NFC tag encoded with the foursquare venue URL (i.e.: https://foursquare.com/v/nokia-house/4af3fa31f964a520bbef21e3 ) that you stick behind your 4Sq sticker/poster. NFC Hub, for instance offers a readymade solution for 4Square Check-in campaigns. Here is a demo example of a smart poster I did for an event this weekend.  

Where to get tags?

 

Some of the options on how to get NFC tags are listed here: https://www.developer.nokia.com/Develop/NFC/Getting_started/Step_3.xhtml

 

App Autostart on NFC Tag Touch

Nfc Ndef Autostart on the N9 with MeeGo HarmattanYou’ve created your first NFC app, which acts upon data stored on tags. Wouldn’t it be nice if the phone automatically launches the app when you touch your NFC tag?

This guide explains how to achieve this using Qt Mobility APIs. You need some background knowledge about NDEF messages and records in general to be able to make most out of this guide. To take a deeper dive into the standards covered here, take a look at the specifications at the NFC Forum.

Record Type Names

Each NDEF record has a type name; some are standardized by the NFC Forum for compatibility (e.g., the Smart Poster [urn:nfc:wkt:Sp], URL [urn:nfc:wkt:U], etc.). Every NFC capable phone should be able to handle those well-known types.

You can also read these record types from within your application. However, you can’t register your app to be started when touching a tag that only contains a well-known record — it’s always the phone that handles those (but you can write a browser-plugin to react to specific URLs and use this to open your app, like the FourSquare application for Symbian & MeeGo is doing – read more about the FourSquare app at Jures blog post).

To autostart your app directly when touching a tag, you need to use your own, custom record type.

Your custom type name has to follow a standardized format as well — according to the NFC Forum External Type Name. Like the well-known type, it starts with "urn:nfc", but then continues with the namespace "ext". Afterwards, your type name must contain the domain name of your organization, then a colon, and then your own type name. A complete example:

urn:nfc:ext:nokia.com:nfccorkboard

Note: the first three parts of the type name ("urn:nfc:ext:") are actually encoded in just one byte on the tag. The rest of your name is stored in plain text; with the usually very limited size of the tags, make sure that the name you choose isn’t as long a whole novel.

In addition, you can store any kind of data (payload) for this record on the tag, and usually only your application will be able to understand the contents. For example, a custom record to check in to a social network may contain the ID and the name of the place in the payload.

Handling Custom Type Names

Your app can obviously read and understand your own record type, and it can also be started when the user touches a tag that contains your custom record. But what if the phone doesn’t have your app installed yet?

The solution is elegant: you simply store two records in the NDEF message on the tag. First your own, custom record; then a well-known URL or Smart Poster – for example a link to the Nokia Store, allowing users to download your app. See below for instructions on how to create such a tag.

What happens when you touch the tag is the following: if your app is already installed and registered for your custom record type, it will be started. Otherwise, your custom type will be unknown to the phone, and it’ll ignore your record and proceed and handle the next record — the well-known URL. The phone will take care of this one and send your potential future user to the Nokia Store to download the app.

Autostart Registration

Now that the basics are in place, let’s take a look at how to register your app to be stared. This is different in Symbian and MeeGo, as it is tightly integrated with the services of the OS. The process is described in detail here: http://doc.qt.nokia.com/qtmobility/qnearfieldmanager.html#automatically-launching-ndef-message-handlers

The ndefheadergen tool mentioned in the docs isn’t shipped with the Qt SDK, but it’s actually not required — it just auto-generates the same few files that you can easily take and adapt from the documentation (linked above) as well. If you’d like to get the tool nevertheless, download the Qt Mobility source code and compile the ndefheadergen project for your desktop OS.

On Symbian, you only need to adapt an XML registration file and ensure that it’s installed together with your project by adding the deployment into your .pro file. Just insert the name of your app, as well as the custom record type name you’ve selected for your application.

Note: the phone needs to be restarted after registering your app in the current Symbian version (see the report). A second small issue is that at the moment the registration doesn’t get fully removed when you uninstall the application again (bug report).

On MeeGo, your app needs to be registered as a service over the D-Bus. To achieve this, two files have to be deployed during installation: a bus configuration file as well as a service file. For the phone to find your app and its icon, the name of the .desktop file has to be %APPNAME%.desktop (and not %APPNAME%_harmattan.desktop, as is the default file name from Qt Creator). As the last step, you have to add a .postinst and a .prerm file to your debian package — these files contain scripts that are executed when the app is installed or removed from the phone and register your app over the D-Bus with the service.

Note: you need to have PR 1.1+ installed on your N9 for autostart to work; the PR 1.0 firmware didn’t handle NFC tags, and consequently also no custom autostarts.

Application Setup

In case your application doesn’t use the registerNdefMessageHandler() method of the QNearFieldManager already, you need to call this method on application startup as well, so that your app registers at runtime to handle the message.

Writing a Custom Record Type to an NFC Tag

If your app doesn’t support writing its own tags, you can use any of the more customizable tag writing apps to create your own custom tags. For example, use the Nfc Interactor to write a "Combination Tag", which consists of a custom record type name that you can define, plus a URL record. Or, use the "Custom Tag" function to only write your custom record type to the tag, without an additional standardized URL record.

NFC Autostart Example Application

If you’d like to see autostart on tag-touch in action, simply install the Nfc Corkboard application (version 1.4.0+). It works on MeeGo and Symbian (don’t forget to restart your Symbian phone after installing the app for the autostart feature to work!) and is started when touching a tag that contains a record with the type name: "urn:nfc:ext:nokia.com:nfccorkboard". The app also supports writing its own autostart tag — just swipe to the Wednesday corkboard, and press the red NFC flag of the yellow note "Corkboards Autostart"

You can also use this app as a reference to add autostart functionality to your own app.

Direct launch of Store client with parameters from Qt

Many Nokia Store distributed applications have "Buy full version" or "Check our other apps" functionality which require opening of Nokia Store client app on certain page. Usually such functions could be implemented by opening store url in system browser. Browser will automatically redirect user to Nokia Store client and open required content or author page in it. But that approach has some disadvantages:

1. Bad (well, not perfect) user experience. Web browser acts as a mediator between your app and Store client. And it looks unnecessary.

2. SwEvent capability should be declared in your .pro file. Without it your openUrl() request will be ignored by the system in case  system browser is already running. That’s a kind of security mechanism inherited from Symbian C++ and aimed to prevent malware from webpage urls spoofing while user browse the web. Some developers don’t know about that and suppose their openUrl() works in all cases. Some forget to add SwEvent declaration before submitting sis in Store (SwEvent require signing by Developer or Ovi certificates, so if you need only User granted capabilities for other features you can use more convenient self-generated certificate during development) .

At the same time there are one advantage: That more or less official method, so you can expect some compatibility here. There is no any guarantees that the method I describe below will work for all future Store versions. But i hope it will.

Well, so we have the indirect method, which looks like that:

#include <QDesktopServices>

 // Opens Angry birds page in Store client app

QDesktopServices::openUrl(QUrl(QString("http://store.nokia.mobi/content/61009"))); 

 // Opens author’s page in Store client app

QDesktopServices::openUrl(QUrl(QString("http://store.nokia.mobi/publisher/RovioMobile/")));

 //Here you will need SwEvent capability declaration in case browser is already open

 

Now we want open Store client directly without system browser use.

After shot investigation of the page used for user redirection I find out that it launches ovistore_2002D07F.exe and passes whole original url to it as a parameter. Its worth to say for Symbian C++ guys that app’s UID3 is obviusly 2002D07F and you may not read further bcs you can implement even more flexible and reliable launcher with Symbian C++.

For others I wrote a class that launches the Store directly by the application name and in case something goes wrong (for example, executable was renamed) fall back to the old reliable web browser url opening. The demo app sources and sis are attached.

Some code snippets:

storelauncher.h

#include <QObject>

#include <QProcess>
class QStoreLauncher : public QObject
{
    Q_OBJECT
public:
    explicit QStoreLauncher(QObject *parent = 0);
    void LaunchNokiaStore(QString);
private slots:
    void processError(QProcess::ProcessError error);
private:
    QProcess *myProcess;
    QString arguments;
 };

 

storelauncher.cpp

#include <QDesktopServices>

#include <QUrl>
#include "storelauncher.h"
 
QStoreLauncher::QStoreLauncher(QObject *parent) :
    QObject(parent)
{
    myProcess = new QProcess(this);
    QObject::connect(myProcess, SIGNAL(stateChanged(QProcess::ProcessState)),
                     this, SLOT(stateChanged(QProcess::ProcessState)));
}
void QStoreLauncher::LaunchNokiaStore(QString params)
{
    arguments = params;
    const QString NokiaStoreLauncherApp ("ovistore_2002D07F");
    myProcess->start(NokiaStoreLauncherApp, arguments.split(QString("\n")));
}
void QStoreLauncher::processError(QProcess::ProcessError error)
{ // Hey, something goes wrong
    switch (error)
    {
    case QProcess::FailedToStart:
    case QProcess::Crashed:
    case QProcess::Timedout:
    case QProcess::ReadError:
    case QProcess::WriteError:
    case QProcess::UnknownError:
    {
        //Here you will need SwEvent capability declaration in case browser is already open
        QDesktopServices::openUrl(QUrl(arguments));
        break;
    }
    default:
    {
        break;
    }
    }
}
 
Usage:
QStoreLauncher launcher(this);
// Opens author's page in Store client app 
launcher->LaunchNokiaStore(QString("http://store.nokia.mobi/publisher/RovioMobile/"));
// Opens Angry birds page in Store client app 
launcher->LaunchNokiaStore(QString("http://store.nokia.mobi/content/61009")); 

 

So as you see it’s pretty simple. Tested with my N8-00 Anna and Store v3.18.

I suppose url host may vary. For example store.ovi.mobi, store.nokia.com or store.ovi.com. It’ll work for all, but didn’t check much.

And no – I don’t know if Store client supports or will support any other url formats, for ex. reviews page opening etc.

NokiaStoreLauncher.sis
NokiaStoreLauncher.zip

Great new UX assets!

Hey there,

Have you already tried out the new Qt Quick Components 1.1 for Symbian? They are a part of the latest Qt SDK release. We also updated the Symbian design guidelines for your convenience, and included a brand new set of visual design stencils for you to create app mockups. The stencils (and the components) come in both dark and light theme, so you can choose which you want to use for your app. The stencil set is available for Adobe Illustrator CS5, Adobe Fireworks CS5 AND Inkscape version 0.48 or above.

The Symbian design guidelines library has a simplified structure, with dedicated sections for Component descriptions and UI patterns, not forgetting the overall UI introduction!

If you wish to update your previous Avkon application to using the Qt Quick components, this library section might be just the resource you are looking for! It provides you a comparison between the different component sets, and helps you learn which Qt Quick Component is the best counterpart for the Avkon components you have been using. We have a similar comparison section for Nokia N9 to Symbian, as well. Take a look!

And then there’s The icon competition. Last week we announced an icon competition for creating your application launcher icon with our icon templates. The templates can now be found in one single toolkit, and are available for Adobe Illustrator CS5, Adobe Fireworks CS5 AND Inkscape version 0.48 or above. For step-by-step guidelines on how to use the templates, just pick your platform and click on the link below!

Series 40 launcher icon template guidelines
Symbian launcher icon template guidelines
MeeGo 1.2 Harmattan launcher icon template guidelines

If you wonder why there are different templates for different platforms, see this Iconography style summary section

For more of our recent UX related materials, such as UX Checklists, visit this page.

Happy developing!