the Google+ project   for developers
+Chris ChabotGoogle+ DevRel  http://profiles.google.com/chabotc
Google+ and the +1 button     Putting +You atthe center of Google Advocate    Timothy Jordan, Developer
Google+
CirclesShare what matters, with  the people who matter                  most.
Photos
Search & Sparks
Games
Google+ platform
developers.google.com/+
Google+ platformOAuth2, JSON, RESTfulGET https://www.googleapis.com/plus/v1/people/108189587050871927619{ "kind": "plus#pe...
Google+ platformOAuth2, JSON, RESTfulGET https://www.googleapis.com/plus/v1/people/108189587050871927619/activities/public...
Google+ platformJavaGET https://www.googleapis.com/plus/v1/people/mePerson mePerson = plus.people.get("me").execute();Syst...
Google+ platformPHPGET https://www.googleapis.com/plus/v1/people/me$me = $plus->people->get(me);print "Display Name: {$me[...
Hangouts
Hangouts
Hangouts
Hangouts APIs
+Jonathan BeriGoogle+ DevRel      http://beriberikix.com/+
HangoutsBringing your Apps to the face-to-face-to-face experience
We hangout every day
Bringing Hangouts to      the Web
Seamless & natural
Seamless & natural
Seamless & natural
Seamless & natural
Seamless & natural
Seamless & natural
Apps for unique experiences
Categories for          inspiration•   Education•   Medicine•   Games•   Productivity•   Sciences•   Architecture•   Music...
What are Hangout        Apps?• Web-based software components based on  HTML, CSS, and JavaScript.• Defined using a declarat...
Inside a Hangout AppHi, I’m Wolff, a Developer Programs Engineer
What is a Hangout         App?• Hangout Apps are Gadgets • Rehosted on our gadget server • https://example.com/gadgetspec....
Sample App<?xml version="1.0" encoding="UTF-8" ?><Module>  <ModulePrefs title="Your App Name">    <Require feature="rpc"/>...
Google API Console• During Developer Preview: • Go to code.google.com’s API Console • Create a project, turn on Hangouts A...
Shown here, actual size
Starting your hangout• Can start from that page• Also, your GID is good too: • https://hangoutsapi.talkgadget.google.com/ ...
hangouts.js• Including hangouts.js gives you access to  many RPC features, including:  • Participants  • Shared Data  • A/...
DEMO #1: Action-    packed action• Demonstrates: • That you can run an app • Shared space & Participants • Demo #1
It’s All About Callbacks• Async library with sync feel • api.hangout.getParticipants()• gapi.hangout.addParticipantAddedCa...
Participants• gapi.hangout.getParticipantId()• gapi.hangout.addParticipantListener(callback  )• gapi.hangout.getParticipan...
Participant Data         Structure• hangoutId• hasAppInstalled• from G+ • id (like https://plus.google.com/    10377206958...
Shared State         Hangout Serverwolff                             jberi   State is a JavaScript Object
Shared State Calls• gapi.hangout.data.getState()• gapi.hangout.data.submitDelta( updates,  removes )• gapi.hangout.data.ad...
A/V• Check status of hardware components  (microphones) • gapi.hangout.av.hasCamera()• Check/amend source data • gapi.hang...
Layout• isChatPaneVisible()• setParticipantHighlight(hangoutId)• clearParticipantHighlight(hangoutId)
Hangout Metadata• isAppVisible()• getLocale()• getParticipants() vs. getAppParticipants()• get/setActiveSpeaker()
Demo #2: A Work In     Progress• Demonstrates: • Participants • Shared state • A/V • Also, embedded Flash (just for fun!)
For more:• http://developers.google.com/+• Jonathan and I are doing office hours in a  hangout; just look for us on G+• Sen...
Q&A
Introducing Hangout Apps
Upcoming SlideShare
Loading in …5
×

Introducing Hangout Apps

2,102
-1

Published on

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

Published in: Technology, Business
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,102
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
30
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • {poll the audience}\n As Chris mention, Google+ is a project that aims to make sharing on the web more like sharing in the real world.\n In our daily lives, we don&amp;#x2019;t just share thoughts and ideas, but we also share experiences.\n
  • One of the main ways we do that is by getting together and just hanging out.\n We do this when we&amp;#x2019;re clipping the hedges, while sipping a soda at the food court or having wine with close friends.\n
  • With Hangouts for Google+, we wanted to bring those same type of valuable interactions to the web and even mobile.\n If you haven&amp;#x2019;t been part of a Hangout yet - find or start one right after this talk (or during?) \n There&amp;#x2019;s a feeling of discovery and delight when you first fire up that camera and finished &amp;#x201C;checking your hair.&amp;#x201D;\n
  • The Hangout experience is like being in a room with a group of people, but in a multi-way video chat that facilitates natural, seamless conversation.\n There are key pieces we&amp;#x2019;ve built into Hangouts that enable these natural and seamless moments effortless and just &amp;#x201C;feel right.&amp;#x201D;\n Starting &amp; Joining\n Circles\n Multi-way video &amp; audio\n Natural gestures like\n Auto-panning, muting someone else\n
  • The Hangout experience is like being in a room with a group of people, but in a multi-way video chat that facilitates natural, seamless conversation.\n There are key pieces we&amp;#x2019;ve built into Hangouts that enable these natural and seamless moments effortless and just &amp;#x201C;feel right.&amp;#x201D;\n Starting &amp; Joining\n Circles\n Multi-way video &amp; audio\n Natural gestures like\n Auto-panning, muting someone else\n
  • The Hangout experience is like being in a room with a group of people, but in a multi-way video chat that facilitates natural, seamless conversation.\n There are key pieces we&amp;#x2019;ve built into Hangouts that enable these natural and seamless moments effortless and just &amp;#x201C;feel right.&amp;#x201D;\n Starting &amp; Joining\n Circles\n Multi-way video &amp; audio\n Natural gestures like\n Auto-panning, muting someone else\n
  • The Hangout experience is like being in a room with a group of people, but in a multi-way video chat that facilitates natural, seamless conversation.\n There are key pieces we&amp;#x2019;ve built into Hangouts that enable these natural and seamless moments effortless and just &amp;#x201C;feel right.&amp;#x201D;\n Starting &amp; Joining\n Circles\n Multi-way video &amp; audio\n Natural gestures like\n Auto-panning, muting someone else\n
  • The Hangout experience is like being in a room with a group of people, but in a multi-way video chat that facilitates natural, seamless conversation.\n There are key pieces we&amp;#x2019;ve built into Hangouts that enable these natural and seamless moments effortless and just &amp;#x201C;feel right.&amp;#x201D;\n Starting &amp; Joining\n Circles\n Multi-way video &amp; audio\n Natural gestures like\n Auto-panning, muting someone else\n
  • Launched with YouTube\n Recently added Docs, desktop sharing, On Air\n and...Hangout Apps (Developer Preview)\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Introducing Hangout Apps

    1. 1. the Google+ project for developers
    2. 2. +Chris ChabotGoogle+ DevRel http://profiles.google.com/chabotc
    3. 3. Google+ and the +1 button Putting +You atthe center of Google Advocate Timothy Jordan, Developer
    4. 4. Google+
    5. 5. CirclesShare what matters, with the people who matter most.
    6. 6. Photos
    7. 7. Search & Sparks
    8. 8. Games
    9. 9. Google+ platform
    10. 10. developers.google.com/+
    11. 11. Google+ platformOAuth2, JSON, RESTfulGET 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. 12. Google+ platformOAuth2, JSON, RESTfulGET 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. 13. Google+ platformJavaGET https://www.googleapis.com/plus/v1/people/mePerson 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. 14. Google+ platformPHPGET 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. 15. Hangouts
    16. 16. Hangouts
    17. 17. Hangouts
    18. 18. Hangouts APIs
    19. 19. +Jonathan BeriGoogle+ DevRel http://beriberikix.com/+
    20. 20. HangoutsBringing your Apps to the face-to-face-to-face experience
    21. 21. We hangout every day
    22. 22. Bringing Hangouts to the Web
    23. 23. Seamless & natural
    24. 24. Seamless & natural
    25. 25. Seamless & natural
    26. 26. Seamless & natural
    27. 27. Seamless & natural
    28. 28. Seamless & natural
    29. 29. Apps for unique experiences
    30. 30. Categories for inspiration• Education• Medicine• Games• Productivity• Sciences• Architecture• Music and Entertainment
    31. 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. 32. Inside a Hangout AppHi, I’m Wolff, a Developer Programs Engineer
    33. 33. What is a Hangout App?• Hangout Apps are Gadgets • Rehosted on our gadget server • https://example.com/gadgetspec.xml
    34. 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. 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. 36. Shown here, actual size
    37. 37. 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
    38. 38. hangouts.js• Including hangouts.js gives you access to many RPC features, including: • Participants • Shared Data • A/V • Layout • Hangout
    39. 39. DEMO #1: Action- packed action• Demonstrates: • That you can run an app • Shared space & Participants • Demo #1
    40. 40. It’s All About Callbacks• Async library with sync feel • api.hangout.getParticipants()• gapi.hangout.addParticipantAddedCallback( mycallback)• function mycallback(Array.<Participant>)
    41. 41. Participants• gapi.hangout.getParticipantId()• gapi.hangout.addParticipantListener(callback )• gapi.hangout.getParticipantById()
    42. 42. Participant Data Structure• hangoutId• hasAppInstalled• from G+ • id (like https://plus.google.com/ 103772069584080057731/about) • displayName • image.url
    43. 43. Shared State Hangout Serverwolff jberi State is a JavaScript Object
    44. 44. Shared State Calls• gapi.hangout.data.getState()• gapi.hangout.data.submitDelta( updates, removes )• gapi.hangout.data.addStateChangeListener( callback ) • function( adds, removes, state, metadata )
    45. 45. 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()
    46. 46. Layout• isChatPaneVisible()• setParticipantHighlight(hangoutId)• clearParticipantHighlight(hangoutId)
    47. 47. Hangout Metadata• isAppVisible()• getLocale()• getParticipants() vs. getAppParticipants()• get/setActiveSpeaker()
    48. 48. Demo #2: A Work In Progress• Demonstrates: • Participants • Shared state • A/V • Also, embedded Flash (just for fun!)
    49. 49. 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
    50. 50. Q&A

    ×