Building AJAX Mashups with Google APIs

Building AJAX Mashups with GoogleAPIsChris Schalk10/21/2008

2 (c)2008 Google

Agenda

• Google Maps

– What’s new!

• Flash Maps, Static images, Panoramio, Wikipedia, Walkingdirections, client location

• AJAX APIs

– Ajax Search, Ajax Feed, Ajax Language

• Gadgets basics

– Integrating AJAX/Maps api into gadgets

• Making your gadgets social with OpenSocial

– A note on hosting gadgets - Shindig

• Integrating Google AppEngine with gadgets, Maps

– OpenSocial Gifts application w/ AppEngine providing backend

– GeoDataStore

3 (c)2008 Google

Agenda

• Google Maps

– What’s new!

• Flash Maps, Static images, Panoramio, Wikipedia, Walkingdirections, client location

• AJAX APIs


• Gadgets basics






– GeoDataStore

4 (c)2008 Google

The Google Maps API

• “The ultimate mashable API”

– A Maps “HelloWorld” example

<html > <head> <script src="http://maps.google.com/maps?file=api&v=2&key=your-key" type="text/javascript"></script> <script type="text/javascript">

function initialize() { if (GBrowserIsCompatible()) { var map = new GMap2(document.getElementById("map_canvas")); map.setCenter(new GLatLng(37.4419, -122.1419), 13); } }

</script> </head> <body onload="initialize()" onunload="GUnload()"> <div id="map_canvas" style="width: 500px; height: 300px"></div> </body></html>

5 (c)2008 Google

Whats new with Google Maps?

• Flash based Maps

• Static image Maps

• Panoramio and Wikipedia layers

• Walking directions

• IP based Client location

• …

6

Demo - Trying out some new Maps APIfeatures

7 (c)2008 Google

Agenda

• Google Maps

– What’s new!

• Flash Maps, Static images, Panoramio, Wikipedia, Walking directions, clientlocation

• AJAX APIs


• Gadgets basics






– GeoDataStore

8 (c)2008 Google

Google AJAX APIs

Delivering the Web to Your Applications (Search, Feeds, Language)

AJAX APIs

• RESTful data access layer

–JSON/JSON-P

• JavaScript Runtime

–Designed for ease of use

• JavaScript Controls and UI elements

–Custom integration and styling

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

10 (c)2008 Google

Google AJAX APIs Architecture

RESTful Data Access Layer

JavaScript Runtime Layer

JavaScript Controls and UI elements

AJAXAPIs

11 (c)2008 Google


RESTful Data Access LayerAJAXAPIs

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

12 (c)2008 Google


AJAXAPIs

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

JavaScript Runtime Layer

13 (c)2008 Google


AJAXAPIs

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

JavaScript Controls and UI elements

14 (c)2008 Google

Google AJAX Search API

Multiple Search types available:

– Web

– Video

– News

– Image

– Local

– Book

– Blog

– Patent

15

Demo - Trying out the AJAX Search API

16 (c)2008 Google

Google AJAX Feed API

• Load

• Find

• Lookup

17

Demo - Using the Ajax Feed API

18 (c)2008 Google

Google AJAX Language API

• Translation

• Language Detection

19

Demo - Using the AJAX LanguageTranslation API

20 (c)2008 Google

Some notable AJAX APIs Applications

Time - AJAX Search API (news)http://www.time.com/time/politicshttp://www.time.com/time/global_business/united-states

NYTimes - AJAX Feed APIhttp://thecaucus.blogs.nytimes.com

People - AJAX Feed API + gadgetshttp://www.people.com/people/news/0,,,00.htmlhttp://www.google.com/uds/gadgets/people_ads/people_ads.html

SnowCovered - AJAX Language APIhttp://www.snowcovered.com/Snowcovered2/

Walkscore - AJAX Search API (local) + Maps APIhttp://www.walkscore.com/get-score.php?street=1600+amphitheatre+parkway+94043&go=Gohttp://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/

21 (c)2008 Google

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

Answer: No!

Let’s examine a self standing application thatuses the Google AJAX APIs.

22 (c)2008 Google

A Google Blogs Application

23 (c)2008 Google

A Google Blogs Application

• Application showcases official Google blogs

• Uses the AJAX APIs: AJAX Search, AJAX Feed, AJAXLanguage

• Also utilizes Custom Search Engine, Google Reader

Demo - Checking out the Google BlogsApplication

25 (c)2008 Google

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

• Subscriptions

– Blog management

• Tags

– Grouping Subscriptions/Blogs

– Tag based pages

– Tag based feeds

• Tag Cloud

– All blogs top 20

• Hierarchical View

– All categorized blogs

Building Blocks - Google Reader - www.google.com/reader

28 (c)2008 Google


• 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

Building Blocks - Custom Search - www.google.com/cse

29 (c)2008 Google


Building Blocks - Custom Search - www.google.com/cse

30 (c)2008 Google


• 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

Building Blocks - The Google AJAX APIs

31 (c)2008 Google


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>

32 (c)2008 Google


Getting Started - The HTML and CSS

Tabs

TabView

DetailView

SearchControl

33 (c)2008 Google


• Bootstrapping the APIs and the application

Getting Started - The Google AJAX APIs

<script src="http://www.google.com/jsapi" type="text/javascript"></script>

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

34 (c)2008 Google


• Loading and Displaying the Blog Feeds

The Google AJAX Feed API

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); } }};

35 (c)2008 Google


• The FeedControl and HTML generation

• Change JSON entry into standardized HTML nodes

• HTML attached to the JSON entry

• Applicable CSS classes

The Google AJAX Feed API - FeedControl

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); } }};

36 (c)2008 Google



HTML

37 (c)2008 Google


• Override the default CSS class rules

• Base Structure




<div class="gf-result">  <div class="gf-title"> <a class="gf-title"></a> </div>  <div class="gf-author"></div>  <div class="gf-relativePublishedDate"></div>  <div class="gf-snippet"></div> </div>

38 (c)2008 Google


• 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;}

39 (c)2008 Google


The Blogs View

Blogs

40 (c)2008 Google


• 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

The Blogs View

var blogs = [ { 'id': 'feed/http://feeds.feedburner.com/GoogleAdsenseChinaBlog', 'title': 'AdSense-\u4e2d\u6587', 'alternate': { 'href': 'http://adsense.googlechinablog.com/', 'type': 'text/html' }, tags : ['publishers'] }, .... ];

41 (c)2008 Google


The Google AJAX Search API

SearchControl

42 (c)2008 Google


• Search Control

– Place into DIV

• Searcher

– CSE

– searchComplete callback

The Google AJAX Search API

// Generate Search Form and SearchersearchForm = 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);

43 (c)2008 Google


The Search Results View

Search Results

44 (c)2008 Google


The Google AJAX Language API - Translation

Original

45 (c)2008 Google



Translated

46 (c)2008 Google


• 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 snippetgoogle.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); }};

47 (c)2008 Google


• 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;};

48 (c)2008 Google

Agenda

• Google Maps

– What’s new!


• AJAX APIs


• Gadgets basics






– GeoDataStore

49 (c)2008 Google

Gadgets Basics

• Simple, mini applications built with JavaScript, HTML, CSS

• Runs on a “container”

– iGoogle, orkut, yoursite

• Comprehensive API for building rich applications

– Tabs, remote content, Internationalization, Flash

• Fully mashable with other Google APIs (Maps, AJAX …)

• Can be made social with OpenSocial

50

Demo - Checking out the Google GadgetsAPI

51 (c)2008 Google

Building the Blog app as a Gadget

iGoogle Gadget

52 (c)2008 Google

Building the Blog app as a Gadget

Gadget XML Template

<?xml version="1.0" encoding="UTF-8" ?><Module><ModulePrefs title="All Google Blogs" directory_title="All Google Blogs" title_url="http://googleblog.blogspot.com" author=”Joe Developer" author_affiliation="Google" author_location="Bay Area, CA" author_email=”[email protected]" scrolling="false" category="tools" height="450" > </ModulePrefs><Content type="html"><![CDATA[ << Gadget HTML/JavaScript/CSS/… Content inserted here>>]]></Content></Module>

53 (c)2008 Google

Agenda

• Google Maps

– What’s new!


• AJAX APIs


• Gadgets basics






– GeoDataStore

54 (c)2008 Google

Making your gadgets social with OpenSocial

• What is OpenSocial?

– A set of standards based APIs for building social applications

– APIs based on Web standards:HTML/CSS, JavaScript, REST+Oauth

– Reference Implementation: Shindig• Apache Open Source Project

– A global community of thousands of developers & hundredsof millions of users

55

Too many platforms!

56

Standards based

OpenSocial

Write once… Deploy everywhere

57

Use multiple timesCooooool!

58

Not just Social Network Sites

• Social network sites - Profiles and home pagesex: MySpace, Hi5

• Personal dashboards – Widgetsex: iGoogle, My Yahoo

• Sites based around a Social Objectex: Flickr, YouTube

• Corporate CRM systemsex: Oracle, SalesForce.com

• Any web site

59

OpenSocial Partners

60Today: 375 Million User Reach

61

Where is OpenSocial live today?

•Live to Users:

• MySpace• orkut• Hi5• Freebar• Friendster• Webon from Lycos• IDtail• YiQi• Netlog - New!• Hyves - New!

Live Developer Sandboxes:

• iGoogle• imeem• CityIN• Tianya• Ning• Plaxo Pulse• Mail.ru

Individual Developer Links:http://code.google.com/apis/opensocial/gettingstared.html

62

OpenSocial today

375,000,000 users

150,000,000 installs

4,500+ apps

Pipeline of 100+ containers worldwide

20,000+ developers

10,000,000 daily app users

63

OpenSocial Core Services

• People & Friends• Access friends information programmatically

• Activities• See what you’re friends are up to• Share what you are doing

• Persistence• Provide state without a server• Share data with your friends

64

OpenSocial Client APIs

• JavaScript API - for browser based client development• Standard Web development technologies

• HTML + Javascript, CSS, AJAX

• Can integrate with 3rd party servers• PHP, Perl, Java, C/C++

• RESTful API - for server based client development• Based on Atom publishing protocol• Data transfer is Atom or JSON• More on RESTful API later…

65

Building JavaScript OpenSocial Applications

• If you know how to develop gadgets, you know how todevelop JavaScript OpenSocial applications!

• Follows same approach as gadgets• JavaScript/HTML/CSS embedded in an XML

document• XML document containing gadget is hosted on the

Internet• OpenSocial applications are “gadgets++”

• Gadgets development, but with additional Socialcapabilities

66

Demo - Building OpenSocial Apps

Some simple applications running on the orkut and hi5 developer sandboxes

• sandbox.orkut.com• sandbox.hi5.com

67

How to host OpenSocial Applications

1. Can build your own server that implementsOpenSocial specification…

2. Or can use “Shindig” - Reference implementation forOpenSocial

• Gadget Server–Renders gadget XML as HTML/JS/CSS

• OpenSocial Data Server–RESTful API server (in-progress)

68

Serverside OpenSocial

Shindig orkut, hi5, iGoogle, tianya.cn, …

• Gadget Server

–Renders gadget XML as HTML/JS/CSS

• OpenSocial Data Server

–RESTful API server

• Gadget Container JavaScript

–Core gadgets JavaScript environment

How to implement an OpenSocial server

69

Demo - Working with Shindig

http://incubator.apache.org/shindig/

70 (c)2008 Google

Agenda

• Google Maps

– What’s new!


• AJAX APIs


• Gadgets basics






71

Integrating Google App Engine with AJAX Apps

What is Google App Engine?

Google App Engine enables you to build webapplications on the same scalable systemsthat power Google applications.

• Currently in preview release• Can register for account

72

Demo - An OpenSocial/Gadget AppEngineDemo

http://code.google.com/apis/opensocial/articles/appengine-0.8.html

Learn more

http://code.google.com/

Contact info:

http://chrisschalk.com

Slides will be posted onslideshare.net!

Building AJAX Mashups with Google APIs

Technology