Your SlideShare is downloading. ×
0
Using the Google AJAX APIs
Using the Google AJAX APIs
Using the Google AJAX APIs
Using the Google AJAX APIs
Using the Google AJAX APIs
Using the Google AJAX APIs
Using the Google AJAX APIs
Using the Google AJAX APIs
Using the Google AJAX APIs
Using the Google AJAX APIs
Using the Google AJAX APIs
Using the Google AJAX APIs
Using the Google AJAX APIs
Using the Google AJAX APIs
Using the Google AJAX APIs
Using the Google AJAX APIs
Using the Google AJAX APIs
Using the Google AJAX APIs
Using the Google AJAX APIs
Using the Google AJAX APIs
Using the Google AJAX APIs
Using the Google AJAX APIs
Using the Google AJAX APIs
Using the Google AJAX APIs
Using the Google AJAX APIs
Using the Google AJAX APIs
Using the Google AJAX APIs
Using the Google AJAX APIs
Using the Google AJAX APIs
Using the Google AJAX APIs
Using the Google AJAX APIs
Using the Google AJAX APIs
Using the Google AJAX APIs
Using the Google AJAX APIs
Using the Google AJAX APIs
Using the Google AJAX APIs
Using the Google AJAX APIs
Using the Google AJAX APIs
Using the Google AJAX APIs
Using the Google AJAX APIs
Using the Google AJAX APIs
Using the Google AJAX APIs
Using the Google AJAX APIs
Using the Google AJAX APIs
Using the Google AJAX APIs
Using the Google AJAX APIs
Using the Google AJAX APIs
Using the Google AJAX APIs
Using the Google AJAX APIs
Using the Google AJAX APIs
Using the Google AJAX APIs
Using the Google AJAX APIs
Using the Google AJAX APIs
Using the Google AJAX APIs
Using the Google AJAX APIs
Using the Google AJAX APIs
Using the Google AJAX APIs
Using the Google AJAX APIs
Using the Google AJAX APIs
Using the Google AJAX APIs
Using the Google AJAX APIs
Using the Google AJAX APIs
Using the Google AJAX APIs
Using the Google AJAX APIs
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Using the Google AJAX APIs

6,866

Published on

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

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

Published in: Business, Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
6,866
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
181
Comments
0
Likes
3
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

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

×