Use the PeerFinder API to launch applications via NFC

With the introduction of NFC on Windows Phone 8, the scenarios of device interaction become much more reachable to consumers and developers. By simply by tapping one WP8 device with another, we can perform a variety of tasks, like sharing a contact, photo, video, or app, pairing with Bluetooth, etc.

The Proximity API in WP8 provides two main classes for NFC related features: ProximityDevice and PeerFinder. ProximityDevice enables functionality like publish/subscribe for NFC messages to and from tags or another devices, while PeerFinder focuses on pairing two devices with a socket connection using NFC tapping or browsing without NFC involvement.

Launching an application from another device is one of the most important features that NFC provides. In most cases, launching the same application from another device is desired to enable further interactions on the same app context between two devices, such as multi-player games, messaging apps, media sharing, etc. Both ProximityDevice and PeerFinder can perform this task.

By using ProximityDevice, developers need to make a URI association for the app and then publish the custom URI to another device. This approach enables the app to interact with other applications as well. However, sometimes app developers do not want to disclose the interface to others due to confidentiality. In such cases, the URI association might not be the best option.

On the other hand, many developers have encountered issues where if both apps are running in the foreground on separate devices and either Fast App Resume (FAR) or BackgroundExecution is defined in the manifest, then passing the URI through NFC will not trigger the MapUri function to launch the desired page in the application. In such cases, the PeerFinder approach to launch the same app on another device becomes more reliable option for developers.

So, how do you launch the same app on another device using PeerFinder? The solution is pretty simple. Developers just need to include the following code in their application. As it requires NFC to make tapping gesture work, the application needs to have ID_CAP_PROXIMITY and ID_REQ_NFC defined in the manifest.

...
PeerFinder.TriggeredConnectionStateChanged += PeerFinder_TriggeredConnectionStateChanged;
PeerFinder.Start();
...
void PeerFinder_TriggeredConnectionStateChanged(object sender, TriggeredConnectionStateChangedEventArgs args)
{
//to-do
}

After PeerFinder is started on device A, then when another device (“B”) enters into proximity range, device B will behave according to the following rules:

  • Case 1: If device A has the app but device B doesn’t, device B will get a prompt to search for the app in the store as in the first illustration.
  • Case 2: If both device A and B have the app installed and the app is not yet launched on B, then B will get a prompt to launch the app as in the second illustration.
  • Case 3: If both device A and B have the app installed and both have launched the same app, then TriggeredConnectionStateChanged will get notified and further actions can be performed.

App not installed    App not installed and not launched

If the app needs a socket connection for further action between two devices, then it can check the TriggeredConnectState property in the  TriggeredConnectionStateChangedEventArgs passed in with the  TriggeredConnectionStateChanged event. Once the state is changed to TriggeredConnectState.completed, then the Socket property under TriggeredConnectionStateChangedEventArgs will be ready to use.

Some developers want to distinguish between normal application launching and launching by PeerFinder. This can be achieved by using the URI mapper and checking the URI passed. In the PeerFinder case, the URI passed to the MapUri function will look like this:

/MainPage.xaml?ms_nfp_launchargs=Windows.Networking.Proximity.PeerFinder:StreamSocket

Launching the same app on another device using PeerFinder does not require URI association, which implies that no other application can pretend to be the application by associating the same URI theme. This ensures that only the expected app is launched. It also resolves the issue mentioned above in the FAR or BackgroundExecution case. However, if developers want to share their application experiences with other applications, then using ProximityDevice with URI association is the proper option to choose.

Did I touch it or not?

On touch user interfaces, visual feedback is as important as it is on non-touch UIs. But it’s a bit different.

With a non-touch UI you need to indicate which UI element is currently in focus in order to operate with it. In a mobile context this is usually done with a highlight on the elements. One element is always highlighted, and the highlight is then moved with a navigation key and selection done with the selection key.

Continue reading

Touchy-Feely with DOM Events: Rethinking Cross-Device User Interaction

There have been numerous ways for users to interact with web pages on mobile phones. Historically, users navigated the mobile web by pressing physical buttons (arrow keys, soft keys, etc.), while some devices required a stylus.

In the last several years, devices with touch-enabled screens have been adopted at such a rapid rate that touch interaction has become ubiquitous. Now we have tablets that take input not only from touch, but from keyboards and mousepads using optional peripherals.

So what does it mean to you as a web developer? It means you need to detect the correct user input method, and design the correct user experience into your web apps.

Continue reading

Millimeters vs. Pixels

Hello again,

A few weeks ago I was listing the top things to consider when moving from non-touch screens to touch screens. One of the things I mentioned was to ensure that the touch areas for your UI elements are big enough.

As I said then, we recommend the minimum size to be approximately 7×7 mm with 1 mm gaps. What this actually means is that when placing two separate UI elements next to each other, there is a 1mm non-touchable gap between them. This is to ensure that it’s easier for your app to recognize which element has been tapped.

Continue reading

How to use emulators to develop NFC features on WP8

One of the more interesting features of Windows Phone 8 is its Proximity Framework for Near-field communications (NFC). Both Nokia and Microsoft have heavily invested in this area. The Proximity API provides you the controls needed to innovate on NFC technology, but at the moment Windows Phone SDK default emulator does not simulate NFC. That means you have to use real WP8 devices to test and debug NFC-related features. If you’re developing a feature to be used between NFC-enabled devices, you’ll need to have at least two devices in hand. In addition, there are often physical movements required to perform NFC interactions while debugging.

Continue reading

I can’t see!

What image comes to your mind when I say “color contrast”?

Perhaps your first thought is the famously hard-to-read combination of red and green; and you are right. For example, 9 percent of men cannot distinguish between red and green. Even though a minority, it’s helpful to keep in mind that a substantial percentage of your potential customers are affected by improper red-green design.

Continue reading

It starts with your launcher icon

Continuing with the topic of icons…

From the start, the appearance of your application in the app menu makes a difference in how people interpret your app. If your icon looks stylish, has the correct shape, and people can guess from the app’s name what it does, your app is on the right track.

If the shape of the icon is different from the rest of the icons on the phone, your app will feel alien and not like an integral part of the phone. Some people might think the app is a (cheap?) copy of something else; others might think you simply don’t care. This opens the door to bad reviews, since people launch your app with a negative attitude even before they have really seen it. It is very hard to recover from that initial negative first impression!

bad icon example
Example of a badly shaped launcher icon and truncated app name.

The same holds for the app name; you should try to keep it short enough that it will not be truncated. It’s not easy to come up with a short and catchy name, but it’s definitely worth the effort. In addition to looking better on the phone (let’s be honest here; it does look better when it’s not truncated), a short app name is more likely to be remembered by users. This makes it more likely that they will recommend it to their friends (because they will also love the app, of course!).

So, how to make things right?

By taking care of just these seemingly minor details, you help set people into a positive attitude before they even open your app.

Happy developing,
Sanna

Math behind icon design

Did you know…

The squircle (the matemathical term) is pretty close to the Nokia icon shape. Luckily enough, you don’t need the formula to create your launcher icon; you can always use the Icon templates we have created for you. And you don’t need Photoshop to work with them: they are also available for Inkscape!

Sometimes you might need to generate the shape in your code; either to generate the shape at runtime, you need the mathematical formula for drawing a custom button, or you just want to try it out in Matlab :) In that case, this link might help you: http://en.wikipedia.org/wiki/Squircle.

App launcher icon example

Happy developing,
Sanna

LWUIT library is out!

Hi all,

Fresh from the oven, we have just published the LWUIT Developer’s Library. LWUIT Developer’s Library describes how to use the LWUIT for Series 40, the port of the Lightweight UI Toolkit for Nokia’s Series 40 phones.

LWUIT for Series 40 brings a number of improvements: several Series 40 platform features have been integrated to it, the style and functionality of UI components have been changed to match the Series 40 look and feel, and the performance has been optimised. Also the Resource Editor tool has been updated with Series 40 changes.

A common practice has been that the new features would always provide a fallback mechanism. Even if a feature was not available on the device, the application would still run gracefully. The wrappers are transparent to the application.

The library, or course, includes a UX chapter that describes how LWUIT UI components should behave or how a component should be adopted in case it is used with Series 40 phones.

Try it out and let us know how it works for you!

Happy developing,
Sanna