Talk at Fluent 2013, San Francisco about Google Glass development today, Glassware and the Mirror API

1. max(imiliano) (@firt)man
GEARING UP
WITH GOOGLE GLASS
DEVELOPMENT
San Francisco, May 30th, 2013
¡-­‐)
Thursday, May 30, 13

2. Thursday, May 30, 13

3. we’ll talk about glass
1- Experience
2- Glassware
3- Timeline
4- Code!
5- What's next
Thursday, May 30, 13

4. 1- glass experience
Thursday, May 30, 13

5. quick video( )
Thursday, May 30, 13

6. Thursday, May 30, 13

7. Thursday, May 30, 13

8. Your content is
not so important
Thursday, May 30, 13

9. specs
nHD transparent
640x360
25" - 2.5m / 8  away
Thursday, May 30, 13

10. specs
Sensors
Thursday, May 30, 13

11. specs
Camera
Thursday, May 30, 13

12. specs
Multi-touch panel
Thursday, May 30, 13

13. specs
Android 4.0
Thursday, May 30, 13

14. specs
bone conduction
transducer
Thursday, May 30, 13

15. specs
wifi
bluetooth
Thursday, May 30, 13

16. quick demo( )
Thursday, May 30, 13

17. the experience
- different device
- not just transparent
mobile apps
- no web browsing
- limited AR
Thursday, May 30, 13

18. 2- glassware
Thursday, May 30, 13

19. native
vs
web
Thursday, May 30, 13

20. today
vs
tomorrow
Thursday, May 30, 13

21. today =
cloud
Thursday, May 30, 13

22. today =
cloud Mirror API
Thursday, May 30, 13

23. tomorrow =
native
vs
cloud
Thursday, May 30, 13

24. tomorrow =
native GDK
vs
cloud Mirror API
Thursday, May 30, 13

25. quick demo( )
Thursday, May 30, 13

26. Thursday, May 30, 13

27. Thursday, May 30, 13

28. https
Thursday, May 30, 13

29. httpscontent
Thursday, May 30, 13

30. httpscontent
actions
Thursday, May 30, 13

31. https
http(s)
content
actions
Thursday, May 30, 13

32. glassware
Thursday, May 30, 13

33. glassware
Thursday, May 30, 13

34. glassware
- today vs tomorrow
- Mirror API
- GDK
- create a new architecture
Thursday, May 30, 13

35. 3- timeline
Thursday, May 30, 13

36. timeline
past, now, future
Thursday, May 30, 13

37. quick demo( )
Thursday, May 30, 13

38. timeline
timeline items = card
bundles
Thursday, May 30, 13

39. timeline
card
Thursday, May 30, 13

40. timeline
standard card
pinned card
system card past
past
future
Thursday, May 30, 13

41. httpscontent
Thursday, May 30, 13

42. it's probable that the
user will never see our
card
(
)
Thursday, May 30, 13

43. timeline
card 101
no scrolling
big fonts
quick reading
Thursday, May 30, 13

44. timeline
types of card
Thursday, May 30, 13

45. timeline
types of card text
Thursday, May 30, 13

46. timeline
types of card image
video
Thursday, May 30, 13

47. timeline
types of card html
Thursday, May 30, 13

48. timeline
card actions = menu items
Thursday, May 30, 13

49. timeline
menu items 101
1 or 2 words & icon
no arguments
system vs custom
Thursday, May 30, 13

50. How can I listen to
actions?
Thursday, May 30, 13

51. http(s)actions
Thursday, May 30, 13

52. How to reply?
Thursday, May 30, 13

53. httpscontent
Thursday, May 30, 13

54. timeline
geolocation updates
Thursday, May 30, 13

55. timeline
- it's really a timeline
- card is the king
- menu items <> endpoint
- geolocation
Thursday, May 30, 13

56. 4- code!
Thursday, May 30, 13

57. code!
Mirror API
OAuth 2.0
RESTful services
JSON
Thursday, May 30, 13

58. code!
Use HTTP
Use official API
Thursday, May 30, 13

59. new card
POST /mirror/v1/timeline HTTP/1.1
Host: www.googleapis.com
Authorization: Bearer {auth token}
Content-Type: application/json
Content-Length: 26
{ "text": "Hello world" }
HTTP
code!
Thursday, May 30, 13

60. new card
$card = new Google_TimelineItem();
$card->setText("Hello World");
$parameters = array();
$service->timeline
->insert($card, $parameters);
PHP
code!
Thursday, May 30, 13

61. new card
{
"kind": "glass#timelineItem",
"id": "1234567890",
"created": "2012-09-25",
"updated": "2012-09-25",
"text": "Hello world"
}
(just an example)
code!
Thursday, May 30, 13

62. attachments
POST /mirror/v1/timeline HTTP/1.1
Content-Type: multipart/related;
boundary="mymultipartboundary"
--mymultipartboundary
Content-Type: application/json; charset=UTF-8
{ "text": "Hello World" }
--mymultipartboundary
Content-Type: image/jpeg
Content-Transfer-Encoding: binary
[binary image data]
--mymultipartboundary--
HTTP
code!
Thursday, May 30, 13

63. html!
{
"html": "<h1>Hello world<h1>
<p>Sorry, no marquee support</p>
"
}
JSON
code!
Thursday, May 30, 13

64. code!
static content
all html5 semantic containers
tables, lists
custom css
no <script> <link> <iframe>
html5 support
Thursday, May 30, 13

65. map images
{
"html": "<h1>Your wife's location<h1>
<img src='glass://map?
w=240&h=360&marker=0;42.369590,-71.107132&m
arker=1;42.36254,-71.08726 height=360
width=240>"
}
JSON
code!
Thursday, May 30, 13

66. menu items
{ "text": "Hello world",
"menuItems": [
{
"action": "REPLY"
}
]
}
JSON
code!
Thursday, May 30, 13

67. code!
built-in menu items
Thursday, May 30, 13

68. code!
built-in menu items
share
Thursday, May 30, 13

69. code!
built-in menu items
share
navigate to
Thursday, May 30, 13

70. code!
built-in menu items
share
navigate to
read aloud
Thursday, May 30, 13

71. code!
built-in menu items
share
navigate to
read aloud
delete
Thursday, May 30, 13

72. code!
built-in menu items
share
navigate to
read aloud
delete
voice call
Thursday, May 30, 13

73. code!
built-in menu items
share
navigate to
read aloud
delete
voice call
reply
Thursday, May 30, 13

74. code!
built-in menu items
share
navigate to
read aloud
delete
voice call
reply
toggle pin
Thursday, May 30, 13

75. code!
built-in menu items
share
navigate to
read aloud
delete
voice call
reply
toggle pin
YOU CAN CHANGE TITLE AND ICON
Thursday, May 30, 13

76. code!custom actions
{ "text": "Hello world",
"menuItems": [
{
"action": "CUSTOM",
"id": "mycustomid",
"values": { "displayName": "Add $5",
"iconUrl": "http://..." }
}
]
}
JSON
Thursday, May 30, 13

77. http(s)actions
Thursday, May 30, 13

78. code!
bundles
One card with multiple pages in html
Different cards using same bundleId
Thursday, May 30, 13

79. code!
other stuff
Share Contacts
Locations
Thursday, May 30, 13

80. code!
I don't have a Glass!!!
Thursday, May 30, 13

81. code!
I don't have a Glass!!!
Don't steal one
Thursday, May 30, 13

82. code!
I don't have a Glass!!!
Don't steal one
Thursday, May 30, 13

83. code!
I don't have a Glass!!!
Playground (official)
Thursday, May 30, 13

84. code!
I don't have a Glass!!!
Xenologer for Android
Mirror API Emulator by Scarygami
Thursday, May 30, 13

85. code!
I don't have a Glass!!!
At the end, you will need one
google.com/glass
Thursday, May 30, 13

86. code!
- mirror API: simple HTTP & JSON
- cards, menu items
- we can be targets for sharing
- we can query user's location
- emulation
Thursday, May 30, 13

87. 5- what's next
Thursday, May 30, 13

88. what's next
- GDK for offline and native development
- Localization
- Video streaming (announced)
- Animations
- More built-in menu items
For Glass
Thursday, May 30, 13

89. what's next
- developers.google.com/glass
- youtube.com/user/GoogleDevelopers
For You
Thursday, May 30, 13

90. wrapping up
Thursday, May 30, 13

91. glass
- understand the experience
- mirror api vs gdk
- REST, JSON, cloud-based
- it's just the beginning
Thursday, May 30, 13

92. Thursday, May 30, 13

93. you can reach a good
experience
Pictures)from)freedigitalphotos.net)
thank you!
firtman@gmail.com
@firt
firt.mobi/pmw
¡-­‐)
Thursday, May 30, 13