View
3.952
Download
4
Category
Tags:
Preview:
DESCRIPTION
How to create cross-platform mobile apps with HTML5 that integrate directly into the platform. By combining several enterprise-class frameworks and tools, you can create apps that run on all mobile devices, developed in a central repository and tool. In this presentation, you will learn how to create HTML5 apps with the Visual Studio Multi-Device Hybrid Apps plug-in. Apache Cordova is directly integrated and resposible for creating native apps for the mobile platforms. WinJS can be used as a major UI framework that is now open source and works accross all platforms and browsers. To check how you can integrate apps deeper with the native platforms, you will also see how to install and use a custom plug-in that enables Near Field Communication (NFC) on both Android and Windows Phone.
Citation preview
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
– andreas.jakl@mopius.com
– 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>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
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
Recommended