Dan Holevoet Developer Relations Deep Dive: Contextual Gadgets
Why gadgets?
Why gadgets? <ul><ul><li>Gadgets bring your application into Google Apps </li></ul></ul><ul><ul><li>People spend  a lot  o...
Why contextual gadgets?
Why contextual gadgets?
Why contextual gadgets?
What is a gadget?
What is a gadget? <?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot; ?>  <Module>    <ModulePrefs title=&quot;hello ...
What is a gadget? <ul><ul><li>'dynamic-height' allows the gadget to grow and shrink depending on content </li></ul></ul><u...
What do contextual gadgets do?
What do contextual gadgets do? <ul><ul><li>Match on fields of an incoming email, eg: </li></ul></ul><ul><ul><ul><li>To </l...
What do contextual gadgets do?
What do contextual gadgets do?
What makes a contextual gadget?
Contextual gadgets | components <ul><ul><li>Each contextual gadget is made up of: </li></ul></ul><ul><ul><ul><li>A gadget ...
Contextual gadgets | google.contentmatch var matches =    google.contentmatch.getContentMatches(); var context = {}; for (...
Contextual gadgets | extractors <ul><ul><li>Extractors are regular expressions, using RE2 (supports most of PCRE) </li></u...
Contextual gadgets | extractors <ul><ul><li>Pre-canned extractors may be filtered to apply only on a subset of emails </li...
Contextual gadgets | application manifest <ul><ul><li>The manifest describes the components of the contextual gadget: </li...
Contextual gadgets | application manifest … <Extension id=&quot;testExtractor&quot;    type=&quot;contextExtractor&quot;> ...
Contextual gadgets | application manifest … <Extension id=&quot;testExtractor&quot;    type=&quot;contextExtractor&quot;> ...
Contextual gadgets | application manifest … <Extension id=&quot;testExtractor&quot;    type=&quot;contextExtractor&quot;> ...
Contextual gadgets | application manifest … <Scope id=&quot; exampleScope &quot;>    <Url>tag:google.com,2010:      auth/c...
Contextual gadgets | application manifest … <Scope id=&quot;exampleScope&quot;>    <Url>tag:google.com,2010:      auth/con...
Contextual gadgets | application manifest
Best practices
Best practices | matching and extraction <ul><ul><li>Be contextual — try and match on as few emails as possible </li></ul>...
Best practices | safe gadgets <ul><ul><li>Stick to HTML and CSS specs </li></ul></ul><ul><ul><li>Use supported frameworks:...
Best practices | complicated email logic <ul><ul><li>Use IMAP when extractors don't offer enough </li></ul></ul><ul><ul><u...
Testing and distribution
Testing and distribution <ul><ul><li>Log into the Google Apps Marketplace: http://google.com/enterprise/marketplace/ </li>...
Getting started
Getting started <ul><ul><li>Developer documentation: </li></ul></ul><ul><ul><ul><li>Gmail: http://code.google.com/apis/gma...
Questions?
Upcoming SlideShare
Loading in …5
×

Dan Holevoet, Google

1,125 views
1,018 views

Published on

Presentation by Dan Holevote (Google) at the #inboxlove conference

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,125
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
8
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Dan Holevoet, Google

  1. 1. Dan Holevoet Developer Relations Deep Dive: Contextual Gadgets
  2. 2. Why gadgets?
  3. 3. Why gadgets? <ul><ul><li>Gadgets bring your application into Google Apps </li></ul></ul><ul><ul><li>People spend  a lot  of time in Google Apps </li></ul></ul><ul><ul><li>Embeddable pieces of functionality </li></ul></ul>
  4. 4. Why contextual gadgets?
  5. 5. Why contextual gadgets?
  6. 6. Why contextual gadgets?
  7. 7. What is a gadget?
  8. 8. What is a gadget? <?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot; ?>  <Module>    <ModulePrefs title=&quot;hello world example&quot; />     <Content type=&quot;html&quot;>      <![CDATA[         Hello, world!      ]]>    </Content>  </Module>
  9. 9. What is a gadget? <ul><ul><li>'dynamic-height' allows the gadget to grow and shrink depending on content </li></ul></ul><ul><ul><li>'views' allow multiple facets of an application </li></ul></ul><ul><ul><ul><li>'home' and 'canvas' views in most implementations </li></ul></ul></ul><ul><ul><li>osapi.http allows remote data access </li></ul></ul><ul><ul><ul><li>Provides OAuth signing </li></ul></ul></ul><ul><ul><ul><li>Supports multiple HTTP methods </li></ul></ul></ul><ul><ul><ul><li>Supports JSON parsing of responses </li></ul></ul></ul><ul><ul><li>google.contentmatch() for contextual behavior </li></ul></ul>
  10. 10. What do contextual gadgets do?
  11. 11. What do contextual gadgets do? <ul><ul><li>Match on fields of an incoming email, eg: </li></ul></ul><ul><ul><ul><li>To </li></ul></ul></ul><ul><ul><ul><li>From </li></ul></ul></ul><ul><ul><ul><li>Subject </li></ul></ul></ul><ul><ul><ul><li>Message body </li></ul></ul></ul><ul><ul><li>Matches trigger a gadget to display, and provide context </li></ul></ul>
  12. 12. What do contextual gadgets do?
  13. 13. What do contextual gadgets do?
  14. 14. What makes a contextual gadget?
  15. 15. Contextual gadgets | components <ul><ul><li>Each contextual gadget is made up of: </li></ul></ul><ul><ul><ul><li>A gadget </li></ul></ul></ul><ul><ul><ul><li>One or more extractors </li></ul></ul></ul><ul><ul><ul><li>Associated descriptions in the application manifest </li></ul></ul></ul>
  16. 16. Contextual gadgets | google.contentmatch var matches =    google.contentmatch.getContentMatches(); var context = {}; for (var match in matches) {    for (var key in matches[match]) {      context[key] = matches[match][key];    } } // Subject is now stored in context.subject
  17. 17. Contextual gadgets | extractors <ul><ul><li>Extractors are regular expressions, using RE2 (supports most of PCRE) </li></ul></ul><ul><ul><li>Google provides a set of pre-canned extractors that developers can use in their gadgets </li></ul></ul><ul><ul><li>Some of the pre-canned extractors: </li></ul></ul><ul><ul><ul><li>EmailAddressExtractor </li></ul></ul></ul><ul><ul><ul><li>EmailBodyExtractor </li></ul></ul></ul><ul><ul><ul><li>EmailTimeExtractor </li></ul></ul></ul><ul><ul><ul><li>HttpLinkExtractor </li></ul></ul></ul><ul><ul><ul><li>MessageIDExtractor </li></ul></ul></ul><ul><ul><ul><li>RecipientEmailExtractor </li></ul></ul></ul><ul><ul><ul><li>SenderEmailExtractor </li></ul></ul></ul><ul><ul><ul><li>SubjectExtractor </li></ul></ul></ul><ul><ul><ul><li>USPhoneExtractor </li></ul></ul></ul>
  18. 18. Contextual gadgets | extractors <ul><ul><li>Pre-canned extractors may be filtered to apply only on a subset of emails </li></ul></ul><ul><ul><li>An example: </li></ul></ul><ul><ul><ul><li>SubjectExtractor will match on all emails </li></ul></ul></ul><ul><ul><ul><li>Filtering allows only a subset of subjects to trigger the gadget </li></ul></ul></ul><ul><ul><ul><li>Filters are applied by using a regular expression on a field of the extractor </li></ul></ul></ul><Extension id=&quot;SubjectExtractor&quot;    type=&quot;contextExtractor&quot;>    <Url>google.com:SubjectExtractor</Url>    <Param name=&quot;subject&quot;      value=&quot;Hello World.*&quot;/>    <Triggers ref=&quot;MyGadget&quot;/>    <Container name=&quot;mail&quot;/> </Extension>
  19. 19. Contextual gadgets | application manifest <ul><ul><li>The manifest describes the components of the contextual gadget: </li></ul></ul><ul><ul><ul><li>The extractors </li></ul></ul></ul><ul><ul><ul><li>Filters on pre-canned extractors </li></ul></ul></ul><ul><ul><ul><li>The gadgets to trigger </li></ul></ul></ul><ul><ul><ul><li>Scopes for data access </li></ul></ul></ul>
  20. 20. Contextual gadgets | application manifest … <Extension id=&quot;testExtractor&quot;    type=&quot;contextExtractor&quot;>    <Url>TestExtractorId</Url>    <Param name=&quot;extractedField&quot; value=&quot;regexp&quot;/>    <Triggers ref=&quot;exampleGadget&quot;/>    <Scope ref=&quot;exampleScope&quot;/>    <Container name=&quot;mail&quot;/> </Extension> <Extension id=&quot;exampleGadget&quot; type=&quot;gadget&quot;>    <Url>http://example.com/mygadget.xml</Url>    <Container name=&quot;mail&quot;/> </Extension> …
  21. 21. Contextual gadgets | application manifest … <Extension id=&quot;testExtractor&quot;    type=&quot;contextExtractor&quot;>    <Url>TestExtractorId</Url>    <Param name=&quot;extractedField&quot; value=&quot;regexp&quot;/>    <Triggers ref=&quot;exampleGadget&quot;/>    <Scope ref=&quot;exampleScope&quot;/>    <Container name=&quot;mail&quot;/> </Extension> <Extension  id=&quot;exampleGadget&quot;  type=&quot;gadget&quot;>    <Url>http://example.com/mygadget.xml</Url>    <Container name=&quot;mail&quot;/> </Extension> …
  22. 22. Contextual gadgets | application manifest … <Extension id=&quot;testExtractor&quot;    type=&quot;contextExtractor&quot;>    <Url>TestExtractorId</Url>    <Param name=&quot;extractedField&quot; value=&quot;regexp&quot;/>    <Triggers ref=&quot;exampleGadget&quot;/>    <Scope ref=&quot;exampleScope&quot;/>    <Container name=&quot;mail&quot;/> </Extension> <Extension id=&quot;exampleGadget&quot; type=&quot;gadget&quot;>    <Url>http://example.com/mygadget.xml</Url>    <Container name=&quot;mail&quot;/> </Extension> …
  23. 23. Contextual gadgets | application manifest … <Scope id=&quot; exampleScope &quot;>    <Url>tag:google.com,2010:      auth/contextual/extractor/SUBJECT</Url>    <Reason>This gadget uses the subject line to      determine context</Reason> </Scope> …
  24. 24. Contextual gadgets | application manifest … <Scope id=&quot;exampleScope&quot;>    <Url>tag:google.com,2010:      auth/contextual/extractor/SUBJECT</Url>    <Reason>This gadget uses the subject line to      determine context</Reason> </Scope> …
  25. 25. Contextual gadgets | application manifest
  26. 26. Best practices
  27. 27. Best practices | matching and extraction <ul><ul><li>Be contextual — try and match on as few emails as possible </li></ul></ul><ul><ul><li>Use the minimum number of scopes necessary </li></ul></ul>
  28. 28. Best practices | safe gadgets <ul><ul><li>Stick to HTML and CSS specs </li></ul></ul><ul><ul><li>Use supported frameworks: </li></ul></ul><ul><ul><ul><li>JQuery </li></ul></ul></ul><ul><ul><ul><li>ECMAScript 5 Strict </li></ul></ul></ul><ul><li>Good: </li></ul><ul><li>   jQuery('#content').append('hello world!'); </li></ul><ul><li>   document.getElementById('content'). </li></ul><ul><li>     appendChild(document.createTextNode( </li></ul><ul><li>       'hello world!')); </li></ul><ul><li>Bad: </li></ul><ul><li>   document.write('hello world!'); </li></ul><ul><li>Ugly: </li></ul><ul><li>   window.parent.location = mySite; </li></ul>
  29. 29. Best practices | complicated email logic <ul><ul><li>Use IMAP when extractors don't offer enough </li></ul></ul><ul><ul><ul><li>MessageIDExtractor supplies message IDs </li></ul></ul></ul><ul><ul><ul><li>IMAP + OAuth: </li></ul></ul></ul><ul><ul><ul><ul><li>http://code.google.com/p/google-mail-xoauth-tools/ </li></ul></ul></ul></ul><ul><ul><ul><li>Marketplace access to IMAP </li></ul></ul></ul><ul><ul><ul><ul><li>Scope: https://mail.google.com/ </li></ul></ul></ul></ul>
  30. 30. Testing and distribution
  31. 31. Testing and distribution <ul><ul><li>Log into the Google Apps Marketplace: http://google.com/enterprise/marketplace/ </li></ul></ul><ul><ul><li>Create a vendor profile if you don't have one </li></ul></ul><ul><ul><li>Create a listing </li></ul></ul><ul><ul><li>Enter an application manifest </li></ul></ul><ul><ul><li>Deploy to your domain </li></ul></ul>
  32. 32. Getting started
  33. 33. Getting started <ul><ul><li>Developer documentation: </li></ul></ul><ul><ul><ul><li>Gmail: http://code.google.com/apis/gmail/ </li></ul></ul></ul><ul><ul><ul><li>Marketplace: http://code.google.com/googleapps/marketplace/ </li></ul></ul></ul><ul><ul><li>Developer forum: </li></ul></ul><ul><ul><ul><li>http://code.google.com/googleapps/support/gadgets/ </li></ul></ul></ul><ul><ul><li>RE2: </li></ul></ul><ul><ul><ul><li>http://code.google.com/p/re2/ </li></ul></ul></ul>
  34. 34. Questions?

×