gearing up google glass development - august 2013

max(imiliano) (@firt)man

GEARING UP

WITH GOOGLE GLASS

DEVELOPMENT

Zürich, Aug 29th, 2013

¡-‐)Thursday, August 29, 13

http://qconlondon.com/london-2012/presentation/Mobile,%20HTML5%20and%20the%20cross-platform%20promise
















mobile+web developer

maximiliano @firt

Thursday, August 29, 13

we’ll talk about glass

1- Experience2- Glassware3- Timeline 4- Browser5- Code!


questions

yes, please

At the end or during the conference


DISCLAIMER


HOLES


1- glass experience


quick video( )


MYTHS


Noti!cations on your head


Your content is not so important


specs

nHD transparent 640x36025" - 2.5m / 8 away


specs

Sensors


specs

Camera


specs

Multi-touch panel


specs

wi!bluetooth


specs

Android 4.0


specs

bone conductiontransducer


quick demo( )


the experience

- different device- not transparent apps - limited AR


2- glassware


nativevs

web


today =cloud


today =cloud

Mirror API


tomorrow =native

vscloud


tomorrow =native GDK

vscloud Mirror API


quick demo( )


https


httpscontent


httpscontent

actions


https

http(s)

content

actions


glassware


glassware

- today vs tomorrow- Mirror API- GDK- create a new architecture


3- timeline


timeline

past, now, future


quick demo( )


timeline

timeline items = card


timeline

card


timeline

standard cardpinned card

system card pastpastfuture


httpscontent


it's probable that the user will never see ourcard

(

)


timeline

content type


timeline

textcontent type


timeline

imagevideo

content type


timeline

htmlcontent type


timeline

card actions = menu items


timeline

menu items 1011 or 2 words & iconno argumentssystem vs custom


How can I listen to actions?


http(s)actions


How to reply?


httpscontent


timeline

contextual eventsgeolocation


timeline

contextual eventsgeolocationshare


timeline

contextual eventsgeolocationsharelaunch "ok glass" menu


http(s)actions


timeline

Invocation voice commands

take a notepost an update


timeline

- card is the king- menu items <> endpoint- contextual events - server-side intelligence


4- the browser


browser

invocationgoogle searchcard's action


quick demo( )


browser

interactionscrollpoint and click


browser

responsive web designmobile user agentwidth: 427pxpixel ratio: 1.5


browser

html5video, audiodevicemotionscroll and touch eventsno geo, speech, camera yet


browser

- better than it looks like- experimental- new ideas will come- card + html5


5- code!


code!

Mirror APIOAuth 2.0RESTful servicesJSON


code!

1- Use HTTP2- Use official APIs


new cardPOST /mirror/v1/timeline HTTP/1.1Host: www.googleapis.comAuthorization: Bearer {auth token}Content-Type: application/jsonContent-Length: 26

{ "text": "Hello world" }

HTTP

code!


new card$card = new Google_TimelineItem();$card->setText("Hello World");

$parameters = array();$service->timeline ->insert($card, $parameters);

PHP

code!


new card{ "kind": "glass#timelineItem", "id": "1234567890", "created": "2012-09-25", "updated": "2012-09-25", "text": "Hello world"}

(just an example)

code!


html!

{ "html": "<h1>Hello world<h1> <p>Sorry, no marquee support</p> " }

JSON

code!


code!

static contentall semantic containerstables, listscustom cssno <script> <link> <iframe>

html5 on cards


map images{ "html": "<h1>Your wife's location<h1> <img src='glass://map?w=240&h=360&marker=0;42.369590,-71.107132&marker=1;42.36254,-71.08726 height=360 width=240>"

}

JSON

code!


menu items{ "text": "Hello world", "menuItems": [ { "action": "REPLY" } ] }

JSON

code!


code!

built-in menu items


code!

built-in menu itemsshare


code!

built-in menu itemssharenavigate to


code!

built-in menu itemssharenavigate toread aloud


code!

built-in menu itemssharenavigate toread alouddelete


code!


voice call


code!


voice callreply


code!


voice callreplytoggle pin


code!


voice callreplytoggle pinview website


voice callreplytoggle pinview website

code!

built-in menu itemssharenavigate toread alouddeleteYOU CAN CHANGE TITLE AND ICON


code!

bundlesMulti-page card Different cards over time


I don't have a Glass!!!



Don't steal one



Playground (official)


I don't have a Glass!!!Glasssim.com



Xenologer for AndroidMirror API Emulator by Scarygami



At the end, you will need onegoogle.com/glass


code!

- mirror API: HTTP & JSON- cards, menu items- experimental emulation


6- what's next


what's next

- GDK - Localization- More Invocation Voice commands

For Glass


what's next

- developers.google.com/glass- youtube.com/user/GoogleDevelopers

For You


wrapping up


glass

- understand the experience- mirror api vs gdk vs browser- Glassware cloud-based- it's just the beginning


you can reach a good experience

Pictures)from)freedigitalphotos.net)

Thanks!

[email protected]@!rt

!rt.mobi/pmw

¡-‐)Ask me for 50% off


mailto:[email protected]

mailto:[email protected]