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="my.email@gmail.com"

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.