Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

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

11.429 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
  • Hey guys! Who wants to chat with me? More photos with me here 👉 http://www.bit.ly/katekoxx
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier
  • 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

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

×