Go! Go! Gadgets. Writing an OpenSocial Application

  • 2,206 views
Uploaded 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.

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.

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
2,206
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
7
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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. What is an ‘Imagineer’?Monday, December 6, 2010
  • 3. !" #" Take things that exist...Monday, December 6, 2010
  • 4. ...and make something different.Monday, December 6, 2010
  • 5. Monday, December 6, 2010
  • 6. Agenda •What it is a Gadget •Why Atlassian chose OpenSocial • Application Portability •Why you should too! • Application Sharing 6Monday, December 6, 2010
  • 7. What is OpenSocial? 7Monday, December 6, 2010
  • 8. Social Data Model 8Monday, December 6, 2010
  • 9. Web Service APIs 9Monday, December 6, 2010
  • 10. Gadgets 10Monday, December 6, 2010
  • 11. Our Problem 11Monday, December 6, 2010
  • 12. Before •Enterprise Apps are Silos FishEye
Source
Code JIRA
Issues
&
Tasks Confluence
Wiki 12Monday, December 6, 2010
  • 13. Emphasize Teams, Projects & Tasks over Tools 13Monday, December 6, 2010
  • 14. Emphasize Teams, Projects & Tasks over Tools 13Monday, December 6, 2010
  • 15. Emphasize Teams, Projects & Tasks over Tools 13Monday, December 6, 2010
  • 16. Emphasize Teams, Projects & Tasks over Tools 13Monday, December 6, 2010
  • 17. Too Many Dashboards 14Monday, December 6, 2010
  • 18. Too Many Dashboards 14Monday, December 6, 2010
  • 19. Cross-Product Sharing 15Monday, December 6, 2010
  • 20. Integration with Non-Atlassian apps 16Monday, December 6, 2010
  • 21. Solution: OpenSocial Gadgets 17Monday, December 6, 2010
  • 22. Gadgets are a Great Solution for Dashboard 18Monday, December 6, 2010
  • 23. After Open standard for enterprise application connection view
complete
 project single
acCvity
 19Monday, December 6, 2010
  • 24. Managers Do Email Not just about portals, or internal applications. view
acCvity
&
 status create
issues 20Monday, December 6, 2010
  • 25. Open Standards, Industry Support 21Monday, December 6, 2010
  • 26. Why Write Gadgets? •They’re easy! •They use stable, widely accessible and understood technologies •Write once, display everywhere 22Monday, December 6, 2010
  • 27. The Obligatory Hello World Example 23Monday, December 6, 2010
  • 28. The Obligatory Hello World Example 23Monday, December 6, 2010
  • 29. Anatomy of a Gadget 24Monday, December 6, 2010
  • 30. Anatomy of a Gadget •XML Spec File • Metadata, HTML Content, and JavaScript 24Monday, December 6, 2010
  • 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. 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. XML Spec File 25Monday, December 6, 2010
  • 34. <ModulePrefs> 26Monday, December 6, 2010
  • 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. <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. <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. <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. <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. <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. <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. <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. Views - DEFAULT view 29Monday, December 6, 2010
  • 44. Views - DEFAULT view 29Monday, December 6, 2010
  • 45. Views - DEFAULT view 30Monday, December 6, 2010
  • 46. Views - DEFAULT view 30Monday, December 6, 2010
  • 47. Views - CANVAS view 31Monday, December 6, 2010
  • 48. Views - CANVAS view 31Monday, December 6, 2010
  • 49. Views - DEFAULT view (in Gmail) 32Monday, December 6, 2010
  • 50. Views - DEFAULT view (in Gmail) 32Monday, December 6, 2010
  • 51. Views - CANVAS view (in Gmail) 33Monday, December 6, 2010
  • 52. Views - CANVAS view (in Gmail) 33Monday, December 6, 2010
  • 53. Views - Custom view 34Monday, December 6, 2010
  • 54. Wallboards Gadgets go beyond the JIRA Dashboard onto your wall! 35Monday, December 6, 2010
  • 55. Wallboards Gadgets go beyond the JIRA Dashboard onto your wall! 35Monday, December 6, 2010
  • 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. 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. 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. Requesting Data from Web Services •AJAX + DOM •OAuth •Request Proxy • 37Monday, December 6, 2010
  • 60. 38Monday, December 6, 2010
  • 61. 39Monday, December 6, 2010
  • 62. 40Monday, December 6, 2010
  • 63. 41Monday, December 6, 2010
  • 64. gadgets io . .makeRequest ) ( 42Monday, December 6, 2010
  • 65. What Can You Call? •Any URL •XML and JSON are the most useful • 43Monday, December 6, 2010
  • 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. 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. 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. An Example Text Real World Example... TextMonday, December 6, 2010
  • 70. An Example Text Real World Example... TextMonday, December 6, 2010
  • 71. An Example Text Real World Example... TextMonday, December 6, 2010
  • 72. An Example Text Real World Example... TextMonday, December 6, 2010
  • 73. An Example Text Real World Example... TextMonday, December 6, 2010
  • 74. An Example Text Real World Example... TextMonday, December 6, 2010
  • 75. The Goal The Goal 47Monday, December 6, 2010
  • 76. The Result 48Monday, December 6, 2010
  • 77. The Result 48Monday, December 6, 2010
  • 78. Preferences 49Monday, December 6, 2010
  • 79. Statistics 50Monday, December 6, 2010
  • 80. Let’s Take a Step Back. 51Monday, December 6, 2010
  • 81. Q: What is the purpose of an application? 52Monday, December 6, 2010
  • 82. Q: What is the purpose of an application? •A: DO Something. Complete some process. 52Monday, December 6, 2010
  • 83. Anatomy of an Application Context Content Ac(on 53Monday, December 6, 2010
  • 84. An Example Gmail Communica(on Contacts Mail Read
Write Reply 54Monday, December 6, 2010
  • 85. Q: What is the purpose of a gadget? 55Monday, December 6, 2010
  • 86. Q: What is the purpose of a gadget? •A: DO Something. Complete some process. 55Monday, December 6, 2010
  • 87. Gadget = Reusable Mini‐ApplicaCon Atomic Unit
of
Work Context Context •or Content Content Ac(on Ac(on 56Monday, December 6, 2010
  • 88. Example - “Mini-Application” JIRA
Comment
Gadget JIRA‐1234 Users
 Comment Add
Comment 57Monday, December 6, 2010
  • 89. Example - Unit of Work JIRA
Comment
Gadget Context Users
 Comment Add
Comment 58Monday, December 6, 2010
  • 90. Example - Unit of Work JIRA
Comment
Gadget Context Users
 Comment Add
Comment 58Monday, December 6, 2010
  • 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. 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. 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. <demo> 62Monday, December 6, 2010
  • 95. Get Satisfaction 63Monday, December 6, 2010
  • 96. Gadgets? 64Monday, December 6, 2010
  • 97. Gadgets? Gadget? Gadget? 64Monday, December 6, 2010
  • 98. 65Monday, December 6, 2010
  • 99. Gadget! Gadget Gadget 65Monday, December 6, 2010
  • 100. Get Satisfaction powered by JIRA 66Monday, December 6, 2010
  • 101. Gadgets! 67Monday, December 6, 2010
  • 102. Gadgets! 67Monday, December 6, 2010
  • 103. Gadgets! Gadget! Gadget! 67Monday, December 6, 2010
  • 104. 68Monday, December 6, 2010
  • 105. 68Monday, December 6, 2010
  • 106. </demo> 69Monday, December 6, 2010
  • 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. Questions? Resources • http://atlassian.com/opensocial • http://www.opensocial.org • http://atlassian.com/classroom 71Monday, December 6, 2010