Successfully reported this slideshow.

Go, Go, Gadgets: Building Gadgets for Atlassian Products - Atlassian Summit 2010

3,074 views

Published on

Go, Go, Gadgets: Building Gadgets for Atlassian Products

Mark Halvorson, Atlassian

Published in: Technology, Business
  • I agree with you because may be the pace of innovation is too fast for consumers but new products with new technetium are also available in market. And bring new products to market faster than they need them.
    http://www.techiecop.com/
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Go, Go, Gadgets: Building Gadgets for Atlassian Products - Atlassian Summit 2010

  1. 1. 1 1
  2. 2. Go Go Gadgets! • Building Gadgets for Atlassian Products • Mark Halvorson • Chief Imagineer • Atlassian Software 2 2
  3. 3. What is an ʻImagineerʼ? 3
  4. 4. !" #" Take things that exist... 4
  5. 5. ...and make something different. 5
  6. 6. 6 6
  7. 7. Agenda • What it is OpenSocial • Why we chose it • How it has helped us • Why you should use it! • How you can get involved 7 7
  8. 8. What is OpenSocial? 8 8
  9. 9. Social Data Model 9 9
  10. 10. Web Service APIs 10 10
  11. 11. Gadgets 11 11
  12. 12. Our Problem 12 12
  13. 13. Before • Enterprise Apps are Silos FishEye  Source  Code JIRA  Issues  &  Tasks Confluence  Wiki 13 13
  14. 14. Emphasize Teams, Projects & Tasks over Tools 14 14
  15. 15. Too Many Dashboards 15 15
  16. 16. Cross-Product Sharing 16 16
  17. 17. Integration with Non-Atlassian apps 17 17
  18. 18. Solution: OpenSocial Gadgets 18 18
  19. 19. Gadgets are a Great Solution for Dashboards 19 19
  20. 20. After • Open standard for enterprise • application connection view   complete   20 20
  21. 21. Managers Do Email • Not just about portals, • or internal applications. view   acAvity  &  status 21 21
  22. 22. Open Standards, Industry Support 22 22
  23. 23. Why Write Gadgets? • Theyʼre easy! • They use stable, widely accessible and understood technologies • Write once, display everywhere 23 23
  24. 24. The Obligatory Hello World Example 24 24
  25. 25. 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 25 25
  26. 26. XML Spec File 26 26
  27. 27. <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> 27 27
  28. 28. <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"/> 28 28
  29. 29. <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> 29 29
  30. 30. Views - Default 30 30
  31. 31. Views - Default 31 31
  32. 32. Views - Canvas 32 32
  33. 33. Views - “nav” 33 33
  34. 34. Views - Canvas 34 34
  35. 35. Views - Custom 35 35
  36. 36. Dashboards, Gadgets & OpenSocial • Gadgets go beyond the JIRA Dashboard - onto your wall! 36 36
  37. 37. 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); 37 37
  38. 38. Requesting Data from Web Services • AJAX + DOM • OAuth • Request Proxy • 38 38
  39. 39. 39 39
  40. 40. 40 40
  41. 41. 41 41
  42. 42. 42 42
  43. 43. gadgets io . .makeRequest ) ( 43 43
  44. 44. What Can You Call? • Any URL • XML and JSON are the most useful • 44 44
  45. 45. 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); } 45 45
  46. 46. 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(); } 46 46
  47. 47. An Real World Example... Example Text Text 47
  48. 48. The Goal The Goal 48 48
  49. 49. The Result The Result 49 49
  50. 50. Preferences 50 50
  51. 51. Statistics 51 51
  52. 52. Letʼs Take a Step Back. 52 52
  53. 53. Q: What is the purpose of an application? • A: DO Something. Complete some process. 53 53
  54. 54. Anatomy of an Application Context Content Ac)on 54 54
  55. 55. An Example Gmail Communica)on Contacts Mail Read  Write Reply 55 55
  56. 56. Q: What is the purpose of an gadget? • A: DO Something. Complete some process. 56 56
  57. 57. Gadget = Reusable Mini-­‐ApplicaAon Atomic Unit  of  Work Context Context • or Content Content Ac)on Ac)on 57 57
  58. 58. Example - “Mini-Application” JIRA  Comment   Gadget JIRA-­‐1234 Users   Users   Comment Comment Add   Comment 58 58
  59. 59. Example - Unit of Work JIRA  Comment   Gadget Context Users   Comment Add   Comment 59 59
  60. 60. Lesson Learned over time: Gadgets as “Units of Work” are... • Easier to build • Easier to use • Easier to reuse 60 60
  61. 61. Composite Application Gadget Gadget Gadget Add’l   Context Context Context Context Content Content Content Content Ac)on Ac)on Ac)on Ac)on 61 61
  62. 62. Example - Gmail Google  CommunicaAon  ApplicaAon Google  Talk Communica)on Presence Gmail Contacts IM Mail Read  Write Read  Write Reply Reply 62 62
  63. 63. Demonstration • My FedEx 13 Project “Flapjack for Confluence” 63 63
  64. 64. Get Satisfaction 64 64
  65. 65. Gadgets? Gadget? Gadget? 65 65
  66. 66. Gadget Gadget Gadget! 66 66
  67. 67. 67 67
  68. 68. Get Satisfaction powered by JIRA 68 68
  69. 69. Gadgets! Gadget! Gadget! Gadget! 69 69
  70. 70. Feedback Tab on Different Website 70 70
  71. 71. Feedback on Google.com 71 71
  72. 72. Feedback on Google.com 72 72
  73. 73. Summary - Why write gadgets? • Easy! • Reusable! • Fun! 73 73
  74. 74. Questions? • Email: mhalvorson@atlassian.com • Twitter: @halv0112 Resources • http://www.atlassian.com/opensocial • http://www.opensocial.org 74 74

×