1 gadgets and visualization api - technologies for google apps niv efron yonatan ben-ya’akov danny...
TRANSCRIPT
1
Gadgets and visualization API - technologies for Google Apps
Niv EfronYonatan Ben-Ya’akov
Danny Feldman (TA)
2
Google Technologies
• Google uses a lot of web-related technologies in its products
• We also support and encourage good web technologies for developers worldwide:
– Open source projects
• Hosting open source project on Google Code
• Google Summer of Code
• Google Gears (browser offline capabilities)
• Googlers contributing to OSS: Linux, Subversion, GCC
– Google open technologies and APIs
• Google Maps API
• Google Data API
• Google Ajax API
• Google Gadgets API
• and many more … (over 35 APIs)
3
• HTML inside an XML wrapper
• Mini web pages: HTML, JavaScript, CSS, Flash, AJAX
• Anything you can do on a web page, you can do inside a gadget
• Write once, runs everywhere
• Hundreds of thousands of pageviews each week
• Free hosting and bandwidth!
– Google Code Hosting
– Google Pages
What are Gadgets?
<?xml version="1.0" encoding="UTF-8" ?> <Module> <ModulePrefs title=“Hello World" /> <Content type="html”><![CDATA[ <b>Hello World!</b> ]]></Content> </Module>
4
Examples of Google Gadgets
5
Where do Google Gadgets live?
• iGoogle homepage
• Third-party websites
• Google Desktop (Windows, Mac OS X)
• Mac OS X Dashboard
• Windows Vista Sidebar
• IBM WebSphere Portal
6
iGoogle homepage…
7
Third-party websites…
http://gadgetryout.blogspot.com
http://www.puertovallarta.net
8
Google Desktop…
9
Mac OS X Dashboard…
10
Instant Dashboard capabilities
• Going from this:
11
Instant Dashboard capabilities
• to this:
12
Full application (gadget interaction)
• http://googlefinanceblog.blogspot.com/2007/10/api-gadgets-and-tabs-oh-my.html
13
Who writes gadgets?
• Individuals
– Independent contractors and contracting groups
– Professional developers who write gadgets for a living
– Teenagers & hobbyists writing gadgets because they’re fun
• Businesses
– Provide useful content to users in gadgets
– Extends branch reach
– Drives traffic when users click on links for more information
– Ex: news, sports, entertainment, pro blogs
14
Gadget technology
• Easy to use
• Lots of documentation
• Lots of examples
• Various levels of complexity
15
iGoogle Tutorial• Google’s personalized homepage
16
Gadgets are open
• Gadgets are open-source XML
• Developer community worldwide
• Easy API: google “gadgets api” or http://www.google.com/apis/gadgets/
17
“Hello world” gadget
• <?xml version="1.0" encoding="UTF-8" ?> <Module>
<ModulePrefs title="hello world example" /> <Content type="html">
<![CDATA[ Hello, world! ]]> </Content>
</Module>
18
API services
• ModulePrefs
– Title, height, author, description, thumbnail, …
• UserPrefs
• Saving state
• Flash gadgets
• Working with remote content:
– RSS, text, XML
19
Gadgets in other places
• Google desktop
• Google page creator
• Other websites (syndication)
• More…
20
Hosting&Publishing
• Hosting
– Google Gadgets Editor
– Google code
– Googlepages
– Your own site
• Publishing
– Submitting to the directory
– Getting people to use it
21
Advanced API
• Gadget-to-gadget communication:
– Read http://www.google.com/apis/gadgets/pubsub.html
• It’s cool, yet problematic…
22
<?xml version="1.0" encoding="UTF-8" ?>
<Module>
<ModulePrefs title="My First Gadget"
description="This gadget prints hello world."
height="50"
author="Daniel L."
author_email="[email protected]"
author_location="Madrid, Spain"
category="tools" />
<UserPref name="Color" datatype="string" default_value="red" />
<UserPref name="Toggle" datatype="bool" default_value="true" />
<UserPref name="Locations" datatype="list" />
<Content type="html"><![CDATA[
<b style="color: red">hello world!</b>
]]></Content>
</Module>
Anatomy of a Gadget
User-configurable preferences
Gadget content
Gadget directory meta-data
23
Gadget UserPrefs
• Allows users to configure your gadget
• Multiple types:
– Checkboxes
– Dropdowns
– Text input
– Lists
• Use “hidden” UserPrefs to store data inside your gadget
<UserPref name=“saved” datatype=“hidden” default_value=“0” />
24
Creating a Gadget: Using the API
And more…
• SetPrefs
• Grid
• Drag
• Mapplets
Analytics
Dynamic HeightTabs
MiniMessages
Flash
25
Creating a Gadget: Using the API
• Add <Require feature=“…”/> tags to use our libraries
<?xml version="1.0" encoding="UTF-8" ?><Module> <ModulePrefs …> <Require feature="tabs"/> <Require feature="flash"/> <Require feature="dynamic-height"/> <Require feature="minimessage"/> <Require feature="analytics"/> <Require feature="setprefs"/> <Require feature="drag"/> <Require feature="grid"/> <Require feature="sharedmap"/> </ModulePrefs> <Content…/></Module>
26
Tech Tip 1: Analytics & Numbers
• Weekly pageviews are displayed in the Google Gadgets for Your Page directory.
http://www.google.com/ig/directory?synd=open&url=<gadget_url>
• For more precise and detailed numbers, it’s a few lines of JavaScript
<ModulePrefs …> <Require feature="analytics"/></ModulePrefs>…<script> _IG_Analytics("UA-00000", "/mygadget");</script>
27
Tech Tip 2: Embedding flash objects
Before: <OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"WIDTH="550" HEIGHT="400" id="myMovieName"><PARAM NAME=movie VALUE=”http://xyz.com/flashvideo.swf"><PARAM NAME=quality VALUE=high><PARAM NAME=bgcolor VALUE=#FFFFFF><EMBED src=”http://xyz.com/flashvideo.swf" quality=high bgcolor=#FFFFFF WIDTH="550" HEIGHT="400"NAME="myMovieName" ALIGN="" TYPE="application/x-shockwave-flash"PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer"></EMBED></OBJECT>
_IG_EmbedFlash(‘http://xyz.com/flashvideo.swf’, container, { width: 550, height: 400, });
After:
Inconsistent behavior across browsers. Complex HTML.
One line of JavaScript and cross-browser compatible
28
Tech Tip 3: Fetching Remote Content
Fetching remote content is powerful, convenient, and easy!
– Text/HTML, XML, RSS/Atom feeds
– Cached by default to prevent overloading servers
– Built-in RSS/Atom parser outputs in JSON
29
Tech Tip 3: Fetching Remote Content
Three methods available:
• _IG_FetchFeedAsJSON(url, callback, entries, summaries)Fetch RSS/Atom feeds. Returns simple JSON object:
– Useful when you need general data from the feed:
• per feed: URL, Title, Description, Link, Author
• per entry: Title, Link, Summary, Date
• _IG_FetchXmlContent(url, callback)Fetch XML content. Returns response as XML object.
– Useful when fetching XML feeds with no standard format.
– Extract any data that you need.
• _IG_FetchContent(url, callback)Fetch content. Returns response as text.
– Useful when fetching and screen-scraping HTML from the response
30
Tech Tip 3: Fetching Remote Content
<div id="container"></div>
<script>
function callback(response) {
// Iterate through each entry and generate HTML to be inserted
var html = new Array();
for (var n = 0; n < response.Entry.length; n++) {
var entry = response.Entry[n];
html.push('<a href="' + entry.Link + '">' + entry.Title + '</a>' +
'<div>' + entry.Summary + '</div>');
}
_gel('container').innerHTML = html.join('<hr>');
}
// Fetch 3 entries from Google News Atom feed and include summaries
_IG_FetchFeedAsJSON("http://news.google.com/?output=atom", callback, 3, true);
</script>
<?xml version="1.0" encoding="UTF-8"?><feed version="0.3" xml:lang="en" xmlns="http://purl.org/atom/ns#"> <generator>NFE/1.0</generator> <title>Google News</title> …</feed>
http://news.google.com?output=atom
31
Tech Tip 4: Internationalize!
• Support multiple languages in a single gadget
• Increase success in other countries
• Specify supported languages in your gadget XML and iGoogle automatically loads the right one
Hello World
<?xml version="1.0" encoding="UTF-8" ?> <Module> <ModulePrefs title=“__MSG_title__"> <Locale lang=“en” messages=“en.xml” /> <Locale lang=“ja” messages=“ja.xml” /> </ModulePrefs> <Content type="html"><![CDATA[ __MSG_hello__ ]]></Content> </Module>
hello.xml<?xml version="1.0" encoding="UTF-8" ?> <messagebundle> <msg name=“title”>Title</msg> <msg name=“hello”>Hello, World!</msg> </messagebundle>
en.xml
<?xml version="1.0" encoding="UTF-8" ?>
<messagebundle> <msg name=“title”> 題名 </msg> <msg name=“hello”> こんにちは世界 </msg> </messagebundle>
ja.xml
32
Tech Tip 5: Storing State
• Example: Simple Notes Gadget
• User creates notes and saves them in iGoogle
• Remember user’s notes whenever coming back to the page.
• Let the user set a different background color for the gadget
33
Tech Tip 5: Storing State
<?xml version="1.0" encoding="UTF-8" ?><Module> <ModulePrefs title="Note" height="80"> <Require feature="setprefs"/> </ModulePrefs> <UserPref name="text" default_value="Type text here.” datatype="hidden"/> <UserPref name="color" display_name="Color”
default_value="#ffffcc" datatype="enum"> <EnumValue display_value="Yellow" value="#ffffcc"/> <EnumValue display_value="Blue" value="#e5ecf9"/> <EnumValue display_value="Green" value="#e0eee0"/>
</UserPref> <Content type="html"><![CDATA[ <script> function save() { var prefs = new _IG_Prefs(); prefs.set("text", _gel(‘note’).value); } </script> <style> #container { background-color: __UP_color__; text-align: center;
padding:6px; } </style> <div id=container> <div><textarea id="note"/>__UP_text__</textarea></div> <input type="button" value="Save Note" onclick="save()" /> </div>]]></Content></Module>
34
Tech Tip 6: Caching External Resources
• Facts:
– Google caches all gadget XML files
– Google caches all requests going through_IG_Fetch…() methods.
– Gadgets receive tons of traffic(Date & Time gadget currently at 156M pvs/week)
• Remaining Problem:
– Gadgets often embed external resources hosted on third-party servers, e.g. images, Flash
– Hosting servers melt down because they cannot handle all the requests
• Solution:
– Use API methods to cache all embedded resources on iGoogle• _IG_GetImage(url) - Returns HTML image fetched from the cache
• _IG_GetImageUrl(url) - Returns URL used to fetch the image via cache
• _IG_GetCachedUrl(url) - Returns URL used to fetch the resource via cache
35
Tech Tip 6: Caching External Resources
Caching images
Caching Flash
<img id="goImg" src="" width=100 height=150 /><script> _gel("goImg").src = _IG_GetImageUrl("http://domainA.com/go.gif");</script>
<div id="container"></div><script> var cacheUrl = _IG_GetCachedUrl(‘http://mydomain.com/flashvideo.swf’); _IG_EmbedFlash(cacheUrl, ‘container’, { width: 300, height: 250 });</script>
36
Want to know more?
• Google Gadgets API Docshttp://www.google.com/apis/gadgets
• iGooglehttp://www.google.com/ig
• Google Gadgets For Your Webpagehttp://www.google.com/ig/directory?synd=open
• Top Gadget Authorshttp://www.google.com/ig/authors
• Discussion Grouphttp://groups.google.com/group/Google-Gadgets-API
• FAQ / Knowledge Basehttp://code.google.com/support/bin/topic.py?topic=10027
• Google Distribution Guidelineshttp://www.google.com/webmasters/gadgets/guidelines.html
37
Google Gadgets projects
• Your own ideas
• Something you and your friends will use
• Something cool (interesting data, slick visualization, usage of special technologies)
• Something sophisticated (interaction with server side, gadget interaction)
– Advantages
• Google Gadgets’ platform is ready and easy to learn
• You can have it with you at all time on your personal iGoogle page
• You can share with your friends and/or with the entire world
38
Ideas for projects
• university related• Rate a professor system
• Course materials (grades, slides, home-work reminders, etc.)
• Using external data sources (combining, optimizing, visualizing, etc):
• Public transportation wizard
• Movie gadgets
• Apartments for rent
• Shows (concerts, etc.)
– iGoogle Band
• Each gadget is a musical instrument
39
schedule
• Monday 12.5: Google Gadgets introductory talk + project ideas
• Monday 19.5: Gviz technologies + more project ideas
• Monday 2.6: student project ideas presentations
• Monday 23.6: status: architecture + initial demos
• Monday 14.7: status 2
• Monday 11.8: final presentations
40
Workshop requirements
• Proposal
– Project idea, architecture, technologies
– UI snapshots
• Final submission
– A working gadget-based application
– Code (documented)
– Project page (will be part of the workshop wiki)
• Architecture, design, lessons learned
41
More project ideas
• Time Zone gadget-no feed but should be easy to find online
• Currency exchange gadget-no feed
• Show times gadget - I've already got a feed for you from seret.co.il
• Any major sports results
• Take off and landing-might be able to get feeds
• Music hit list-no feed but should be easy to find online
• Pregnancy calculator/ followup / countdown-can be a multi tab gadget-see what clalit did and do it better
• TV listing
• Periodic table- no feed necessary-The legend tells that a similar gadget at the states got 3 millions users.
• Math equations-gadgets- enter data and gets- shapes diameter, area , quadratic equation etc.
• Google Israel marketing department can help with creating some connections to get feeds.