Gadgets and visualization API - technologies for Google Apps

Document Sample
Gadgets and visualization API - technologies for Google Apps Powered By Docstoc
					Gadgets and visualization API technologies for Google Apps
Niv Efron Yonatan Ben-Ya‟akov Danny Feldman (TA)


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)

What are Gadgets?
• HTML inside an XML wrapper
<?xml version="1.0" encoding="UTF-8" ?> <Module> <ModulePrefs title=“Hello World" /> <Content type="html”><![CDATA[ <b>Hello World!</b> ]]></Content> </Module>

• • • • •

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


Examples of Google Gadgets


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


iGoogle homepage…


Third-party websites…

Google Desktop…


Mac OS X Dashboard…


Instant Dashboard capabilities
• Going from this:


Instant Dashboard capabilities
• to this:


Full application (gadget interaction)



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


Gadget technology
• Easy to use • Lots of documentation • Lots of examples • Various levels of complexity


iGoogle Tutorial
• Google‟s personalized homepage


Gadgets are open
• Gadgets are open-source XML • Developer community worldwide • Easy API: google “gadgets api” or


“Hello world” gadget
• <?xml version="1.0" encoding="UTF-8" ?>
<Module> <ModulePrefs title="hello world example" /> <Content type="html"> <![CDATA[ Hello, world! ]]> </Content> </Module>


API services
• ModulePrefs
– Title, height, author, description, thumbnail, …

• UserPrefs • Saving state • Flash gadgets • Working with remote content:
– RSS, text, XML


Gadgets in other places
• Google desktop • Google page creator • Other websites (syndication) • More…


• Hosting
– Google Gadgets Editor – Google code – Googlepages – Your own site

• Publishing
– Submitting to the directory
– Getting people to use it


Advanced API
• Gadget-to-gadget communication:
– Read

• It‟s cool, yet problematic…


Anatomy of a Gadget
<?xml version="1.0" encoding="UTF-8" ?> <Module> <ModulePrefs title="My First Gadget" description="This gadget prints hello world." height="50" author="Daniel L." Gadget directory meta-data

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> Gadget content User-configurable preferences


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” />


Creating a Gadget: Using the API
Tabs Flash

Dynamic Height


Analytics And more… • SetPrefs • Grid • Drag • Mapplets


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>


Tech Tip 1: Analytics & Numbers
• Weekly pageviews are displayed in the Google Gadgets for Your Page directory.<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>

Tech Tip 2: Embedding flash objects
<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase=",0,40,0" WIDTH="550" HEIGHT="400" id="myMovieName"><PARAM NAME=movie VALUE=”"><PARAM NAME=quality VALUE=high><PARAM NAME=bgcolor VALUE=#FFFFFF><EMBED src=”" quality=high bgcolor=#FFFFFF WIDTH="550" HEIGHT="400" NAME="myMovieName" ALIGN="" TYPE="application/x-shockwave-flash" PLUGINSPAGE=""></EMBED> </OBJECT>

Inconsistent behavior across browsers. Complex HTML.


_IG_EmbedFlash(„‟, container, { width: 550, height: 400, });

One line of JavaScript and cross-browser compatible

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


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

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("", callback, 3, true); </script>
<?xml version="1.0" encoding="UTF-8"?> <feed version="0.3" xml:lang="en" xmlns=""> <generator>NFE/1.0</generator> <title>Google News</title> … </feed>


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
en.xml hello.xml <?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 World

<?xml version="1.0" encoding="UTF-8" ?> <messagebundle> <msg name=“title”>Title</msg> <msg name=“hello”>Hello, World!</msg> </messagebundle>

ja.xml <?xml version="1.0" encoding="UTF-8" ?> <messagebundle> <msg name=“title”>題名</msg> <msg name=“hello”>こんにちは世界</msg> </messagebundle>

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


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>

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


Tech Tip 6: Caching External Resources
Caching images
<img id="goImg" src="" width=100 height=150 /> <script> _gel("goImg").src = _IG_GetImageUrl(""); </script>

Caching Flash
<div id="container"></div> <script> var cacheUrl = _IG_GetCachedUrl(„‟); _IG_EmbedFlash(cacheUrl, „container‟, { width: 300, height: 250 }); </script>


Want to know more?
• Google Gadgets API Docs

• iGoogle

• Google Gadgets For Your Webpage

• Top Gadget Authors

• Discussion Group

• FAQ / Knowledge Base

• Google Distribution Guidelines


Google Gadgets projects
• Your own ideas
• Something you and your friends will use • Something cool (interesting data, slick visualization, usage of special

• Something sophisticated (interaction with server side, gadget

– 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


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


• 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


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


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 • 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. etc.

• Math equations-gadgets- enter data and gets- shapes diameter, area , quadratic equation • Google Israel marketing department can help with creating some connections to get feeds.


Shared By: