Gadgets and visualization API - technologies for Google Apps

Niv EfronYonatan Ben-Yaakov

Danny Feldman (TA)

Google TechnologiesGoogle uses a lot of web-related technologies in its productsWe also support and encourage good web technologies for developers worldwide:Open source projectsHosting open source project on Google CodeGoogle Summer of CodeGoogle Gears (browser offline capabilities)Googlers contributing to OSS: Linux, Subversion, GCCGoogle open technologies and APIsGoogle Maps APIGoogle Data APIGoogle Ajax APIGoogle Gadgets APIand many more (over 35 APIs)

What are Gadgets? 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 HostingGoogle Pages Hello World! ]]>

Examples of Google Gadgets

Where do Google Gadgets live?iGoogle homepageThird-party websitesGoogle Desktop (Windows, Mac OS X)Mac OS X DashboardWindows Vista SidebarIBM WebSphere Portal

iGoogle homepage

Third-party websiteshttp://gadgetryout.blogspot.comhttp://www.puertovallarta.net

Google Desktop

Mac OS X Dashboard

Instant Dashboard capabilitiesGoing from this:

Instant Dashboard capabilitiesto this:

Full application (gadget interaction)http://googlefinanceblog.blogspot.com/2007/10/api-gadgets-and-tabs-oh-my.html

Who writes gadgets?IndividualsIndependent contractors and contracting groupsProfessional developers who write gadgets for a livingTeenagers & hobbyists writing gadgets because theyre funBusinessesProvide useful content to users in gadgetsExtends branch reachDrives traffic when users click on links for more informationEx: news, sports, entertainment, pro blogs

Gadget technologyEasy to useLots of documentationLots of examplesVarious levels of complexity

iGoogle TutorialGoogles personalized homepage

Gadgets are openGadgets are open-source XMLDeveloper community worldwideEasy API: google gadgets api or http://www.google.com/apis/gadgets/

Hello world gadget

API servicesModulePrefsTitle, height, author, description, thumbnail, UserPrefsSaving stateFlash gadgetsWorking with remote content:RSS, text, XML

Gadgets in other placesGoogle desktopGoogle page creatorOther websites (syndication)More

Hosting&PublishingHostingGoogle Gadgets EditorGoogle codeGooglepagesYour own sitePublishingSubmitting to the directoryGetting people to use it

Advanced APIGadget-to-gadget communication:Read http://www.google.com/apis/gadgets/pubsub.htmlIts cool, yet problematic

Anatomy of a Gadget

hello world! ]]>

User-configurable preferencesGadget content

Gadget UserPrefsAllows users to configure your gadgetMultiple types:CheckboxesDropdownsText inputLists

Use hidden UserPrefs to store data inside your gadget

Creating a Gadget: Using the APIAnd moreSetPrefsGridDragMappletsAnalyticsDynamic HeightTabsMiniMessagesFlash

Creating a Gadget: Using the APIAdd tags to use our libraries

Tech Tip 1: Analytics & NumbersWeekly pageviews are displayed in the Google Gadgets for Your Page directory.http://www.google.com/ig/directory?synd=open&url=For more precise and detailed numbers, its a few lines of JavaScript

_IG_Analytics("UA-00000", "/mygadget");

Tech Tip 2: Embedding flash objectsBefore: After:Inconsistent behavior across browsers. Complex HTML.One line of JavaScript and cross-browser compatible

Tech Tip 3: Fetching Remote ContentFetching remote content is powerful, convenient, and easy!Text/HTML, XML, RSS/Atom feedsCached by default to prevent overloading serversBuilt-in RSS/Atom parser outputs in JSON

Tech Tip 3: Fetching Remote ContentThree 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, Authorper 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

Tech Tip 3: Fetching Remote Content

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('' + entry.Title + '' + '' + entry.Summary + ''); } _gel('container').innerHTML = html.join(''); }

// Fetch 3 entries from Google News Atom feed and include summaries _IG_FetchFeedAsJSON("http://news.google.com/?output=atom", callback, 3, true);

Tech Tip 4: Internationalize!Support multiple languages in a single gadgetIncrease success in other countriesSpecify supported languages in your gadget XML and iGoogle automatically loads the right one

Tech Tip 5: Storing StateExample: Simple Notes GadgetUser creates notes and saves them in iGoogleRemember users notes whenever coming back to the page.Let the user set a different background color for the gadget

Tech Tip 5: Storing State

function save() { var prefs = new _IG_Prefs(); prefs.set("text", _gel(note).value); } #container { background-color: __UP_color__; text-align: center; padding:6px; } __UP_text__ ]]>

Tech Tip 6: Caching External ResourcesFacts:Google caches all gadget XML filesGoogle 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, FlashHosting servers melt down because they cannot handle all the requestsSolution: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 ResourcesCaching images

Caching Flash

_gel("goImg").src = _IG_GetImageUrl("http://domainA.com/go.gif");

var cacheUrl = _IG_GetCachedUrl(http://mydomain.com/flashvideo.swf); _IG_EmbedFlash(cacheUrl, container, { width: 300, height: 250 });

Want to know more?Google Gadgets API Docs http://www.google.com/apis/gadgetsiGoogle http://www.google.com/igGoogle Gadgets For Your Webpage http://www.google.com/ig/directory?synd=openTop Gadget Authors http://www.google.com/ig/authorsDiscussion Group http://groups.google.com/group/Google-Gadgets-APIFAQ / Knowledge Base http://code.google.com/support/bin/topic.py?topic=10027Google Distribution Guidelines http://www.google.com/webmasters/gadgets/guidelines.html

Google Gadgets projects Your own ideasSomething you and your friends will useSomething cool (interesting data, slick visualization, usage of special technologies)Something sophisticated (interaction with server side, gadget interaction)

AdvantagesGoogle Gadgets platform is ready and easy to learnYou can have it with you at all time on your personal iGoogle pageYou can share with your friends and/or with the entire world

Ideas for projects university relatedRate a professor systemCourse materials (grades, slides, home-work reminders, etc.) Using external data sources (combining, optimizing, visualizing, etc):Public transportation wizardMovie gadgetsApartments for rentShows (concerts, etc.)iGoogle BandEach gadget is a musical instrument

scheduleMonday 12.5: Google Gadgets introductory talk + project ideasMonday 19.5: Gviz technologies + more project ideas Monday 2.6: student project ideas presentationsMonday 23.6: status: architecture + initial demosMonday 14.7: status 2Monday 11.8: final presentations

Workshop requirementsProposalProject idea, architecture, technologiesUI snapshotsFinal submissionA working gadget-based applicationCode (documented)Project page (will be part of the workshop wiki)Architecture, design, lessons learned

More project ideasTime 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 resultsTake off and landing-might be able to get feeds Music hit list-no feed but should be easy to find onlinePregnancy calculator/ followup / countdown-can be a multi tab gadget-see what clalit did and do it better TV listingPeriodic 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.