Download - The Big Picture and How to Get Started
The Big Picture and How to Get Started
Jeff Scudder, Eric Bidelman5/18/2010
Quick Poll
Google RESTful APIs
Why should you care?
60+ APIs AJAX APIs, Google Data, OpenSocial, Maps, many more
Tools / Platforms Apps Marketplace, App Engine, Android, Chrome, "Your Site"
Standard protocolsHTTP, RESTful APIs
Atom Publishing Protocol (XML), JSON, etc.
OAuthEasy development
most products have APIs (no need to start from scratch)open source client libraries
Gain large user basebuild on top of popular Google servicesmashups with other web services
Why should you care?
Developer ToolsGoogle Web Toolkit (cross browser Java -> JS compiler)
Web Elements (AJAX widgets)
Chart Tools
Google Eclipse Plugin
Closure Tools (JS compiler, library)
Secure Data Connector (access data behind the firewall)
...
PlatformsApp Engine
Android
Chrome (extensions, HTML5 apps)
Code Project Hosting
Apps Marketplace
AdSense / AdWords
...
But we can't cover everything...
Today's Agenda
AJAX APIs
Google Data ProtocolAPP, XML, REST, HTTP
under the hood: raw protocol demo
Authentication…because private data is more interesting
Demosweb applications, gadgets, mashups
Questions & Answers
Web Elements
Google Ajax APIs
Available APIs
TranslateLanguage DetectionFeedsSearch
News LocalImage Video Blog Book Patent Custom (Web)
Adding custom search to your page
<div id="cse" />
Adding custom search to your page
google.load('search', '1');
Adding custom search to your page
google.setOnLoadCallback( function(){ new google.search. CustomSearchControl(). draw('cse'); }, true);
Adding custom search to your page<!-- Google Custom Search Element --> <div id="cse" style="width:100%;">Loading</div> <script src="http://www.google.com/jsapi" type="text/javascript"></script> <script type="text/javascript"> google.load('search', '1'); google.setOnLoadCallback(function(){ new google.search.CustomSearchControl().draw('cse'); }, true); </script>
The Ajax Playground
code.google.com/apis/ajax/playground
Search APIs
Google is known for search!LocalSearch, NewsSearch
WebSearch, ImageSearch
VideoSearch, PatentSearch
BlogSearch, BookSearch
Compatibility Firefox 1.5+, IE 6+, Safari, Opera 9+, Google Chrome
Common loadergoogle.load('search', '1');
google.load('gdata', '1.x', {packages:['blogger']});
google.load('maps', '2.s');
google.load('earth', '1');
google.load('jquery', '1.2.6', {uncompressed:true});
...not just JavaScript
REST, JSON
Examples in Flash, PHP, Java
http://ajax.googleapis.com/ajax/services/search/web?v=1.0&q=Google%20IO"
HTTP?
URL
Client request to server
Example: Translate API
Request
GET ajax.googleapis.com/ajax/services/language/translate?v=1.0&q=hello%20world&langpair=en%7Cit
q = hello worldlangpair = en|it
http://j.mp/translate-example
Example: Translate API
Response
{ "responseData": { "translatedText":"ciao a tutti" }, "responseDetails": null, "responseStatus": 200}
translatedText = "ciao a tutti"
REST
Create
Retrieve
Update
Delete
GET /calendar/feeds/default/allcalendars/full200 OK
PUT /calendar/feeds/default/allcalendars/full/{ID}200 OK
DELETE /calendar/feeds/default/allcalendars/full/{ID}200 OK
POST /calendar/feeds/default/allcalendars/full201 Created
Google Data APIs
Google Data Protocol Basics
Extends the APPauthz for desktop/web/mobiledata model (<gd:lastModifiedBy>)batch operationsresponses formats (json, jsonc, json-in-script)GData-Version: 2.0
Feature Google Data
Atom RSS 2.0
Syndication Format
Y Y Y
Queries Y N N
Updates Y Y N
Optimistic Concurrency
Y N N
Authentication
Y N N
HTTP, RESTful, ETags, OAuthGET / POST / PUT / DELETE (e.g. CRUD)
Atom Publishing Protocol (XML), JSON, etc.
Example Request - Fetching DataGET /feeds/default/private/full/ HTTP/1.1Host: docs.google.comGData-Version: 3.0Authorization: OAuth oauth_token="ACCESS_TOKEN" ...
Example Request - Fetching DataGET /feeds/default/private/full/ HTTP/1.1Host: docs.google.comGData-Version: 3.0Authorization: OAuth oauth_token="ACCESS_TOKEN" ...HTTP/1.1 200 OK
<feed xmlns='http://www.w3.org/2005/Atom' xmlns:gd='http://schemas.google.com/g/2005'> <title>Available Documents - [email protected]</title> <entry> <id>http://docs.google.com/feeds/.../document%3Aabc123</id> ... <title type='text'>Document Title</title> <category scheme="..." term="..." label="document"/> <content type="text/html" src="..."/> <link rel="alternate" type="text/html" href="..."/> <link rel="edit" href="..."/> <author>...</author> <gd:resourceId>document:abc123</gd:resourceId> <gd:lastViewed>2009-04-09T17:13:17.453Z</gd:lastViewed> ... </entry> <entry>...</entry></feed>
Client Libraries
Provide high level APIs to the protocol (better than XML!)
Sample applications - http://tr.im/jQvc
"What Can I Build?"
Search / Discovery APIs
Admin. / Data Management APIs
Content Creation / Publishing APIs
Apps / Office Productivity APIs
20+ Data APIs and counting...
Wide variety of services
It's Your Data!
http://www.dataliberation.org
Authorization
Authorization
Problems: Authentication is difficult
Private resources
Security considerations
Solution: Let Google handle it!
Authorization not Authentication
Tokens not credentials
User grants/denies access to their private data
OAuth
Similar to AuthSub - single mode: ALL requests must be signed
Web OR Desktop apps
Open standard- popularity (Google, Twitter, Facebook, Yahoo, Flickr)
- open source libraries: oauth.net
- reuse authentication code from another project
Demos
DEMO: Blogger Gadget
http://bit.ly/blogger_gadget
Read / Write JS Library
Handles the details of loading data from Google
Supports READ and WRITE operations
Multiple authentication methods (AuthSub/OAuth Proxy)
Works XD using iframe
Wraps the gadgets.io.makeRequest() function (in gadget environments)
More info: http://bit.ly/js-client
Blogger Gadget - creating datablogger.getBlogFeed('http://www.blogger.com/feeds/default/blogs', function(resp) {
postData(resp.feed.getEntries()[0]);
}, handleError);
function postData(blog) {
var newEntry = new google.gdata.blogger.BlogPostEntry({
title: {
type: 'text',
text: 'New Blogger Gadget'
},
content: {
type: 'text',
text: "Isn't Blogger great?"
},
categories: [{
scheme: 'http://www.blogger.com/atom/ns#',
term: 'io'
}],
control: { draft: {value: google.gdata.Draft.VALUE_NO} }
});
blogger.insertEntry(blog.getEntryPostLink().getHref(),
newEntry, handleInsert, handleError);
}
Blogger Gadget - callback handlers
function handleInsert(entryRoot) {
var href = entryRoot.entry.getHtmlLink().getHref();
$('main').innerHTML = '<a href="' + href +
'" target="new">View post</a>';
}
function handleError(e) {
var msg = e.cause ? e.cause.statusText + ': ' : '';
msg += e.message;
alert('Error: ' + msg);
}
"What Can I Build?"
Demo: Cloudie
http://docs.cloudie.org
Java library
Google Web Toolkit
App Engine
Docs / Spreadsheets
* Screenshot from: http://docs.cloudie.org, Developer: Bobby Soares
Relevant Sessions
Bringing Google to your site
Date: Tomorrow Time: 10:45am-11:45am
Connecting your enterprise applications with Google Docs and Sites
Date: Thursday Time: 11:30am-12:30pm
Resources
Google Data APIs:
http://code.google.com/apis/gdata/
OAuth Playground and other LIVE samples:
http://www.googlecodesamples.com/
AJAX APIs:http://code.google.com/apis/ajax
Questions?