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 - john.doe@gmail.com</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?