Willy Riechert, Student at Nokia's HERE map unit in Berlin presented a mobile HTML5 application using a NFC plugin to connect with the real world.

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

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
2

3. Introduction
about me
• B.Eng. Geoinformation
Beuth University of Applied Sciences
• Student trainee at nokia Location & Commerce
• First experience with android development
Later 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)
3

4. ?
!
User wants NFC
to know where
(s)he is
Simplest use case

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
mh5.js nfc.js
• App run as a native
application within a
UIWebView
5

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…
6

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 Methods WP8
/phonegap-nfc nfc.addNdefListener
• But what is NFC… nfc.write
nfc.share
7

8. NFC
Near Field
Communication
• Operates at 13,25MHz
band
• Save up to 8kBytes (2013)
• Transfer data rate
424kBit/s
• Data exchange over short
distance ~4cm
nfc-forum.org
• Give me one example…
8

9. Uniform Resource Identifier
geo:[latitude],[longitude],[altitude]
NFC content
Sample A
container
“U“
• How to store coordinates?
• URI Schemes
- Geo:URI
Sample B - BingMaps URI
“Sp“ - Maps URI
- Navigation URI

10. HERE
Mobile 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
10

11. Available now
Demo geoNFC app

12. What to remember
PhoneGap Mobile HTML5 Framework NFC
• Try out what sensors and features • Obtain your own developer API • On WP tags must be NDEF
are supported on WP key on developer.here.com formatted
• Look at PhoneGap NFC Plugin on • Experience the full potential at • Metadata can not be read on WP
GitHub: m.here.com • Be aware how to build tags
github.com/chariotsolutions/phone - observe the sequence of records
gap-nfc - choose the correct identifiers
• Produce cross platform tags
12

13. Q&A

14. Thank you