Connect with the real world

A hands-on tech session explaining the possibilities of using PhoneGap, HTML5, Maps, NFC sensors all together on your Windows Phone 8

Willy Riechert 5th April 2013

Connect with the real world

2

Table of content

• Introduction

• Simplest use case

• PhoneGap / Supported sensors

• PhoneGap NFC Plugin

• NFC Near Field Communication

• HERE Mobile HTML5 Framework

• Demo geoNFC app

• What to remember

• Q&A

3

Introductionabout me

• B.Eng. GeoinformationBeuth University of Applied Sciences

• Student trainee at nokia Location & Commerce

• First experience with android developmentLater on mobile web development

• Case studies on indoor positioning using wifi & NFC

What can you expect?See an easy example of using WP and PhoneGap with integration of sensor technologies(NFC)

Simplest use case

User wants to know where

(s)he is

?

NFC

!

5

PhoneGap

• Easily create apps using the web technologies you know and love: HTML5, CSS3 and JavaScript

• Open source solution for building cross-platform mobile apps

• App run as a native application within a UIWebView

mh5.js nfc.js

6

Supported sensors

• It gets access to API device features & browser

• Commodity sensors are covered already

• Yet not supported sensors are humidity & temperature

• Special sensors like NFC are indirectly covered by plugins…

7

PhoneGap NFC Plugin

• Takes advantage of inbuilt NFC capabilities

• Supported Platforms:Android,BlackBerry7&10,WP8

• Reader example for WP8 (solution.sln)

• github.com/chariotsolutions/phonegap-nfc

• But what is NFC…

Methods WP8nfc.addNdefListenernfc.writenfc.share

8

NFCNear Field Communication• Operates at 13,25MHz

band

• Save up to 8kBytes (2013)

• Transfer data rate 424kBit/s

• Data exchange over short distance ~4cm

• Give me one example…

nfc-forum.org

NFC content container

• How to store coordinates?

• URI Schemes- Geo:URI- BingMaps URI- Maps URI- Navigation URI

Uniform Resource Identifiergeo:[latitude],[longitude],[altitude]

Sample A “U“

Sample B “Sp“

10

HEREMobile HTML5 Framework• It`s a JavaScript

framework for creation location-based mobile web apps

• Benefits from maps, search, routing, and places services

• Easy to start, rich UI components

• Combines it with jQuery Mobile or other libraries

m.here.com

Available now

Demo geoNFC app

12

• Try out what sensors and features are supported on WP

• Look at PhoneGap NFC Plugin on GitHub: github.com/chariotsolutions/phonegap-nfc

•Obtain your own developer API key on developer.here.com

• Experience the full potential at m.here.com

•On WP tags must be NDEF formatted

•Metadata can not be read on WP

• Be aware how to build tags- observe the sequence of records- choose the correct identifiers

• Produce cross platform tags

What to remember

PhoneGapMobile HTML5

Framework NFC

Q&A

Thank you