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