WinJS, Apache Cordova & NFC
HTML5 apps for Android and Windows Phone
WinJS, Apache Cordova & NFC - Andreas Jakl, 21.10.201...
Andreas Jakl
Startup founder & app developer
– @andijakl, @mopius
– andreas.jakl@mopius.com
– mopius.com
History
– Nokia: ...
Overview
– HTML5 Development, UI & Tools
Project Setup
– Multi-Device Hybrid App with Cordova & WinJS
WinJS
– Controls, Pr...
OVERVIEW
Runtimes, tools and libraries
WinJS, Apache Cordova & NFC - Andreas Jakl, 21.10.2014 4
HTML5 UI Toolkits
AngularJS
BackboneJS
jQuery Mobile
Sencha Touch
Ember.js
Dojo Mobile
WinJS
… and many, many more!
HTML F...
Features
– UI toolkit
– JavaScript coding patterns
• Simplifies definition of namespaces, object classes
• Asynchronous op...
WinJS
XAML
C# JavaScript
HTML / CSS3
Windows Runtime (WinRT)
Windows 8.1
Xbox One
Windows
Phone 8.1
WinJS, Apache Cordova ...
WinJS 3.0+
XAML
C# JavaScript
HTML / CSS3
Windows Runtime (WinRT)
Windows 8.1
Android
iOS
Web browsers
Apache Cordova
Xbox...
WinJS Roadmap
Open Source
– Apache License
– Limitations on WP 8.1: http://msdn.microsoft.com/en-
us/library/windows/apps/...
WinJS Online Editor
try.buildwinjs.com
WinJS, Apache Cordova & NFC - Andreas Jakl, 21.10.2014 10
Apache Cordova
Use native phone APIs from HTML / JavaScript
– Hybrid apps – packaged for distribution
– App runs locally o...
HTML5 IDEs
Visual Studio ($) / Express
– Microsoft Multi-Device Hybrid Apps Extension
– Telerik AppBuilder Extension ($)
I...
Multi-Device Hybrid Apps
Visual Studio Extension (preview)
– http://bit.ly/vsHybrid
Code completion, debugging
Installs re...
On device
debugging:
Android 4.4 +
No debugging
(emulator & device)
Deploying to Targets
Android iOS
Windows
Phone
Windows...
PROJECT SETUP
Multi-Device Hybrid App with Cordova & WinJS
WinJS, Apache Cordova & NFC - Andreas Jakl, 21.10.2014 15
Visual Studio Project
Store App:
Universal App
Multi-Device Hybrid App:
Apache Cordova App
WinJS
Cordova
WinJS
CordovaAdd ...
WinJS 3 from GitHub
Compilation instructions
– Install GitHub client * and clone repository:
github.com/winjs/winjs
– Inst...
Glossary
git: Version control software
node.js: Runtime environment for executing
JavaScript apps (on servers)
npm: Node P...
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 ...
Add Libraries
2. Reference WinJS in index.html
3. Initialize WinJS controls
<!‐‐ WinJS ‐‐>
<link href="Microsoft.WinJS.3.1...
TypeScript vs JavaScript
Extends JavaScript
– Type annotations, compile-time type checking
– Interfaces
– Classes
– Module...
///<reference path='../scripts/typings/winjs/winjs.d.ts'/>
///<reference path='../scripts/typings/tsd.d.ts'/>
TypeScript t...
WinJS UI – Rating Control
Create“Rating Control”in index.html
<div id="ratingControlHost" data‐win‐control="WinJS.UI.Ratin...
WinJS Controls
Elements (<div> / <span>)
Contain data‐win‐control attribute
– Value is name of a constructor function
Inst...
WINJS
Working 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
DatePicker
TimePicker
Toggle
Searchbox
SemanticZoom
WinJS, Apache Cordova & NFC - Andrea...
Promises: Async Code
JavaScript: single-threaded language
Traditional asynchronous call-backs
– Call-stack with anonymous ...
Promises: How To
Initialize app
– After WinJS parsed DOM & instantiated controls
function onDeviceReady() {
WinJS.UI.proce...
Pages & Navigation
Traditional: multi-page navigation
– Individual HTML files, hyperlinks
Better: single-page navigation
–...
Pages & Navigation: How-To
Create 2nd “Navigation App”Store project
1. Create new“Page Control”: page2.html
Back to the Co...
Pages & Navigation: How-To
Create link from home.html to
page2.html
– Note: project structure is
modified during build for...
Bindings
Data Binding
– data‐win‐bind attribute on HTML element
– JS setup options
• Create relationship with WinJS.Bindin...
CORDOVA
Going Multi-Platform
WinJS, Apache Cordova & NFC - Andreas Jakl, 21.10.2014 37
Cordova Configuration
config.xml
– App name, version
– Preferences: fullscreen, orientation
– External domain access white...
Development Paths
Cross-Platform (CLI)
– cordova utility: automatically targets all platforms
• building, assets, plugin c...
Core Plug-Ins
Interface to native components
Good cross-platform support
Integrated in VS
– config.xml
WinJS, Apache Cordo...
3rd Party Plug-Ins
Sources
– Cordova.io, 400+ plugins: plugins.cordova.io
– Telerik verified plug-ins: plugins.telerik.com...
Hybrid App Build Process
Cordova
Visual Studio
solution
Platform specific
resources
(icons, scripts,
stylesheets, etc)
Dir...
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
NFC
Near 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 & WINJS
Bringing it all together …
WinJS, Apache Cordova & NFC - Andreas Jakl, 21.10.2014 50
W3C NFC API
JavaScript NFC API
– www.w3.org/TR/nfc/
Status: First Public Working Draft; NFC & basic NDEF
– Not very active...
Cordova NFC Plugin
Open source
Developed by Chariot Solutions
– plugins.cordova.io/#/package/com.chariotsolutions.nfc.plug...
Adding Cordova NFC Plugin
Add NFC plugin reference to config.xml
Test reading NFC tags
<vs:feature>com.chariotsolutions.nf...
NFC & NDEF Overview
NDEF Message
NDEF Record
(e.g., URL)
…
NDEF = NFC Data Exchange Format
WinJS, Apache Cordova & NFC - A...
Open Source NDEF Library
Reusable
NDEF
classes
Create NDEF
messages & records
(standard compliant)
Parse information
from ...
Adding the NDEF Library
Download & extract
library
NdefLibraryJS_1.0.0.zip
Drag & drop to project
/dist/ndeflibrary(.min.)...
Creating NDEF Messages
NDEF Record
– URI record
– Social record (Twitter)
NDEF Message
var ndefRecord = new NdefLibrary.Nd...
Format Conversion
// Convert message to raw NDEF byte array
var ndefMsgBytes = ndefMessage.toByteArray();
// Parse raw byt...
Writing NFC Tags
Cordova NFC Plugin: Write tag …
– Android: in NFC tag discovered call-back = while user is tapping tag
– ...
Sharing to Devices
Can be started & stopped (with unshare)
nfc.share(
ndefMessagePlugin,
function (msg) { console.log("Sha...
Real Life?
Cordova NFC plug-in is unstable
– Android: call-back after 2nd tag tap
– Windows Phone: after each publish one ...
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: HTML...
Apache Cordova: toolchain to create hybrid apps.
Plugins to access native functionality from JavaScript.
PhoneGap: commerc...
NDEF: content standard.
Record(s) contained in Message.
NDEF Library: open source for JavaScript & C#.
Create & parse NDEF...
Thank You.
Andreas Jakl
@andijakl
@mopius
mopius.com
WinJS, Apache Cordova & NFC - Andreas Jakl, 21.10.2014 67
Nächste SlideShare
Wird geladen in …5
×

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

10.424 Aufrufe

Veröffentlicht am

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.

Veröffentlicht in: Mobil
1 Kommentar
9 Gefällt mir
Statistik
Notizen
  • Hello. I have read your presentation and found it very useful. I have followed all the steps but i could not implemented the navigation through the app. I can see the 'Win.UI.Rating' object but it does not behave the same as a winJS navigation project application. Is there anything that might be missing from the presentation and could help? Thanks.
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier
Keine Downloads
Aufrufe
Aufrufe insgesamt
10.424
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
152
Aktionen
Geteilt
0
Downloads
146
Kommentare
1
Gefällt mir
9
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

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

  1. 1. WinJS, Apache Cordova & NFC HTML5 apps for Android and Windows Phone WinJS, Apache Cordova & NFC - Andreas Jakl, 21.10.2014 1
  2. 2. 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 WinJS, Apache Cordova & NFC - Andreas Jakl, 21.10.2014 2
  3. 3. 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
  4. 4. OVERVIEW Runtimes, tools and libraries WinJS, Apache Cordova & NFC - Andreas Jakl, 21.10.2014 4
  5. 5. 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 WinJS, Apache Cordova & NFC - Andreas Jakl, 21.10.2014 5
  6. 6. 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, Apache Cordova & NFC - Andreas Jakl, 21.10.2014 6
  7. 7. WinJS XAML C# JavaScript HTML / CSS3 Windows Runtime (WinRT) Windows 8.1 Xbox One Windows Phone 8.1 WinJS, Apache Cordova & NFC - Andreas Jakl, 21.10.2014 7
  8. 8. 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
  9. 9. 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
  10. 10. WinJS Online Editor try.buildwinjs.com WinJS, Apache Cordova & NFC - Andreas Jakl, 21.10.2014 10
  11. 11. 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 WinJS, Apache Cordova & NFC - Andreas Jakl, 21.10.2014 11
  12. 12. 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  WinJS, Apache Cordova & NFC - Andreas Jakl, 21.10.2014 12
  13. 13. 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 WinJS, Apache Cordova & NFC - Andreas Jakl, 21.10.2014 13
  14. 14. On device debugging: Android 4.4 + No debugging (emulator & device) Deploying to Targets Android iOS Windows Phone Windows Ripple (Chrome extension for Android emulation) WinJS, Apache Cordova & NFC - Andreas Jakl, 21.10.2014 14
  15. 15. PROJECT SETUP Multi-Device Hybrid App with Cordova & WinJS WinJS, Apache Cordova & NFC - Andreas Jakl, 21.10.2014 15
  16. 16. Visual Studio Project Store App: Universal App Multi-Device Hybrid App: Apache Cordova App WinJS Cordova WinJS CordovaAdd WinJS WinJS, Apache Cordova & NFC - Andreas Jakl, 21.10.2014 16
  17. 17. 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 WinJS, Apache Cordova & NFC - Andreas Jakl, 21.10.2014 17
  18. 18. 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) WinJS, Apache Cordova & NFC - Andreas Jakl, 21.10.2014 18
  19. 19. Visual Studio Solution WinJS, Apache Cordova & NFC - Andreas Jakl, 21.10.2014 19
  20. 20. Adding WinJS 3 to Project 1. Drag & drop compiled WinJS to project WinJS, Apache Cordova & NFC - Andreas Jakl, 21.10.2014 20
  21. 21. 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(); }; } )(); WinJS, Apache Cordova & NFC - Andreas Jakl, 21.10.2014 21
  22. 22. 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
  23. 23. ///<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, Apache Cordova & NFC - Andreas Jakl, 21.10.2014 23
  24. 24. 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
  25. 25. 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, Apache Cordova & NFC - Andreas Jakl, 21.10.2014 25
  26. 26. WINJS Working with WinJS, Apache Cordova & NFC - Andreas Jakl, 21.10.2014 26
  27. 27. WinJS UI: Screen layouts Hub Pivot WinJS, Apache Cordova & NFC - Andreas Jakl, 21.10.2014 27
  28. 28. WinJS UI: Views FlipView ListView WinJS, Apache Cordova & NFC - Andreas Jakl, 21.10.2014 28
  29. 29. WinJS UI: Chrome AppBar NavBar Flyout Menu WinJS, Apache Cordova & NFC - Andreas Jakl, 21.10.2014 29
  30. 30. WinJS UI: Controls Rating ToolTip DatePicker TimePicker Toggle Searchbox SemanticZoom WinJS, Apache Cordova & NFC - Andreas Jakl, 21.10.2014 30
  31. 31. 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() WinJS, Apache Cordova & NFC - Andreas Jakl, 21.10.2014 31
  32. 32. 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); }); WinJS, Apache Cordova & NFC - Andreas Jakl, 21.10.2014 32
  33. 33. 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 WinJS, Apache Cordova & NFC - Andreas Jakl, 21.10.2014 33
  34. 34. 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> WinJS, Apache Cordova & NFC - Andreas Jakl, 21.10.2014 34
  35. 35. 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 WinJS, Apache Cordova & NFC - Andreas Jakl, 21.10.2014 35
  36. 36. 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> WinJS, Apache Cordova & NFC - Andreas Jakl, 21.10.2014 36
  37. 37. CORDOVA Going Multi-Platform WinJS, Apache Cordova & NFC - Andreas Jakl, 21.10.2014 37
  38. 38. Cordova Configuration config.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
  39. 39. 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 WinJS, Apache Cordova & NFC - Andreas Jakl, 21.10.2014 39
  40. 40. Core Plug-Ins Interface to native components Good cross-platform support Integrated in VS – config.xml WinJS, Apache Cordova & NFC - Andreas Jakl, 21.10.2014 40
  41. 41. 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> WinJS, Apache Cordova & NFC - Andreas Jakl, 21.10.2014 41
  42. 42. 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 WinJS, Apache Cordova & NFC - Andreas Jakl, 21.10.2014 42
  43. 43. Hybrid Project WinJS, Apache Cordova & NFC - Andreas Jakl, 21.10.2014 43
  44. 44. Runtime HTML Analyze with VS Debugger (Android) WinJS, Apache Cordova & NFC - Andreas Jakl, 21.10.2014 44
  45. 45. NFC Near Field Communication WinJS, Apache Cordova & NFC - Andreas Jakl, 21.10.2014 45
  46. 46. Near Field Communication? < 1 cm (tap) WinJS, Apache Cordova & NFC - Andreas Jakl, 21.10.2014 46
  47. 47. Near Field Communication? < 424 kbit / s WinJS, Apache Cordova & NFC - Andreas Jakl, 21.10.2014 47
  48. 48. Near Field Communication? WinJS, Apache Cordova & NFC - Andreas Jakl, 21.10.2014 48
  49. 49. NFC Tags Tag memory size: 48 byte – few kB WinJS, Apache Cordova & NFC - Andreas Jakl, 21.10.2014 49
  50. 50. NFC & CORDOVA & WINJS Bringing it all together … WinJS, Apache Cordova & NFC - Andreas Jakl, 21.10.2014 50
  51. 51. 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 WinJS, Apache Cordova & NFC - Andreas Jakl, 21.10.2014 51
  52. 52. Cordova NFC Plugin Open 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
  53. 53. 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
  54. 54. 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
  55. 55. 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: WinJS, Apache Cordova & NFC - Andreas Jakl, 21.10.2014 55
  56. 56. Adding the NDEF Library Download & extract library NdefLibraryJS_1.0.0.zip Drag & drop to project /dist/ndeflibrary(.min.).js WinJS, Apache Cordova & NFC - Andreas Jakl, 21.10.2014 56
  57. 57. 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); WinJS, Apache Cordova & NFC - Andreas Jakl, 21.10.2014 57
  58. 58. 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 WinJS, Apache Cordova & NFC - Andreas Jakl, 21.10.2014 58
  59. 59. 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); } ); WinJS, Apache Cordova & NFC - Andreas Jakl, 21.10.2014 59
  60. 60. 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
  61. 61. 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
  62. 62. Full Demo App mopius.github.io/ndef-nfc WinJS, Apache Cordova & NFC - Andreas Jakl, 21.10.2014 62
  63. 63. SUMMARY WinJS, Apache Cordova & NFC - Andreas Jakl, 21.10.2014 63
  64. 64. 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
  65. 65. 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
  66. 66. 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
  67. 67. Thank You. Andreas Jakl @andijakl @mopius mopius.com WinJS, Apache Cordova & NFC - Andreas Jakl, 21.10.2014 67

×