SlideShare a Scribd company logo
1 of 64
Download to read offline
Using the Google AJAX APIs
Chris Schalk
10/1/2008
Agenda

    • The core Google AJAX APIs
      – Google AJAX Search API
      – Google AJAX Feed API
      – Google AJAX Language API
    • Demo review: Some cool externally developed demos
    • AjaxSearch Java Demo

    • How the AJAX APIs are more than fluff to spice up a
     Web page: Examining an application built w/ the APIs
     – Utilize the Raw AJAX APIs and advanced features
     – Show how Reader and Google CSE are utilized
     – How to wrap the application as a gadget

2                            (c)2008 Google
Agenda

    • The core Google AJAX APIs
      – Google AJAX Search API
      – Google AJAX Feed API
      – Google AJAX Language API
    • Demo review: Some cool externally developed demos
    • AjaxSearch Java Demo

    • How the AJAX APIs are more than fluff to spice up a
     Web page: Examining an application built w/ the APIs
     – Utilize the Raw AJAX APIs and advanced features
     – Show how Reader and Google CSE are utilized
     – How to wrap the application as a gadget

3                            (c)2008 Google
The Basic Building Blocks

    • HTML/DOM
    • CSS
    • Javascript
    • Tools
       – Editor
       – Debugger - Firebug
       – Performance - YSlow
    • The Google AJAX Apis
       – Search
       – Feed
       – Language
    • Google Reader (www.google.com/reader)
    • Google Custom Search Engines (www.google.com/cse)
    • iGoogle
4                              (c)2008 Google
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




5                                 (c)2008 Google
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




6                                  (c)2008 Google
Google AJAX APIs Architecture




       JavaScript Controls and UI elements

            JavaScript Runtime Layer
                                              AJAX
           RESTful Data Access Layer          APIs




7                            (c)2008 Google
Google AJAX APIs Architecture




       JavaScript Controls and UI elements

            JavaScript Runtime Layer
                                              AJAX
           RESTful Data Access Layer          APIs




8                            (c)2008 Google
Google AJAX APIs Architecture




                                                 AJAX
               RESTful Data Access Layer
                                                 APIs

    • Command Line Access
    • Server-to-Server Access
    • Non-JavaScript
    • JSON output

9                               (c)2008 Google
Google AJAX APIs Architecture




                  JavaScript Runtime Layer
                                                     AJAX
                                                     APIs

     • Low level JavaScript Access
     • Allows for maximum UI flexibility
     • Requires custom coding
     • JSON parsing not needed

10                                  (c)2008 Google
Google AJAX APIs Architecture




           JavaScript Controls and UI elements



                                                    AJAX
                                                    APIs

     • Minimal JavaScript needed
     • Least code required
     • No custom coding needed
     • UI control renders itself

11                                 (c)2008 Google
Google AJAX Search API

     Multiple Search types available:

       –   Web
       –   Video
       –   News
       –   Image
       –   Local
       –   Book
       –   Blog
       –   Patent




12                               (c)2008 Google
Demo - Trying out the AJAX Search API




13
Google AJAX Feed API

     • Load
     • Find
     • Lookup




14                    (c)2008 Google
Demo - Using the Ajax Feed API
         1. Basic stuff
         2. Mashup with Google Maps and Flickr




15
Google AJAX Language API

     • Translation
     • Language Detection




16                          (c)2008 Google
Demo - Using the AJAX Language
     Translation API




17
Agenda

     • The core Google AJAX APIs
       – Google AJAX Search API
       – Google AJAX Feed API
       – Google AJAX Language API
     • Demo review: Some cool externally developed demos
     • AjaxSearch Java Demo

     • How the AJAX APIs are more than fluff to spice up a
      Web page: Examining an application built w/ the APIs
      – Utilize the Raw AJAX APIs and advanced features
      – Show how Reader and Google CSE are utilized
      – How to wrap the application as a gadget

18                            (c)2008 Google
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/

19                                          (c)2008 Google
Agenda

     • The core Google AJAX APIs
       – Google AJAX Search API
       – Google AJAX Feed API
       – Google AJAX Language API
     • Demo review: Some cool externally developed demos
     • AjaxSearch Java Demo

     • How the AJAX APIs are more than fluff to spice up a
      Web page: Examining an application built w/ the APIs
      – Utilize the Raw AJAX APIs and advanced features
      – Show how Reader and Google CSE are utilized
      – How to wrap the application as a gadget

20                            (c)2008 Google
Demo - Using AJAX Search with Java




21
Are the AJAX APIs just used to spice up Web pages?

     Answer: No!


     Let’s examine a real application built by
     Google that use the Google AJAX APIs.




22                         (c)2008 Google
Agenda

     • The core Google AJAX APIs
       – Google AJAX Search API
       – Google AJAX Feed API
       – Google AJAX Language API
     • Demo review: Some cool externally developed demos
     • AjaxSearch Java Demo

     • How the AJAX APIs are more than fluff to spice up a
      Web page: Examining an application built w/ the APIs
      – Utilize the Raw AJAX APIs and advanced features
      – Show how Reader and Google CSE are utilized
      – How to wrap the application as a gadget

23                            (c)2008 Google
The Official Google Blogs Application




24                       (c)2008 Google
Demo - Checking out the Google Blogs
Application
What we saw

     •   The tag cloud view
     •   A detail entry/snippet view
     •   The hierarchical blog view
     •   Search control and results
     •   Translation capabilities




26                                  (c)2008 Google
How was this built?

     • Building Blocks
        – Google Reader (content feeds)
        – Custom Search Engine
        – AJAX APIs (Feed, Search, Language)
     • Getting Started
        – Build standalone HTML/CSS/JS
        – google.load()
        – google.setOnLoadCallback()
     • Putting it all together
        – Application details
     • Making an iGoogle Gadget
        – Wrapping things into iGoogle
27                               (c)2008 Google
Building The Application
     Building Blocks - Google Reader - www.google.com/reader
     • Subscriptions
        – Blog management
     • Tags
        – Grouping Subscriptions/Blogs
        – Tag based pages
        – Tag based feeds
     • Tag Cloud
        – All blogs top 20
     • Hierarchical View
        – All categorized blogs


28                                (c)2008 Google
Building The Application
     Building Blocks - Google Reader - www.google.com/reader
     Tags and Categorization




29                             (c)2008 Google
Building The Application
     Building Blocks - Google Reader - www.google.com/reader
     Tags and Sharing Feeds




30                             (c)2008 Google
Building The Application
     Building Blocks - Google Reader - www.google.com/reader
     Tags and Sharing Feeds




31                             (c)2008 Google
Building The Application
     Building Blocks - Google Reader - www.google.com/reader
     Tags and Sharing Feeds - Ads Verticals Example
     http://www.google.com/reader/shared/user/X/label/Ads%20Verticals




32                                 (c)2008 Google
Building The Application
     Building Blocks - Google Reader - www.google.com/reader
     Tags and Sharing Feeds - Ads Verticals Feed
     http://www.google.com/reader/public/atom/user/X/label/Ads%20Verticals




33                                 (c)2008 Google
Building The Application
     Building Blocks - Custom Search - www.google.com/cse
     • CSE
        –   Custom Search Engine
        –   Better alternative than site restriction for large # of sites
        –   Enables search of all blogs
        –   All Google Blogs > 100 blogs
        –   Integrates directly with AJAX WebSearch




34                                   (c)2008 Google
Building The Application
     Building Blocks - Custom Search - www.google.com/cse




35                             (c)2008 Google
Building The Application
     Building Blocks - The Google AJAX APIs
     • Feed API
        – Utilize Google Reader’s tag based feeds
        – Mixed Format (XML and JSON) for tag cloud
        – FeedControl for HTML generation
     • Search API
        – Blog or Web Search
        – Customer Search Engine
        – Why not Blog Search?
     • Language API
        – Detecting non-native languages
        – Allow translation

36                             (c)2008 Google
Building The Application
          Getting Started - The HTML and CSS

     <div id='container' class='container'>
      <div id='tabs' class='tabs'>
       <div id='categories' class='tabHeader tabActive'> Categories </div>
       <div id='blogs' class='tabHeader tabInactive'>     Blogs    </div>
       <div id='search' class='tabHeader tabInactive'>     Search     </div>
     </div>

     <div id='tabView' class='tabView'>
      <div id='tabContentFrame' class='tabContentFrame'></div>    </div>
      <div id='feedView' class='feedView'>
       <div id='feedContentView' class='feedContentView'></div>
      </div>
      <div id='searchView' class='searchView'></div>
     </div>




37                                           (c)2008 Google
Building The Application
     Getting Started - The HTML and CSS



            Tabs


          TabView




         DetailView


     SearchControl
38                             (c)2008 Google
Building The Application
       Getting Started - The Google AJAX APIs
       • Bootstrapping the APIs and the application

<script src=quot;http://www.google.com/jsapiquot; type=quot;text/javascriptquot;>
</script>

<script type=quot;text/javascriptquot;>
 google.load('feeds', '1');
 google.load('search', '1');
 google.load('language', '1');
 google.setOnLoadCallback(ogbInit);
</script>




39                                         (c)2008 Google
Building The Application
       Getting Started - The Google AJAX APIs
       • Initializing the application

function ogbInit() {
  initData();
  hookUI();
  bootTagWeights();
};


       • Boot the top articles over all blogs using Google Reader Tag
           – Reader tag ‘officialgoogleblogs-all’
           – Utilize mixed format (XML and JSON) for source identifier
           – Generate tag weights based on time and number of entries



40                                 (c)2008 Google
Building The Application
      The Google AJAX Feed API
       • The top entries for tag cloud generation

function bootTagWeights() {
  var url = urlFromLabel('officialgoogleblogs-all');
  var feed = createFeed(url, google.feeds.Feed.MIXED_FORMAT);
  feed.load(tagWeightsLoaded);
};

function createFeed(url, opt_format) {
  var format = (opt_format || google.feeds.Feed.JSON_FORMAT);
  var feed = new google.feeds.Feed(url);
  feed.setResultFormat(format);
  feed.setNumEntries(30);
  return feed;
};




41                                      (c)2008 Google
Building The Application
        The Google AJAX Feed API
         • tagWeightsLoaded callback

function tagWeightsLoaded(result) {

 ... // Pull out source from top blog entries..
 var ns = 'http://www.w3.org/2005/Atom';
 var entries = result.feed.entries;
 for (var i=0; i <entries.length; i++) {
   var e = entries[i];
   var sns=google.feeds.getElementsByTagNameNS(e.xmlNode,ns,'source');
   var ins= google.feeds.getElementsByTagNameNS(sns[0], ns, 'id');
   var id = ins[0].firstChild.nodeValue; ...
 }
 ...

};



 42                                     (c)2008 Google
Building The Application
     The Google AJAX Feed API
     • tagWeightsLoaded callback - source




43                              (c)2008 Google
Building The Application
     The Google AJAX Feed API
     • tagWeightsLoaded callback - source




44                              (c)2008 Google
Building The Application
     The Tag Cloud and Tag Selection




         TagView




45                             (c)2008 Google
Building The Application
           The Google AJAX Feed API
            • Loading and Displaying the Blog Feeds
     function ogbShowFeed(url) { showStatus('Loading...');
       var feed = createFeed(url);
       feed.load(function(result) { feedLoaded(result, url); });
     };


     function feedLoaded(result, url) { var entries = result.feed.entries;
       for (var i=0; i <entries.length; i++) {
         feedControl.createHtml(entries[i]);
         if (entries[i].html) {
           feedView.appendChild(entries[i].html);
         }
       }
     };




46                                               (c)2008 Google
Building The Application
       The Google AJAX Feed API - FeedControl
        •   The FeedControl and HTML generation
        •   Change JSON entry into standardized HTML nodes
        •   HTML attached to the JSON entry
        •   Applicable CSS classes

function feedLoaded(result, url) {
  var entries = result.feed.entries;
  for (var i=0; i <entries.length; i++) {
    feedControl.createHtml(entries[i]);
    if (entries[i].html) {
      feedView.appendChild(entries[i].html);
    }
  }
};



47                                             (c)2008 Google
Building The Application
     The Google AJAX Feed API - FeedControl




         HTML


48                            (c)2008 Google
Building The Application
             The Google AJAX Feed API - FeedControl
             • Override the default CSS class rules
             • Base Structure
        <!-- One .gf-result per entry -->

                 <div class=quot;gf-resultquot;>
                   <!-- Hyperlinked Entry Title -->
                   <div class=quot;gf-titlequot;>
                     <a class=quot;gf-titlequot;></a>
                   </div>
                   <!-- Author (Only if entry.author is present -->
                   <div class=quot;gf-authorquot;></div>
                   <!-- Published Date (Only if entry.publishedDate is present -->
                   <div class=quot;gf-relativePublishedDatequot;></div>
                   <!-- Snippet entry.contentSnippet -->
                   <div class=quot;gf-snippetquot;></div>
                 </div>




49                                           (c)2008 Google
Building The Application
      The Google AJAX Feed API - FeedControl
      • Override the default CSS class rules

   #feedContentView .gs-title {
text-decoration : none;
}
#feedContentView .gf-result, #feedContentView .gs-result {
padding-bottom : 8px;
width : 90%;
overflow : hidden;
}
#feedContentView .gf-title a, #feedContentView .gs-title a {
font-size : 16px;
color : #DD8800;
}
#feedContentView .gf-snippet, #feedContentView .gs-snippet {
color : #DDDDDD;
padding-left : 5px;
}




50                                  (c)2008 Google
Building The Application
     The Blogs View




          Blogs




51                       (c)2008 Google
Building The Application
       The Blogs View
       • Custom JSON Objects
           – Maps all blogs to tags
           – Build view based on all tags and corresponding blogs
           – Tag selection and blog selection both generate detail view
var blogs =
 [ { 'id': 'feed/http://feeds.feedburner.com/GoogleAdsenseChinaBlog',
      'title': 'AdSense-u4e2du6587',
      'alternate': { 'href': 'http://adsense.googlechinablog.com/',
                       'type': 'text/html' }, tags : ['publishers'] },
 ....
 ];




52                                        (c)2008 Google
Building The Application
     The Google AJAX Search API




       SearchControl
53                           (c)2008 Google
Building The Application
      The Google AJAX Search API
      • Search Control
          – Place into DIV
      • Searcher
          – CSE
          – searchComplete callback

 // Generate Search Form and Searcher
searchForm = new google.search.SearchForm(false, searchView);
searchForm.setOnSubmitCallback(null, searchSubmit);
searcher = new google.search.WebSearch();
searcher.setResultSetSize(google.search.Search.LARGE_RESULTSET);
searcher.setSiteRestriction('000333901043914979043:yiaplyr6ps0');
searcher.setSearchCompleteCallback(null, searchComplete);



54                                    (c)2008 Google
Building The Application
     The Search Results View




      Search Results




55                             (c)2008 Google
Building The Application
     The Google AJAX Language API - Translation




         Original




56                             (c)2008 Google
Building The Application
     The Google AJAX Language API - Translation




      Translated




57                             (c)2008 Google
Building The Application
       The Google AJAX Language API - Translation
        • Detecting Language
            – Load feed and then detect language of each entry
            – If not equal to CurrentLocale, add Translate icon
{
feedControl.createHtml(entries[i]);
feedView.appendChild(entries[i].html)
var cb = detectCallbackFunction(url, i); // Check for translation by detecting snippet
google.language.detect(entries[i].contentSnippet, cb);
}

function detectCallback(result, url, i) {
  var entry = feedView.entries[i];
   if (result.language != google.language.CurrentLocale) {
     log('Entry can be translated');
     addTranslateIcon(entry);
   }
};
58                                           (c)2008 Google
Building The Application
       The Google AJAX Language API - Translation
        • Translating an entry
           – Translate icon triggers translation of title and snippet
           – Callback will replace contents appropriately
           – Icon will toggle back and forth

function processTranslation(index, elementId, result) {
 // Grab the correct item and replace..
 var entry = feedView.childNodes[index];
 var node;
 if (elementId == 'title') {
   node = entry.title(); }
 else {
   node = entry.snippet();
 }
 node.innerHTML = result.translation;};


59                                          (c)2008 Google
Building The iGoogle Gadget
     iGoogle Gadget




60                     (c)2008 Google
Building The iGoogle Gadget
          iGoogle Template

<?xml version=quot;1.0quot; encoding=quot;UTF-8quot; ?>
<Module>
<ModulePrefs
 title=quot;All Google Blogsquot;
 directory_title=quot;All Google Blogsquot;
 title_url=quot;http://googleblog.blogspot.comquot;
 author=”Chris Schalkquot;
 author_affiliation=quot;Googlequot;
 author_location=quot;Bay Area, CAquot;
 author_email=quot;googlemodules+ogb@google.comquot;
 scrolling=quot;falsequot;
 category=quot;toolsquot;
 height=quot;450quot; >
</ModulePrefs>
<Content type=quot;htmlquot;><![CDATA[
     <<HTML inserted here>>
]]></Content></Module>


61                                  (c)2008 Google
Reference Material

     • General Documentation
     – http://code.google.com/intl/ja/apis/ajaxsearch
     – http://code.google.com/intl/ja/apis/ajaxfeeds
     – http://code.google.com/intl/ja/apis/ajaxlanguage
     • FeedControl
     – http://code.google.com/intl/ja/apis/ajaxfeeds/documentation/referenc
       e.html#FeedControl
     • Development Tools
     – Firebug
        • http://getfirebug.com
     – Firebug Tutorial
        • http://code.google.com/support/bin/answer.py?answer=94630&topic=11
          530

62                                  (c)2008 Google
Learn more
http://code.google.com/


Contact info:
http://chrisschalk.com


Slides will be posted on
slideshare.net!
Using the Google AJAX APIs

More Related Content

Similar to Using the Google AJAX APIs

Frank Mantek Google G Data
Frank Mantek Google G DataFrank Mantek Google G Data
Frank Mantek Google G Data
deimos
 
Google G Data Reading And Writing Data On The Web
Google G Data Reading And Writing Data On The WebGoogle G Data Reading And Writing Data On The Web
Google G Data Reading And Writing Data On The Web
QConLondon2008
 
Google G Data Reading And Writing Data On The Web 1
Google G Data Reading And Writing Data On The Web 1Google G Data Reading And Writing Data On The Web 1
Google G Data Reading And Writing Data On The Web 1
QConLondon2008
 
Browserscope oscon 2011
Browserscope oscon 2011Browserscope oscon 2011
Browserscope oscon 2011
lsimon
 

Similar to Using the Google AJAX APIs (20)

Intro to Google's AJAX apis @ Rich Web Experience East 08
Intro to Google's AJAX apis @ Rich Web Experience East 08Intro to Google's AJAX apis @ Rich Web Experience East 08
Intro to Google's AJAX apis @ Rich Web Experience East 08
 
Frank Mantek Google G Data
Frank Mantek Google G DataFrank Mantek Google G Data
Frank Mantek Google G Data
 
Google G Data Reading And Writing Data On The Web
Google G Data Reading And Writing Data On The WebGoogle G Data Reading And Writing Data On The Web
Google G Data Reading And Writing Data On The Web
 
Google G Data Reading And Writing Data On The Web 1
Google G Data Reading And Writing Data On The Web 1Google G Data Reading And Writing Data On The Web 1
Google G Data Reading And Writing Data On The Web 1
 
Google API
Google APIGoogle API
Google API
 
jQuery On Rails
jQuery On RailsjQuery On Rails
jQuery On Rails
 
Google App Engine
Google App EngineGoogle App Engine
Google App Engine
 
Devfest09 App Engine Java
Devfest09  App Engine  JavaDevfest09  App Engine  Java
Devfest09 App Engine Java
 
GAE_20100112
GAE_20100112GAE_20100112
GAE_20100112
 
Review of Google I/O
Review of Google I/OReview of Google I/O
Review of Google I/O
 
Introduction to Google's Cloud Technologies
Introduction to Google's Cloud TechnologiesIntroduction to Google's Cloud Technologies
Introduction to Google's Cloud Technologies
 
Day1 before getting_started
Day1 before getting_startedDay1 before getting_started
Day1 before getting_started
 
Introduction to Google Cloud Platform Technologies
Introduction to Google Cloud Platform TechnologiesIntroduction to Google Cloud Platform Technologies
Introduction to Google Cloud Platform Technologies
 
JavaScript Library Overview
JavaScript Library OverviewJavaScript Library Overview
JavaScript Library Overview
 
Google App Engine Java, Groovy and Gaelyk
Google App Engine Java, Groovy and GaelykGoogle App Engine Java, Groovy and Gaelyk
Google App Engine Java, Groovy and Gaelyk
 
Projects In JavaScript And JQuery | Eduonix
Projects In JavaScript And JQuery | EduonixProjects In JavaScript And JQuery | Eduonix
Projects In JavaScript And JQuery | Eduonix
 
Devfest09 Cschalk Gwt
Devfest09 Cschalk GwtDevfest09 Cschalk Gwt
Devfest09 Cschalk Gwt
 
App Engine Overview Cloud Futures Publish
App Engine Overview Cloud Futures PublishApp Engine Overview Cloud Futures Publish
App Engine Overview Cloud Futures Publish
 
Browserscope oscon 2011
Browserscope oscon 2011Browserscope oscon 2011
Browserscope oscon 2011
 
GWT + Gears : The browser is the platform
GWT + Gears : The browser is the platformGWT + Gears : The browser is the platform
GWT + Gears : The browser is the platform
 

More from Chris Schalk

Javaedge 2010-cschalk
Javaedge 2010-cschalkJavaedge 2010-cschalk
Javaedge 2010-cschalk
Chris Schalk
 

More from Chris Schalk (20)

Google App Engine Overview and Update
Google App Engine Overview and UpdateGoogle App Engine Overview and Update
Google App Engine Overview and Update
 
Building Integrated Applications on Google's Cloud Technologies
Building Integrated Applications on Google's Cloud TechnologiesBuilding Integrated Applications on Google's Cloud Technologies
Building Integrated Applications on Google's Cloud Technologies
 
How to build Kick Ass Games in the Cloud
How to build Kick Ass Games in the CloudHow to build Kick Ass Games in the Cloud
How to build Kick Ass Games in the Cloud
 
Building Kick Ass Video Games for the Cloud
Building Kick Ass Video Games for the CloudBuilding Kick Ass Video Games for the Cloud
Building Kick Ass Video Games for the Cloud
 
Building Integrated Applications on Google's Cloud Technologies
Building Integrated Applications on Google's Cloud TechnologiesBuilding Integrated Applications on Google's Cloud Technologies
Building Integrated Applications on Google's Cloud Technologies
 
GDD 2011 - How to build kick ass video games for the cloud
GDD 2011 - How to build kick ass video games for the cloudGDD 2011 - How to build kick ass video games for the cloud
GDD 2011 - How to build kick ass video games for the cloud
 
Quick Intro to Google Cloud Technologies
Quick Intro to Google Cloud TechnologiesQuick Intro to Google Cloud Technologies
Quick Intro to Google Cloud Technologies
 
Intro to Google's Cloud Technologies
Intro to Google's Cloud TechnologiesIntro to Google's Cloud Technologies
Intro to Google's Cloud Technologies
 
Introduction to Google's Cloud Technologies
Introduction to Google's Cloud TechnologiesIntroduction to Google's Cloud Technologies
Introduction to Google's Cloud Technologies
 
Google App Engine's Latest Features
Google App Engine's Latest FeaturesGoogle App Engine's Latest Features
Google App Engine's Latest Features
 
Building Apps on Google Cloud Technologies
Building Apps on Google Cloud TechnologiesBuilding Apps on Google Cloud Technologies
Building Apps on Google Cloud Technologies
 
Google App Engine's Latest Features
Google App Engine's Latest FeaturesGoogle App Engine's Latest Features
Google App Engine's Latest Features
 
Building Multi-platform Video Games for the Cloud
Building Multi-platform Video Games for the CloudBuilding Multi-platform Video Games for the Cloud
Building Multi-platform Video Games for the Cloud
 
Building Enterprise Applications on Google Cloud Platform Cloud Computing Exp...
Building Enterprise Applications on Google Cloud Platform Cloud Computing Exp...Building Enterprise Applications on Google Cloud Platform Cloud Computing Exp...
Building Enterprise Applications on Google Cloud Platform Cloud Computing Exp...
 
Javaedge 2010-cschalk
Javaedge 2010-cschalkJavaedge 2010-cschalk
Javaedge 2010-cschalk
 
Google Cloud Technologies Overview
Google Cloud Technologies OverviewGoogle Cloud Technologies Overview
Google Cloud Technologies Overview
 
Introducing App Engine for Business
Introducing App Engine for BusinessIntroducing App Engine for Business
Introducing App Engine for Business
 
Introduction to Google Cloud platform technologies
Introduction to Google Cloud platform technologiesIntroduction to Google Cloud platform technologies
Introduction to Google Cloud platform technologies
 
Google App Engine for Business 101
Google App Engine for Business 101Google App Engine for Business 101
Google App Engine for Business 101
 
What's new in App Engine and intro to App Engine for Business
What's new in App Engine and intro to App Engine for BusinessWhat's new in App Engine and intro to App Engine for Business
What's new in App Engine and intro to App Engine for Business
 

Recently uploaded

NewBase 24 May 2024 Energy News issue - 1727 by Khaled Al Awadi_compresse...
NewBase   24 May  2024  Energy News issue - 1727 by Khaled Al Awadi_compresse...NewBase   24 May  2024  Energy News issue - 1727 by Khaled Al Awadi_compresse...
NewBase 24 May 2024 Energy News issue - 1727 by Khaled Al Awadi_compresse...
Khaled Al Awadi
 

Recently uploaded (20)

Copyright: What Creators and Users of Art Need to Know
Copyright: What Creators and Users of Art Need to KnowCopyright: What Creators and Users of Art Need to Know
Copyright: What Creators and Users of Art Need to Know
 
Engagement Rings vs Promise Rings | Detailed Guide
Engagement Rings vs Promise Rings | Detailed GuideEngagement Rings vs Promise Rings | Detailed Guide
Engagement Rings vs Promise Rings | Detailed Guide
 
The Inspiring Personality To Watch In 2024.pdf
The Inspiring Personality To Watch In 2024.pdfThe Inspiring Personality To Watch In 2024.pdf
The Inspiring Personality To Watch In 2024.pdf
 
How Do Venture Capitalists Make Decisions?
How Do Venture Capitalists Make Decisions?How Do Venture Capitalists Make Decisions?
How Do Venture Capitalists Make Decisions?
 
Salesforce Loyalty Management A Comprehensive.pdf
Salesforce Loyalty Management A Comprehensive.pdfSalesforce Loyalty Management A Comprehensive.pdf
Salesforce Loyalty Management A Comprehensive.pdf
 
Equinox Gold Corporate Deck May 24th 2024
Equinox Gold Corporate Deck May 24th 2024Equinox Gold Corporate Deck May 24th 2024
Equinox Gold Corporate Deck May 24th 2024
 
Inside the Black Box of Venture Capital (VC)
Inside the Black Box of Venture Capital (VC)Inside the Black Box of Venture Capital (VC)
Inside the Black Box of Venture Capital (VC)
 
Cracking the Change Management Code Main New.pptx
Cracking the Change Management Code Main New.pptxCracking the Change Management Code Main New.pptx
Cracking the Change Management Code Main New.pptx
 
Using Generative AI for Content Marketing
Using Generative AI for Content MarketingUsing Generative AI for Content Marketing
Using Generative AI for Content Marketing
 
Revolutionizing Industries: The Power of Carbon Components
Revolutionizing Industries: The Power of Carbon ComponentsRevolutionizing Industries: The Power of Carbon Components
Revolutionizing Industries: The Power of Carbon Components
 
NewBase 24 May 2024 Energy News issue - 1727 by Khaled Al Awadi_compresse...
NewBase   24 May  2024  Energy News issue - 1727 by Khaled Al Awadi_compresse...NewBase   24 May  2024  Energy News issue - 1727 by Khaled Al Awadi_compresse...
NewBase 24 May 2024 Energy News issue - 1727 by Khaled Al Awadi_compresse...
 
Raising Seed Capital by Steve Schlafman at RRE Ventures
Raising Seed Capital by Steve Schlafman at RRE VenturesRaising Seed Capital by Steve Schlafman at RRE Ventures
Raising Seed Capital by Steve Schlafman at RRE Ventures
 
The Truth About Dinesh Bafna's Situation.pdf
The Truth About Dinesh Bafna's Situation.pdfThe Truth About Dinesh Bafna's Situation.pdf
The Truth About Dinesh Bafna's Situation.pdf
 
Falcon Invoice Discounting Setup for Small Businesses
Falcon Invoice Discounting Setup for Small BusinessesFalcon Invoice Discounting Setup for Small Businesses
Falcon Invoice Discounting Setup for Small Businesses
 
Unleash Data Power with EnFuse Solutions' Comprehensive Data Management Servi...
Unleash Data Power with EnFuse Solutions' Comprehensive Data Management Servi...Unleash Data Power with EnFuse Solutions' Comprehensive Data Management Servi...
Unleash Data Power with EnFuse Solutions' Comprehensive Data Management Servi...
 
HR and Employment law update: May 2024.
HR and Employment law update:  May 2024.HR and Employment law update:  May 2024.
HR and Employment law update: May 2024.
 
A Brief Introduction About Jacob Badgett
A Brief Introduction About Jacob BadgettA Brief Introduction About Jacob Badgett
A Brief Introduction About Jacob Badgett
 
TriStar Gold Corporate Presentation May 2024
TriStar Gold Corporate Presentation May 2024TriStar Gold Corporate Presentation May 2024
TriStar Gold Corporate Presentation May 2024
 
HAL Financial Performance Analysis and Future Prospects
HAL Financial Performance Analysis and Future ProspectsHAL Financial Performance Analysis and Future Prospects
HAL Financial Performance Analysis and Future Prospects
 
Special Purpose Vehicle (Purpose, Formation & examples)
Special Purpose Vehicle (Purpose, Formation & examples)Special Purpose Vehicle (Purpose, Formation & examples)
Special Purpose Vehicle (Purpose, Formation & examples)
 

Using the Google AJAX APIs

  • 1. Using the Google AJAX APIs Chris Schalk 10/1/2008
  • 2. Agenda • The core Google AJAX APIs – Google AJAX Search API – Google AJAX Feed API – Google AJAX Language API • Demo review: Some cool externally developed demos • AjaxSearch Java Demo • How the AJAX APIs are more than fluff to spice up a Web page: Examining an application built w/ the APIs – Utilize the Raw AJAX APIs and advanced features – Show how Reader and Google CSE are utilized – How to wrap the application as a gadget 2 (c)2008 Google
  • 3. Agenda • The core Google AJAX APIs – Google AJAX Search API – Google AJAX Feed API – Google AJAX Language API • Demo review: Some cool externally developed demos • AjaxSearch Java Demo • How the AJAX APIs are more than fluff to spice up a Web page: Examining an application built w/ the APIs – Utilize the Raw AJAX APIs and advanced features – Show how Reader and Google CSE are utilized – How to wrap the application as a gadget 3 (c)2008 Google
  • 4. The Basic Building Blocks • HTML/DOM • CSS • Javascript • Tools – Editor – Debugger - Firebug – Performance - YSlow • The Google AJAX Apis – Search – Feed – Language • Google Reader (www.google.com/reader) • Google Custom Search Engines (www.google.com/cse) • iGoogle 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 5 (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 6 (c)2008 Google
  • 7. Google AJAX APIs Architecture JavaScript Controls and UI elements JavaScript Runtime Layer AJAX RESTful Data Access Layer APIs 7 (c)2008 Google
  • 8. Google AJAX APIs Architecture JavaScript Controls and UI elements JavaScript Runtime Layer AJAX RESTful Data Access Layer APIs 8 (c)2008 Google
  • 9. Google AJAX APIs Architecture AJAX RESTful Data Access Layer APIs • Command Line Access • Server-to-Server Access • Non-JavaScript • JSON output 9 (c)2008 Google
  • 10. Google AJAX APIs Architecture JavaScript Runtime Layer AJAX APIs • Low level JavaScript Access • Allows for maximum UI flexibility • Requires custom coding • JSON parsing not needed 10 (c)2008 Google
  • 11. Google AJAX APIs Architecture JavaScript Controls and UI elements AJAX APIs • Minimal JavaScript needed • Least code required • No custom coding needed • UI control renders itself 11 (c)2008 Google
  • 12. Google AJAX Search API Multiple Search types available: – Web – Video – News – Image – Local – Book – Blog – Patent 12 (c)2008 Google
  • 13. Demo - Trying out the AJAX Search API 13
  • 14. Google AJAX Feed API • Load • Find • Lookup 14 (c)2008 Google
  • 15. Demo - Using the Ajax Feed API 1. Basic stuff 2. Mashup with Google Maps and Flickr 15
  • 16. Google AJAX Language API • Translation • Language Detection 16 (c)2008 Google
  • 17. Demo - Using the AJAX Language Translation API 17
  • 18. Agenda • The core Google AJAX APIs – Google AJAX Search API – Google AJAX Feed API – Google AJAX Language API • Demo review: Some cool externally developed demos • AjaxSearch Java Demo • How the AJAX APIs are more than fluff to spice up a Web page: Examining an application built w/ the APIs – Utilize the Raw AJAX APIs and advanced features – Show how Reader and Google CSE are utilized – How to wrap the application as a gadget 18 (c)2008 Google
  • 19. 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/ 19 (c)2008 Google
  • 20. Agenda • The core Google AJAX APIs – Google AJAX Search API – Google AJAX Feed API – Google AJAX Language API • Demo review: Some cool externally developed demos • AjaxSearch Java Demo • How the AJAX APIs are more than fluff to spice up a Web page: Examining an application built w/ the APIs – Utilize the Raw AJAX APIs and advanced features – Show how Reader and Google CSE are utilized – How to wrap the application as a gadget 20 (c)2008 Google
  • 21. Demo - Using AJAX Search with Java 21
  • 22. Are the AJAX APIs just used to spice up Web pages? Answer: No! Let’s examine a real application built by Google that use the Google AJAX APIs. 22 (c)2008 Google
  • 23. Agenda • The core Google AJAX APIs – Google AJAX Search API – Google AJAX Feed API – Google AJAX Language API • Demo review: Some cool externally developed demos • AjaxSearch Java Demo • How the AJAX APIs are more than fluff to spice up a Web page: Examining an application built w/ the APIs – Utilize the Raw AJAX APIs and advanced features – Show how Reader and Google CSE are utilized – How to wrap the application as a gadget 23 (c)2008 Google
  • 24. The Official Google Blogs Application 24 (c)2008 Google
  • 25. Demo - Checking out the Google Blogs Application
  • 26. What we saw • The tag cloud view • A detail entry/snippet view • The hierarchical blog view • Search control and results • Translation capabilities 26 (c)2008 Google
  • 27. How was this built? • Building Blocks – Google Reader (content feeds) – Custom Search Engine – AJAX APIs (Feed, Search, Language) • Getting Started – Build standalone HTML/CSS/JS – google.load() – google.setOnLoadCallback() • Putting it all together – Application details • Making an iGoogle Gadget – Wrapping things into iGoogle 27 (c)2008 Google
  • 28. Building The Application Building Blocks - Google Reader - www.google.com/reader • Subscriptions – Blog management • Tags – Grouping Subscriptions/Blogs – Tag based pages – Tag based feeds • Tag Cloud – All blogs top 20 • Hierarchical View – All categorized blogs 28 (c)2008 Google
  • 29. Building The Application Building Blocks - Google Reader - www.google.com/reader Tags and Categorization 29 (c)2008 Google
  • 30. Building The Application Building Blocks - Google Reader - www.google.com/reader Tags and Sharing Feeds 30 (c)2008 Google
  • 31. Building The Application Building Blocks - Google Reader - www.google.com/reader Tags and Sharing Feeds 31 (c)2008 Google
  • 32. Building The Application Building Blocks - Google Reader - www.google.com/reader Tags and Sharing Feeds - Ads Verticals Example http://www.google.com/reader/shared/user/X/label/Ads%20Verticals 32 (c)2008 Google
  • 33. Building The Application Building Blocks - Google Reader - www.google.com/reader Tags and Sharing Feeds - Ads Verticals Feed http://www.google.com/reader/public/atom/user/X/label/Ads%20Verticals 33 (c)2008 Google
  • 34. Building The Application Building Blocks - Custom Search - www.google.com/cse • CSE – Custom Search Engine – Better alternative than site restriction for large # of sites – Enables search of all blogs – All Google Blogs > 100 blogs – Integrates directly with AJAX WebSearch 34 (c)2008 Google
  • 35. Building The Application Building Blocks - Custom Search - www.google.com/cse 35 (c)2008 Google
  • 36. Building The Application Building Blocks - The Google AJAX APIs • Feed API – Utilize Google Reader’s tag based feeds – Mixed Format (XML and JSON) for tag cloud – FeedControl for HTML generation • Search API – Blog or Web Search – Customer Search Engine – Why not Blog Search? • Language API – Detecting non-native languages – Allow translation 36 (c)2008 Google
  • 37. Building The Application Getting Started - The HTML and CSS <div id='container' class='container'> <div id='tabs' class='tabs'> <div id='categories' class='tabHeader tabActive'> Categories </div> <div id='blogs' class='tabHeader tabInactive'> Blogs </div> <div id='search' class='tabHeader tabInactive'> Search </div> </div> <div id='tabView' class='tabView'> <div id='tabContentFrame' class='tabContentFrame'></div> </div> <div id='feedView' class='feedView'> <div id='feedContentView' class='feedContentView'></div> </div> <div id='searchView' class='searchView'></div> </div> 37 (c)2008 Google
  • 38. Building The Application Getting Started - The HTML and CSS Tabs TabView DetailView SearchControl 38 (c)2008 Google
  • 39. Building The Application Getting Started - The Google AJAX APIs • Bootstrapping the APIs and the application <script src=quot;http://www.google.com/jsapiquot; type=quot;text/javascriptquot;> </script> <script type=quot;text/javascriptquot;> google.load('feeds', '1'); google.load('search', '1'); google.load('language', '1'); google.setOnLoadCallback(ogbInit); </script> 39 (c)2008 Google
  • 40. Building The Application Getting Started - The Google AJAX APIs • Initializing the application function ogbInit() { initData(); hookUI(); bootTagWeights(); }; • Boot the top articles over all blogs using Google Reader Tag – Reader tag ‘officialgoogleblogs-all’ – Utilize mixed format (XML and JSON) for source identifier – Generate tag weights based on time and number of entries 40 (c)2008 Google
  • 41. Building The Application The Google AJAX Feed API • The top entries for tag cloud generation function bootTagWeights() { var url = urlFromLabel('officialgoogleblogs-all'); var feed = createFeed(url, google.feeds.Feed.MIXED_FORMAT); feed.load(tagWeightsLoaded); }; function createFeed(url, opt_format) { var format = (opt_format || google.feeds.Feed.JSON_FORMAT); var feed = new google.feeds.Feed(url); feed.setResultFormat(format); feed.setNumEntries(30); return feed; }; 41 (c)2008 Google
  • 42. Building The Application The Google AJAX Feed API • tagWeightsLoaded callback function tagWeightsLoaded(result) { ... // Pull out source from top blog entries.. var ns = 'http://www.w3.org/2005/Atom'; var entries = result.feed.entries; for (var i=0; i <entries.length; i++) { var e = entries[i]; var sns=google.feeds.getElementsByTagNameNS(e.xmlNode,ns,'source'); var ins= google.feeds.getElementsByTagNameNS(sns[0], ns, 'id'); var id = ins[0].firstChild.nodeValue; ... } ... }; 42 (c)2008 Google
  • 43. Building The Application The Google AJAX Feed API • tagWeightsLoaded callback - source 43 (c)2008 Google
  • 44. Building The Application The Google AJAX Feed API • tagWeightsLoaded callback - source 44 (c)2008 Google
  • 45. Building The Application The Tag Cloud and Tag Selection TagView 45 (c)2008 Google
  • 46. Building The Application The Google AJAX Feed API • Loading and Displaying the Blog Feeds function ogbShowFeed(url) { showStatus('Loading...'); var feed = createFeed(url); feed.load(function(result) { feedLoaded(result, url); }); }; function feedLoaded(result, url) { var entries = result.feed.entries; for (var i=0; i <entries.length; i++) { feedControl.createHtml(entries[i]); if (entries[i].html) { feedView.appendChild(entries[i].html); } } }; 46 (c)2008 Google
  • 47. Building The Application The Google AJAX Feed API - FeedControl • The FeedControl and HTML generation • Change JSON entry into standardized HTML nodes • HTML attached to the JSON entry • Applicable CSS classes function feedLoaded(result, url) { var entries = result.feed.entries; for (var i=0; i <entries.length; i++) { feedControl.createHtml(entries[i]); if (entries[i].html) { feedView.appendChild(entries[i].html); } } }; 47 (c)2008 Google
  • 48. Building The Application The Google AJAX Feed API - FeedControl HTML 48 (c)2008 Google
  • 49. Building The Application The Google AJAX Feed API - FeedControl • Override the default CSS class rules • Base Structure         <!-- One .gf-result per entry -->         <div class=quot;gf-resultquot;>           <!-- Hyperlinked Entry Title -->           <div class=quot;gf-titlequot;>             <a class=quot;gf-titlequot;></a>           </div>           <!-- Author (Only if entry.author is present -->           <div class=quot;gf-authorquot;></div>           <!-- Published Date (Only if entry.publishedDate is present -->           <div class=quot;gf-relativePublishedDatequot;></div>           <!-- Snippet entry.contentSnippet -->           <div class=quot;gf-snippetquot;></div>         </div> 49 (c)2008 Google
  • 50. Building The Application The Google AJAX Feed API - FeedControl • Override the default CSS class rules #feedContentView .gs-title { text-decoration : none; } #feedContentView .gf-result, #feedContentView .gs-result { padding-bottom : 8px; width : 90%; overflow : hidden; } #feedContentView .gf-title a, #feedContentView .gs-title a { font-size : 16px; color : #DD8800; } #feedContentView .gf-snippet, #feedContentView .gs-snippet { color : #DDDDDD; padding-left : 5px; } 50 (c)2008 Google
  • 51. Building The Application The Blogs View Blogs 51 (c)2008 Google
  • 52. Building The Application The Blogs View • Custom JSON Objects – Maps all blogs to tags – Build view based on all tags and corresponding blogs – Tag selection and blog selection both generate detail view var blogs = [ { 'id': 'feed/http://feeds.feedburner.com/GoogleAdsenseChinaBlog', 'title': 'AdSense-u4e2du6587', 'alternate': { 'href': 'http://adsense.googlechinablog.com/', 'type': 'text/html' }, tags : ['publishers'] }, .... ]; 52 (c)2008 Google
  • 53. Building The Application The Google AJAX Search API SearchControl 53 (c)2008 Google
  • 54. Building The Application The Google AJAX Search API • Search Control – Place into DIV • Searcher – CSE – searchComplete callback // Generate Search Form and Searcher searchForm = new google.search.SearchForm(false, searchView); searchForm.setOnSubmitCallback(null, searchSubmit); searcher = new google.search.WebSearch(); searcher.setResultSetSize(google.search.Search.LARGE_RESULTSET); searcher.setSiteRestriction('000333901043914979043:yiaplyr6ps0'); searcher.setSearchCompleteCallback(null, searchComplete); 54 (c)2008 Google
  • 55. Building The Application The Search Results View Search Results 55 (c)2008 Google
  • 56. Building The Application The Google AJAX Language API - Translation Original 56 (c)2008 Google
  • 57. Building The Application The Google AJAX Language API - Translation Translated 57 (c)2008 Google
  • 58. Building The Application The Google AJAX Language API - Translation • Detecting Language – Load feed and then detect language of each entry – If not equal to CurrentLocale, add Translate icon { feedControl.createHtml(entries[i]); feedView.appendChild(entries[i].html) var cb = detectCallbackFunction(url, i); // Check for translation by detecting snippet google.language.detect(entries[i].contentSnippet, cb); } function detectCallback(result, url, i) { var entry = feedView.entries[i]; if (result.language != google.language.CurrentLocale) { log('Entry can be translated'); addTranslateIcon(entry); } }; 58 (c)2008 Google
  • 59. Building The Application The Google AJAX Language API - Translation • Translating an entry – Translate icon triggers translation of title and snippet – Callback will replace contents appropriately – Icon will toggle back and forth function processTranslation(index, elementId, result) { // Grab the correct item and replace.. var entry = feedView.childNodes[index]; var node; if (elementId == 'title') { node = entry.title(); } else { node = entry.snippet(); } node.innerHTML = result.translation;}; 59 (c)2008 Google
  • 60. Building The iGoogle Gadget iGoogle Gadget 60 (c)2008 Google
  • 61. Building The iGoogle Gadget iGoogle Template <?xml version=quot;1.0quot; encoding=quot;UTF-8quot; ?> <Module> <ModulePrefs title=quot;All Google Blogsquot; directory_title=quot;All Google Blogsquot; title_url=quot;http://googleblog.blogspot.comquot; author=”Chris Schalkquot; author_affiliation=quot;Googlequot; author_location=quot;Bay Area, CAquot; author_email=quot;googlemodules+ogb@google.comquot; scrolling=quot;falsequot; category=quot;toolsquot; height=quot;450quot; > </ModulePrefs> <Content type=quot;htmlquot;><![CDATA[ <<HTML inserted here>> ]]></Content></Module> 61 (c)2008 Google
  • 62. Reference Material • General Documentation – http://code.google.com/intl/ja/apis/ajaxsearch – http://code.google.com/intl/ja/apis/ajaxfeeds – http://code.google.com/intl/ja/apis/ajaxlanguage • FeedControl – http://code.google.com/intl/ja/apis/ajaxfeeds/documentation/referenc e.html#FeedControl • Development Tools – Firebug • http://getfirebug.com – Firebug Tutorial • http://code.google.com/support/bin/answer.py?answer=94630&topic=11 530 62 (c)2008 Google