Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Enhance HipChat and Bitbucket with Add-ons

Enhance HipChat and Bitbucket with Add-ons

93533aa927a1c348f12903b5ba65aa80?s=128

Ralph Whitbeck

November 03, 2015
Tweet

Transcript

  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

  22. None
  23. None
  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

  35. None
  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. “ ”

  51. None
  52. None
  53. None
  54. None
  55. None
  56. None
  57. None
  58. Folks from these companies use Notify

  59. Folks from these companies use Notify

  60. None
  61. None
  62. None
  63. None
  64. None
  65. None
  66. None
  67. None
  68. None
  69. 4

  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

  84. None
  85. None
  86. None
  87. None
  88. callbackUrl

  89. None
  90. configurable/url

  91. configurable/url

  92. Client-side

  93. None
  94. None
  95. None
  96. None
  97. installedUrl

  98. installedUrl

  99. None
  100. None
  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

  152. None
  153. None
  154. None
  155. None
  156. None
  157. None
  158. None
  159. None
  160. None
  161. None
  162. None
  163. Bitbucket & Atlassian Connect

  164. Atlassian Connect REST Webhooks & UI elements Addons

  165. None
  166. None
  167. None
  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!