Using the Google AJAX APIs

7,954 views
7,363 views

Published on

This is a presentation on Google's AJAX APIs that I gave to the Silicon Valley Google Technology User Group

Published in: Business, Technology
1 Comment
3 Likes
Statistics
Notes
No Downloads
Views
Total views
7,954
On SlideShare
0
From Embeds
0
Number of Embeds
72
Actions
Shares
0
Downloads
184
Comments
1
Likes
3
Embeds 0
No embeds

No notes for slide

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
  63. Learn more http://code.google.com/ Contact info: http://chrisschalk.com Slides will be posted on slideshare.net!

×