Developing Gadgets
description
Transcript of Developing Gadgets
Developing Gadgetsby Craig Raw
CTO Quirk eMarketing
Building gadgets is easy
Why gadgets?
Why gadgets?
• Easy to develop!
Why gadgets?
• Easy to develop!
• Write once, runs almost anywhere
Why gadgets?
• Easy to develop!
• Write once, runs almost anywhere
• Enables participation
Why gadgets?
• Easy to develop!
• Write once, runs almost anywhere
• Enables participation
• Traffic!
Standard web technologies
Standard web technologies
• HTML
Standard web technologies
• HTML
• Javascript
Standard web technologies
• HTML
• Javascript
• XML
Hello World Example
<?xml version="1.0" encoding="UTF-8" ?>
<Module>
<ModulePrefs title="hello world example" />
<Content type="html">
<![CDATA[
Hello, world!
]]>
</Content>
</Module>
Hello World Example
Anatomy of a Gadget
<?xml version="1.0" encoding="UTF-8" ?><Module> <ModulePrefs title="My First Gadget" description="This gadget prints hello world." author=”Craig Raw" author_email=”[email protected]"/> <UserPref name="Locations" datatype="list" /> <UserPref name="Color" datatype="string" /> <UserPref name="Toggle" datatype="bool" /> <Content type="html"> <![CDATA[ <b style="color: red">hello world!</b> ]]> </Content></Module>
Metadata
Anatomy of a Gadget
Anatomy of a Gadget
<?xml version="1.0" encoding="UTF-8" ?><Module> <ModulePrefs title="My First Gadget" description="This gadget prints hello world." author=”Craig Raw" author_email=”[email protected]"/> <UserPref name="Locations" datatype="list" /> <UserPref name="Color" datatype="string" /> <UserPref name="Toggle" datatype="bool" /> <Content type="html"> <![CDATA[ <b style="color: red">hello world!</b> ]]> </Content></Module>
Preferences
Anatomy of a Gadget
Anatomy of a Gadget
<?xml version="1.0" encoding="UTF-8" ?><Module> <ModulePrefs title="My First Gadget" description="This gadget prints hello world." author=”Craig Raw" author_email=”[email protected]"/> <UserPref name="Locations" datatype="list" /> <UserPref name="Color" datatype="string" /> <UserPref name="Toggle" datatype="bool" /> <Content type="html"> <![CDATA[ <b style="color: red">hello world!</b> ]]> </Content></Module>
HTML/Javascript
Developing
Developing
Use the Google Gadget Editor
Gadget URL
Testing
Testing
Use the Developer Gadget
Turn cachingoff!
Hosting
Hosting
• Place gadget anywhere Google can see (http://your.domain.com/gadget.xml)
Hosting
• Place gadget anywhere Google can see (http://your.domain.com/gadget.xml)
• Google can host your gadget (http://gadget-googlesa.googlecode.com/svn/trunk/hiv/hiv-tb.xml)
Hosting
• Place gadget anywhere Google can see (http://your.domain.com/gadget.xml)
• Google can host your gadget (http://gadget-googlesa.googlecode.com/svn/trunk/hiv/hiv-tb.xml)
• Add to the iGoogle Content Directory
Content<Content type="html"> <![CDATA[ … ]]></Content>
Content Types<Content type=“?”/>
Content Types<Content type=“html”> <![CDATA[ ]]></Content>
• HTML
Content Types<Content type=“url” href=“my.domain.com/mygadget.html”/>
• HTML• URL
Content Types<Content type=“html-inline”> <![CDATA[ ]]></Content>
• HTML• URL• Inline (Deprecated)
HTML
• Easier to use the gadget API
• Make remote AJAX calls
• Google caches
• Cross-gadget communication
URL
• No need for AJAX or Javascript magic
• Integration with your existing infrastructure
Using Javascript
<?xml version="1.0" encoding="UTF-8"?><Module><ModulePrefs title="Hello World Javascript"/><Content type="html"><![CDATA[ <script> function myFunction() { return "Hello <em>World</em>"; } document.write(myFunction()); </script>]]></Content></Module>
Sets <iframe>content
A More Advanced Example
Making remote Javascript calls
A More Advanced Example
Making remote Javascript calls
• _IG_FetchContent(url, func)
A More Advanced Example
Making remote Javascript calls
• _IG_FetchContent(url, func)
• _IG_FetchXmlContent(url, func)
A More Advanced Example
Making remote Javascript calls
• _IG_FetchContent(url, func)
• _IG_FetchXmlContent(url, func)
•_IG_FetchFeedAsJSON(url, func, num, summary)
A More Advanced Example<div id="container"></div><script> function callback(response) { // Iterate through each entry and generate HTML 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>
User preferences
Personal settings for every user
User preferences
Personal settings for every user
• Store a string, boolean, list, hidden etc
User preferences
Personal settings for every user
• Store a string, boolean, list, hidden etc
• Replaces __UP_name_ in your code
User preferences
Personal settings for every user
• Store a string, boolean, list, hidden etc
• Replaces __UP_name_ in your code
• Can also use Prefs API
User preferences
Personal settings for every user
• Store a string, boolean, list, hidden etc
• Replaces __UP_name_ in your code
• Can also use Prefs API
• Not available for syndicated gadgets
User preferences<Module> <ModulePrefs> <Require feature="setprefs"/> <UserPref name=”number" default_value=”3" /> </ModulePrefs> <Content type="html"><![CDATA[<div id="container"></div><script> function callback(response) { … }
var prefs = new _IG_Prefs(); _IG_FetchFeedAsJSON("http://news.google.com/?output=atom", callback, prefs.getInt(”number"), true);</script>
Required library
Get stored preference
Tabs
Tabs<Module> <ModulePrefs> <Require feature="tabs"/> </ModulePrefs>
<Content type="html"><![CDATA[<script>
var tabs = new _IG_Tabs(__MODULE_ID__, "HIV");
tabs.addTab("HIV", {contentContainer: _gel("hivId"),callback: getContent,tooltip: "HIV Info"});
tabs.addTab("TB", {contentContainer: _gel("tbId"),callback: getContent,tooltip: "Tuberculosis"});
</script>
Required library
Analytics<Module> <ModulePrefs> <Require feature=”analytics"/> </ModulePrefs> <Content type="html"><![CDATA[ <script> _IG_Analytics("UA-000000-0", "/mygadget"); </script>
Path to gadget
Internationalisation
• Support multiple languages in a single gadget • The language can change depending on user
• Google automatically uses the right language
• Increase your audience reach
• A default language is also supported
Internationalisation
<?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>
File per language
Internationalisation
<?xml version="1.0" encoding="UTF-8" ?><messagebundle> <msg name=“title”>Title</msg> <msg name=“hello”>Hello, World!</msg> </messagebundle>
<?xml version="1.0" encoding="UTF-8" ?> <messagebundle> <msg name=“title”> 題名 </msg> <msg name=“hello”>こんにちは世界 </msg> </messagebundle>
en.xml
ja.xml
Caching external resources
Gadgets on iGoogle receive lots of traffic
Caching external resources
Gadgets on iGoogle receive lots of traffic
• Google caches all gadget XML files
Caching external resources
Gadgets on iGoogle receive lots of traffic
• Google caches all gadget XML files
• Google caches all _IG_Fetch…() requests
Caching external resources
Gadgets on iGoogle receive lots of traffic
• Google caches all gadget XML files
• Google caches all _IG_Fetch…() requests
• Use the Developer Gadget to disable caching
Caching external resources
Remaining problem: caching images, Flash
Caching external resources
Remaining problem: caching images, Flash
• Use API methods to cache all embedded resources on iGoogle
Caching external resources
Remaining problem: caching images, Flash
• 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
Caching external resources
Remaining problem: caching images, Flash
• Use API methods to cache all embedded resources on iGoogle
<img id="goImg" src="" width=100 height=150 /><script> _gel("goImg").src = _IG_GetImageUrl("http://xyz.com/go.gif");</script>
<div id="container"></div><script> var cacheUrl = _IG_GetCachedUrl(‘http://xyz.com/flashvideo.swf’); _IG_EmbedFlash(cacheUrl, ‘container’, { width: 300, height: 250 });</script>
Gadget-to-Gadget Communication
Gadgets on iGoogle can communicate witheach other
Gadget-to-Gadget Communication
Gadgets on iGoogle can communicate witheach other
• Via user preferences
Gadget-to-Gadget Communication
Gadgets on iGoogle can communicate witheach other
• Via user preferences
• One gadget publishes, the other subscribes
Gadget-to-Gadget Communication
Gadgets on iGoogle can communicate witheach other
• Via user preferences
• One gadget publishes, the other subscribes
• Pub/Sub
Gadget-to-Gadget Communication
Gadgets on iGoogle can communicate witheach other
• Via user preferences
• One gadget publishes, the other subscribes
• Pub/Sub
• Only HTML type, non-syndicated gadgets
Gadget-to-Gadget Communication
Gadgets agree share user preference name
<UserPref name="test" display_name="Message" default_value="Bonjour Monde” publish="true" />
<UserPref name="test" display_name="Message" default_value="Hello World" listen="true" on_change="updateMessage" />
Publisher
Subscriber
Programming Tips
Programming Tips
• Start small
Programming Tips
• Start small
• Study existing gadgets
Programming Tips
• Start small
• Study existing gadgets
• Use Firebug (http://www.getfirebug.com)
Programming Tips
• Start small
• Study existing gadgets
• Use Firebug (http://www.getfirebug.com) • Keep it light
Programming Tips
• Start small
• Study existing gadgets
• Use Firebug (http://www.getfirebug.com) • Keep it light
• Test often!
Where can I put my gadget?
Where can I put my gadget?
• Google Content Directory
Where can I put my gadget?
• Google Content Directory
• Google Code
Where can I put my gadget?
• Google Content Directory
• Google Code
• Your own server/service
Publishing your gadget
Publish to Google Content Directory
Publishing your gadget
Publish to Google Content Directory
Preparing for Publication
Preparing for Publication
• Try all combinations of UserPref values
Preparing for Publication
• Try all combinations of UserPref values
• Test different widths and heights
Preparing for Publication
Preparing for Publication
• Try all combinations of UserPref values
• Test different widths and heights
• Test different environments
Preparing for Publication
• Try all combinations of UserPref values
• Test different widths and heights
• Test different environments
• Test different browsers
Preparing for Publication
• Try all combinations of UserPref values
• Test different widths and heights
• Test different environments
• Test different browsers
• Include ModulePref metadata
When you’re ready…
Submitting your gadget for publication
When you’re ready…
• Via Google Gadget Editor
Submitting your gadget for publication
When you’re ready…
• Via Google Gadget Editor
• Submit directly to Content Directory
Submitting your gadget for publication
Syndicating
Anyone can put your gadget on their site
Syndicating
Anyone can put your gadget on their site
• No user preferences
Syndicating
Anyone can put your gadget on their site
• No user preferences
• Variable width and height
Syndicating
Anyone can put your gadget on their site
• No user preferences
• Variable width and height
• Shown in an <iframe>
Syndicating
GGE -> File -> Publish -> Add to a webpage
Syndicating
Javascript include on webpage
<script src="http://www.gmodules.com/ig/ifr? url=http://brandseye.com/…/brandseye.xml& synd=open& w=400& h=200& title=BrandsEye+Recent+Mentions& border=%23ffffff%7C3px%2C1px+solid+%23999999& output=js"></script>
What’s coming
iGoogle V2
What’s coming
iGoogle V2
• OpenSocial API
What’s coming
iGoogle V2
• OpenSocial API
• Canvas (maximised) view
What’s coming
iGoogle V2
• OpenSocial API
• Canvas (maximised) view
• http://www.google.com/ig/sandbox
Want to know more?
Want to know more?
• Google Gadgets API Docs (http://www.google.com/apis/gadgets)
Want to know more?
• Google Gadgets API Docs (http://www.google.com/apis/gadgets)
• Discussion Group (http://groups.google.com/group/Google-Gadgets-API)
Want to know more?
• Google Gadgets API Docs (http://www.google.com/apis/gadgets)
• Discussion Group (http://groups.google.com/group/Google-Gadgets-API)
• Google Gadget Guidelines (http://www.google.com/webmasters/gadgets/guidelines.html)
Thank you
Questions?