Human APIs

Human APIsexpanding the mobile web

RiaWorld 2010

Nikolai Onkenuxebu

Wednesday, November 17, 2010


@nonken



We open the mobile web.



JavaScript AJAX

CSS

dojoBrowser

OpenSourceWeb2.0

FrontEnd

Usability UserExperience

mobile

TouchScroll


The Plan

• A little bit of history

• Lets build a mobile app


http://news.bbc.co.uk/2/hi/technology/8552410.stm

Remember Risk?





Remember Risk?




Dec, 20091,802 millions

26.6 %


The mobile web

Jan. 2008 Mar. 20100

5000000000

10000000000

15000000000

20000000000

AdMob Requests


The mobile web

Jan. 2008 Mar. 20100

5000000000

10000000000

15000000000

20000000000

AdMob Requests


The mobile web

Jan. 2008 Mar. 20100

5000000000

10000000000

15000000000

20000000000

AdMob Requests


The reality

• Internet is growing (fast)

•Mobile is growing (fast)

•Mobile internet is growing (fast!)


The browser is the central piece


The browser is the interface to the

internet


71% of all modern phones have a

browser

Tomi Ahonen


IPv6

2128


There will be a lot of things we should talk to :)

(using a browser)



Is JavaScript good enough?


Flash with JavaScript?


http://github.com/tobeytailor/gordon




HTML5 Appsor web apps as we know them




New HTML Elements


<input type="speech" grammar="grammar-nav-en.grxml" onchange="handleSpeechInput">

http://bit.ly/audio-api




High performance graphics

WebGL




Media




What more do we need?


JavaScript HTTP


JavaScript HTTP

Accelerometer

Camera

...Wednesday, November 17, 2010

JavaScript HTTP

Accelerometer

Camera

...

Bluetooth

RFID


JavaScript

CSS

HTML

HTTP

Accelerometer

Camera

...

Bluetooth

RFID


JavaScript

CSS

HTML

HTTP

Accelerometer

Camera

...

Bluetooth

RFID


The Hype


o

The Hype


oThe cloud

The Hype


oThe cloud Location, etc.

The Hype



The Potential



Hardware

The Potential


Use cases


Transportation




Home automation


http://digitalstrom.org




http://home-pad.com


http://home-pad.com

http://home-pad.com

Health


3311 Health/Fitness Apps in Apple app store


HumanAPI


HumanAPI


How can we do this?


Mobile SDKs


Mobile SDKs

Objective-C


Mobile SDKs

Objective-C Java


Mobile SDKs

Objective-C Java ...


How the magic happens


Low level APIs

Camera Accelerometer Push Notifications



Low level APIs


Chromeless Browser



Low level APIs


Chromeless Browser


browserInstance.eval(“alert(1);”)


PhoneGap


Low level APIs

Camera Accelerometer Push Notifications...

Chromeless Browser

PhoneGap

browser.eval(“document.geolocation...”)

Android, iPhone, iPad, Nokia S60, BlackberryWednesday, November 17, 2010

Low level APIs

Camera Accelerometer Push Notifications...

Chromeless Browser

PhoneGap

browser.eval(“document.geolocation...”)

Android, iPhone, iPad, Nokia S60, BlackberryWednesday, November 17, 2010

mAppView.loadUrl("javascript:navigator.compass.setHeading(" + heading + ")");

Android


jsCallBack = [[NSString alloc] initWithFormat:@"navigator. accelerometer._onAccelUpdate(%f,%f,%f);", acceleration.x, acceleration.y, acceleration.z];

[webView stringByEvaluatingJavaScriptFromString:jsCallBack];

iPhone/iPad


Lowlevel APIs

The browser

For things you can’t do in the browser (yet)

For anything else :)


Enough talking, lets see some hardware


ArduinoJS


ArduinoJS Stack

• Arduino (http://arduino.cc/)

• Node-Serial (Chris Williams)

• Node

• Websockets (Socket.io)

http://github.com/nonken/arduinojs


http://arduino.cc/

http://arduino.cc/



Node

ArduinoJS

Websockets

Arduino

Browser

Serial connection

Light Motors Robots

One

API

to

rule

the

m a

ll


Node

ArduinoJS

Websockets

Arduino

Browser

Serial connection

Light Motors Robots

One

API

to

rule

the

m a

ll


available APIs

• digitalWrite(pin, val)

• digitalRead(pin, val)

• analogWrite(pin, val)

• analogRead(pin, val)





Try it out

• 10.0.2.1:8888



Only the beginning


Serverside JS


http://groups.google.com/group/nodejs/browse_thread/thread/ee11c077e5f89f7a?hl=en

$(".living-room").delegate(".motion-sensor", "onmotion", function(){ $(".living-room .lights").css("intensity", 0.75) });

Your house == DOM




Raphaël can do this!


Getting started

•ArduinoJS - http://github.com/nonken/arduinojs

•PhoneGap - http://phonegap.com

•http://blog.uxebu.com

•http://www.humanapi.org




http://phonegap.com

http://phonegap.com

http://blog.uxebu.com

http://blog.uxebu.com

http://www.humanapi.org

http://www.humanapi.org

Thank you

@nonken


Technology

Human APIs