Make your apps come alive with live audio/video conversations using the Hangouts Platform API. Using the Google+ Hangouts API, you can develop collaborative apps that run inside of a Google+ Hangout.

1. Developers

2. The Next Generation of Social
Is in a Hangout
Jonathan Beri Amit Fulay
Developer Advocate Product Manager
#io12

3. Jonathan Beri
Developer Advocate, Google+
jonathanberi.com/+

4. Today’s Agenda
• The Hangouts Story
• Demos
• Code-Slingin’
4

5. Amit Fulay
Product Manager, Google+
http://goo.gl/HlOaO

6. The Hangouts Story

7. The Hangouts Story
+
Social Real Time
7

8. YouTube
8

9. Google Docs
9

10. Launched Google+ Hangouts Platform

11. Activities

12. Aces Poker
12

13. Scoot & Doodle
13

14. Enhance Live Conversations

15. Mustache
15

16. Effects
16

17. Cheer On
17

18. Bring Hangouts to Your Apps

19. SlideShare
19

20. Cacoo
20

21. Symphonical
Text
21

22. Google+ Hangouts Platform
1.Build Activities inside hangouts
2.Build enhancements for live conversations
3.Bring Google+ Hangouts to your app
22

23. Demos

24. Hangouts are a New Opportunity
Hangout Apps are Something You Should be Building Today

25. What Can You Do?
Scenarios You Can Build into a Hangout App

26. Show Who is Playing
26

27. Watch While Someone Draws
27

28. Use Your Face as a Controller
28

29. Building Blocks of a Hangout App
How You Can Integrate the Power of Hangouts

30. JavaScript + Hangout Features
Your HTML/JavaScript hangout.js
30

31. App.xml: Pure Web with a Sprinkle of XML
XML
<?xml version=“1.0” encoding=“UTF-8” ?>
<Module>
<ModulePrefs title=“Your App Name”>
<Require feature=“rpc” />
<Require feature=“views” />
</ModulePrefs>
<Content type=“html”>
<!CDATA[
<script src=“//talkgadget.google.com/hangouts/_/api/hangout.js?v=1.1”></script>
<!-- Your application code -->
]]>
</Content>
</Module>
31

32. App.xml: Pure Web with a Sprinkle of XML
XML
<?xml version=“1.0” encoding=“UTF-8” ?>
<Module>
<ModulePrefs title=“Your App Name”>
<Require feature=“rpc” />
<Require feature=“views” />
</ModulePrefs>
<Content type=“html”>
<!CDATA[
<script src=“//talkgadget.google.com/hangouts/_/api/hangout.js?v=1.1”></script>
<!-- Your application code -->
]]>
</Content>
</Module>
32

33. Anything you can do in an iFrame, you
can do in a Hangout
but you can do so much more...

34. JavaScript + Hangout Features
Your HTML/JavaScript hangout.js
34

35. hangout.js
• Including hangout.js gives you access to many hangout features, including:
- Participants
- Data Channels
- A/V
- Effects
- Metadata
JavaScript
<script src="//talkgadget.google.com/hangouts/_/api/hangout.js?v=1.1"></script>
35

36. Code-Slingin’ Time
Let’s Build a Hangout App

37. Guess the pastry
37

38. What We’d Like
• Show who’s playing
- List current participants
• Track whose voted
- Record votes “somewhere”
• Congratulate the winners
- Web badge of honor
38

39. There’s a Lot More Possible
Code Lab: http://goo.gl/Ezt0v
39

40. Insights to be Successful
Design & UX Best Practices for Building Hangout Apps

41. Put People First
Identify Who is Playing with Profile Pictures and Overlays
41

42. Social is About Being Together
Make everything collaborative and synchronous
42

43. Users Will Join When You Least Expect Them
There are tons Participant callbacks - use them liberally!
43

44. Playing Alongside Friends Can be Fun Too
Think about different ways you can group users
44

45. React Immediately, Respond in Real-Time
Use the Data Channels to keep your App in sync
45

46. We are at the Cusp
46

47. Next Steps
• Get Started with Hangout Apps
- http://developers.google.com/+/hangouts
• Promote Your App
- https://developers.google.com/+/hangouts/button
• Attend the Hangouts Fireside Chat
- https://developers.google.com/events/io/sessions/gooio2012/809/
47

48. Credits
• Slides
- 12: http://aceshangout.com/
- 13: http://scootdoodle.com/
- 19: http://www.slideshare.net/
- 20: https://cacoo.com/
- 21: https://www.symphonical.com/
- 24: http://tabletopforge.com/
- 28: http://www.experimentsplus.com/details/donut-horns
- 29: http://flic.kr/p/8syc8C
- 37: http://flic.kr/p/9QwfyD
48

49. Credits
• Live coding
- Pastry: http://flic.kr/p/9QwfyD
- Nyan Cat: http://nyan.cat
• Slides
- 40: http://flic.kr/p/9m9Nty
- 41: http://goo.gl/qFQRP
- 42: http://flic.kr/p/bAoSsK
- 43: http://flic.kr/p/7qHfdt
- 44: http://flic.kr/p/5jrwbw
- 45: http://flic.kr/p/52D411
49

50. <Questions?>
https://developers.google.com/+/hangouts/
Jonathan Beri Amit Fulay #io12
jonathanberi.com/+ http://goo.gl/HlOaO

51. Developers