winjs, apache cordova & nfc - html5 apps for android and windows phone

WinJS, Apache Cordova & NFCHTML5 apps for Android and Windows Phone

WinJS, Apache Cordova & NFC - Andreas Jakl, 21.10.2014 1

Andreas JaklStartup founder & app developer

– @andijakl, @mopius

– [email protected]

– 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


OVERVIEWRuntimes, tools and libraries


HTML5 UI ToolkitsAngularJS

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

WinJShttp://


WinJSXAML

C# JavaScript

HTML / CSS3

Windows Runtime (WinRT)

Windows 8.1Xbox 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 RoadmapOpen 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.phoneWinJS 2.1 Store appShared library, not shipped in app packageWinJS, Apache Cordova & NFC - Andreas Jakl, 21.10.2014 9

WinJS Online Editor

try.buildwinjs.com


Apache CordovaUse 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 IDEsVisual 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 AppsVisual Studio Extension (preview)

– http://bit.ly/vsHybrid

Code completion, debugging

Installs required toolkits (Android SDK, etc)

Known issues: http://www.visualstudio.com/explore/cordova-known-issues-vs


On device debugging:

Android 4.4 +

No debugging (emulator & device)

Deploying to Targets

Android iOSWindows

PhoneWindows

Ripple(Chrome extension

for Android emulation)


PROJECT SETUPMulti-Device Hybrid App with Cordova & WinJS


Visual Studio ProjectStore App:

Universal AppMulti-Device Hybrid App:

Apache Cordova App

WinJSCordova

WinJSCordovaAdd WinJS


WinJS 3 from GitHubCompilation 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‐clinpm install

– Build:grunt

* windows.github.com** git-scm.com/downloads & nodejs.org/download

Compiled outputWinJS, Apache Cordova & NFC - Andreas Jakl, 21.10.2014 17

Glossarygit: 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 Libraries2. 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 JavaScriptExtends 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 TypeScripttypings 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 ControlsElements (<div> / <span>)

Contain data‐win‐control attribute

– Value is name of a constructor function

Instantiated at app startup:

– WinJS.UI.processAll();WinJS, Apache Cordova & NFC - Andreas Jakl, 21.10.2014 25

WINJSWorking with


WinJS UI: Screen layouts

Hub

Pivot


WinJS UI: Views

FlipView

ListView


WinJS UI: Chrome

AppBar

NavBar

Flyout

Menu


WinJS UI: Controls

Rating

ToolTip

DatePickerTimePicker

Toggle

SearchboxSemanticZoom


Promises: Async CodeJavaScript: 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 controlvar ratingControl = ratingControlDiv.winControl;

// Register the ratingChanged() event handler functionratingControl.addEventListener("change", ratingChanged, false);

});


Pages & NavigationTraditional: 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-ToCreate 2nd “Navigation App” Store project

1. Create new “Page Control”: page2.html

Back to the Cordova project2. 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-ToCreate 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 clickingWinJS.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> fragmentvar link = eventInfo.target;WinJS.Navigation.navigate(link.href);

}});

home.html

home.js


BindingsData 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>


CORDOVAGoing Multi-Platform


Cordova Configurationconfig.xml

– App name, version

– Preferences: fullscreen, orientation

– External domain access whitelist

– Plugins (features) for device access


Development PathsCross-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-InsInterface to native components

Good cross-platform support

Integrated in VS

– config.xml


3rd Party Plug-InsSources– 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

CordovaVisual 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)


NFCNear Field Communication


Near Field Communication?

< 1 cm(tap)



< 424 kbit / s


NFC Tags

Tag memory size:48 byte – few kB


NFC & CORDOVA & WINJSBringing it all together …


W3C NFC APIJavaScript NFC API

– www.w3.org/TR/nfc/

Status: First Public Working Draft; NFC & basic NDEF

– Not very active group State: October 2014


Cordova NFC PluginOpen source

Developed by Chariot Solutions– plugins.cordova.io/#/package/com.chariotsolutions.nfc.plugin

Platforms

– Android

– WP8

– BlackBerry 10, (7)


Adding Cordova NFC PluginAdd NFC plugin reference to config.xml

Test reading NFC tags

<vs:feature>[email protected]</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 NDEFmessages & records

(standard compliant)

Parse informationfrom raw byte arrays

Fully documentedOpen Source LGPL license

ndef.mopius.com

library developmentsupported by:


Adding the NDEF LibraryDownload & extract libraryNdefLibraryJS_1.0.0.zip

Drag & drop to project/dist/ndeflibrary(.min.).js


Creating NDEF MessagesNDEF 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 arrayvar 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 TagsCordova 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

@mopiusmopius.com


winjs, apache cordova & nfc - html5 apps for android and windows phone

Mobile

cordova winjs winjs

project winjs

code winjs

layouts winjs

reference winjs

libraries winjs

compiled winjs

enterprise winjs