The Big Picture and How to Get Started

Jeff Scudder, Eric Bidelman
5/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 protocols
    HTTP, RESTful APIs
    Atom Publishing Protocol (XML), JSON, etc.
    OAuth
 Easy development
    most products have APIs (no need to start from scratch)
    open source client libraries
 Gain large user base
    build on top of popular Google services
    mashups with other web services
Why should you care?

 Developer Tools
    Google 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)
    ...

 Platforms
    App Engine
    Android
    Chrome (extensions, HTML5 apps)
But we can't cover everything...
Today's Agenda
 Web Elements

 AJAX APIs

 Google Data Protocol
    APP, XML, REST, HTTP
    under the hood: raw protocol demo


 Authentication
    …because private data is more interesting

 Demos
    web applications, gadgets, mashups

 Questions & Answers
Google Ajax APIs
Available APIs

 Translate
 Language Detection
 Feeds
 Search
    News
    Local
    Image
    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 loader
    google.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 world
   langpair = 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
  POST /calendar/feeds/default/allcalendars/full
  201 Created


Retrieve
  GET /calendar/feeds/default/allcalendars/full
  200 OK


Update
  PUT /calendar/feeds/default/allcalendars/full/{ID}
  200 OK

Delete
  DELETE /calendar/feeds/default/allcalendars/full/{ID}
  200 OK
Google Data APIs
Google Data Protocol Basics
   HTTP, RESTful, ETags, OAuth
      GET / POST / PUT / DELETE (e.g. CRUD)

   Atom Publishing Protocol (XML), JSON, etc.


                                       Feature         Google   Atom   RSS 2.0
  Extends the APP                                       Data
     authz for desktop/web/mobile      Syndication       Y       Y       Y
     data model (<gd:                  Format
                                       Queries           Y       N       N
     lastModifiedBy>)
     batch operations                  Updates           Y       Y       N

     responses formats (json, jsonc,   Optimistic        Y       N       N
     json-in-script)                   Concurrency

     GData-Version: 2.0                Authenticatio     Y       N       N
                                       n
Example Request - Fetching Data
               GET /feeds/default/private/full/ HTTP/1.1
               Host: docs.google.com
               GData-Version: 3.0
               Authorization: OAuth oauth_token="ACCESS_TOKEN" ...
Example Request - Fetching Data
                                  GET /feeds/default/private/full/ HTTP/1.1
                                  Host: docs.google.com
                                  GData-Version: 3.0
                                  Authorization: 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 data
blogger.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#',
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

                                                                      Java library

                                                                      Google Web Toolkit

                                                                      App Engine

                                                                      Docs / Spreadsheets


             http://docs.cloudie.org



* 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?

The Big Picture and How to Get Started

  • 1.
    The Big Pictureand How to Get Started Jeff Scudder, Eric Bidelman 5/18/2010
  • 2.
  • 3.
  • 4.
    Why should youcare? 60+ APIs AJAX APIs, Google Data, OpenSocial, Maps, many more Tools / Platforms Apps Marketplace, App Engine, Android, Chrome, "Your Site" Standard protocols HTTP, RESTful APIs Atom Publishing Protocol (XML), JSON, etc. OAuth Easy development most products have APIs (no need to start from scratch) open source client libraries Gain large user base build on top of popular Google services mashups with other web services
  • 5.
    Why should youcare? Developer Tools Google 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) ... Platforms App Engine Android Chrome (extensions, HTML5 apps)
  • 6.
    But we can'tcover everything...
  • 7.
    Today's Agenda WebElements AJAX APIs Google Data Protocol APP, XML, REST, HTTP under the hood: raw protocol demo Authentication …because private data is more interesting Demos web applications, gadgets, mashups Questions & Answers
  • 9.
  • 10.
    Available APIs Translate Language Detection Feeds Search News Local Image Video Blog Book Patent Custom (Web)
  • 11.
    Adding custom searchto your page <div id="cse" />
  • 12.
    Adding custom searchto your page google.load('search', '1');
  • 13.
    Adding custom searchto your page google.setOnLoadCallback( function(){ new google.search. CustomSearchControl(). draw('cse'); }, true);
  • 14.
    Adding custom searchto 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>
  • 15.
    The Ajax Playground code.google.com/apis/ajax/playground
  • 16.
    Search APIs Googleis known for search! LocalSearch, NewsSearch WebSearch, ImageSearch VideoSearch, PatentSearch BlogSearch, BookSearch Compatibility Firefox 1.5+, IE 6+, Safari, Opera 9+, Google Chrome Common loader google.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});
  • 17.
    ...not just JavaScript REST, JSON Examples in Flash, PHP, Java http://ajax.googleapis.com/ajax/services/search/web ?v=1.0&q=Google%20IO"
  • 18.
    HTTP? URL Clientrequest to server
  • 19.
    Example: Translate API Request GET ajax.googleapis.com/ajax/services/language/translate?v=1.0&q=hello% 20world&langpair=en%7Cit q = hello world langpair = en|it http://j.mp/translate-example
  • 20.
    Example: Translate API Response { "responseData": { "translatedText":"ciao a tutti" }, "responseDetails": null, "responseStatus": 200 } translatedText = "ciao a tutti"
  • 21.
    REST Create POST/calendar/feeds/default/allcalendars/full 201 Created Retrieve GET /calendar/feeds/default/allcalendars/full 200 OK Update PUT /calendar/feeds/default/allcalendars/full/{ID} 200 OK Delete DELETE /calendar/feeds/default/allcalendars/full/{ID} 200 OK
  • 22.
  • 23.
    Google Data ProtocolBasics HTTP, RESTful, ETags, OAuth GET / POST / PUT / DELETE (e.g. CRUD) Atom Publishing Protocol (XML), JSON, etc. Feature Google Atom RSS 2.0 Extends the APP Data authz for desktop/web/mobile Syndication Y Y Y data model (<gd: Format Queries Y N N lastModifiedBy>) batch operations Updates Y Y N responses formats (json, jsonc, Optimistic Y N N json-in-script) Concurrency GData-Version: 2.0 Authenticatio Y N N n
  • 24.
    Example Request -Fetching Data GET /feeds/default/private/full/ HTTP/1.1 Host: docs.google.com GData-Version: 3.0 Authorization: OAuth oauth_token="ACCESS_TOKEN" ...
  • 25.
    Example Request -Fetching Data GET /feeds/default/private/full/ HTTP/1.1 Host: docs.google.com GData-Version: 3.0 Authorization: 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>
  • 26.
    Client Libraries Provide high level APIs to the protocol (better than XML!) Sample applications - http://tr.im/jQvc
  • 27.
    "What Can IBuild?"
  • 28.
  • 29.
    Admin. / DataManagement APIs
  • 30.
    Content Creation /Publishing APIs
  • 31.
    Apps / OfficeProductivity APIs
  • 32.
    20+ Data APIsand counting...
  • 33.
  • 34.
    It's Your Data! http://www.dataliberation.org
  • 35.
  • 36.
    Authorization Problems: Authentication isdifficult Private resources Security considerations Solution: Let Google handle it! Authorization not Authentication Tokens not credentials User grants/denies access to their private data
  • 37.
    OAuth Similar toAuthSub - 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
  • 38.
  • 39.
    DEMO: Blogger Gadget http://bit.ly/blogger_gadget
  • 40.
    Read / WriteJS 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
  • 41.
    Blogger Gadget -creating data blogger.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#',
  • 42.
    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); }
  • 43.
    "What Can IBuild?"
  • 44.
    Demo: Cloudie Java library Google Web Toolkit App Engine Docs / Spreadsheets http://docs.cloudie.org * Screenshot from: http://docs.cloudie.org, Developer: Bobby Soares
  • 45.
    Relevant Sessions Bringing Googleto 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
  • 46.
    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
  • 47.