Upload
chris-schalk
View
1.202
Download
2
Embed Size (px)
DESCRIPTION
This was an overview presentation given at AjaxWorld West 08 on several popular and extremely mashable APIs and technologies.
Citation preview
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
– 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
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
• …
7 (c)2008 Google
Agenda
• Google Maps
– What’s new!
• Flash Maps, Static images, Panoramio, Wikipedia, Walking directions, clientlocation
• 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
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
Google AJAX APIs Architecture
RESTful Data Access LayerAJAXAPIs
• Command Line Access• Server-to-Server Access• Non-JavaScript• JSON output
12 (c)2008 Google
Google AJAX APIs Architecture
AJAXAPIs
• Low level JavaScript Access• Allows for maximum UI flexibility• Requires custom coding• JSON parsing not needed
JavaScript Runtime Layer
13 (c)2008 Google
Google AJAX APIs Architecture
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
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.
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
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
Building The Application
• 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
30 (c)2008 Google
Building The Application
• 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
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>
32 (c)2008 Google
Building The Application
Getting Started - The HTML and CSS
Tabs
TabView
DetailView
SearchControl
33 (c)2008 Google
Building The Application
• 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
Building The Application
• 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
Building The Application
• 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); } }};
37 (c)2008 Google
Building The Application
• Override the default CSS class rules
• Base Structure
The Google AJAX Feed API - FeedControl
<!-- One .gf-result per entry -->
<div class="gf-result"> <!-- Hyperlinked Entry Title --> <div class="gf-title"> <a class="gf-title"></a> </div> <!-- Author (Only if entry.author is present --> <div class="gf-author"></div> <!-- Published Date (Only if entry.publishedDate is present --> <div class="gf-relativePublishedDate"></div> <!-- Snippet entry.contentSnippet --> <div class="gf-snippet"></div> </div>
38 (c)2008 Google
Building The Application
• Override the default CSS class rules
The Google AJAX Feed API - FeedControl
#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;}
40 (c)2008 Google
Building The Application
• 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'] }, .... ];
42 (c)2008 Google
Building The Application
• 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);
46 (c)2008 Google
Building The Application
• Detecting Language
– Load feed and then detect language of each entry
– If not equal to CurrentLocale, add Translate icon
The Google AJAX Language API - Translation
{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
Building The Application
• Translating an entry
– Translate icon triggers translation of title and snippet
– Callback will replace contents appropriately
– Icon will toggle back and forth
The Google AJAX Language API - Translation
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!
• Flash Maps, Static images, Panoramio, Wikipedia, Walking directions, clientlocation
• 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
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
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!
• Flash Maps, Static images, Panoramio, Wikipedia, Walking directions, clientlocation
• 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
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
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
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
70 (c)2008 Google
Agenda
• Google Maps
– What’s new!
• Flash Maps, Static images, Panoramio, Wikipedia, Walking directions, clientlocation
• 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
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!