Date post: | 14-Jun-2015 |
Category: |
Mobile |
Upload: | andreas-jakl |
View: | 3,948 times |
Download: | 4 times |
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
– mopius.com
History
– Nokia: Technology Wizard
– FH Hagenberg, Mobile Computing: Assistant Professor
– Siemens / BenQ Mobile: Augmented Reality-Apps
WinJS, Apache Cordova & NFC - Andreas Jakl, 21.10.2014 2
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
WinJS, Apache Cordova & NFC - Andreas Jakl, 21.10.2014 3
OVERVIEWRuntimes, tools and libraries
WinJS, Apache Cordova & NFC - Andreas Jakl, 21.10.2014 4
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
WinJS, Apache Cordova & NFC - Andreas Jakl, 21.10.2014 5
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://
WinJS, Apache Cordova & NFC - Andreas Jakl, 21.10.2014 6
WinJSXAML
C# JavaScript
HTML / CSS3
Windows Runtime (WinRT)
Windows 8.1Xbox One
Windows Phone 8.1
WinJS, Apache Cordova & NFC - Andreas Jakl, 21.10.2014 7
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, Apache Cordova & NFC - Andreas Jakl, 21.10.2014 8
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
WinJS, Apache Cordova & NFC - Andreas Jakl, 21.10.2014 10
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
WinJS, Apache Cordova & NFC - Andreas Jakl, 21.10.2014 11
HTML5 IDEsVisual Studio ($) / Express– Microsoft Multi-Device Hybrid Apps Extension
– Telerik AppBuilder Extension ($)
Intel XDK
Aptana Studio (Eclipse)
NetBeans
Webstorm ($)
Komodo Edit / IDE ($)
Notepad
WinJS, Apache Cordova & NFC - Andreas Jakl, 21.10.2014 12
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
WinJS, Apache Cordova & NFC - Andreas Jakl, 21.10.2014 13
On device debugging:
Android 4.4 +
No debugging (emulator & device)
Deploying to Targets
Android iOSWindows
PhoneWindows
Ripple(Chrome extension
for Android emulation)
WinJS, Apache Cordova & NFC - Andreas Jakl, 21.10.2014 14
PROJECT SETUPMulti-Device Hybrid App with Cordova & WinJS
WinJS, Apache Cordova & NFC - Andreas Jakl, 21.10.2014 15
Visual Studio ProjectStore App:
Universal AppMulti-Device Hybrid App:
Apache Cordova App
WinJSCordova
WinJSCordovaAdd WinJS
WinJS, Apache Cordova & NFC - Andreas Jakl, 21.10.2014 16
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)
WinJS, Apache Cordova & NFC - Andreas Jakl, 21.10.2014 18
Visual Studio Solution
WinJS, Apache Cordova & NFC - Andreas Jakl, 21.10.2014 19
Adding WinJS 3 to Project
1. Drag & drop
compiled
WinJS to
project
WinJS, Apache Cordova & NFC - Andreas Jakl, 21.10.2014 20
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();
};} )();
WinJS, Apache Cordova & NFC - Andreas Jakl, 21.10.2014 21
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, Apache Cordova & NFC - Andreas Jakl, 21.10.2014 23
WinJS UI – Rating Control
Create “Rating Control” in index.html<div id="ratingControlHost" data‐win‐control="WinJS.UI.Rating"></div>
WinJS, Apache Cordova & NFC - Andreas Jakl, 21.10.2014 24
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, Apache Cordova & NFC - Andreas Jakl, 21.10.2014 26
WinJS UI: Screen layouts
Hub
Pivot
WinJS, Apache Cordova & NFC - Andreas Jakl, 21.10.2014 27
WinJS UI: Views
FlipView
ListView
WinJS, Apache Cordova & NFC - Andreas Jakl, 21.10.2014 28
WinJS UI: Chrome
AppBar
NavBar
Flyout
Menu
WinJS, Apache Cordova & NFC - Andreas Jakl, 21.10.2014 29
WinJS UI: Controls
Rating
ToolTip
DatePickerTimePicker
Toggle
SearchboxSemanticZoom
WinJS, Apache Cordova & NFC - Andreas Jakl, 21.10.2014 30
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()
WinJS, Apache Cordova & NFC - Andreas Jakl, 21.10.2014 31
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);
});
WinJS, Apache Cordova & NFC - Andreas Jakl, 21.10.2014 32
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
WinJS, Apache Cordova & NFC - Andreas Jakl, 21.10.2014 33
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>
WinJS, Apache Cordova & NFC - Andreas Jakl, 21.10.2014 34
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
WinJS, Apache Cordova & NFC - Andreas Jakl, 21.10.2014 35
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>
WinJS, Apache Cordova & NFC - Andreas Jakl, 21.10.2014 36
CORDOVAGoing Multi-Platform
WinJS, Apache Cordova & NFC - Andreas Jakl, 21.10.2014 37
Cordova Configurationconfig.xml
– App name, version
– Preferences: fullscreen, orientation
– External domain access whitelist
– Plugins (features) for device access
WinJS, Apache Cordova & NFC - Andreas Jakl, 21.10.2014 38
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
WinJS, Apache Cordova & NFC - Andreas Jakl, 21.10.2014 39
Core Plug-InsInterface to native components
Good cross-platform support
Integrated in VS
– config.xml
WinJS, Apache Cordova & NFC - Andreas Jakl, 21.10.2014 40
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>
WinJS, Apache Cordova & NFC - Andreas Jakl, 21.10.2014 41
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
WinJS, Apache Cordova & NFC - Andreas Jakl, 21.10.2014 42
Hybrid Project
WinJS, Apache Cordova & NFC - Andreas Jakl, 21.10.2014 43
Runtime HTML
Analyze with VS Debugger (Android)
WinJS, Apache Cordova & NFC - Andreas Jakl, 21.10.2014 44
NFCNear Field Communication
WinJS, Apache Cordova & NFC - Andreas Jakl, 21.10.2014 45
Near Field Communication?
< 1 cm(tap)
WinJS, Apache Cordova & NFC - Andreas Jakl, 21.10.2014 46
Near Field Communication?
< 424 kbit / s
WinJS, Apache Cordova & NFC - Andreas Jakl, 21.10.2014 47
Near Field Communication?
WinJS, Apache Cordova & NFC - Andreas Jakl, 21.10.2014 48
NFC Tags
Tag memory size:48 byte – few kB
WinJS, Apache Cordova & NFC - Andreas Jakl, 21.10.2014 49
NFC & CORDOVA & WINJSBringing it all together …
WinJS, Apache Cordova & NFC - Andreas Jakl, 21.10.2014 50
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
WinJS, Apache Cordova & NFC - Andreas Jakl, 21.10.2014 51
Cordova NFC PluginOpen source
Developed by Chariot Solutions– plugins.cordova.io/#/package/com.chariotsolutions.nfc.plugin
Platforms
– Android
– WP8
– BlackBerry 10, (7)
WinJS, Apache Cordova & NFC - Andreas Jakl, 21.10.2014 52
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
WinJS, Apache Cordova & NFC - Andreas Jakl, 21.10.2014 54
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:
WinJS, Apache Cordova & NFC - Andreas Jakl, 21.10.2014 55
Adding the NDEF LibraryDownload & extract libraryNdefLibraryJS_1.0.0.zip
Drag & drop to project/dist/ndeflibrary(.min.).js
WinJS, Apache Cordova & NFC - Andreas Jakl, 21.10.2014 56
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);
WinJS, Apache Cordova & NFC - Andreas Jakl, 21.10.2014 57
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
WinJS, Apache Cordova & NFC - Andreas Jakl, 21.10.2014 58
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); }
);
WinJS, Apache Cordova & NFC - Andreas Jakl, 21.10.2014 59
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); }
);
WinJS, Apache Cordova & NFC - Andreas Jakl, 21.10.2014 60
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)
WinJS, Apache Cordova & NFC - Andreas Jakl, 21.10.2014 61
Full Demo App
mopius.github.io/ndef-nfc
WinJS, Apache Cordova & NFC - Andreas Jakl, 21.10.2014 62
SUMMARY
WinJS, Apache Cordova & NFC - Andreas Jakl, 21.10.2014 63
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.
WinJS, Apache Cordova & NFC - Andreas Jakl, 21.10.2014 64
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
WinJS, Apache Cordova & NFC - Andreas Jakl, 21.10.2014 65
NDEF: content standard.Record(s) contained in Message.
NDEF Library: open source for JavaScript & C#.Create & parse NDEF messages.
ndef.mopius.com
…
WinJS, Apache Cordova & NFC - Andreas Jakl, 21.10.2014 66
Thank You.
Andreas Jakl@andijakl
@mopiusmopius.com
WinJS, Apache Cordova & NFC - Andreas Jakl, 21.10.2014 67