SlideShare ist ein Scribd-Unternehmen logo
1 von 67
Downloaden Sie, um offline zu lesen
WinJS, Apache Cordova & NFC
HTML5 apps for Android and Windows Phone
WinJS, Apache Cordova & NFC - Andreas Jakl, 21.10.2014 1
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
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
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 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
WinJS
http://
WinJS, Apache Cordova & NFC - Andreas Jakl, 21.10.2014 6
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
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 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
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 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 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
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
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
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
WinJS, Apache Cordova & NFC - Andreas Jakl, 21.10.2014 16
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
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
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 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
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
///<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
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 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
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 - Andreas Jakl, 21.10.2014 30
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
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
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
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
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
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
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 whitelist
– Plugins (features) for device access
WinJS, Apache Cordova & NFC - Andreas Jakl, 21.10.2014 38
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
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
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
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
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 group 
State: October 2014
WinJS, Apache Cordova & NFC - Andreas Jakl, 21.10.2014 51
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
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
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 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
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
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
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
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
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
@mopius
mopius.com
WinJS, Apache Cordova & NFC - Andreas Jakl, 21.10.2014 67

Weitere ähnliche Inhalte

Was ist angesagt?

Quickstart: Qt for Windows, Symbian and Maemo / Meego v2.0.8 (January 10th, 2...
Quickstart: Qt for Windows, Symbian and Maemo / Meego v2.0.8 (January 10th, 2...Quickstart: Qt for Windows, Symbian and Maemo / Meego v2.0.8 (January 10th, 2...
Quickstart: Qt for Windows, Symbian and Maemo / Meego v2.0.8 (January 10th, 2...Andreas Jakl
 
Hybrid Mobile Development with Apache Cordova and Java EE 7 (JavaOne 2014)
Hybrid Mobile Development with Apache Cordova and Java EE 7 (JavaOne 2014)Hybrid Mobile Development with Apache Cordova and Java EE 7 (JavaOne 2014)
Hybrid Mobile Development with Apache Cordova and Java EE 7 (JavaOne 2014)Ryan Cuprak
 
Visual Studio 2015: novità per gli sviluppatori iOS, Android e Cross-Platform
Visual Studio 2015: novità per gli sviluppatori iOS, Android e Cross-PlatformVisual Studio 2015: novità per gli sviluppatori iOS, Android e Cross-Platform
Visual Studio 2015: novità per gli sviluppatori iOS, Android e Cross-PlatformStefano Ottaviani
 
Qt S60 Technical Presentation Fn Stripped
Qt S60 Technical Presentation Fn StrippedQt S60 Technical Presentation Fn Stripped
Qt S60 Technical Presentation Fn StrippedNokia
 
Android Programming Basic
Android Programming BasicAndroid Programming Basic
Android Programming BasicDuy Do Phan
 
Qt in depth - presentation for Symbian expo 2009
Qt in depth - presentation for Symbian expo 2009Qt in depth - presentation for Symbian expo 2009
Qt in depth - presentation for Symbian expo 2009Nokia
 
An introduction to Android
An introduction to AndroidAn introduction to Android
An introduction to AndroidRajesh Jambukia
 
DevOps Indonesia #5 - The Future of Containers
DevOps Indonesia #5 - The Future of ContainersDevOps Indonesia #5 - The Future of Containers
DevOps Indonesia #5 - The Future of ContainersDevOps Indonesia
 
AIDE - Android Integrated Development Environment presentation
AIDE - Android Integrated Development Environment presentationAIDE - Android Integrated Development Environment presentation
AIDE - Android Integrated Development Environment presentationBeMyApp
 
Best software development tools in 2021
Best software development tools in 2021Best software development tools in 2021
Best software development tools in 2021Samaritan InfoTech
 
20140424 developer direct live 2014 jim mc_keeth_what's new in xe6
20140424 developer direct live 2014 jim mc_keeth_what's new in xe620140424 developer direct live 2014 jim mc_keeth_what's new in xe6
20140424 developer direct live 2014 jim mc_keeth_what's new in xe6Devgear
 
Appcelerator Titanium - An Introduction to the Titanium Ecosystem
Appcelerator Titanium - An Introduction to the Titanium EcosystemAppcelerator Titanium - An Introduction to the Titanium Ecosystem
Appcelerator Titanium - An Introduction to the Titanium EcosystemBoydlee Pollentine
 
Android dev o_auth
Android dev o_authAndroid dev o_auth
Android dev o_authlzongren
 
Keynote Client Connectivity And The Cloud
Keynote Client Connectivity And The CloudKeynote Client Connectivity And The Cloud
Keynote Client Connectivity And The CloudGoogleTecTalks
 
OSCON 2012: Design and Debug HTML5 Apps for Devices with RIB and Web Simulator
OSCON 2012: Design and Debug HTML5 Apps for Devices with RIB and Web SimulatorOSCON 2012: Design and Debug HTML5 Apps for Devices with RIB and Web Simulator
OSCON 2012: Design and Debug HTML5 Apps for Devices with RIB and Web SimulatorGail Frederick
 
Mec 2015 - Windows developer program for IoT
Mec 2015 - Windows developer program for IoTMec 2015 - Windows developer program for IoT
Mec 2015 - Windows developer program for IoTMirco Vanini
 
Keynote at Home Automation/ IoT Telecom Council conference
Keynote at Home Automation/ IoT Telecom Council conferenceKeynote at Home Automation/ IoT Telecom Council conference
Keynote at Home Automation/ IoT Telecom Council conferenceLarry McDonough
 

Was ist angesagt? (20)

Quickstart: Qt for Windows, Symbian and Maemo / Meego v2.0.8 (January 10th, 2...
Quickstart: Qt for Windows, Symbian and Maemo / Meego v2.0.8 (January 10th, 2...Quickstart: Qt for Windows, Symbian and Maemo / Meego v2.0.8 (January 10th, 2...
Quickstart: Qt for Windows, Symbian and Maemo / Meego v2.0.8 (January 10th, 2...
 
Hybrid Mobile Development with Apache Cordova and Java EE 7 (JavaOne 2014)
Hybrid Mobile Development with Apache Cordova and Java EE 7 (JavaOne 2014)Hybrid Mobile Development with Apache Cordova and Java EE 7 (JavaOne 2014)
Hybrid Mobile Development with Apache Cordova and Java EE 7 (JavaOne 2014)
 
Visual Studio 2015: novità per gli sviluppatori iOS, Android e Cross-Platform
Visual Studio 2015: novità per gli sviluppatori iOS, Android e Cross-PlatformVisual Studio 2015: novità per gli sviluppatori iOS, Android e Cross-Platform
Visual Studio 2015: novità per gli sviluppatori iOS, Android e Cross-Platform
 
Qt S60 Technical Presentation Fn Stripped
Qt S60 Technical Presentation Fn StrippedQt S60 Technical Presentation Fn Stripped
Qt S60 Technical Presentation Fn Stripped
 
Software development with qt
Software development with qtSoftware development with qt
Software development with qt
 
Android Programming Basic
Android Programming BasicAndroid Programming Basic
Android Programming Basic
 
Qt in depth - presentation for Symbian expo 2009
Qt in depth - presentation for Symbian expo 2009Qt in depth - presentation for Symbian expo 2009
Qt in depth - presentation for Symbian expo 2009
 
An introduction to Android
An introduction to AndroidAn introduction to Android
An introduction to Android
 
Introduction to android
Introduction to androidIntroduction to android
Introduction to android
 
DevOps Indonesia #5 - The Future of Containers
DevOps Indonesia #5 - The Future of ContainersDevOps Indonesia #5 - The Future of Containers
DevOps Indonesia #5 - The Future of Containers
 
AIDE - Android Integrated Development Environment presentation
AIDE - Android Integrated Development Environment presentationAIDE - Android Integrated Development Environment presentation
AIDE - Android Integrated Development Environment presentation
 
Best software development tools in 2021
Best software development tools in 2021Best software development tools in 2021
Best software development tools in 2021
 
De leukste Bug
De leukste BugDe leukste Bug
De leukste Bug
 
20140424 developer direct live 2014 jim mc_keeth_what's new in xe6
20140424 developer direct live 2014 jim mc_keeth_what's new in xe620140424 developer direct live 2014 jim mc_keeth_what's new in xe6
20140424 developer direct live 2014 jim mc_keeth_what's new in xe6
 
Appcelerator Titanium - An Introduction to the Titanium Ecosystem
Appcelerator Titanium - An Introduction to the Titanium EcosystemAppcelerator Titanium - An Introduction to the Titanium Ecosystem
Appcelerator Titanium - An Introduction to the Titanium Ecosystem
 
Android dev o_auth
Android dev o_authAndroid dev o_auth
Android dev o_auth
 
Keynote Client Connectivity And The Cloud
Keynote Client Connectivity And The CloudKeynote Client Connectivity And The Cloud
Keynote Client Connectivity And The Cloud
 
OSCON 2012: Design and Debug HTML5 Apps for Devices with RIB and Web Simulator
OSCON 2012: Design and Debug HTML5 Apps for Devices with RIB and Web SimulatorOSCON 2012: Design and Debug HTML5 Apps for Devices with RIB and Web Simulator
OSCON 2012: Design and Debug HTML5 Apps for Devices with RIB and Web Simulator
 
Mec 2015 - Windows developer program for IoT
Mec 2015 - Windows developer program for IoTMec 2015 - Windows developer program for IoT
Mec 2015 - Windows developer program for IoT
 
Keynote at Home Automation/ IoT Telecom Council conference
Keynote at Home Automation/ IoT Telecom Council conferenceKeynote at Home Automation/ IoT Telecom Council conference
Keynote at Home Automation/ IoT Telecom Council conference
 

Andere mochten auch

Qt App Development - Cross-Platform Development for Android, iOS, Windows Pho...
Qt App Development - Cross-Platform Development for Android, iOS, Windows Pho...Qt App Development - Cross-Platform Development for Android, iOS, Windows Pho...
Qt App Development - Cross-Platform Development for Android, iOS, Windows Pho...Andreas Jakl
 
NFC Plugin - PhoneGap Day 2011
NFC Plugin - PhoneGap Day 2011NFC Plugin - PhoneGap Day 2011
NFC Plugin - PhoneGap Day 2011Kevin Griffin
 
JavaScript in Universal Windows Platform apps
JavaScript in Universal Windows Platform appsJavaScript in Universal Windows Platform apps
JavaScript in Universal Windows Platform appsTimmy Kokke
 
Witekio Qt and Android
Witekio Qt and AndroidWitekio Qt and Android
Witekio Qt and AndroidWitekio
 
Tizen Native Application Development with C/C++
Tizen Native Application Development with C/C++Tizen Native Application Development with C/C++
Tizen Native Application Development with C/C++Gilang Mentari Hamidy
 
[ApacheCon 2016] Advanced Apache Cordova
[ApacheCon 2016] Advanced Apache Cordova[ApacheCon 2016] Advanced Apache Cordova
[ApacheCon 2016] Advanced Apache CordovaHazem Saleh
 
"How to Develop with Qt for Multiple Screen Resolutions and Increase Your Use...
"How to Develop with Qt for Multiple Screen Resolutions and Increase Your Use..."How to Develop with Qt for Multiple Screen Resolutions and Increase Your Use...
"How to Develop with Qt for Multiple Screen Resolutions and Increase Your Use...FELGO SDK
 
20141030 html5j-firefox os-deviceapi
20141030 html5j-firefox os-deviceapi20141030 html5j-firefox os-deviceapi
20141030 html5j-firefox os-deviceapiNoritada Shimizu
 
Windows ストアアプリから使かえるセンサーAPIとデバイスAPI
Windows ストアアプリから使かえるセンサーAPIとデバイスAPIWindows ストアアプリから使かえるセンサーAPIとデバイスAPI
Windows ストアアプリから使かえるセンサーAPIとデバイスAPIOsamu Monoe
 
ウェブ標準デバイス系 API 総集編 2014
ウェブ標準デバイス系 API 総集編 2014ウェブ標準デバイス系 API 総集編 2014
ウェブ標準デバイス系 API 総集編 2014Futomi Hatano
 
PayPal Big Data and MySQL Cluster
PayPal Big Data and MySQL ClusterPayPal Big Data and MySQL Cluster
PayPal Big Data and MySQL ClusterMat Keep
 
Introduction to Apache Cordova (Phonegap)
Introduction to Apache Cordova (Phonegap)Introduction to Apache Cordova (Phonegap)
Introduction to Apache Cordova (Phonegap)ejlp12
 
Chrome Apps のデバイスAPI
Chrome Apps のデバイスAPIChrome Apps のデバイスAPI
Chrome Apps のデバイスAPIyoshikawa_t
 
Creating apps that work on all screen sizes
Creating apps that work on all screen sizesCreating apps that work on all screen sizes
Creating apps that work on all screen sizesRavi Vyas
 

Andere mochten auch (16)

Qt App Development - Cross-Platform Development for Android, iOS, Windows Pho...
Qt App Development - Cross-Platform Development for Android, iOS, Windows Pho...Qt App Development - Cross-Platform Development for Android, iOS, Windows Pho...
Qt App Development - Cross-Platform Development for Android, iOS, Windows Pho...
 
NFC Plugin - PhoneGap Day 2011
NFC Plugin - PhoneGap Day 2011NFC Plugin - PhoneGap Day 2011
NFC Plugin - PhoneGap Day 2011
 
WebSite development using WinJS
WebSite development using WinJSWebSite development using WinJS
WebSite development using WinJS
 
JavaScript in Universal Windows Platform apps
JavaScript in Universal Windows Platform appsJavaScript in Universal Windows Platform apps
JavaScript in Universal Windows Platform apps
 
Witekio Qt and Android
Witekio Qt and AndroidWitekio Qt and Android
Witekio Qt and Android
 
Tizen Native Application Development with C/C++
Tizen Native Application Development with C/C++Tizen Native Application Development with C/C++
Tizen Native Application Development with C/C++
 
Cordovaの特徴と開発手法概要
Cordovaの特徴と開発手法概要Cordovaの特徴と開発手法概要
Cordovaの特徴と開発手法概要
 
[ApacheCon 2016] Advanced Apache Cordova
[ApacheCon 2016] Advanced Apache Cordova[ApacheCon 2016] Advanced Apache Cordova
[ApacheCon 2016] Advanced Apache Cordova
 
"How to Develop with Qt for Multiple Screen Resolutions and Increase Your Use...
"How to Develop with Qt for Multiple Screen Resolutions and Increase Your Use..."How to Develop with Qt for Multiple Screen Resolutions and Increase Your Use...
"How to Develop with Qt for Multiple Screen Resolutions and Increase Your Use...
 
20141030 html5j-firefox os-deviceapi
20141030 html5j-firefox os-deviceapi20141030 html5j-firefox os-deviceapi
20141030 html5j-firefox os-deviceapi
 
Windows ストアアプリから使かえるセンサーAPIとデバイスAPI
Windows ストアアプリから使かえるセンサーAPIとデバイスAPIWindows ストアアプリから使かえるセンサーAPIとデバイスAPI
Windows ストアアプリから使かえるセンサーAPIとデバイスAPI
 
ウェブ標準デバイス系 API 総集編 2014
ウェブ標準デバイス系 API 総集編 2014ウェブ標準デバイス系 API 総集編 2014
ウェブ標準デバイス系 API 総集編 2014
 
PayPal Big Data and MySQL Cluster
PayPal Big Data and MySQL ClusterPayPal Big Data and MySQL Cluster
PayPal Big Data and MySQL Cluster
 
Introduction to Apache Cordova (Phonegap)
Introduction to Apache Cordova (Phonegap)Introduction to Apache Cordova (Phonegap)
Introduction to Apache Cordova (Phonegap)
 
Chrome Apps のデバイスAPI
Chrome Apps のデバイスAPIChrome Apps のデバイスAPI
Chrome Apps のデバイスAPI
 
Creating apps that work on all screen sizes
Creating apps that work on all screen sizesCreating apps that work on all screen sizes
Creating apps that work on all screen sizes
 

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

Using java interop in your xamarin.android apps
Using java interop in your xamarin.android appsUsing java interop in your xamarin.android apps
Using java interop in your xamarin.android appsWillem Meints
 
Cleverwash - a Technical Overview
Cleverwash - a Technical OverviewCleverwash - a Technical Overview
Cleverwash - a Technical OverviewAround25
 
201500912 Hello Windows 10
201500912 Hello Windows 10201500912 Hello Windows 10
201500912 Hello Windows 10영욱 김
 
Hybrid App Development with PhoneGap
Hybrid App Development with PhoneGapHybrid App Development with PhoneGap
Hybrid App Development with PhoneGapDotitude
 
Hybrid Mobile Apps - Meetup
Hybrid Mobile Apps - MeetupHybrid Mobile Apps - Meetup
Hybrid Mobile Apps - MeetupSanjay Patel
 
How open source cross platform as node.js 14 develop runtime applications
How open source cross platform as node.js 14 develop runtime applications How open source cross platform as node.js 14 develop runtime applications
How open source cross platform as node.js 14 develop runtime applications MoonTechnolabsPvtLtd
 
SenchaCon 2016: Cross-Platform Mobile App Development with Cordova and Visual...
SenchaCon 2016: Cross-Platform Mobile App Development with Cordova and Visual...SenchaCon 2016: Cross-Platform Mobile App Development with Cordova and Visual...
SenchaCon 2016: Cross-Platform Mobile App Development with Cordova and Visual...Sencha
 
Sencha Tooling - Senchacon Conference
Sencha Tooling  - Senchacon ConferenceSencha Tooling  - Senchacon Conference
Sencha Tooling - Senchacon ConferenceSandeep Adwankar
 
2011 08-24 mobile web app
2011 08-24  mobile web app2011 08-24  mobile web app
2011 08-24 mobile web appSholto Maud
 
Tutorial: Develop Mobile Applications with AngularJS
Tutorial: Develop Mobile Applications with AngularJSTutorial: Develop Mobile Applications with AngularJS
Tutorial: Develop Mobile Applications with AngularJSPhilipp Burgmer
 
Cross Platform Mobile app with Ionic Framework - 2015
Cross Platform Mobile app with Ionic Framework - 2015Cross Platform Mobile app with Ionic Framework - 2015
Cross Platform Mobile app with Ionic Framework - 2015Bikash Sundaray
 
Let's talk about the future: state-of-the-art mobile web & hybrid apps
Let's talk about the future: state-of-the-art mobile web & hybrid appsLet's talk about the future: state-of-the-art mobile web & hybrid apps
Let's talk about the future: state-of-the-art mobile web & hybrid appsRakuten Group, Inc.
 
Ionic Mobile Applications - Hybrid Mobile Applications Without Compromises
Ionic Mobile Applications - Hybrid Mobile Applications Without CompromisesIonic Mobile Applications - Hybrid Mobile Applications Without Compromises
Ionic Mobile Applications - Hybrid Mobile Applications Without CompromisesJacob Friesen
 
A164 enterprise javascript ibm node sdk
A164 enterprise javascript ibm node sdkA164 enterprise javascript ibm node sdk
A164 enterprise javascript ibm node sdkToby Corbin
 
How to modernise WPF and Windows Forms applications with Windows Apps SDK
How to modernise WPF and Windows Forms applications with Windows Apps SDKHow to modernise WPF and Windows Forms applications with Windows Apps SDK
How to modernise WPF and Windows Forms applications with Windows Apps SDKMirco Vanini
 
Building Universal Windows Apps for Smartphones and Tablets with XAML & C#
Building Universal Windows Apps for Smartphones and Tablets with XAML & C#Building Universal Windows Apps for Smartphones and Tablets with XAML & C#
Building Universal Windows Apps for Smartphones and Tablets with XAML & C#Nick Landry
 

Ähnlich wie WinJS, Apache Cordova & NFC - HTML5 apps for Android and Windows Phone (20)

Using java interop in your xamarin.android apps
Using java interop in your xamarin.android appsUsing java interop in your xamarin.android apps
Using java interop in your xamarin.android apps
 
Cleverwash - a Technical Overview
Cleverwash - a Technical OverviewCleverwash - a Technical Overview
Cleverwash - a Technical Overview
 
Ionic framework
Ionic frameworkIonic framework
Ionic framework
 
Mono for android
Mono for androidMono for android
Mono for android
 
201500912 Hello Windows 10
201500912 Hello Windows 10201500912 Hello Windows 10
201500912 Hello Windows 10
 
Hybrid App Development with PhoneGap
Hybrid App Development with PhoneGapHybrid App Development with PhoneGap
Hybrid App Development with PhoneGap
 
Hybrid Mobile Apps - Meetup
Hybrid Mobile Apps - MeetupHybrid Mobile Apps - Meetup
Hybrid Mobile Apps - Meetup
 
Ionic
IonicIonic
Ionic
 
How open source cross platform as node.js 14 develop runtime applications
How open source cross platform as node.js 14 develop runtime applications How open source cross platform as node.js 14 develop runtime applications
How open source cross platform as node.js 14 develop runtime applications
 
SenchaCon 2016: Cross-Platform Mobile App Development with Cordova and Visual...
SenchaCon 2016: Cross-Platform Mobile App Development with Cordova and Visual...SenchaCon 2016: Cross-Platform Mobile App Development with Cordova and Visual...
SenchaCon 2016: Cross-Platform Mobile App Development with Cordova and Visual...
 
Sencha Tooling - Senchacon Conference
Sencha Tooling  - Senchacon ConferenceSencha Tooling  - Senchacon Conference
Sencha Tooling - Senchacon Conference
 
2011 08-24 mobile web app
2011 08-24  mobile web app2011 08-24  mobile web app
2011 08-24 mobile web app
 
Tutorial: Develop Mobile Applications with AngularJS
Tutorial: Develop Mobile Applications with AngularJSTutorial: Develop Mobile Applications with AngularJS
Tutorial: Develop Mobile Applications with AngularJS
 
Cross Platform Mobile app with Ionic Framework - 2015
Cross Platform Mobile app with Ionic Framework - 2015Cross Platform Mobile app with Ionic Framework - 2015
Cross Platform Mobile app with Ionic Framework - 2015
 
Let's talk about the future: state-of-the-art mobile web & hybrid apps
Let's talk about the future: state-of-the-art mobile web & hybrid appsLet's talk about the future: state-of-the-art mobile web & hybrid apps
Let's talk about the future: state-of-the-art mobile web & hybrid apps
 
Ionic Mobile Applications - Hybrid Mobile Applications Without Compromises
Ionic Mobile Applications - Hybrid Mobile Applications Without CompromisesIonic Mobile Applications - Hybrid Mobile Applications Without Compromises
Ionic Mobile Applications - Hybrid Mobile Applications Without Compromises
 
A164 enterprise javascript ibm node sdk
A164 enterprise javascript ibm node sdkA164 enterprise javascript ibm node sdk
A164 enterprise javascript ibm node sdk
 
How to modernise WPF and Windows Forms applications with Windows Apps SDK
How to modernise WPF and Windows Forms applications with Windows Apps SDKHow to modernise WPF and Windows Forms applications with Windows Apps SDK
How to modernise WPF and Windows Forms applications with Windows Apps SDK
 
Building Universal Windows Apps for Smartphones and Tablets with XAML & C#
Building Universal Windows Apps for Smartphones and Tablets with XAML & C#Building Universal Windows Apps for Smartphones and Tablets with XAML & C#
Building Universal Windows Apps for Smartphones and Tablets with XAML & C#
 
Capacitor 2.0 Launch
Capacitor 2.0 LaunchCapacitor 2.0 Launch
Capacitor 2.0 Launch
 

Mehr von Andreas Jakl

Create Engaging Healthcare Experiences with Augmented Reality
Create Engaging Healthcare Experiences with Augmented RealityCreate Engaging Healthcare Experiences with Augmented Reality
Create Engaging Healthcare Experiences with Augmented RealityAndreas Jakl
 
AR / VR Interaction Development with Unity
AR / VR Interaction Development with UnityAR / VR Interaction Development with Unity
AR / VR Interaction Development with UnityAndreas Jakl
 
Android Development with Kotlin, Part 3 - Code and App Management
Android Development with Kotlin, Part 3 - Code and App ManagementAndroid Development with Kotlin, Part 3 - Code and App Management
Android Development with Kotlin, Part 3 - Code and App ManagementAndreas Jakl
 
Android Development with Kotlin, Part 2 - Internet Services and JSON
Android Development with Kotlin, Part 2 - Internet Services and JSONAndroid Development with Kotlin, Part 2 - Internet Services and JSON
Android Development with Kotlin, Part 2 - Internet Services and JSONAndreas Jakl
 
Android Development with Kotlin, Part 1 - Introduction
Android Development with Kotlin, Part 1 - IntroductionAndroid Development with Kotlin, Part 1 - Introduction
Android Development with Kotlin, Part 1 - IntroductionAndreas Jakl
 
Android and NFC / NDEF (with Kotlin)
Android and NFC / NDEF (with Kotlin)Android and NFC / NDEF (with Kotlin)
Android and NFC / NDEF (with Kotlin)Andreas Jakl
 
Basics of Web Technologies
Basics of Web TechnologiesBasics of Web Technologies
Basics of Web TechnologiesAndreas Jakl
 
Bluetooth Beacons - Bluetooth 5, iBeacon, Eddystone, Arduino, Windows 10 & More
Bluetooth Beacons - Bluetooth 5, iBeacon, Eddystone, Arduino, Windows 10 & MoreBluetooth Beacons - Bluetooth 5, iBeacon, Eddystone, Arduino, Windows 10 & More
Bluetooth Beacons - Bluetooth 5, iBeacon, Eddystone, Arduino, Windows 10 & MoreAndreas Jakl
 
Which new scenarios are enabled by Windows 10 for NFC, Bluetooth LE & Beacons?
Which new scenarios are enabled by Windows 10 for NFC, Bluetooth LE & Beacons?Which new scenarios are enabled by Windows 10 for NFC, Bluetooth LE & Beacons?
Which new scenarios are enabled by Windows 10 for NFC, Bluetooth LE & Beacons?Andreas Jakl
 
Mobile Test Automation
Mobile Test AutomationMobile Test Automation
Mobile Test AutomationAndreas Jakl
 
Nokia New Asha Platform Developer Training
Nokia New Asha Platform Developer TrainingNokia New Asha Platform Developer Training
Nokia New Asha Platform Developer TrainingAndreas Jakl
 
Windows Phone 8 NFC Quickstart
Windows Phone 8 NFC QuickstartWindows Phone 8 NFC Quickstart
Windows Phone 8 NFC QuickstartAndreas Jakl
 
Windows (Phone) 8 NFC App Scenarios
Windows (Phone) 8 NFC App ScenariosWindows (Phone) 8 NFC App Scenarios
Windows (Phone) 8 NFC App ScenariosAndreas Jakl
 
Windows 8 Platform NFC Development
Windows 8 Platform NFC DevelopmentWindows 8 Platform NFC Development
Windows 8 Platform NFC DevelopmentAndreas Jakl
 
NFC Development with Qt - v2.2.0 (5. November 2012)
NFC Development with Qt - v2.2.0 (5. November 2012)NFC Development with Qt - v2.2.0 (5. November 2012)
NFC Development with Qt - v2.2.0 (5. November 2012)Andreas Jakl
 
06 - Qt Communication
06 - Qt Communication06 - Qt Communication
06 - Qt CommunicationAndreas Jakl
 
05 - Qt External Interaction and Graphics
05 - Qt External Interaction and Graphics05 - Qt External Interaction and Graphics
05 - Qt External Interaction and GraphicsAndreas Jakl
 
03 - Qt UI Development
03 - Qt UI Development03 - Qt UI Development
03 - Qt UI DevelopmentAndreas Jakl
 

Mehr von Andreas Jakl (20)

Create Engaging Healthcare Experiences with Augmented Reality
Create Engaging Healthcare Experiences with Augmented RealityCreate Engaging Healthcare Experiences with Augmented Reality
Create Engaging Healthcare Experiences with Augmented Reality
 
AR / VR Interaction Development with Unity
AR / VR Interaction Development with UnityAR / VR Interaction Development with Unity
AR / VR Interaction Development with Unity
 
Android Development with Kotlin, Part 3 - Code and App Management
Android Development with Kotlin, Part 3 - Code and App ManagementAndroid Development with Kotlin, Part 3 - Code and App Management
Android Development with Kotlin, Part 3 - Code and App Management
 
Android Development with Kotlin, Part 2 - Internet Services and JSON
Android Development with Kotlin, Part 2 - Internet Services and JSONAndroid Development with Kotlin, Part 2 - Internet Services and JSON
Android Development with Kotlin, Part 2 - Internet Services and JSON
 
Android Development with Kotlin, Part 1 - Introduction
Android Development with Kotlin, Part 1 - IntroductionAndroid Development with Kotlin, Part 1 - Introduction
Android Development with Kotlin, Part 1 - Introduction
 
Android and NFC / NDEF (with Kotlin)
Android and NFC / NDEF (with Kotlin)Android and NFC / NDEF (with Kotlin)
Android and NFC / NDEF (with Kotlin)
 
Basics of Web Technologies
Basics of Web TechnologiesBasics of Web Technologies
Basics of Web Technologies
 
Bluetooth Beacons - Bluetooth 5, iBeacon, Eddystone, Arduino, Windows 10 & More
Bluetooth Beacons - Bluetooth 5, iBeacon, Eddystone, Arduino, Windows 10 & MoreBluetooth Beacons - Bluetooth 5, iBeacon, Eddystone, Arduino, Windows 10 & More
Bluetooth Beacons - Bluetooth 5, iBeacon, Eddystone, Arduino, Windows 10 & More
 
Which new scenarios are enabled by Windows 10 for NFC, Bluetooth LE & Beacons?
Which new scenarios are enabled by Windows 10 for NFC, Bluetooth LE & Beacons?Which new scenarios are enabled by Windows 10 for NFC, Bluetooth LE & Beacons?
Which new scenarios are enabled by Windows 10 for NFC, Bluetooth LE & Beacons?
 
Mobile Test Automation
Mobile Test AutomationMobile Test Automation
Mobile Test Automation
 
Nokia New Asha Platform Developer Training
Nokia New Asha Platform Developer TrainingNokia New Asha Platform Developer Training
Nokia New Asha Platform Developer Training
 
Windows Phone 8 NFC Quickstart
Windows Phone 8 NFC QuickstartWindows Phone 8 NFC Quickstart
Windows Phone 8 NFC Quickstart
 
Windows (Phone) 8 NFC App Scenarios
Windows (Phone) 8 NFC App ScenariosWindows (Phone) 8 NFC App Scenarios
Windows (Phone) 8 NFC App Scenarios
 
Windows 8 Platform NFC Development
Windows 8 Platform NFC DevelopmentWindows 8 Platform NFC Development
Windows 8 Platform NFC Development
 
NFC Development with Qt - v2.2.0 (5. November 2012)
NFC Development with Qt - v2.2.0 (5. November 2012)NFC Development with Qt - v2.2.0 (5. November 2012)
NFC Development with Qt - v2.2.0 (5. November 2012)
 
06 - Qt Communication
06 - Qt Communication06 - Qt Communication
06 - Qt Communication
 
05 - Qt External Interaction and Graphics
05 - Qt External Interaction and Graphics05 - Qt External Interaction and Graphics
05 - Qt External Interaction and Graphics
 
04 - Qt Data
04 - Qt Data04 - Qt Data
04 - Qt Data
 
03 - Qt UI Development
03 - Qt UI Development03 - Qt UI Development
03 - Qt UI Development
 
02 - Basics of Qt
02 - Basics of Qt02 - Basics of Qt
02 - Basics of Qt
 

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

  • 1. WinJS, Apache Cordova & NFC HTML5 apps for Android and Windows Phone WinJS, Apache Cordova & NFC - Andreas Jakl, 21.10.2014 1
  • 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. 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. OVERVIEW Runtimes, tools and libraries WinJS, Apache Cordova & NFC - Andreas Jakl, 21.10.2014 4
  • 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. 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. 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. 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. 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. WinJS Online Editor try.buildwinjs.com WinJS, Apache Cordova & NFC - Andreas Jakl, 21.10.2014 10
  • 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. 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. 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. 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. PROJECT SETUP Multi-Device Hybrid App with Cordova & WinJS WinJS, Apache Cordova & NFC - Andreas Jakl, 21.10.2014 15
  • 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. 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. 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. Visual Studio Solution WinJS, Apache Cordova & NFC - Andreas Jakl, 21.10.2014 19
  • 20. Adding WinJS 3 to Project 1. Drag & drop compiled WinJS to project WinJS, Apache Cordova & NFC - Andreas Jakl, 21.10.2014 20
  • 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. 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. ///<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. 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. 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. WINJS Working with WinJS, Apache Cordova & NFC - Andreas Jakl, 21.10.2014 26
  • 27. WinJS UI: Screen layouts Hub Pivot WinJS, Apache Cordova & NFC - Andreas Jakl, 21.10.2014 27
  • 28. WinJS UI: Views FlipView ListView WinJS, Apache Cordova & NFC - Andreas Jakl, 21.10.2014 28
  • 29. WinJS UI: Chrome AppBar NavBar Flyout Menu WinJS, Apache Cordova & NFC - Andreas Jakl, 21.10.2014 29
  • 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. 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. 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. 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. 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. 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. CORDOVA Going Multi-Platform WinJS, Apache Cordova & NFC - Andreas Jakl, 21.10.2014 37
  • 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. 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. 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. 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. 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. Hybrid Project WinJS, Apache Cordova & NFC - Andreas Jakl, 21.10.2014 43
  • 44. Runtime HTML Analyze with VS Debugger (Android) WinJS, Apache Cordova & NFC - Andreas Jakl, 21.10.2014 44
  • 45. NFC Near Field Communication WinJS, Apache Cordova & NFC - Andreas Jakl, 21.10.2014 45
  • 46. Near Field Communication? < 1 cm (tap) WinJS, Apache Cordova & NFC - Andreas Jakl, 21.10.2014 46
  • 47. Near Field Communication? < 424 kbit / s WinJS, Apache Cordova & NFC - Andreas Jakl, 21.10.2014 47
  • 48. Near Field Communication? WinJS, Apache Cordova & NFC - Andreas Jakl, 21.10.2014 48
  • 49. NFC Tags Tag memory size: 48 byte – few kB WinJS, Apache Cordova & NFC - Andreas Jakl, 21.10.2014 49
  • 50. NFC & CORDOVA & WINJS Bringing it all together … WinJS, Apache Cordova & NFC - Andreas Jakl, 21.10.2014 50
  • 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. Full Demo App mopius.github.io/ndef-nfc WinJS, Apache Cordova & NFC - Andreas Jakl, 21.10.2014 62
  • 63. SUMMARY WinJS, Apache Cordova & NFC - Andreas Jakl, 21.10.2014 63
  • 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. 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. 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. Thank You. Andreas Jakl @andijakl @mopius mopius.com WinJS, Apache Cordova & NFC - Andreas Jakl, 21.10.2014 67