Enhance HipChat and Bitbucket with Add-ons

1. RALPH WHITBECK • DEVELOPER EVANGELIST • PATRICK STREULE • ARCHITECT Enhance HipChat and Bitbucket with Add-ons
2. SSID: Summit15-Training
 Password: SummitTra1n
3. http://bitbucket.org/hipchat/ hipchat-connect-training
4. http://bit.ly/summit15-hc
5. atlas-connect Node.js Laptop Hands-on Workshops ngrok Install the latest version of Node.js. Version 4.
 
 
 
 http://nodejs.org Loaded with your favorite IDE. If you need one Sublime Text is free.
 
 http://sublimetext.com A CLI command to create a skeleton add- on project. npm install -g atlas-connect A simple CLI utility to open a secure tunnel to localhost. http://ngrok.com $ ./ngrok 3000
6. ATLASSIAN CONNECT HIPCHAT CONNECT BITBUCKET CONNECT Agenda
7. Atlassian Connect
8. Atlassian Connect framework
9. Atlassian Connect framework Micro-services Separate web applications that serve multi-tenants.
10. Atlassian Connect framework Ease of upgradability Micro-services No need to test against multiple versions and can upgrade once. Separate web applications that serve multi-tenants.
11. Atlassian Connect framework Open technology Ease of upgradability Micro-services Use the technology stack that you’re comfortable with. No need to test against multiple versions and can upgrade once. Separate web applications that serve multi-tenants.
12. Create a New product running 
 on top Extends with new features Integrate with other services A framework to build add-ons
13. Confluence Bitbucket HipChat Supported in JIRA
14. What does an Atlassian Connect add-on do?
15. Declare itself with a descriptor
16. Request appropriate scopes
17. ROOMS PEOPLE Create a room Design Project Managers Soccer Team Development 3 Quality Assurance Coffee Club Finance Julien Hoarau Michael Oates Craig Petchell Royce Wong Tanguy Crusson Dugald Morrow Athan Zikou Lobby Design “Design must be functional and functionality must be translated into visual aesthetics” New chat Search history PEOPLE Tanguy Crusson Craig Petchell Patrick Streule Julien Hoarau Carlos Khatchikian Anthony Starr Anatoli Kazatchkov Michale Oates Oleg Karprov Lucy Denton Dugald Morrow Athan Zikou Josh Devenny Sascha Reuter Thomas Davies Glance Details 5 Configure integration How we learnt to give better design feedback at Atlassian 7 days ago Sparring is not that common in many software companies, and isn’t born out of that industry either which is maybe why. Medium · 3:39 PM New article by Atlassian Design Bitbucket · 6:50 PM Fixed a bug that was making Youtube videos flicker in chat view Reviewers: Craig Petchell Michael Oates #320 Videos now render nicely Message Action 1 Message Action 2 JIRA · 3:39 PM MM-123 Error messages in sign up screen should use standard templates. Type: Task Status: Priority: Major CODING Assignee: Michael Oates Anatoli Kazatchkov assigned MM-123 to Michael Oates · 3:39 PM Save Cancel Add-on Extend the Atlassian UI w/ modules
18. Recognize the user
19. Call the Atlassian applications REST API
20. Respond to web hooks
21. Register in the
24. Register Add-on Descriptor
25. Register Add-on Descriptor API Requests Webhooks
26. Register Add-on Descriptor API Requests Webhooks
27. HipChat Connect
28. Built with Atlassian Connect
29. An API to build add-ons as micro-services Public contracts Platform independent Loosely coupled Language agnostic
30. Integration via web protocols REST API Webhooks
31. App Extensibility "webPanel": [ { "key": "message.reminder.sidebar", "name": { "value": "Message Reminders" }, "location": "hipchat.sidebar.right", "url": "https://addon.example.com/reminders" } ]
32. App Extensibility
33. JavaScript API: drive the App Open room Open 1-1 chat Open dialog
34. Atlassian Connect for HipChat
36. ROOMS PEOPLE Create a room Design Project Managers Soccer Team Development 3 Quality Assurance Coffee Club Finance Julien Hoarau Michael Oates Craig Petchell Royce Wong Tanguy Crusson Dugald Morrow Athan Zikou Lobby Design “Design must be functional and functionality must be translated into visual aesthetics” New chat Search history PEOPLE Tanguy Crusson Craig Petchell Patrick Streule Julien Hoarau Carlos Khatchikian Anthony Starr Anatoli Kazatchkov Michale Oates Oleg Karprov Lucy Denton Dugald Morrow Athan Zikou Josh Devenny Sascha Reuter Thomas Davies
37. ROOMS PEOPLE Create a room Design Project Managers Soccer Team Development 3 Quality Assurance Coffee Club Finance Julien Hoarau Michael Oates Craig Petchell Royce Wong Tanguy Crusson Dugald Morrow Athan Zikou Lobby Design “Design must be functional and functionality must be translated into visual aesthetics” New chat Search history PEOPLE Tanguy Crusson Craig Petchell Patrick Streule Julien Hoarau Carlos Khatchikian Anthony Starr Anatoli Kazatchkov Michale Oates Oleg Karprov Lucy Denton Dugald Morrow Athan Zikou Josh Devenny Sascha Reuter Thomas Davies Views Glance Details 5 Configure integration
38. ROOMS PEOPLE Create a room Design Project Managers Soccer Team Development 3 Quality Assurance Coffee Club Finance Julien Hoarau Michael Oates Craig Petchell Royce Wong Tanguy Crusson Dugald Morrow Athan Zikou Lobby Design “Design must be functional and functionality must be translated into visual aesthetics” New chat Search history PEOPLE Tanguy Crusson Craig Petchell Patrick Streule Julien Hoarau Carlos Khatchikian Anthony Starr Anatoli Kazatchkov Michale Oates Oleg Karprov Lucy Denton Dugald Morrow Athan Zikou Josh Devenny Sascha Reuter Thomas Davies Views Glance Details 5 Configure integration Save Cancel Add-on
39. ROOMS PEOPLE Create a room Design Project Managers Soccer Team Development 3 Quality Assurance Coffee Club Finance Julien Hoarau Michael Oates Craig Petchell Royce Wong Tanguy Crusson Dugald Morrow Athan Zikou Lobby Design “Design must be functional and functionality must be translated into visual aesthetics” New chat Search history PEOPLE Tanguy Crusson Craig Petchell Patrick Streule Julien Hoarau Carlos Khatchikian Anthony Starr Anatoli Kazatchkov Michale Oates Oleg Karprov Lucy Denton Dugald Morrow Athan Zikou Josh Devenny Sascha Reuter Thomas Davies Views Glance Details 5 Configure integration Cards How we learnt to give better design feedback at Atlassian 7 days ago Sparring is not that common in many software companies, and isn’t born out of that industry either which is maybe why. Medium · 3:39 PM New article by Atlassian Design
40. ROOMS PEOPLE Create a room Design Project Managers Soccer Team Development 3 Quality Assurance Coffee Club Finance Julien Hoarau Michael Oates Craig Petchell Royce Wong Tanguy Crusson Dugald Morrow Athan Zikou Lobby Design “Design must be functional and functionality must be translated into visual aesthetics” New chat Search history PEOPLE Tanguy Crusson Craig Petchell Patrick Streule Julien Hoarau Carlos Khatchikian Anthony Starr Anatoli Kazatchkov Michale Oates Oleg Karprov Lucy Denton Dugald Morrow Athan Zikou Josh Devenny Sascha Reuter Thomas Davies Views Glance Details 5 Configure integration Cards How we learnt to give better design feedback at Atlassian 7 days ago Sparring is not that common in many software companies, and isn’t born out of that industry either which is maybe why. Medium · 3:39 PM New article by Atlassian Design JIRA · 3:39 PM MM-123 Error messages in sign up screen should use standard templates. Type: Task Status: Priority: Major CODING Assignee: Michael Oates Anatoli Kazatchkov assigned MM-123 to Michael Oates · 3:39 PM
41. ROOMS PEOPLE Create a room Design Project Managers Soccer Team Development 3 Quality Assurance Coffee Club Finance Julien Hoarau Michael Oates Craig Petchell Royce Wong Tanguy Crusson Dugald Morrow Athan Zikou Lobby Design “Design must be functional and functionality must be translated into visual aesthetics” New chat Search history PEOPLE Tanguy Crusson Craig Petchell Patrick Streule Julien Hoarau Carlos Khatchikian Anthony Starr Anatoli Kazatchkov Michale Oates Oleg Karprov Lucy Denton Dugald Morrow Athan Zikou Josh Devenny Sascha Reuter Thomas Davies Views Glance Details 5 Configure integration Cards How we learnt to give better design feedback at Atlassian 7 days ago Sparring is not that common in many software companies, and isn’t born out of that industry either which is maybe why. Medium · 3:39 PM New article by Atlassian Design Bitbucket · 6:50 PM Fixed a bug that was making Youtube videos flicker in chat view Reviewers: Craig Petchell Michael Oates #320 Videos now render nicely JIRA · 3:39 PM MM-123 Error messages in sign up screen should use standard templates. Type: Task Status: Priority: Major CODING Assignee: Michael Oates Anatoli Kazatchkov assigned MM-123 to Michael Oates · 3:39 PM
42. ROOMS PEOPLE Create a room Design Project Managers Soccer Team Development 3 Quality Assurance Coffee Club Finance Julien Hoarau Michael Oates Craig Petchell Royce Wong Tanguy Crusson Dugald Morrow Athan Zikou Lobby Design “Design must be functional and functionality must be translated into visual aesthetics” New chat Search history PEOPLE Tanguy Crusson Craig Petchell Patrick Streule Julien Hoarau Carlos Khatchikian Anthony Starr Anatoli Kazatchkov Michale Oates Oleg Karprov Lucy Denton Dugald Morrow Athan Zikou Josh Devenny Sascha Reuter Thomas Davies Views Glance Details 5 Configure integration Cards How we learnt to give better design feedback at Atlassian 7 days ago Sparring is not that common in many software companies, and isn’t born out of that industry either which is maybe why. Medium · 3:39 PM New article by Atlassian Design Bitbucket · 6:50 PM Fixed a bug that was making Youtube videos flicker in chat view Reviewers: Craig Petchell Michael Oates #320 Videos now render nicely 7 days ago Updated 5 hours ago Fixed a bug that was making Youtube videos flicker in chat #320 Videos now render nicely Patrick Streule Michael Oates Craig Petchell REVIEWERS STATUS OPEN JIRA · 3:39 PM MM-123 Error messages in sign up screen should use standard templates. Type: Task Status: Priority: Major CODING Assignee: Michael Oates Anatoli Kazatchkov assigned MM-123 to Michael Oates · 3:39 PM
43. ROOMS PEOPLE Create a room Design Project Managers Soccer Team Development 3 Quality Assurance Coffee Club Finance Julien Hoarau Michael Oates Craig Petchell Royce Wong Tanguy Crusson Dugald Morrow Athan Zikou Lobby Design “Design must be functional and functionality must be translated into visual aesthetics” New chat Search history PEOPLE Tanguy Crusson Craig Petchell Patrick Streule Julien Hoarau Carlos Khatchikian Anthony Starr Anatoli Kazatchkov Michale Oates Oleg Karprov Lucy Denton Dugald Morrow Athan Zikou Josh Devenny Sascha Reuter Thomas Davies Views Glance Details 5 Configure integration Cards How we learnt to give better design feedback at Atlassian 7 days ago Sparring is not that common in many software companies, and isn’t born out of that industry either which is maybe why. Medium · 3:39 PM New article by Atlassian Design Bitbucket · 6:50 PM Fixed a bug that was making Youtube videos flicker in chat view Reviewers: Craig Petchell Michael Oates #320 Videos now render nicely 7 days ago Error messages are not using the standard template. We should fix this problem. Status: Priority: Critical CODING Assignee: Michael Oates MM-123 Error messages in sign up screen… 7 days ago Updated 5 hours ago Fixed a bug that was making Youtube videos flicker in chat #320 Videos now render nicely Patrick Streule Michael Oates Craig Petchell REVIEWERS STATUS OPEN JIRA · 3:39 PM MM-123 Error messages in sign up screen should use standard templates. Type: Task Status: Priority: Major CODING Assignee: Michael Oates Anatoli Kazatchkov assigned MM-123 to Michael Oates · 3:39 PM
44. Actions ROOMS PEOPLE Create a room Design Project Managers Soccer Team Development 3 Quality Assurance Coffee Club Finance Julien Hoarau Michael Oates Craig Petchell Royce Wong Tanguy Crusson Dugald Morrow Athan Zikou Lobby Design “Design must be functional and functionality must be translated into visual aesthetics” New chat Search history PEOPLE Tanguy Crusson Craig Petchell Patrick Streule Julien Hoarau Carlos Khatchikian Anthony Starr Anatoli Kazatchkov Michale Oates Oleg Karprov Lucy Denton Dugald Morrow Athan Zikou Josh Devenny Sascha Reuter Thomas Davies Views Glance Details 5 Configure integration Cards How we learnt to give better design feedback at Atlassian 7 days ago Sparring is not that common in many software companies, and isn’t born out of that industry either which is maybe why. Medium · 3:39 PM New article by Atlassian Design Bitbucket · 6:50 PM Fixed a bug that was making Youtube videos flicker in chat view Reviewers: Craig Petchell Michael Oates #320 Videos now render nicely 7 days ago Error messages are not using the standard template. We should fix this problem. Status: Priority: Critical CODING Assignee: Michael Oates MM-123 Error messages in sign up screen… 7 days ago Updated 5 hours ago Fixed a bug that was making Youtube videos flicker in chat #320 Videos now render nicely Patrick Streule Michael Oates Craig Petchell REVIEWERS STATUS OPEN Input Action 1 Input Action 2 Input Action 3 JIRA · 3:39 PM MM-123 Error messages in sign up screen should use standard templates. Type: Task Status: Priority: Major CODING Assignee: Michael Oates Anatoli Kazatchkov assigned MM-123 to Michael Oates · 3:39 PM
45. Actions ROOMS PEOPLE Create a room Design Project Managers Soccer Team Development 3 Quality Assurance Coffee Club Finance Julien Hoarau Michael Oates Craig Petchell Royce Wong Tanguy Crusson Dugald Morrow Athan Zikou Lobby Design “Design must be functional and functionality must be translated into visual aesthetics” New chat Search history PEOPLE Tanguy Crusson Craig Petchell Patrick Streule Julien Hoarau Carlos Khatchikian Anthony Starr Anatoli Kazatchkov Michale Oates Oleg Karprov Lucy Denton Dugald Morrow Athan Zikou Josh Devenny Sascha Reuter Thomas Davies Views Glance Details 5 Configure integration Cards How we learnt to give better design feedback at Atlassian 7 days ago Sparring is not that common in many software companies, and isn’t born out of that industry either which is maybe why. Medium · 3:39 PM New article by Atlassian Design Bitbucket · 6:50 PM Fixed a bug that was making Youtube videos flicker in chat view Reviewers: Craig Petchell Michael Oates #320 Videos now render nicely 7 days ago Error messages are not using the standard template. We should fix this problem. Status: Priority: Critical CODING Assignee: Michael Oates MM-123 Error messages in sign up screen… 7 days ago Updated 5 hours ago Fixed a bug that was making Youtube videos flicker in chat #320 Videos now render nicely Patrick Streule Michael Oates Craig Petchell REVIEWERS STATUS OPEN Message Action 1 Message Action 2 Input Action 1 Input Action 2 Input Action 3 JIRA · 3:39 PM MM-123 Error messages in sign up screen should use standard templates. Type: Task Status: Priority: Major CODING Assignee: Michael Oates Anatoli Kazatchkov assigned MM-123 to Michael Oates · 3:39 PM
46. Glances Actions ROOMS PEOPLE Create a room Design Project Managers Soccer Team Development 3 Quality Assurance Coffee Club Finance Julien Hoarau Michael Oates Craig Petchell Royce Wong Tanguy Crusson Dugald Morrow Athan Zikou Lobby Design “Design must be functional and functionality must be translated into visual aesthetics” New chat Search history PEOPLE Tanguy Crusson Craig Petchell Patrick Streule Julien Hoarau Carlos Khatchikian Anthony Starr Anatoli Kazatchkov Michale Oates Oleg Karprov Lucy Denton Dugald Morrow Athan Zikou Josh Devenny Sascha Reuter Thomas Davies Views Glance Details 5 Configure integration Cards How we learnt to give better design feedback at Atlassian 7 days ago Sparring is not that common in many software companies, and isn’t born out of that industry either which is maybe why. Medium · 3:39 PM New article by Atlassian Design Bitbucket · 6:50 PM Fixed a bug that was making Youtube videos flicker in chat view Reviewers: Craig Petchell Michael Oates #320 Videos now render nicely 7 days ago Error messages are not using the standard template. We should fix this problem. Status: Priority: Critical CODING Assignee: Michael Oates MM-123 Error messages in sign up screen… 7 days ago Updated 5 hours ago Fixed a bug that was making Youtube videos flicker in chat #320 Videos now render nicely Patrick Streule Michael Oates Craig Petchell REVIEWERS STATUS OPEN Message Action 1 Message Action 2 Input Action 1 Input Action 2 Input Action 3 10 Useful statistic 9 With a lozenge Files Links PEOPLE +6 5 Cool statistic JIRA · 3:39 PM MM-123 Error messages in sign up screen should use standard templates. Type: Task Status: Priority: Major CODING Assignee: Michael Oates Anatoli Kazatchkov assigned MM-123 to Michael Oates · 3:39 PM
47. JavaScript API Open a dialog Create a room Open a room Open a 1-1 chat Listen to actions Insert text in the chat input
48. Bahaa Galal CTO & Co-Founder http://notify.ly @bahaagalal
49. Whenever your business gets mentioned online. Get Notified. “ ”
50. Whenever your business gets mentioned online. Get Notified. “ ”
58. Folks from these companies use Notify
59. Folks from these companies use Notify
70. "description": "Notify", "key": "notify-hipchat-connect", "name": "Notify", "vendor": { "name": "Notify", "url": "http://notify.ly" }, "links": { "self": “https://hipchat.notify.ly“ }, "capabilities": { "hipchatApiConsumer": { "scopes": ["send_notification"] }, "installable": { "allowGlobal": false, "allowRoom": true, "callbackUrl": "https://hipchat.notify.ly/install" }, "configurable": { "url": "https://hipchat.notify.ly/settings" } }
71. "glance": [{ "name": { "value": "Notify" }, "queryUrl": "https://hipchat.notify.ly/glance", "key": "notify-hipchat-glance", "target": "notify-hipchat-sidebar", "icon": { "url": "https://hipchat.notify.ly/images/notify-glance-icon.jpg", "url@2x": "https://hipchat.notify.ly/images/notify-glance-icon@2x.jpg" } }], "webPanel": [{ "key": "notify-hipchat-sidebar", "name": { "value": "Notify Inbox" }, "location": "hipchat.sidebar.right", "url": "https://hipchat.notify.ly/inbox" }]
72. Glance Update Cron Job
73. Discuss
74. Actions
75. Building an 
 HipChat Connect add-on PATRICK STREULE • ARCHITECT
76. HipChat Client Frameworks
77. Client Frameworks • Handle the installation flow • Handle API tokens • Handle JWT validation • Provide wrappers for the HipChat REST API NodeJS: https://bitbucket.org/hipchat/atlassian-connect-express-hipchat Python: https://bitbucket.org/atlassianlabs/ac-flask-hipchat/src
78. atlas-connect new -t hipchat my-addon
79. Capabilities descriptor
80. Add-on descriptor https://www.hipchat.com/docs/apiv2/capabilities
81. Validating your descriptor http://atlassian-connect-validator.herokuapp.com/validate?product=hipchat
82. Installation flow
83. Server-side
88. callbackUrl
90. configurable/url
91. configurable/url
92. Client-side
97. installedUrl
98. installedUrl
101. Lab 1 Create and install an add-on http://bit.ly/summit15-hc
102. Using the HipChat REST API
103. Token types Token type Makes the REST call as Add-on token The add-on User token a HipChat user Personal access token Your HipChat user account Room notification token The add-on (access limited to a room) +
104. Declaring scopes • Scopes give you access to REST endpoints • Scopes must be declared in the add-on descriptor (or you will get a 403) • Scopes must be approved by administrators at installation
105. Creating a token https://www.hipchat.com/docs/apiv2/method/generate_token
106. Creating a token https://www.hipchat.com/docs/apiv2/method/generate_token
107. Creating a token https://www.hipchat.com/docs/apiv2/method/generate_token
108. Creating a token https://www.hipchat.com/docs/apiv2/method/generate_token
109. Creating a token https://www.hipchat.com/docs/apiv2/method/generate_token kjhG976Ggpoiu986g
110. Example: sending a message
111. POST /v2/room/LabWeek/notification Authorization: Bearer kjhG976Ggpoiu986g Example: sending a message
112. POST /v2/room/LabWeek/notification Authorization: Bearer kjhG976Ggpoiu986g Example: sending a message
113. Webhooks • Listen to messages in HipChat rooms for a particular regex pattern • Send an optional response back, which will be posted as a message in the room Message webhooks Other events room_archived room_created room_deleted room_enter room_exit room_file_upload room_message room_notification room_topic_change room_unarchived
114. Lab 2 /hello you
115. API Rate Limits
116. Impersonating a user • You need to obtain permission from each user first • This is done via the standard OAuth2 Authorization Grant flow • Tokens must be refreshed
117. Humans + Bots • The only easy way for users to talk to your add-ons is via Webhooks in HipChat rooms for now • If you want to enable 1-1 conversations between users and bots: • You can implement a bot as a XMPP client, e.g. hubot • This will cost the HipChat team one user • You can create dedicated private rooms
118. Extending the HipChat Apps
119. ROOMS PEOPLE Create a room Design Project Managers Soccer Team Development 3 Quality Assurance Coffee Club Finance Julien Hoarau Michael Oates Craig Petchell Royce Wong Tanguy Crusson Dugald Morrow Athan Zikou Lobby Design “Design must be functional and functionality must be translated into visual aesthetics” New chat Search history PEOPLE Tanguy Crusson Craig Petchell Patrick Streule Julien Hoarau Carlos Khatchikian Anthony Starr Anatoli Kazatchkov Michale Oates Oleg Karprov Lucy Denton Dugald Morrow Athan Zikou Josh Devenny Sascha Reuter Thomas Davies
120. ROOMS PEOPLE Create a room Design Project Managers Soccer Team Development 3 Quality Assurance Coffee Club Finance Julien Hoarau Michael Oates Craig Petchell Royce Wong Tanguy Crusson Dugald Morrow Athan Zikou Lobby Design “Design must be functional and functionality must be translated into visual aesthetics” New chat Search history PEOPLE Tanguy Crusson Craig Petchell Patrick Streule Julien Hoarau Carlos Khatchikian Anthony Starr Anatoli Kazatchkov Michale Oates Oleg Karprov Lucy Denton Dugald Morrow Athan Zikou Josh Devenny Sascha Reuter Thomas Davies Views Glance Details 5 Configure integration
121. ROOMS PEOPLE Create a room Design Project Managers Soccer Team Development 3 Quality Assurance Coffee Club Finance Julien Hoarau Michael Oates Craig Petchell Royce Wong Tanguy Crusson Dugald Morrow Athan Zikou Lobby Design “Design must be functional and functionality must be translated into visual aesthetics” New chat Search history PEOPLE Tanguy Crusson Craig Petchell Patrick Streule Julien Hoarau Carlos Khatchikian Anthony Starr Anatoli Kazatchkov Michale Oates Oleg Karprov Lucy Denton Dugald Morrow Athan Zikou Josh Devenny Sascha Reuter Thomas Davies Views Glance Details 5 Configure integration Save Cancel Add-on
122. ROOMS PEOPLE Create a room Design Project Managers Soccer Team Development 3 Quality Assurance Coffee Club Finance Julien Hoarau Michael Oates Craig Petchell Royce Wong Tanguy Crusson Dugald Morrow Athan Zikou Lobby Design “Design must be functional and functionality must be translated into visual aesthetics” New chat Search history PEOPLE Tanguy Crusson Craig Petchell Patrick Streule Julien Hoarau Carlos Khatchikian Anthony Starr Anatoli Kazatchkov Michale Oates Oleg Karprov Lucy Denton Dugald Morrow Athan Zikou Josh Devenny Sascha Reuter Thomas Davies Views Glance Details 5 Configure integration Cards How we learnt to give better design feedback at Atlassian 7 days ago Sparring is not that common in many software companies, and isn’t born out of that industry either which is maybe why. Medium · 3:39 PM New article by Atlassian Design
123. ROOMS PEOPLE Create a room Design Project Managers Soccer Team Development 3 Quality Assurance Coffee Club Finance Julien Hoarau Michael Oates Craig Petchell Royce Wong Tanguy Crusson Dugald Morrow Athan Zikou Lobby Design “Design must be functional and functionality must be translated into visual aesthetics” New chat Search history PEOPLE Tanguy Crusson Craig Petchell Patrick Streule Julien Hoarau Carlos Khatchikian Anthony Starr Anatoli Kazatchkov Michale Oates Oleg Karprov Lucy Denton Dugald Morrow Athan Zikou Josh Devenny Sascha Reuter Thomas Davies Views Glance Details 5 Configure integration Cards How we learnt to give better design feedback at Atlassian 7 days ago Sparring is not that common in many software companies, and isn’t born out of that industry either which is maybe why. Medium · 3:39 PM New article by Atlassian Design JIRA · 3:39 PM MM-123 Error messages in sign up screen should use standard templates. Type: Task Status: Priority: Major CODING Assignee: Michael Oates Anatoli Kazatchkov assigned MM-123 to Michael Oates · 3:39 PM
124. ROOMS PEOPLE Create a room Design Project Managers Soccer Team Development 3 Quality Assurance Coffee Club Finance Julien Hoarau Michael Oates Craig Petchell Royce Wong Tanguy Crusson Dugald Morrow Athan Zikou Lobby Design “Design must be functional and functionality must be translated into visual aesthetics” New chat Search history PEOPLE Tanguy Crusson Craig Petchell Patrick Streule Julien Hoarau Carlos Khatchikian Anthony Starr Anatoli Kazatchkov Michale Oates Oleg Karprov Lucy Denton Dugald Morrow Athan Zikou Josh Devenny Sascha Reuter Thomas Davies Views Glance Details 5 Configure integration Cards How we learnt to give better design feedback at Atlassian 7 days ago Sparring is not that common in many software companies, and isn’t born out of that industry either which is maybe why. Medium · 3:39 PM New article by Atlassian Design Bitbucket · 6:50 PM Fixed a bug that was making Youtube videos flicker in chat view Reviewers: Craig Petchell Michael Oates #320 Videos now render nicely JIRA · 3:39 PM MM-123 Error messages in sign up screen should use standard templates. Type: Task Status: Priority: Major CODING Assignee: Michael Oates Anatoli Kazatchkov assigned MM-123 to Michael Oates · 3:39 PM
125. ROOMS PEOPLE Create a room Design Project Managers Soccer Team Development 3 Quality Assurance Coffee Club Finance Julien Hoarau Michael Oates Craig Petchell Royce Wong Tanguy Crusson Dugald Morrow Athan Zikou Lobby Design “Design must be functional and functionality must be translated into visual aesthetics” New chat Search history PEOPLE Tanguy Crusson Craig Petchell Patrick Streule Julien Hoarau Carlos Khatchikian Anthony Starr Anatoli Kazatchkov Michale Oates Oleg Karprov Lucy Denton Dugald Morrow Athan Zikou Josh Devenny Sascha Reuter Thomas Davies Views Glance Details 5 Configure integration Cards How we learnt to give better design feedback at Atlassian 7 days ago Sparring is not that common in many software companies, and isn’t born out of that industry either which is maybe why. Medium · 3:39 PM New article by Atlassian Design Bitbucket · 6:50 PM Fixed a bug that was making Youtube videos flicker in chat view Reviewers: Craig Petchell Michael Oates #320 Videos now render nicely 7 days ago Updated 5 hours ago Fixed a bug that was making Youtube videos flicker in chat #320 Videos now render nicely Patrick Streule Michael Oates Craig Petchell REVIEWERS STATUS OPEN JIRA · 3:39 PM MM-123 Error messages in sign up screen should use standard templates. Type: Task Status: Priority: Major CODING Assignee: Michael Oates Anatoli Kazatchkov assigned MM-123 to Michael Oates · 3:39 PM
126. ROOMS PEOPLE Create a room Design Project Managers Soccer Team Development 3 Quality Assurance Coffee Club Finance Julien Hoarau Michael Oates Craig Petchell Royce Wong Tanguy Crusson Dugald Morrow Athan Zikou Lobby Design “Design must be functional and functionality must be translated into visual aesthetics” New chat Search history PEOPLE Tanguy Crusson Craig Petchell Patrick Streule Julien Hoarau Carlos Khatchikian Anthony Starr Anatoli Kazatchkov Michale Oates Oleg Karprov Lucy Denton Dugald Morrow Athan Zikou Josh Devenny Sascha Reuter Thomas Davies Views Glance Details 5 Configure integration Cards How we learnt to give better design feedback at Atlassian 7 days ago Sparring is not that common in many software companies, and isn’t born out of that industry either which is maybe why. Medium · 3:39 PM New article by Atlassian Design Bitbucket · 6:50 PM Fixed a bug that was making Youtube videos flicker in chat view Reviewers: Craig Petchell Michael Oates #320 Videos now render nicely 7 days ago Error messages are not using the standard template. We should fix this problem. Status: Priority: Critical CODING Assignee: Michael Oates MM-123 Error messages in sign up screen… 7 days ago Updated 5 hours ago Fixed a bug that was making Youtube videos flicker in chat #320 Videos now render nicely Patrick Streule Michael Oates Craig Petchell REVIEWERS STATUS OPEN JIRA · 3:39 PM MM-123 Error messages in sign up screen should use standard templates. Type: Task Status: Priority: Major CODING Assignee: Michael Oates Anatoli Kazatchkov assigned MM-123 to Michael Oates · 3:39 PM
127. Actions ROOMS PEOPLE Create a room Design Project Managers Soccer Team Development 3 Quality Assurance Coffee Club Finance Julien Hoarau Michael Oates Craig Petchell Royce Wong Tanguy Crusson Dugald Morrow Athan Zikou Lobby Design “Design must be functional and functionality must be translated into visual aesthetics” New chat Search history PEOPLE Tanguy Crusson Craig Petchell Patrick Streule Julien Hoarau Carlos Khatchikian Anthony Starr Anatoli Kazatchkov Michale Oates Oleg Karprov Lucy Denton Dugald Morrow Athan Zikou Josh Devenny Sascha Reuter Thomas Davies Views Glance Details 5 Configure integration Cards How we learnt to give better design feedback at Atlassian 7 days ago Sparring is not that common in many software companies, and isn’t born out of that industry either which is maybe why. Medium · 3:39 PM New article by Atlassian Design Bitbucket · 6:50 PM Fixed a bug that was making Youtube videos flicker in chat view Reviewers: Craig Petchell Michael Oates #320 Videos now render nicely 7 days ago Error messages are not using the standard template. We should fix this problem. Status: Priority: Critical CODING Assignee: Michael Oates MM-123 Error messages in sign up screen… 7 days ago Updated 5 hours ago Fixed a bug that was making Youtube videos flicker in chat #320 Videos now render nicely Patrick Streule Michael Oates Craig Petchell REVIEWERS STATUS OPEN Input Action 1 Input Action 2 Input Action 3 JIRA · 3:39 PM MM-123 Error messages in sign up screen should use standard templates. Type: Task Status: Priority: Major CODING Assignee: Michael Oates Anatoli Kazatchkov assigned MM-123 to Michael Oates · 3:39 PM
128. Actions ROOMS PEOPLE Create a room Design Project Managers Soccer Team Development 3 Quality Assurance Coffee Club Finance Julien Hoarau Michael Oates Craig Petchell Royce Wong Tanguy Crusson Dugald Morrow Athan Zikou Lobby Design “Design must be functional and functionality must be translated into visual aesthetics” New chat Search history PEOPLE Tanguy Crusson Craig Petchell Patrick Streule Julien Hoarau Carlos Khatchikian Anthony Starr Anatoli Kazatchkov Michale Oates Oleg Karprov Lucy Denton Dugald Morrow Athan Zikou Josh Devenny Sascha Reuter Thomas Davies Views Glance Details 5 Configure integration Cards How we learnt to give better design feedback at Atlassian 7 days ago Sparring is not that common in many software companies, and isn’t born out of that industry either which is maybe why. Medium · 3:39 PM New article by Atlassian Design Bitbucket · 6:50 PM Fixed a bug that was making Youtube videos flicker in chat view Reviewers: Craig Petchell Michael Oates #320 Videos now render nicely 7 days ago Error messages are not using the standard template. We should fix this problem. Status: Priority: Critical CODING Assignee: Michael Oates MM-123 Error messages in sign up screen… 7 days ago Updated 5 hours ago Fixed a bug that was making Youtube videos flicker in chat #320 Videos now render nicely Patrick Streule Michael Oates Craig Petchell REVIEWERS STATUS OPEN Message Action 1 Message Action 2 Input Action 1 Input Action 2 Input Action 3 JIRA · 3:39 PM MM-123 Error messages in sign up screen should use standard templates. Type: Task Status: Priority: Major CODING Assignee: Michael Oates Anatoli Kazatchkov assigned MM-123 to Michael Oates · 3:39 PM
129. Glances Actions ROOMS PEOPLE Create a room Design Project Managers Soccer Team Development 3 Quality Assurance Coffee Club Finance Julien Hoarau Michael Oates Craig Petchell Royce Wong Tanguy Crusson Dugald Morrow Athan Zikou Lobby Design “Design must be functional and functionality must be translated into visual aesthetics” New chat Search history PEOPLE Tanguy Crusson Craig Petchell Patrick Streule Julien Hoarau Carlos Khatchikian Anthony Starr Anatoli Kazatchkov Michale Oates Oleg Karprov Lucy Denton Dugald Morrow Athan Zikou Josh Devenny Sascha Reuter Thomas Davies Views Glance Details 5 Configure integration Cards How we learnt to give better design feedback at Atlassian 7 days ago Sparring is not that common in many software companies, and isn’t born out of that industry either which is maybe why. Medium · 3:39 PM New article by Atlassian Design Bitbucket · 6:50 PM Fixed a bug that was making Youtube videos flicker in chat view Reviewers: Craig Petchell Michael Oates #320 Videos now render nicely 7 days ago Error messages are not using the standard template. We should fix this problem. Status: Priority: Critical CODING Assignee: Michael Oates MM-123 Error messages in sign up screen… 7 days ago Updated 5 hours ago Fixed a bug that was making Youtube videos flicker in chat #320 Videos now render nicely Patrick Streule Michael Oates Craig Petchell REVIEWERS STATUS OPEN Message Action 1 Message Action 2 Input Action 1 Input Action 2 Input Action 3 10 Useful statistic 9 With a lozenge Files Links PEOPLE +6 5 Cool statistic JIRA · 3:39 PM MM-123 Error messages in sign up screen should use standard templates. Type: Task Status: Priority: Major CODING Assignee: Michael Oates Anatoli Kazatchkov assigned MM-123 to Michael Oates · 3:39 PM
130. Cards
131. HipChat Cards • If the HipChat Client supports Cards, the card will be displayed • Otherwise, the backup message will be displayed {color, message, notify, message_format, card} • Cards can contain metadata • This is used by conditions on card actions metadata: { stuff: "value", }
132. Lab 3 You’re in a Card /hello
133. Glances
134. Declaring a HipChat Glance "glance": [ { "name": { "value": "An addon glance" }, "queryUrl": "{{baseUrl}}/glance", "key": "myaddon-glance", "target": "myaddon-sidebar", "icon": { "url": "{{localBaseUrl}}/img/logo.png", "url@2x": "{{baseUrl}}/img/logo.png" } } ] • A glance has a target, which is the key of the sidebar or dialog it opens • The glance name is only used as a fallback when the glance data cannot be loaded
135. Providing Glance data • Initial glance data (per user, per room) is requested by HipChat via the queryUrl • To update the glance data, your add-on posts to HipChat queryUrl
136. Glance data structure { "label": { "type": "html", "value": "<b>23</b> Builds" }, "status": { "type": "lozenge", "value": { "label": “ALL GOOD", "type": "current" } } } { "label": { "type": "html", "value": "<b>59</b> Hostile tweets" }, "status": { "type": "icon", "value": { "url": "https://…", "url@2x": "https://" } } } { "label": { "type": "html", "value": "<b>Everything is awesome</b>" } }
137. Glance conditions • Glance metadata and conditions can be used to specify if a Glance will show or not { "label": { "type": "html", "value": "<b>Everything is awesome</b>" }, "metadata": { "isConfigured": true } } "glance": [{ … "conditions": [ { "condition": "glance_matches", "params": { "metadata": [ { "attr": "isConfigured", "eq": true} ] } } ] }] Descriptor Glance metadata room_is_public, user_is_admin, user_is_guest, user_is_room_owner, glance_matches • Other conditions
138. Lab 4 Glances
139. Views
140. Declaring a HipChat View "webPanel": [ { "key": "myaddon-sidebar", "name": { "value": "My Add-on Sidebar" }, "location": "hipchat.sidebar.right", "url": "{{baseUrl}}/my-sidebar" } ] "dialog": [ { "key": "notes.dialog.create", "title": { "value": "Add New Note" }, "url": "{{localBaseUrl}}/new-note" } ] Sidebar Dialog
141. Implementing a View: imports <!--Required: Simple XDM library--> <script src="/js/iframe.min.js"></script> • Import the XDM library into your project (this will change in the future) • This creates a bridge between your View and the HipChat App • This gives your add-on access to the HipChat JavaScript library • Optionally, import the Atlassian user interface (AUI) <!-- Optional: AUI --> <link rel="stylesheet" href="//aui-cdn.atlassian.com/aui-adg/5.8.14/css/aui.css" media="all"> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script src="//aui-cdn.atlassian.com/aui-adg/5.8.14/js/aui.js"></script>
142. Implementing a View: securing with JWT • When loading your view, HipChat passes a signed JWT token • Your add-on verifies the token to ensure it comes from HipChat • The token contains contextual information about the request (e.g. OAuth ID, room ID, user ID) • You should also secure the communication between your add-on back-end and front end • This is taken care of by the HipChat client frameworks • ACE generates an add-on JWT token and makes it available in a property res.local.signed_request • It will end up as a {{signed_request}} property in Handlebar templates
143. Using the JavaScript API AP.require("dialog", function (dialog) { dialog.open({ key: “myaddon-dialog”, options: { … } }) }); AP.require("dialog", function(dialog) { dialog.update({ … }); }); AP.require("room", function(room){ room.create("Room Name", "Topic", “public/private"); room.open({roomId: 123456}); room.open({userId: 123456}); }); AP.require('chat', function(chat) { chat.appendMessage('Hello!!'); }); Dialogs Rooms and 1-1 Chat Chat input text • This will only work if you have imported the Simple XDM library! Sidebar AP.require('sidebar', function(sidebar) { sidebar.openView({ key: 'myaddon-sidebar-key' }); }
144. Lab 5 Sidebar
145. Actions
146. Declaring a HipChat Action "action": [ { "key": "message.note.create", "name": { "value": "Convert to Note" }, "target": “{target-id}”, "location": “{location}”, "conditions": [ { "condition": “{condition}” } ] } ] hipchat.message.action hipchat.input.action Dialog Sidebar/Glance External link room_is_public message_matches user_is_admin message_contains_link card_matches (metadata) • HipChat actions can be shown conditionally
147. Handling a HipChat Action • Register a listener for the action in the action target (sidebar, dialog) using the JavaScript API AP.register({ "my-action-key": function (message) { // magic } }); The action key from the descriptor Message: {body, sender, sender_mention, sender_id} Notification: {body, metadata}
148. Lab 6 Open a Dialog from a message
149. Lab 7 JavaScript API
150. http://connect.atlassian.com Build something amazing!
151. RALPH WHITBECK • DEVELOPER EVANGELIST Bitbucket Connect
163. Bitbucket & Atlassian Connect
164. Atlassian Connect REST Webhooks & UI elements Addons
168. JavaScript bridge
169. Live coding time!
170. @kannonboy Contrasting to and
171. atlassian-connect.json AP javascript library Add-on lifecycle JWT authentication iframes and context parameters REST APIs & webhooks AUI & ADG web items, web panels and conditions Comfy slippers
172. Coming soon
173. Add-on contexts Administrator Available to everyone
174. Add-on contexts Personal Team / Account
175. Javascript bridge Requires: - OAuth2 consumer - User to accept scopes
176. Different dev loop Local instance Atlassian Cloud
177. Different dev loop
178. And now, some statistics..
179. Bitbucket has 3,000,000+ users and 450,000+ teams
180. Professional teams 93% 7% 2% 98%
181. Professional teams 93% 7% 2% 98% Mostly closed source
182. Professional teams 93% 7% 2% 98% Mostly closed source Branches rather than forks
183. 87% 13% 7,000,000+ repos
184. 87% 13% Smaller pie still GIANT audience 7,000,000+ repos
185. 17% 5% 5% 5% 6% 6% 9% 10% 15% 22% …
186. 17% 5% 5% 5% 6% 6% 9% 10% 15% 22% … Vastly understated
187. < 256 KB < 1 MB < 10 MB < 100 MB < 1 GB 28% 18% 28% 20% 6%
188. 70% 19% 2% 9% Issues only Wiki only Issues & wiki Using JIRA & Confluence (most likely)
189. 70% 19% 2% 9% Issues only Wiki only Issues & wiki Using JIRA & Confluence (most likely)
190. Some more inspiration..
191. Reviewer Assigner Reviewer Assigner
192. Reviewer Assigner Reviewer Assigner
193. Reviewer Assigner Reviewer Assigner OPEN SOURCE
194. So, what do I build?
195. 3,000,000+
196. 3,000,000+ (developers)
197. Thank you!