This is a presentation I have at the Oracle OpenWorld Unconference. I basically gave an overview of the different Google APIs and services that you can integrate into your applications. It touches both client side, JavaScript APIs as well as serverside APIs like GData etc..

1. Integrating Google APIs into your
Applications
Chris Schalk
Google Developer Advocate
9/23/2008

2. Agenda
• Client Side APIs
– Maps API
– AJAX APIs
• Search, Feed, Translation
• Google Server-side APIs
– Google Data
– Calendar, Blogger, YouTube...
– Demo with JSF
• OpenSocial/Gadgets
– How to build gadgets
– OpenSocial - What is it??
– How to host OpenSocial gadgets
2 (c)2008 Google

3. Agenda
• Client Side APIs
– Maps API
– AJAX APIs
• Search, Feed, Translation
• Google Server-side APIs
– Google Data
– Calendar, Blogger, YouTube...
– Demo with JSF
• OpenSocial/Gadgets
– How to build gadgets
– OpenSocial - What is it??
– How to host OpenSocial gadgets
3 (c)2008 Google

4. Google Maps API
• JavaScript Client API
• Build a Customized Maps
application
• Easy to mashup with other
technologies
• Also works with Flash
• Can generate static Maps
images via REST
4 (c)2008 Google

5. Google AJAX APIs
Delivering the Web to Your Applications (Search, Feeds, Language)
• RESTful data access layer
– JSON/JSON-P
AJAX APIs • JavaScript Runtime
– Designed for ease of use
• JavaScript Controls and UI elements
– Custom integration and styling
(c)2008 Google

6. Google AJAX APIs Background
• Comprehensive access to Google Systems (Search, Feeds,
Language)
• End to end API stack:
• Data Access via JavaScript Methods and REST
• Built in Native UI and Large Suite of Advanced Controls
• Large, diverse customer base
• Sites: Long Tail and Short Tail Sites (100 pv/d – 10m+ pv/d)
• Developers: Pro Web Developers – Scripters – Bloggers
• High Speed, Low Latency, Globally Available
JavaScript Controls and UI elements
JavaScript Runtime Layer
AJAX
RESTful Data Access Layer APIs

7. Google AJAX Search API
• Web
• Video
• News
• Image
• Local
• Book
• Blog
(c)2008 Google

8. Google AJAX Feed API
• Load
• Find
• Lookup
(c)2008 Google

9. Google AJAX Language API
• Translation
• Language Detection
(c)2008 Google

10. Demo - Trying out some of the AJAX APIs

11. Some notable AJAX APIs Applications
Time - AJAX Search API (news)
http://www.time.com/time/politics
http://www.time.com/time/global_business/united-states
NYTimes - AJAX Feed API
http://thecaucus.blogs.nytimes.com
People - AJAX Feed API + gadgets
http://www.people.com/people/news/0,,,00.html
http://www.google.com/uds/gadgets/people_ads/people_ads.html
SnowCovered - AJAX Language API
http://www.snowcovered.com/Snowcovered2/
Walkscore - AJAX Search API (local) + Maps API
http://www.walkscore.com/get-score.php?street=1600+amphitheatre+parkway+94043&go=Go
http://www.walkscore.com/rankings/San_Francisco
Google Elections apps:
http://www.google.com/2008election/
http://www.google.com/2008election/convention.html
Background:
http://www.searchmashups.blogspot.com/
(c)2008 Google

12. Agenda
• Client Side APIs
– Maps API
– AJAX APIs
• Search, Feed, Translation
• Google Server-side APIs
– Google Data
– Calendar, Blogger, YouTube...
– Demo with JSF
• OpenSocial/Gadgets
– How to build gadgets
– OpenSocial - What is it??
– How to host OpenSocial gadgets
12 (c)2008 Google

13. ServerSide Google APIs Overview
• Google Data APIs
– Common set of APIs for working with multiple online Google
technologies
– Google Apps APIs, Base Data API, Data API, Calendar Data API, Code Search
Data API, Contacts Data API, Finance Portfolio Data API, Health Data API,
Notebook Data API, Spreadsheets Data API, Picasa Web Albums Data API,
Google Documents List Data API, Webmaster Tools Data API, YouTube Data
API
– Support for multiple languages
• Python
• PHP
• .Net
• Java
• JavaScript
13 (c)2008 Google

14. Google Data APIs Overview
• Google Data APIs, aka “Gdata”, is a protocol based on the Atom
1.0 and RSS 2.0 syndication formats, plus the Atom Publishing
Protocol
• “Gdata” extends those standards in various ways, using the
extension mechanisms built into the standards. A GData feed
conforms to either the Atom or RSS syndication formats. The
GData publishing model conforms to the Atom Publishing Protocol.
• To acquire information from a service that supports GData, you
send an HTTP GET request; the service returns results as an Atom
or RSS feed.
• You can update data (where supported by a particular GData
service) by sending an HTTP PUT request.
• GData provides a general model for feeds, queries, and results.
You can use it to send queries and updates to any service that has
a GData interface.
14 (c)2008 Google

15. ServerSide Google APIs Overview
• Other server-side Google APIs…
• Google Chart API
Also other restful services, AJAX apis, OpenSocial RESTful API
15 (c)2008 Google

16. Working with the Data APIs in Java
• Getting the Gdata Jar files
• Running the sample app
• Add Jars to your IDE
• That’s it!
16 (c)2008 Google

17. Some basic data operations w/ Calendar API
• Querying all of your calendars
• Querying the events in all of your calendars
• Querying specific events based on a text string
• Querying events based on a date range
• Creating new calendar events
• Deleting/Updating calendar events
17 (c)2008 Google

18. Using the Calendar Data API with JSF
18 (c)2008 Google

19. Using the Calendar Data API with JSF
Basic Architecture
CalendarServices
Managed Bean
19 (c)2008 Google

20. Introducing the Google Charts API
• Simple REST based dynamic chart generator
• Offers the creation of on-the-fly charts of multiple types
– http://chart.apis.google.com/chart?cht=p3&chd=t:60,40&chs=25
0x100&chl=Hello|World
20 (c)2008 Google

21. The JSF Custom Chart Component
21 (c)2008 Google

22. Google data APIs/ RESTful services summary
• The Google Data APIs offer full online data access to
multiple Google Services
• Gdata supports multiple client languages
• Other simple, RESTful, online services also offered
by Google
• Charts API, AJAX APIs…
• Relatively straightforward to integrate with server-side
Java / JSF
22 (c)2008 Google

23. More info…
• http://code.google.com
• http://code.google.com/apis/gdata/
• http://code.google.com/apis/chart
23 (c)2008 Google

24. Agenda
• Client Side APIs
– Maps API
– AJAX APIs
• Search, Feed, Translation
• Google Server-side APIs
– Google Data
– Calendar, Blogger, YouTube...
– Demo with JSF
• OpenSocial/Gadgets
– How to build gadgets
– OpenSocial - What is it??
– How to host OpenSocial gadgets
24 (c)2008 Google

25. Building Gadgets
• It’s just JavaScript embedded in an XML file!
• Runs within a “container” environment
– iGoogle
– Other environments coming online through OpenSocial
• Gadget’s relation to OpenSocial
– Gadgets serve as the base architecture for OpenSocial
applications
25 (c)2008 Google

26. •
26

27. •
27

28. Too many platforms!
28

29. Standards based
OpenSocial
Write once…
Deploy everywhere
29

30. Use multiple times
Cooooool!
30

31. Not just Social Network Sites
• Social network sites - Profiles and home pages
ex: MySpace, Hi5
• Personal dashboards – Widgets
ex: iGoogle, My Yahoo
• Sites based around a Social Object
ex: Flickr, YouTube
• Enterprise systems
ex: Oracle, SalesForce.com
• Any web site
31

32. OpenSocial Roadmap
• Version 0.5 was released in a “developer release” on Nov
1st.
• First “sandbox” was made available on Orkut
• Version 0.6 was released in December
• Initial version of Shindig server software was launched as Apache
incubator project
• Other sandboxes came live - Hi5, Ning, Plaxo …
• Version 0.7 (production) was released in January
• MySpace, Hi5, Orkut currently running with 0.7
32

33. OpenSocial v0.8 is here!
• Latest evolution of OpenSocial as defined by the
OpenSocial development community
• Updated JavaScript API
• Now contains a RESTful API
• Shindig supports v0.8 today
• iGoogle now supports 0.8!
• hi5 almost done with their support
• orkut currently working on their implementation
• Other containers also working on 0.8
• Specification is here:
http://www.opensocial.org/Technical-Resources/opensocial-spec-v08
33

34. OpenSocial Hi-level Details
• A set of open, standard APIs for building
social applications
• APIs based on Web standards:
HTML/CSS, JavaScript, REST+OAuth
• Reference Implementation: Shindig
• Apache Open Source Project
• A global community of thousands of
developers
34

35. OpenSocial Core Services
• People & Friends
• Access friends information programmatically
• Activities
• See what you’re friends are up to
• Share what you are doing
• Persistence
• Provide state without a server
• Share data with your friends
35

36. OpenSocial Client APIs
• JavaScript API - for browser based client development
• Standard Web development technologies
• HTML + Javascript, CSS, AJAX
• Can integrate with 3rd party servers
• PHP, Perl, Java, C/C++
• RESTful API - for server based client development
• Based on Atom publishing protocol
• Data transfer is Atom or JSON
• More on RESTful API later…
36

37. Building JavaScript OpenSocial Applications
• If you know how to develop gadgets, you know how to
develop JavaScript OpenSocial applications!
• Follows same approach as gadgets
• JavaScript/HTML/CSS embedded in an XML
document
• XML document containing gadget is hosted on the
Internet
• OpenSocial applications are “gadgets++”
• Gadgets development, but with additional Social
capabilities
37

38. OpenSocial People & Friends Example
An OpenSocial example to show the owner’s friends
function getFriends(id) {
var params = {};
params[opensocial.IdSpec.Field.USER_ID] =
opensocial.IdSpec.PersonId.OWNER;
params[opensocial.IdSpec.Field.GROUP_ID] = quot;FRIENDSquot;;
var idspec = opensocial.newIdSpec(params);
var req = opensocial.newDataRequest();
req.add(req.newFetchPeopleRequest(idspec), quot;reqquot;);
req.send(onLoadFriends);
};
38

39. OpenSocial People & Friends Example
An OpenSocial example to show the owner’s friends
var html= quot;Listing friends:<br/>quot;;
function printPerson(person) {
html += quot;<br/>quot; + person.getDisplayName();
};
function onLoadFriends(dataResponse) {
dataResponse.get(quot;reqquot;).getData().each(printPerson);
document.getElementById('message').innerHTML = html;
};
39

40. Activities Example
Posting an Activity
function postActivity(text) {
var params = {};
params[opensocial.Activity.Field.TITLE] = text;
var activity = opensocial.newActivity(params);
opensocial.requestCreateActivity(activity,
opensocial.CreateActivityPriority.HIGH, callback);
}
postActivity(quot;This is a sample activity, created at quot; +
new Date().toString())
}
40

41. Persistence Example
Storing persisted data
function populateMyAppData() {
var req = opensocial.newDataRequest();
var data1 = Math.random() * 5;
var data2 = Math.random() * 100;
req.add(req.newUpdatePersonAppDataRequest(quot;VIEWERquot;,
quot;AppField1quot;, data1));
req.add(req.newUpdatePersonAppDataRequest(quot;VIEWERquot;,
quot;AppField2quot;, data2));
req.send(requestMyData);
}
41

42. Persistence Example
Fetching persisted data
function requestMyData() {
var req = opensocial.newDataRequest();
var fields = [quot;AppField1quot;, quot;AppField2quot;];
req.add(req.newFetchPersonRequest(
opensocial.DataRequest.PersonId.VIEWER), quot;viewerquot;);
req.add(req.newFetchPersonAppDataRequest(quot;VIEWERquot;,
fields), quot;viewer_dataquot;);
req.send(handleReturnedData);
}
42

43. OpenSocial JavaScript client application in action
Gadget using JavaScript Client API communicates
with OpenSocial server
OpenSocial
JSON Server
Gadget XML Source
browser
43

44. Integrating OpenSocial applications with external servers
The OpenSocial persistence service provides a way to
store/share small amounts of data on the OpenSocial
server, but…
• What if you need to store more data than your
container allows?
• Solution: You can make independent requests out
to external servers.
• Use: gadgets.io.makeRequest
• Can also make authenticated requests using Oauth
• Can use cloud services from: Joyent, Amazon or
AppEngine!
44

45. Integrating OpenSocial applications with external servers
An example request to an external server
gadgets.io.makeRequest
OpenSocial
Server External
1 2 Server
browser
1. Initial request made from gadget
2. Server routes request to external server
Requests can be secured using OAuth!
45

46. Demonstration
• Building OpenSocial Client Applications
46

47. How to host OpenSocial Applications
1. Can build your own server that implements
OpenSocial specification…
2. Or can use “Shindig” - Reference implementation for
OpenSocial
• Gadget Server
–Renders gadget XML as HTML/JS/CSS
• OpenSocial Data Server
–RESTful API server (in-progress)
47

48. Serverside OpenSocial
How to implement an OpenSocial server
Shindig
orkut, hi5, iGoogle, tianya.cn, …
• Gadget Server
–Renders gadget XML as HTML/JS/CSS
• OpenSocial Data Server
–RESTful API server
• Gadget Container JavaScript
–Core gadgets JavaScript environment
48

49. How Shindig works
• Gadget Server
• OpenSocial Data Server
Shindig
Yoursite.com
Gadget
Gadget Server
OpenSocial
DataServer
49 49

50. Why use Shindig?
• Strong open source community
• High quality production-ready code
• Update easily as OpenSocial evolves
• Fully compliant with OpenSocial v0.7, v0.8
• Shindig is language neutral (Java, PHP)
50

51. Shindig success at hi5
• Big Traffic
• 10k req/sec Edge
• 6k req/sec Origin
• Hundreds of Developers
• 1800+ Apps
• 1 Billion hits/day
… on 42 Shindig servers
51 51

52. Demonstration: Trying out Shindig
52 52

53. Thank You!
http://chrisschalk.com
53 (c)2008 Google