Developing Gadgets

105
Developing Gadgets by Craig Raw CTO Quirk eMarketing

description

A presentation by Craig Raw on developing gadgets.

Transcript of Developing Gadgets

Page 1: Developing Gadgets

Developing Gadgetsby Craig Raw

CTO Quirk eMarketing

Page 2: Developing Gadgets

Building gadgets is easy

Page 3: Developing Gadgets

Why gadgets?

Page 4: Developing Gadgets

Why gadgets?

• Easy to develop!

Page 5: Developing Gadgets

Why gadgets?

• Easy to develop!

• Write once, runs almost anywhere

Page 6: Developing Gadgets

Why gadgets?

• Easy to develop!

• Write once, runs almost anywhere

• Enables participation

Page 7: Developing Gadgets

Why gadgets?

• Easy to develop!

• Write once, runs almost anywhere

• Enables participation

• Traffic!

Page 8: Developing Gadgets

Standard web technologies

Page 9: Developing Gadgets

Standard web technologies

• HTML

Page 10: Developing Gadgets

Standard web technologies

• HTML

• Javascript

Page 11: Developing Gadgets

Standard web technologies

• HTML

• Javascript

• XML

Page 12: Developing Gadgets

Hello World Example

<?xml version="1.0" encoding="UTF-8" ?>

<Module>

<ModulePrefs title="hello world example" />

<Content type="html">

<![CDATA[

Hello, world!

]]>

</Content>

</Module>

Page 13: Developing Gadgets

Hello World Example

Page 14: Developing Gadgets

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

Page 15: Developing Gadgets

Anatomy of a Gadget

Page 16: Developing Gadgets

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

Page 17: Developing Gadgets

Anatomy of a Gadget

Page 18: Developing Gadgets

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

Page 19: Developing Gadgets

Developing

Page 20: Developing Gadgets

Developing

Use the Google Gadget Editor

Gadget URL

Page 21: Developing Gadgets

Testing

Page 22: Developing Gadgets

Testing

Use the Developer Gadget

Turn cachingoff!

Page 23: Developing Gadgets

Hosting

Page 24: Developing Gadgets

Hosting

• Place gadget anywhere Google can see (http://your.domain.com/gadget.xml)

Page 25: Developing Gadgets

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)

Page 26: Developing Gadgets

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

Page 27: Developing Gadgets

Content<Content type="html"> <![CDATA[ … ]]></Content>

Page 28: Developing Gadgets

Content Types<Content type=“?”/>

Page 29: Developing Gadgets

Content Types<Content type=“html”> <![CDATA[ ]]></Content>

• HTML

Page 30: Developing Gadgets

Content Types<Content type=“url” href=“my.domain.com/mygadget.html”/>

• HTML• URL

Page 31: Developing Gadgets

Content Types<Content type=“html-inline”> <![CDATA[ ]]></Content>

• HTML• URL• Inline (Deprecated)

Page 32: Developing Gadgets

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

Page 33: Developing Gadgets

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

Page 34: Developing Gadgets

A More Advanced Example

Making remote Javascript calls

Page 35: Developing Gadgets

A More Advanced Example

Making remote Javascript calls

• _IG_FetchContent(url, func)

Page 36: Developing Gadgets

A More Advanced Example

Making remote Javascript calls

• _IG_FetchContent(url, func)

• _IG_FetchXmlContent(url, func)

Page 37: Developing Gadgets

A More Advanced Example

Making remote Javascript calls

• _IG_FetchContent(url, func)

• _IG_FetchXmlContent(url, func)

•_IG_FetchFeedAsJSON(url, func, num, summary)

Page 38: Developing Gadgets

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>

Page 39: Developing Gadgets

User preferences

Personal settings for every user

Page 40: Developing Gadgets

User preferences

Personal settings for every user

• Store a string, boolean, list, hidden etc

Page 41: Developing Gadgets

User preferences

Personal settings for every user

• Store a string, boolean, list, hidden etc

• Replaces __UP_name_ in your code

Page 42: Developing Gadgets

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

Page 43: Developing Gadgets

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

Page 44: Developing 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

Page 45: Developing Gadgets

Tabs

Page 46: Developing Gadgets

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

Page 47: Developing Gadgets

Analytics<Module> <ModulePrefs> <Require feature=”analytics"/> </ModulePrefs> <Content type="html"><![CDATA[ <script> _IG_Analytics("UA-000000-0", "/mygadget"); </script>

Path to gadget

Page 48: Developing Gadgets

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

Page 49: Developing Gadgets

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

Page 50: Developing Gadgets

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

Page 51: Developing Gadgets

Caching external resources

Gadgets on iGoogle receive lots of traffic

Page 52: Developing Gadgets

Caching external resources

Gadgets on iGoogle receive lots of traffic

• Google caches all gadget XML files

Page 53: Developing Gadgets

Caching external resources

Gadgets on iGoogle receive lots of traffic

• Google caches all gadget XML files

• Google caches all _IG_Fetch…() requests

Page 54: Developing Gadgets

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

Page 55: Developing Gadgets

Caching external resources

Remaining problem: caching images, Flash

Page 56: Developing Gadgets

Caching external resources

Remaining problem: caching images, Flash

• Use API methods to cache all embedded resources on iGoogle

Page 57: Developing Gadgets

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

Page 58: Developing Gadgets

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>

Page 59: Developing Gadgets

Gadget-to-Gadget Communication

Gadgets on iGoogle can communicate witheach other

Page 60: Developing Gadgets

Gadget-to-Gadget Communication

Gadgets on iGoogle can communicate witheach other

• Via user preferences

Page 61: Developing Gadgets

Gadget-to-Gadget Communication

Gadgets on iGoogle can communicate witheach other

• Via user preferences

• One gadget publishes, the other subscribes

Page 62: Developing Gadgets

Gadget-to-Gadget Communication

Gadgets on iGoogle can communicate witheach other

• Via user preferences

• One gadget publishes, the other subscribes

• Pub/Sub

Page 63: Developing Gadgets

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

Page 64: Developing 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

Page 65: Developing Gadgets

Programming Tips

Page 66: Developing Gadgets

Programming Tips

• Start small

Page 67: Developing Gadgets

Programming Tips

• Start small

• Study existing gadgets

Page 68: Developing Gadgets

Programming Tips

• Start small

• Study existing gadgets

• Use Firebug (http://www.getfirebug.com)

Page 69: Developing Gadgets

Programming Tips

• Start small

• Study existing gadgets

• Use Firebug (http://www.getfirebug.com) • Keep it light

Page 70: Developing Gadgets

Programming Tips

• Start small

• Study existing gadgets

• Use Firebug (http://www.getfirebug.com) • Keep it light

• Test often!

Page 71: Developing Gadgets

Where can I put my gadget?

Page 72: Developing Gadgets

Where can I put my gadget?

• Google Content Directory

Page 73: Developing Gadgets

Where can I put my gadget?

• Google Content Directory

• Google Code

Page 74: Developing Gadgets

Where can I put my gadget?

• Google Content Directory

• Google Code

• Your own server/service

Page 75: Developing Gadgets

Publishing your gadget

Publish to Google Content Directory

Page 76: Developing Gadgets

Publishing your gadget

Publish to Google Content Directory

Page 77: Developing Gadgets

Preparing for Publication

Page 78: Developing Gadgets

Preparing for Publication

• Try all combinations of UserPref values

Page 79: Developing Gadgets

Preparing for Publication

• Try all combinations of UserPref values

• Test different widths and heights

Page 80: Developing Gadgets

Preparing for Publication

Page 81: Developing Gadgets

Preparing for Publication

• Try all combinations of UserPref values

• Test different widths and heights

• Test different environments

Page 82: Developing Gadgets

Preparing for Publication

• Try all combinations of UserPref values

• Test different widths and heights

• Test different environments

• Test different browsers

Page 83: Developing Gadgets

Preparing for Publication

• Try all combinations of UserPref values

• Test different widths and heights

• Test different environments

• Test different browsers

• Include ModulePref metadata

Page 84: Developing Gadgets

When you’re ready…

Submitting your gadget for publication

Page 85: Developing Gadgets

When you’re ready…

• Via Google Gadget Editor

Submitting your gadget for publication

Page 86: Developing Gadgets

When you’re ready…

• Via Google Gadget Editor

• Submit directly to Content Directory

Submitting your gadget for publication

Page 87: Developing Gadgets

Syndicating

Anyone can put your gadget on their site

Page 88: Developing Gadgets

Syndicating

Anyone can put your gadget on their site

• No user preferences

Page 89: Developing Gadgets

Syndicating

Anyone can put your gadget on their site

• No user preferences

• Variable width and height

Page 90: Developing Gadgets

Syndicating

Anyone can put your gadget on their site

• No user preferences

• Variable width and height

• Shown in an <iframe>

Page 91: Developing Gadgets

Syndicating

GGE -> File -> Publish -> Add to a webpage

Page 92: Developing Gadgets

Syndicating

Javascript include on webpage

<script src="http://www.gmodules.com/ig/ifr? url=http://brandseye.com/…/brandseye.xml&amp; synd=open&amp; w=400&amp; h=200&amp; title=BrandsEye+Recent+Mentions&amp; border=%23ffffff%7C3px%2C1px+solid+%23999999&amp; output=js"></script>

Page 93: Developing Gadgets

What’s coming

iGoogle V2

Page 94: Developing Gadgets

What’s coming

iGoogle V2

• OpenSocial API

Page 95: Developing Gadgets

What’s coming

iGoogle V2

• OpenSocial API

• Canvas (maximised) view

Page 96: Developing Gadgets

What’s coming

iGoogle V2

• OpenSocial API

• Canvas (maximised) view

• http://www.google.com/ig/sandbox

Page 97: Developing Gadgets

Want to know more?

Page 99: Developing 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)

Page 100: Developing 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)

• Google Gadget Guidelines (http://www.google.com/webmasters/gadgets/guidelines.html)

Page 101: Developing Gadgets

Thank you

Questions?

Page 102: Developing Gadgets
Page 103: Developing Gadgets
Page 104: Developing Gadgets
Page 105: Developing Gadgets