Go, Go, Gadgets: Building Gadgets for Atlassian Products Mark Halvorson, Atlassian

1. 1
1

2. Go Go Gadgets!
• Building Gadgets for Atlassian Products
• Mark Halvorson
• Chief Imagineer
• Atlassian Software
2
2

3. What is an ʻImagineerʼ?
3

4. !" #"
Take things that exist...
4

5. ...and make something different.
5

6. 6
6

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. What is OpenSocial?
8
8

9. Social Data Model
9
9

10. Web Service APIs
10
10

11. Gadgets
11
11

12. Our Problem
12
12

13. Before
• Enterprise Apps are Silos
FishEye
Source
Code
JIRA
Issues
&
Tasks
Confluence
Wiki
13
13

14. Emphasize Teams, Projects & Tasks over Tools
14
14

15. Too Many Dashboards
15
15

16. Cross-Product Sharing
16
16

17. Integration with Non-Atlassian apps
17
17

18. Solution: OpenSocial Gadgets
18
18

19. Gadgets are a
Great Solution for Dashboards
19
19

20. After
• Open standard for enterprise
• application connection
view
complete
20
20

21. Managers Do Email
• Not just about portals,
• or internal applications.
view
acAvity
&
status
21
21

22. Open Standards,
Industry Support
22
22

23. Why Write Gadgets?
• Theyʼre easy!
• They use stable, widely accessible and understood technologies
• Write once, display everywhere
23
23

24. The Obligatory Hello World Example
24
24

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. XML Spec File
26
26

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. <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. <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. Views - Default
30
30

31. Views - Default
31
31

32. Views - Canvas
32
32

33. Views - “nav”
33
33

34. Views - Canvas
34
34

35. Views - Custom
35
35

36. Dashboards, Gadgets &
OpenSocial
• Gadgets go beyond the JIRA Dashboard - onto your wall!
36
36

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. Requesting Data from Web Services
• AJAX + DOM
• OAuth
• Request Proxy
•
38
38

39. 39
39

40. 40
40

41. 41
41

42. 42
42

43. gadgets io
. .makeRequest )
(
43
43

44. What Can You Call?
• Any URL
• XML and JSON are the most useful
•
44
44

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. 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. An Real World Example...
Example Text
Text
47

48. The Goal
The Goal
48
48

49. The Result
The Result
49
49

50. Preferences
50
50

51. Statistics
51
51

52. Letʼs Take a Step Back.
52
52

53. Q: What is the purpose of an
application?
• A: DO Something. Complete some process.
53
53

54. Anatomy of an Application
Context Content Ac)on
54
54

55. An Example
Gmail
Communica)on
Contacts
Mail
Read
Write
Reply
55
55

56. Q: What is the purpose of an gadget?
• A: DO Something. Complete some process.
56
56

57. Gadget = Reusable
Mini-­‐ApplicaAon Atomic
Unit
of
Work
Context Context
• or
Content Content
Ac)on Ac)on
57
57

58. Example - “Mini-Application”
JIRA
Comment
Gadget
JIRA-­‐1234
Users
Users
Comment
Comment
Add
Comment
58
58

59. Example - Unit of Work
JIRA
Comment
Gadget
Context
Users
Comment
Add
Comment
59
59

60. Lesson Learned over time:
Gadgets as “Units of Work” are...
• Easier to build
• Easier to use
• Easier to reuse
60
60

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. Example - Gmail
Google
CommunicaAon
ApplicaAon
Google
Talk
Communica)on
Presence
Gmail
Contacts IM
Mail
Read
Write Read
Write
Reply Reply
62
62

63. Demonstration
• My FedEx 13 Project “Flapjack for Confluence”
63
63

64. Get Satisfaction
64
64

65. Gadgets?
Gadget? Gadget?
65
65

66. Gadget Gadget Gadget!
66
66

67. 67
67

68. Get Satisfaction
powered by JIRA
68
68

69. Gadgets!
Gadget! Gadget! Gadget!
69
69

70. Feedback Tab on Different Website
70
70

71. Feedback on Google.com
71
71

72. Feedback on Google.com
72
72

73. Summary - Why write gadgets?
• Easy!
• Reusable!
• Fun!
73
73

74. Questions?
• Email: mhalvorson@atlassian.com
• Twitter: @halv0112
Resources
• http://www.atlassian.com/opensocial
• http://www.opensocial.org
74
74