I talk I gave with Chris Chabot and Daniel "Wolff" Dobson on Google+ Hangout Apps at 500 Startups.

1. the Google+ project
for developers

2. +Chris Chabot
Google+ DevRel
http://profiles.google.com/chabotc

3. Google+ and the +1 button
Putting +You at
the center of Google Advocate
Timothy Jordan, Developer

4. Google+

5. Circles
Share what matters, with
the people who matter
most.

6. Photos

7. Search & Sparks

8. Games

9. Google+ platform

10. developers.google.com/+

11. Google+ platform
OAuth2, JSON, RESTful
GET https://www.googleapis.com/plus/v1/people/108189587050871927619
{
"kind": "plus#person",
"id": "108189587050871927619",
"displayName": "Chris Chabot",
"image": {
"url": "https://...../photo.jpg"
},
"organizations": [
{
"name": "Google+ Developer Relations",
"title": "Developer Advocate & Manager",
"type": "work"
}
]
}

12. Google+ platform
OAuth2, JSON, RESTful
GET https://www.googleapis.com/plus/v1/people/108189587050871927619/
activities/public?key=yourAPIKey
{
"kind": "plus#activity",
"title": "Plus Public Activity Feed for Chris Chabot",
"displayName": "Chris Chabot",
"items": [
{
"actor": {
.....
},
"verb": "share",
"object": {
"objectType": "activity",
...
}
}

13. Google+ platform
Java
GET https://www.googleapis.com/plus/v1/people/me
Person mePerson = plus.people.get("me").execute();
System.out.println("ID:t" + mePerson.getId());
System.out.println("Display Name:t" + mePerson.getDisplayName());
System.out.println("Image URL:t" + mePerson.getImage().getUrl());
System.out.println("Profile URL:t" + mePerson.getUrl());

14. Google+ platform
PHP
GET https://www.googleapis.com/plus/v1/people/me
$me = $plus->people->get('me');
print "Display Name: {$me['displayName']}n";
print "URL: {$me['url']}n";
print "Profile Image: {$me['image']['url']}n";

15. Hangouts

16. Hangouts

17. Hangouts

18. Hangouts APIs

19. +Jonathan Beri
Google+ DevRel
http://beriberikix.com/+

20. Hangouts
Bringing your Apps to the face-to-face-to-face experience

21. We hangout every day

22. Bringing Hangouts to
the Web

23. Seamless & natural

24. Seamless & natural

25. Seamless & natural

26. Seamless & natural

27. Seamless & natural

28. Seamless & natural

29. Apps for unique
experiences

30. Categories for
inspiration
• Education
• Medicine
• Games
• Productivity
• Sciences
• Architecture
• Music and Entertainment

31. What are Hangout
Apps?
• Web-based software components based on
HTML, CSS, and JavaScript.
• Defined using a declarative XML syntax
• A set of APIs for accessing and working
with Hangout features and synchronized
data

32. Inside a Hangout App
Hi, I’m Wolff, a Developer Programs Engineer

33. What is a Hangout
App?
• Hangout Apps are Gadgets
• Rehosted on our gadget server
• https://example.com/gadgetspec.xml

34. Sample App
<?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="//hangoutsapi.appspot.com/
static/hangout.js"></script>
<!-- Your application code -->
]]>
</Content>
</Module>

35. Google API Console
• During Developer Preview:
• Go to code.google.com’s API Console
• Create a project, turn on Hangouts API
• Choose hangouts, and give URL to your
spec xml

36. Shown here, actual size

38. Starting your hangout
• Can start from that page
• Also, your GID is good too:
• https://hangoutsapi.talkgadget.google.com/
hangouts?gid=711266008593
• To have others join, send them your expanded
URL once you’re in the hangout

39. hangouts.js
• Including hangouts.js gives you access to
many RPC features, including:
• Participants
• Shared Data
• A/V
• Layout
• Hangout

40. DEMO #1: Action-
packed action
• Demonstrates:
• That you can run an app
• Shared space & Participants
• Demo #1

41. It’s All About Callbacks
• Async library with sync feel
• api.hangout.getParticipants()
• gapi.hangout.addParticipantAddedCallback(
mycallback)
• function mycallback(Array.<Participant>)

42. Participants
• gapi.hangout.getParticipantId()
• gapi.hangout.addParticipantListener(callback
)
• gapi.hangout.getParticipantById()

43. Participant Data
Structure
• hangoutId
• hasAppInstalled
• from G+
• id (like https://plus.google.com/
103772069584080057731/about)
• displayName
• image.url

44. Shared State
Hangout Server
wolff jberi
State is a JavaScript Object

45. Shared State Calls
• gapi.hangout.data.getState()
• gapi.hangout.data.submitDelta( updates,
removes )
• gapi.hangout.data.addStateChangeListener(
callback )
• function( adds, removes, state, metadata )

46. A/V
• Check status of hardware components
(microphones)
• gapi.hangout.av.hasCamera()
• Check/amend source data
• gapi.hangout.av.setMicrophoneMute()
• Check/amend destination data
• gapi.hangout.av.setAvatar()

47. Layout
• isChatPaneVisible()
• setParticipantHighlight(hangoutId)
• clearParticipantHighlight(hangoutId)

48. Hangout Metadata
• isAppVisible()
• getLocale()
• getParticipants() vs. getAppParticipants()
• get/setActiveSpeaker()

49. Demo #2: A Work In
Progress
• Demonstrates:
• Participants
• Shared state
• A/V
• Also, embedded Flash (just for fun!)

50. For more:
• http://developers.google.com/+
• Jonathan and I are doing office hours in a
hangout; just look for us on G+
• Send us links to your cools apps! We love
to see what you’re doing!
• wolff@google.com, jberi@google.com

51. Q&A