Building HTML5 apps with native capabilitiesJorge del Casar – @jorgecasar

February 29, 2013

HTML5 is good for developers

Community momentum

What can you do with HTML5?

Geolocation Web Sockets Offline storage Audio / Video Notifications WebGL … and more

Slacker

ScoreMobile Tablet

5

HTML5Test.com

http://html5test.com/compare/browser/bb07/rimtabletos20/bb10.html

BlackBerry WebWorks

“A cross-platform HTML5 application framework for creating standalone BlackBerry applications “

Real Examples in App World

News360The Economist

Huffington Post Pesktop Canada’s Got Talent

HockeyCentral

HTML5 powered by WebWorks

HTML5, CSS3, JavaScript

WebKit engine

WebWorks platform

BlackBerry Developer APIs

https://developer.blackberry.com/html5/api

Web Assets WebWorks Tools BlackBerry Applications

How to get there?

Connect HTML5 with native device capabilitiesSoftware & hardware & data … oh my!

10

Storage

HTML5 localStorage Name-value pairs

HTML5 Web DB Structured relational database

localStorage.clear(); localStorage.setItem("Greeting", "Hello World");

key = localStorage.key(0); // "Greeting" item = localStorage.getItem(key); // "Hello World"

var size = 2 * 1024 * 1024; db = window.openDatabase("WebDB", "1.0", "Example", size, onInit);

HTML5 File System

Read/Write native file-system Able to un-sandbox when wrapped in WebWorks

function gotFile(fileEntry) { fileEntry.createWriter(gotWriter, errorHandler);}function gotFs(fs) { fs.root.getFile(blackberry.io.sharedFolder + "/downloads/blackberry.jpg", {create: true}, gotFile, errorHandler);}...

blackberry.io.sandbox = false;window.webkitRequestFileSystem(PERSISTENT, 10 * 1024, gotFs, errorHandler);}

Touch

Define custom touch event handlers Up to 4-finger touch events supported See “Sample Code – SketchPad Application” http://bit.ly/hz67JX

document.ontouchstart = function(event) {

//Tell browser engine not to scroll/span/zoom // when user touches screen: event.preventDefault();

var touch = event.changedTouches[0]; alert(touch.pageX + "," + touch.pageY);

}Pong-port sample

http://spaceport.io

Accelerometer, Magnetometer

HTML5 Device motion, Orientation Respond to physical user input

window.addEventListener("devicemotion", function(event) {

var x = event.accelerationIncludingGravity.x; var y = event.accelerationIncludingGravity.y; var z = event.accelerationIncludingGravity.z;

// Facing up from the Earth’s surface is: // { x : 0, y : 0, z : 9.81 }

}, true);

Aura sample app

GPS

HTML5 Geolocation Retrieve users’ GPS coordinates Provide location-aware content

function onSuccess(position) {

console.log("lat = " + pos.coords.latitude); console.log("lon = " + pos.coords.longitude);

}

var ops = { enableHighAccuracy : true };

navigator.geolocation.getCurrentPosition( onSuccess, onError, ops);

Web Notification

HTML5 API for generating system messages Proactively notify users about application events

Separate Notification() with app-likeexperience, BlackBerry Hub

var icon = "http://testuri.com/icon.png";var title = "Web Notification";var msg = "Sent from the Kitchen Sink app.";

var notification = webkitNotifications.createNotification(icon, title, msg);

notification.show();

HTML5: Media Capture

Capture Picture/Video Leverages System Camera app <input type="file" accept="image/*" capture="camera">

HTML5 API: Sockets

Real-time communication using persistent connections Frameworks: Socket.io, Pusher.js E.g. Twitter Requires server component

var url = "ws://my.url.com:8001";var socket = new WebSocket(url);

socket.onmessage = function(e) { displayMessage(e.data); }

wordsquared.com

HTML5 API: WebGL

3D graphics powered by OpenGL ES Frameworks: three.js, CopperLicht, SceneJS, GLGE GPU provides hardware acceleration

Tunnel Tilt game Free download in App World Source code in Github

https://github.com/blackberry/WebGL-Samples

BlackBerry 10

WebWorks reborn

20

WebWorks APIs

JavaScript wrappers for OS developer APIs http://developer.blackberry.com/html5/api Identity, Invoke, System…

Learning resources http://github.com/blackberry/WebWorks-Samples See “kitchen sink” sample application for demos

BlackBerry 10 WebWorks SDK

JavaScript framework, backed by Native C/C++ No longer Java J2ME or Adobe AIR

JavaScript packager Running in Node.js

API evolution W3C/Cordova alignment Build plan for future move

Chrome extension Multi-platform support

BlackBerry 10, Tablet OS and BlackBerry OS

Build and sign BlackBerry apps

BlackBerry 10 and Ripple

2 x

Ripple mobile emulator

Development tool for web developers Preview, test and build BlackBerry web applications Emulate device-specific APIs and capabilities

Remote Web Inspector

What is it? Debug web content running on a remote device. Profile to optimize web page performance. Works with simulators or live devices

BlackBerry 10 WebWorks APIs

blackberry.app

blackberry.event

blackberry.system

blackberry.identity

C/C++JavaScript

BlackBerry 10 WebWorks

<script type="text/javascript" src="webworks.js"></script>

function onLoad() {

document.addEventListener("webworksready", start);

}

Config.xml

<?xml version="1.0" encoding="UTF-8"?><widget xmlns="http://www.w3.org/ns/widgets" xmlns:rim="http://www.blackberry.com/ns/widgets" version="1.0.0.100" id="webworkspim" xml:lang="en">

<name>PIM Contacts</name> <author>Research In Motion</author> <content src="index.html"/> <icon src="appicon.png" />

<feature id="blackberry.pim.contacts" />

Some recent API additions

Invoke Invoke other apps, card Be invoked

PIM Contacts Calendar, Messages on their way

BBM Update profile, invite to download

Custom Extensions

Building your own WebWorks APIs

30

Custom WebWorks APIs

Build your own APIs Access native layer functionality Go beyond HTML5 and core WebWorks

JavaScript interface for platform code BlackBerry OS = Java Tablet OS = AIR BlackBerry 10 = C/C++

LensboostMblware Ltd

Custom WebWorks APIs

WebWorks SDK for BlackBerry 10 Platforms = BlackBerry 10 Native language = C/C++

javascript

client.js index.js manifest.json

native

jnext.cpp jnext.hpp

Custom WebWorks APIs

Open Source http://github.com/blackberry/WebWorks-Community-APIs Get started using TEMPLATE sample in Github

Resources

Places to go, people to see, what’s coming next

34

WebWorks Roadmap

Frequent releases Incremental APIs, emulation

http://developer.blackberry.com/downloads/roadmap

For more information

http://developer.blackberry.com/html5

THANK YOU

Jorge del Casar - @jorgecasar

February 29, 2013