WinJS, Apache Cordova & NFC - HTML5 apps for Android and Windows Phone

WinJS, Apache Cordova & NFC
HTML5 apps for Android and Windows Phone
WinJS, Apache Cordova & NFC - Andreas Jakl, 21.10.2014 1

Andreas Jakl
Startup founder & app developer
– @andijakl, @mopius
– andreas.jakl@mopius.com
– mopius.com
History
– Nokia: Technology Wizard
– FH Hagenberg, Mobile Computing: Assistant Professor
– Siemens / BenQ Mobile: Augmented Reality-Apps

Overview
– HTML5 Development, UI & Tools
Project Setup
– Multi-Device Hybrid App with Cordova & WinJS
WinJS
– Controls, Promises, Async, Bindings, Pages, Navigation
Cordova
– Configuration, Plugins, Build Process
NFC App Development
– NFC Plugin, NDEF, reading & writing tags, sharing to devices

OVERVIEW
Runtimes, tools and libraries

HTML5 UI Toolkits
AngularJS
BackboneJS
jQuery Mobile
Sencha Touch
Ember.js
Dojo Mobile
WinJS
… and many, many more!
HTML Form in Chrome, no styling / layouts
Same HTML form in WinJS, default dark theme without layouts

Features
– UI toolkit
– JavaScript coding patterns
• Simplifies definition of namespaces, object classes
• Asynchronous operations (Promises)
• Structural models for apps, data binding and page navigation
– Wraps WinRT APIs for native platform access on Windows
Multi-Platform
– Windows (Phone), Android, iOS, desktop browsers
WinJS
http://

WinJS
XAML
C# JavaScript
HTML / CSS3
Windows Runtime (WinRT)
Windows 8.1
Xbox One
Windows
Phone 8.1

WinJS 3.0+
XAML
C# JavaScript
HTML / CSS3
Windows Runtime (WinRT)
Windows 8.1
Android
iOS
Web browsers
Apache Cordova
Xbox One
Windows
Phone 8.1

WinJS Roadmap
Open Source
– Apache License
– Limitations on WP 8.1: http://msdn.microsoft.com/en-
us/library/windows/apps/dn632432.aspx
WinJS 3.0
– First release that targets multiple platforms & browsers
– Not available as reference for Windows Store apps
WinJS Future
– Merge WinJS with WinJS.phone
WinJS 2.1 Store app
Shared library, not shipped in app packageWinJS, Apache Cordova & NFC - Andreas Jakl, 21.10.2014 9

WinJS Online Editor
try.buildwinjs.com

Apache Cordova
Use native phone APIs from HTML / JavaScript
– Hybrid apps – packaged for distribution
– App runs locally on device: web browser
component in native app
– No native code required
PhoneGap = distribution of Cordova
– Cordova = engine
– Additional paid services: PhoneGap Build, Enterprise

HTML5 IDEs
Visual Studio ($) / Express
– Microsoft Multi-Device Hybrid Apps Extension
– Telerik AppBuilder Extension ($)
Intel XDK
Aptana Studio (Eclipse)
NetBeans
Webstorm ($)
Komodo Edit / IDE ($)
Notepad 

Multi-Device Hybrid Apps
Visual Studio Extension (preview)
– http://bit.ly/vsHybrid
Code completion, debugging
Installs required toolkits
(Android SDK, etc)
Known issues:
http://www.visualstudio.com/expl
ore/cordova-known-issues-vs

On device
debugging:
Android 4.4 +
No debugging
(emulator & device)
Deploying to Targets
Android iOS
Windows
Phone
Windows
Ripple
(Chrome extension
for Android
emulation)

PROJECT SETUP
Multi-Device Hybrid App with Cordova & WinJS

Visual Studio Project
Store App:
Universal App
Multi-Device Hybrid App:
Apache Cordova App
WinJS
Cordova
WinJS
CordovaAdd WinJS

WinJS 3 from GitHub
Compilation instructions
– Install GitHub client * and clone repository:
github.com/winjs/winjs
– Install git & node.js **
– Command line – install grunt-cli & dependencies:
npm install ‐g grunt‐cli
npm install
– Build:
grunt
* windows.github.com
** git-scm.com/downloads & nodejs.org/download
Compiled output

Glossary
git: Version control software
node.js: Runtime environment for executing
JavaScript apps (on servers)
npm: Node Package Manager. Installs node programs,
manages dependencies.
grunt: JavaScript task runner: automates tasks
(minification, compilation, unit testing, checking code)

Visual Studio Solution

Adding WinJS 3 to Project
1. Drag & drop
compiled
WinJS to
project

Add Libraries
2. Reference WinJS in index.html
3. Initialize WinJS controls
<!‐‐ WinJS ‐‐>
<link href="Microsoft.WinJS.3.1/css/ui‐light.css" rel="stylesheet">
<script src="Microsoft.WinJS.3.1/js/base.js"></script>
<script src="Microsoft.WinJS.3.1/js/ui.js"></script>
(function () {
"use strict";
document.addEventListener( 'deviceready', onDeviceReady.bind( this ), false );
function onDeviceReady() {
WinJS.UI.processAll();
};
} )();

TypeScript vs JavaScript
Extends JavaScript
– Type annotations, compile-time type checking
– Interfaces
– Classes
– Modules
Superset of JavaScript
– JavaScript program is valid TypeScript
– TypeScript compiles to JavaScript
WinJS: TypeScript typings available, on their watchlist *
TypeScript
* https://github.com/winjs/winjs/wiki/RoadmapWinJS, Apache Cordova & NFC - Andreas Jakl, 21.10.2014 22

///<reference path='../scripts/typings/winjs/winjs.d.ts'/>
///<reference path='../scripts/typings/tsd.d.ts'/>
TypeScript type definitions repository for other 3rd party libs: https://github.com/borisyankov/DefinitelyTyped
Drag & drop TypeScript
typings to project
Add TypeScript definitions
to index.ts (first line of file)
Using TypeScript?

WinJS UI – Rating Control
Create“Rating Control”in index.html
<div id="ratingControlHost" data‐win‐control="WinJS.UI.Rating"></div>

WinJS Controls
Elements (<div> / <span>)
Contain data‐win‐control attribute
– Value is name of a constructor function
Instantiated at app startup:
– WinJS.UI.processAll();

WINJS
Working with

WinJS UI: Screen layouts
Hub
Pivot

WinJS UI: Views
FlipView
ListView

WinJS UI: Chrome
AppBar
NavBar
Flyout
Menu

WinJS UI: Controls
Rating
ToolTip
DatePicker
TimePicker
Toggle
Searchbox
SemanticZoom

Promises: Async Code
JavaScript: single-threaded language
Traditional asynchronous call-backs
– Call-stack with anonymous nested
functions?
– Do exceptions propagate up nested
call-backs?
Promise objects: defines functions
– then(): promise completed successfully
– error(): handle errors
– progress(): regular progress callbacks
async method
promise
.then()
function completed()
function error()
function progress()

Promises: How To
Initialize app
– After WinJS parsed DOM & instantiated controls
function onDeviceReady() {
WinJS.UI.processAll().then(function () {
// Retrieve the instantiated rating control
var ratingControl = ratingControlDiv.winControl;
// Register the ratingChanged() event handler function
ratingControl.addEventListener("change", ratingChanged, false);
});

Pages & Navigation
Traditional: multi-page navigation
– Individual HTML files, hyperlinks
Better: single-page navigation
– Never navigates away from default.html
• default.html: defines outmost UI (AppBar), handles app lifecycle
– Load additional data (“fragments”) into the page as needed
• PageControl: create & embed on default.html. Loads set of HTML, JavaScript and CSS (like an iframe).
• HtmlControl: load static HTML from other page, no JavaScript
• WebView: own history stack and navigation
• DOM methods

Pages & Navigation: How-To
Create 2nd “Navigation App”Store project
1. Create new“Page Control”: page2.html
Back to the Cordova project
2. Copy navigator.js and
home & page2.[html|js|css] from
store project
3. Reference navigator.js from index.html
4. Add WinJS page control to index.html
<div id="contenthost" data‐win‐control="Application.PageControlNavigator" data‐win‐options="{home: ‚./pages/home/home.html'}"></div>
<script src="scripts/navigator.js"></script>

Pages & Navigation: How-To
Create link from home.html to
page2.html
– Note: project structure is
modified during build for
Cordova packaging
– Contents moved to /www/
directory
– Links to e.g. /index.html don’t
work, use relative links!
<p><a href="./../page2/page2.html">Go to page 2.</a></p>
WinJS.UI.Pages.define("./pages/home/home.html", {
// This function is called whenever a user navigates to this page. It
// populates the page elements with the app's data.
ready: function (element, options) {
// Find all <a> links and execute the event handler when clicking
WinJS.Utilities.query("a").listen("click",
this.linkClickEventHandler, false);
},
linkClickEventHandler: function (eventInfo) {
// Stop default behaviour!
eventInfo.preventDefault();
// Use WinJS to navigate instead –
// loads the new page into the <div> fragment
var link = eventInfo.target;
WinJS.Navigation.navigate(link.href);
}
});
home.html
home.js

Bindings
Data Binding
– data‐win‐bind attribute on HTML element
– JS setup options
• Create relationship with WinJS.Binding
• WinJS.Binding.mixin makes class observable
Template Binding
– Rendering items, e.g. for ListViews
<span id="nameBindingSpan" data‐win‐bind="innerText: name"></span>

CORDOVA
Going Multi-Platform

Cordova Configuration
config.xml
– App name, version
– Preferences: fullscreen, orientation
– External domain access whitelist
– Plugins (features) for device access

Development Paths
Cross-Platform (CLI)
– cordova utility: automatically targets all platforms
• building, assets, plugin config
Platform Centered
– Lower level platform access, e.g. mix native components with Cordova
– Specific scripts & manual building for each platform
– Used by VS / Multi-Device Hybrid App Extension

Core Plug-Ins
Interface to native components
Good cross-platform support
Integrated in VS
– config.xml

3rd Party Plug-Ins
Sources
– Cordova.io, 400+ plugins: plugins.cordova.io
– Telerik verified plug-ins: plugins.telerik.com
Integration
– “View code”of config.xml
– Manually add plugin reference:
<vs:feature>pluginname@version</vs:feature>

Hybrid App Build Process
Cordova
Visual Studio
solution
Platform specific
resources
(icons, scripts,
stylesheets, etc)
Directory: /
Generic HTML
project
Platform specific
projects
(native with web view)
/bld/
Build +
/merges/
/bin/
Platform specific installation files +
compilation output
Compile&
Package

Hybrid Project

Runtime HTML
Analyze with VS Debugger (Android)

NFC
Near Field Communication

Near Field Communication?
< 1 cm
(tap)

< 424 kbit / s

NFC Tags
Tag memory size:
48 byte – few kB

NFC & CORDOVA & WINJS
Bringing it all together …

W3C NFC API
JavaScript NFC API
– www.w3.org/TR/nfc/
Status: First Public Working Draft; NFC & basic NDEF
– Not very active group 
State: October 2014

Cordova NFC Plugin
Open source
Developed by Chariot Solutions
– plugins.cordova.io/#/package/com.chariotsolutions.nfc.plugin
Platforms
– Android
– WP8
– BlackBerry 10, (7)

Adding Cordova NFC Plugin
Add NFC plugin reference to config.xml
Test reading NFC tags
<vs:feature>com.chariotsolutions.nfc.plugin@0.5.1</vs:feature>
nfc.addNdefListener(
this.nfcHandler,
function () { console.log("Listening for NDEF tags."); },
function (error) { alert("Adding the listener failed."); }
);
nfcHandler: function (nfcEvent) {
var tag = nfcEvent.tag;
var ndefMessageBytes = tag.ndefMessage;
var payload = nfc.bytesToString(ndefMessageBytes[0].payload);
alert(payload);
} WinJS, Apache Cordova & NFC - Andreas Jakl, 21.10.2014 53

NFC & NDEF Overview
NDEF Message
NDEF Record
(e.g., URL)
…
NDEF = NFC Data Exchange Format

Open Source NDEF Library
Reusable
NDEF
classes
Create NDEF
messages & records
(standard compliant)
Parse information
from raw byte arrays
Fully documented
Open Source LGPL license
ndef.mopius.com
library development
supported by:

Adding the NDEF Library
Download & extract
library
NdefLibraryJS_1.0.0.zip
Drag & drop to project
/dist/ndeflibrary(.min.).js

Creating NDEF Messages
NDEF Record
– URI record
– Social record (Twitter)
NDEF Message
var ndefRecord = new NdefLibrary.NdefSocialRecord();
ndefRecord.setSocialType(NdefLibrary.NdefSocialRecord.NfcSocialType.Twitter);
ndefRecord.setSocialUserName("mopius");
var ndefRecord = new NdefLibrary.NdefUriRecord();
ndefRecord.setUri("http://www.mopius.com/");
var ndefMessage = new window.NdefLibrary.NdefMessage(ndefRecord);

Format Conversion
// Convert message to raw NDEF byte array
var ndefMsgBytes = ndefMessage.toByteArray();
// Parse raw byte array to Cordova NFC Plugin format (JSON)
var ndefMessagePlugin = window.ndef.decodeMessage(ndefMsgBytes);
NDEF library class
object
Cordova NFC Plugin
JSON object
byte array

Writing NFC Tags
Cordova NFC Plugin: Write tag …
– Android: in NFC tag discovered call-back = while user is tapping tag
– Windows Phone: outside call-back = instruct phone to write tag as
soon as user taps tag
nfc.write(
ndefMessagePlugin,
function (msg) { console.log("Publish Success" + msg); },
function (msg) { console.log("Publish Error" + msg); }
);

Sharing to Devices
Can be started & stopped (with unshare)
nfc.share(
ndefMessagePlugin,
function (msg) { console.log("Share Success" + msg); },
function (msg) { console.log("Share Error" + msg); }
);

Real Life?
Cordova NFC plug-in is unstable
– Android: call-back after 2nd tag tap
– Windows Phone: after each publish one more read-callback, crashes
after too many call-backs
Multi-Device Hybrid Apps CTP
– Crashes after closing app on Windows Phone
– Deployment issues to Windows 8.1
– Visual Studio compatibility (only Update 3 supported)

Full Demo App
mopius.github.io/ndef-nfc

SUMMARY

http://
Multi-Device Hybrid Apps: Visual Studio Extension.
Create cross-platform HTML5 apps, based on Cordova.
WinJS: HTML5 UI toolkit.
Coming from Windows, expanding to cross-platform.
UI Controls & improved async / callbacks.

Apache Cordova: toolchain to create hybrid apps.
Plugins to access native functionality from JavaScript.
PhoneGap: commercial distribution of Cordova.
NFC: short-range wireless communication.
Transmit small data packages between devices or store data on tags.
Platforms: Android, Windows Phone, BlackBerry, iPhone (partly)
Support: W3C JavaScript API: draft; Cordova: 3rd party plugin

NDEF: content standard.
Record(s) contained in Message.
NDEF Library: open source for JavaScript & C#.
Create & parse NDEF messages.
ndef.mopius.com
…

Thank You.
Andreas Jakl
@andijakl
@mopius
mopius.com

WinJS, Apache Cordova & NFC - HTML5 apps for Android and Windows Phone

More Related Content

What's hot (20)

Viewers also liked (16)

Similar to WinJS, Apache Cordova & NFC - HTML5 apps for Android and Windows Phone (20)

More from Andreas Jakl (20)

WinJS, Apache Cordova & NFC - HTML5 apps for Android and Windows Phone