Go! Go! Gadgets. Writing an OpenSocial Application

2,637
-1

Published on

This presentation delivered at the OpenSocial Europe Summit and Industry Spotlight on Education Event. Talks about writing OpenSocial Gadgets from Hello World to something a little more useful.

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

No Downloads
Views
Total Views
2,637
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
16
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Go! Go! Gadgets. Writing an OpenSocial Application

  1. 1. Go Go Gadgets! Building an OpenSocial Application Mark Halvorson Community Member, OpenSocial Foundation Board Chief Imagineer, Atlassian Software Email: mark.halvorson@atlassian.com Twitter: @halv0112 1Monday, December 6, 2010
  2. 2. What is an ‘Imagineer’?Monday, December 6, 2010
  3. 3. !" #" Take things that exist...Monday, December 6, 2010
  4. 4. ...and make something different.Monday, December 6, 2010
  5. 5. Monday, December 6, 2010
  6. 6. Agenda •What it is a Gadget •Why Atlassian chose OpenSocial • Application Portability •Why you should too! • Application Sharing 6Monday, December 6, 2010
  7. 7. What is OpenSocial? 7Monday, December 6, 2010
  8. 8. Social Data Model 8Monday, December 6, 2010
  9. 9. Web Service APIs 9Monday, December 6, 2010
  10. 10. Gadgets 10Monday, December 6, 2010
  11. 11. Our Problem 11Monday, December 6, 2010
  12. 12. Before •Enterprise Apps are Silos FishEye
Source
Code JIRA
Issues
&
Tasks Confluence
Wiki 12Monday, December 6, 2010
  13. 13. Emphasize Teams, Projects & Tasks over Tools 13Monday, December 6, 2010
  14. 14. Emphasize Teams, Projects & Tasks over Tools 13Monday, December 6, 2010
  15. 15. Emphasize Teams, Projects & Tasks over Tools 13Monday, December 6, 2010
  16. 16. Emphasize Teams, Projects & Tasks over Tools 13Monday, December 6, 2010
  17. 17. Too Many Dashboards 14Monday, December 6, 2010
  18. 18. Too Many Dashboards 14Monday, December 6, 2010
  19. 19. Cross-Product Sharing 15Monday, December 6, 2010
  20. 20. Integration with Non-Atlassian apps 16Monday, December 6, 2010
  21. 21. Solution: OpenSocial Gadgets 17Monday, December 6, 2010
  22. 22. Gadgets are a Great Solution for Dashboard 18Monday, December 6, 2010
  23. 23. After Open standard for enterprise application connection view
complete
 project single
acCvity
 19Monday, December 6, 2010
  24. 24. Managers Do Email Not just about portals, or internal applications. view
acCvity
&
 status create
issues 20Monday, December 6, 2010
  25. 25. Open Standards, Industry Support 21Monday, December 6, 2010
  26. 26. Why Write Gadgets? •They’re easy! •They use stable, widely accessible and understood technologies •Write once, display everywhere 22Monday, December 6, 2010
  27. 27. The Obligatory Hello World Example 23Monday, December 6, 2010
  28. 28. The Obligatory Hello World Example 23Monday, December 6, 2010
  29. 29. Anatomy of a Gadget 24Monday, December 6, 2010
  30. 30. Anatomy of a Gadget •XML Spec File • Metadata, HTML Content, and JavaScript 24Monday, December 6, 2010
  31. 31. Anatomy of a Gadget •XML Spec File • Metadata, HTML Content, and JavaScript •Core JavaScript API • Access Preferences, Make Requests 24Monday, December 6, 2010
  32. 32. Anatomy of a Gadget •XML Spec File • Metadata, HTML Content, and JavaScript •Core JavaScript API • Access Preferences, Make Requests •Gadget Features • Additional, Optional Capabilities & APIs 24Monday, December 6, 2010
  33. 33. XML Spec File 25Monday, December 6, 2010
  34. 34. <ModulePrefs> 26Monday, December 6, 2010
  35. 35. <ModulePrefs> <?xml version="1.0" encoding="UTF-8" ?> <Module> <ModulePrefs title="JIRA Issues" author="Atlassian" thumbnail="http://labs.atlassian.com/svn/GADGETS/trunk/jira-issues/basic/jira- issues-thumbnail.png" description="A list of recently created Issues"> <Require feature="minimessage" /> <Require feature="dynamic-height" /> </ModulePrefs> 26Monday, December 6, 2010
  36. 36. <ModulePrefs> <?xml version="1.0" encoding="UTF-8" ?> <Module> <ModulePrefs title="JIRA Issues" author="Atlassian" thumbnail="http://labs.atlassian.com/svn/GADGETS/trunk/jira-issues/basic/jira- issues-thumbnail.png" description="A list of recently created Issues"> <Require feature="minimessage" /> <Require feature="dynamic-height" /> </ModulePrefs> 26Monday, December 6, 2010
  37. 37. <ModulePrefs> <?xml version="1.0" encoding="UTF-8" ?> <Module> <ModulePrefs title="JIRA Issues" author="Atlassian" thumbnail="http://labs.atlassian.com/svn/GADGETS/trunk/jira-issues/basic/jira- issues-thumbnail.png" description="A list of recently created Issues"> <Require feature="minimessage" /> <Require feature="dynamic-height" /> </ModulePrefs> 26Monday, December 6, 2010
  38. 38. <UserPref> <UserPref name="show_date" display_name="Show Dates?" datatype="bool" default_value="true"/> <UserPref name="show_summ" display_name="Show Summaries?" datatype="bool" default_value="true"/> <UserPref name="num_entries" display_name="Number of Entries:" default_value="5" required="true"/> 27Monday, December 6, 2010
  39. 39. <UserPref> <UserPref name="show_date" display_name="Show Dates?" datatype="bool" default_value="true"/> <UserPref name="show_summ" display_name="Show Summaries?" datatype="bool" default_value="true"/> <UserPref name="num_entries" display_name="Number of Entries:" default_value="5" required="true"/> 27Monday, December 6, 2010
  40. 40. <UserPref> <UserPref name="show_date" display_name="Show Dates?" datatype="bool" default_value="true"/> <UserPref name="show_summ" display_name="Show Summaries?" datatype="bool" default_value="true"/> <UserPref name="num_entries" display_name="Number of Entries:" default_value="5" required="true"/> 27Monday, December 6, 2010
  41. 41. <Content> <Content type="html"><![CDATA[ <link rel="stylesheet" href="http://labs.atlassian.com/svn/GADGETS/trunk/jira-issues/basic/jira- issues.css"> <div id="content_div"></div> <script type="text/javascript" src="http://labs.atlassian.com/svn/GADGETS/trunk/jira-issues/basic/jira- issues.js"></script> ]]></Content> </Module> 28Monday, December 6, 2010
  42. 42. <Content> <Content type="html"><![CDATA[ <link rel="stylesheet" href="http://labs.atlassian.com/svn/GADGETS/trunk/jira-issues/basic/jira- issues.css"> <div id="content_div"></div> <script type="text/javascript" src="http://labs.atlassian.com/svn/GADGETS/trunk/jira-issues/basic/jira- issues.js"></script> ]]></Content> </Module> 28Monday, December 6, 2010
  43. 43. Views - DEFAULT view 29Monday, December 6, 2010
  44. 44. Views - DEFAULT view 29Monday, December 6, 2010
  45. 45. Views - DEFAULT view 30Monday, December 6, 2010
  46. 46. Views - DEFAULT view 30Monday, December 6, 2010
  47. 47. Views - CANVAS view 31Monday, December 6, 2010
  48. 48. Views - CANVAS view 31Monday, December 6, 2010
  49. 49. Views - DEFAULT view (in Gmail) 32Monday, December 6, 2010
  50. 50. Views - DEFAULT view (in Gmail) 32Monday, December 6, 2010
  51. 51. Views - CANVAS view (in Gmail) 33Monday, December 6, 2010
  52. 52. Views - CANVAS view (in Gmail) 33Monday, December 6, 2010
  53. 53. Views - Custom view 34Monday, December 6, 2010
  54. 54. Wallboards Gadgets go beyond the JIRA Dashboard onto your wall! 35Monday, December 6, 2010
  55. 55. Wallboards Gadgets go beyond the JIRA Dashboard onto your wall! 35Monday, December 6, 2010
  56. 56. JavaScript // Create minimessage factory var msg = new gadgets.MiniMessage(); // Show a small loading message to the user var loadMessage = msg.createStaticMessage("loading..."); // Get configured user prefs var prefs = new gadgets.Prefs(); var showDate = prefs.getBool("show_date"); var showSummary = prefs.getBool("show_summ"); var numEntries = prefs.getInt("num_entries"); // Fetch issues when the gadget loads gadgets.util.registerOnLoadHandler(fetchIssues); 36Monday, December 6, 2010
  57. 57. JavaScript // Create minimessage factory var msg = new gadgets.MiniMessage(); // Show a small loading message to the user var loadMessage = msg.createStaticMessage("loading..."); // Get configured user prefs var prefs = new gadgets.Prefs(); var showDate = prefs.getBool("show_date"); var showSummary = prefs.getBool("show_summ"); var numEntries = prefs.getInt("num_entries"); // Fetch issues when the gadget loads gadgets.util.registerOnLoadHandler(fetchIssues); 36Monday, December 6, 2010
  58. 58. JavaScript // Create minimessage factory var msg = new gadgets.MiniMessage(); // Show a small loading message to the user var loadMessage = msg.createStaticMessage("loading..."); // Get configured user prefs var prefs = new gadgets.Prefs(); var showDate = prefs.getBool("show_date"); var showSummary = prefs.getBool("show_summ"); var numEntries = prefs.getInt("num_entries"); // Fetch issues when the gadget loads gadgets.util.registerOnLoadHandler(fetchIssues); 36Monday, December 6, 2010
  59. 59. Requesting Data from Web Services •AJAX + DOM •OAuth •Request Proxy • 37Monday, December 6, 2010
  60. 60. 38Monday, December 6, 2010
  61. 61. 39Monday, December 6, 2010
  62. 62. 40Monday, December 6, 2010
  63. 63. 41Monday, December 6, 2010
  64. 64. gadgets io . .makeRequest ) ( 42Monday, December 6, 2010
  65. 65. What Can You Call? •Any URL •XML and JSON are the most useful • 43Monday, December 6, 2010
  66. 66. Fetching Issues function fetchIssues() { var url = "http://jira.atlassian.com/sr/" + "jira.issueviews:searchrequest-xml" + "/temp/SearchRequest.xml?" + "created%3Aprevious=-1w&resolution=-1" + "&sorter/field=issuekey&sorter/order=DESC" + "&sorter/field=created&sorter/order=DESC" + "&tempMax=20"; var params = {}; params[gadgets.io.RequestParameters.CONTENT_TYPE] = gadgets.io.ContentType.DOM; gadgets.io.makeRequest(url, handleResponse, params); } 44Monday, December 6, 2010
  67. 67. Handling the Response function handleResponse(obj) { var domData = obj.data; var jiraIssues = { title : getTitle(domData), items : getItems(domData) }; renderJiraIssues(jiraIssues); msg.dismissMessage(loadMessage); gadgets.window.adjustHeight(); } 45Monday, December 6, 2010
  68. 68. Handling the Response function handleResponse(obj) { var domData = obj.data; var jiraIssues = { title : getTitle(domData), items : getItems(domData) }; renderJiraIssues(jiraIssues); msg.dismissMessage(loadMessage); gadgets.window.adjustHeight(); } 45Monday, December 6, 2010
  69. 69. An Example Text Real World Example... TextMonday, December 6, 2010
  70. 70. An Example Text Real World Example... TextMonday, December 6, 2010
  71. 71. An Example Text Real World Example... TextMonday, December 6, 2010
  72. 72. An Example Text Real World Example... TextMonday, December 6, 2010
  73. 73. An Example Text Real World Example... TextMonday, December 6, 2010
  74. 74. An Example Text Real World Example... TextMonday, December 6, 2010
  75. 75. The Goal The Goal 47Monday, December 6, 2010
  76. 76. The Result 48Monday, December 6, 2010
  77. 77. The Result 48Monday, December 6, 2010
  78. 78. Preferences 49Monday, December 6, 2010
  79. 79. Statistics 50Monday, December 6, 2010
  80. 80. Let’s Take a Step Back. 51Monday, December 6, 2010
  81. 81. Q: What is the purpose of an application? 52Monday, December 6, 2010
  82. 82. Q: What is the purpose of an application? •A: DO Something. Complete some process. 52Monday, December 6, 2010
  83. 83. Anatomy of an Application Context Content Ac(on 53Monday, December 6, 2010
  84. 84. An Example Gmail Communica(on Contacts Mail Read
Write Reply 54Monday, December 6, 2010
  85. 85. Q: What is the purpose of a gadget? 55Monday, December 6, 2010
  86. 86. Q: What is the purpose of a gadget? •A: DO Something. Complete some process. 55Monday, December 6, 2010
  87. 87. Gadget = Reusable Mini‐ApplicaCon Atomic Unit
of
Work Context Context •or Content Content Ac(on Ac(on 56Monday, December 6, 2010
  88. 88. Example - “Mini-Application” JIRA
Comment
Gadget JIRA‐1234 Users
 Comment Add
Comment 57Monday, December 6, 2010
  89. 89. Example - Unit of Work JIRA
Comment
Gadget Context Users
 Comment Add
Comment 58Monday, December 6, 2010
  90. 90. Example - Unit of Work JIRA
Comment
Gadget Context Users
 Comment Add
Comment 58Monday, December 6, 2010
  91. 91. Lesson Learned over time: •Gadgets as “Units of Work” are... • Easier to build • Easier to use • Easier to reuse 59Monday, December 6, 2010
  92. 92. Composite Application Gadget Gadget Gadget Add’l
 Context Context Context Context Content Content Content Content Ac(on Ac(on Ac(on Ac(on 60Monday, December 6, 2010
  93. 93. Example - Gmail Google
CommunicaCon
ApplicaCon Google
Talk Communica(on Presence Gmail Contacts IM Mail Read
Write Read
Write Reply Reply 61Monday, December 6, 2010
  94. 94. <demo> 62Monday, December 6, 2010
  95. 95. Get Satisfaction 63Monday, December 6, 2010
  96. 96. Gadgets? 64Monday, December 6, 2010
  97. 97. Gadgets? Gadget? Gadget? 64Monday, December 6, 2010
  98. 98. 65Monday, December 6, 2010
  99. 99. Gadget! Gadget Gadget 65Monday, December 6, 2010
  100. 100. Get Satisfaction powered by JIRA 66Monday, December 6, 2010
  101. 101. Gadgets! 67Monday, December 6, 2010
  102. 102. Gadgets! 67Monday, December 6, 2010
  103. 103. Gadgets! Gadget! Gadget! 67Monday, December 6, 2010
  104. 104. 68Monday, December 6, 2010
  105. 105. 68Monday, December 6, 2010
  106. 106. </demo> 69Monday, December 6, 2010
  107. 107. Summary - Why write gadgets? •Easy! • Simple web based technologies mean anyone can write a gadget. •Reusable! • Use in any OpenSocial Container. iGoogle, Gmail, JIVE, more every day. •Fun! • Thinking about applications as atomic units of work add a new dimension to application design. 70Monday, December 6, 2010
  108. 108. Questions? Resources • http://atlassian.com/opensocial • http://www.opensocial.org • http://atlassian.com/classroom 71Monday, December 6, 2010
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×