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

Ralph Whitbeck

November 03, 2015
Tweet

More Decks by Ralph Whitbeck

Other Decks in Technology

Transcript

  1. 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
  2. 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.
  3. 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.
  4. Create a New product running 
 on top Extends with

    new features Integrate with other services A framework to build add-ons
  5. 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
  6. An API to build add-ons as micro-services Public contracts Platform

    independent Loosely coupled Language agnostic
  7. App Extensibility "webPanel": [ { "key": "message.reminder.sidebar", "name": { "value":

    "Message Reminders" }, "location": "hipchat.sidebar.right", "url": "https://addon.example.com/reminders" } ]
  8. 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
  9. 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
  10. 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
  11. 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
  12. 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
  13. 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
  14. 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
  15. 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
  16. 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
  17. 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
  18. 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
  19. 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
  20. 4

  21. "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" } }
  22. "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/[email protected]" } }], "webPanel": [{ "key": "notify-hipchat-sidebar", "name": { "value": "Notify Inbox" }, "location": "hipchat.sidebar.right", "url": "https://hipchat.notify.ly/inbox" }]
  23. 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
  24. 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) +
  25. 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
  26. 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
  27. 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
  28. 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
  29. 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
  30. 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
  31. 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
  32. 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
  33. 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
  34. 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
  35. 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
  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 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
  37. 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
  38. 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
  39. 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
  40. 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", }
  41. 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
  42. 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
  43. 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>" } }
  44. 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
  45. 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
  46. 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>
  47. 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
  48. 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' }); }
  49. 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
  50. 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}
  51. 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
  52. 17% 5% 5% 5% 6% 6% 9% 10% 15% 22%

    … Vastly understated
  53. < 256 KB < 1 MB < 10 MB <

    100 MB < 1 GB 28% 18% 28% 20% 6%
  54. 70% 19% 2% 9% Issues only Wiki only Issues &

    wiki Using JIRA & Confluence (most likely)
  55. 70% 19% 2% 9% Issues only Wiki only Issues &

    wiki Using JIRA & Confluence (most likely)