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

Build HipChat Connect add-ons with Node.js

Build HipChat Connect add-ons with Node.js

Slides from the RochesterJS Meetup on January 19, 2016. A simple workshop walking through creating an add-on for HipChat.

93533aa927a1c348f12903b5ba65aa80?s=128

Ralph Whitbeck

January 19, 2016
Tweet

Transcript

  1. RALPH WHITBECK • DEVELOPER EVANGELIST • ATLASSIAN • @REDWOLVES Building

    HipChat Connect add-ons with Node.js
  2. ATLASSIAN CONNECT WHAT IS HIPCHAT CONNECT? CODE UP A HIPCHAT

    ADD-ON Agenda
  3. Notification-only Three ways to build an add-on A popular way

    to build a lightweight add-on that can only send notification messages to HipChat rooms.
  4. BYO Wizard Notification-only Three ways to build an add-on The

    fastest way to build a very simple add-on that can send notification messages to a HipChat room for a single team. A popular way to build a lightweight add-on that can only send notification messages to HipChat rooms.
  5. Use the full API BYO Wizard Notification-only Three ways to

    build an add-on The fastest way to build a very simple add-on that can send notification messages to a HipChat room for a single team. A popular way to build a lightweight add-on that can only send notification messages to HipChat rooms. Add-ons built using the full API provide the best user experience.
  6. • Big cool statistic • 2,5 • Add-Ons in Marketplace

  7. What is HipChat Connect?

  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. Demo

  20. How does this all work?

  21. Atlassian Connect

  22. Confluence Bitbucket HipChat Supported in JIRA

  23. Atlassian Connect framework

  24. Atlassian Connect framework Micro-services Separate web applications that serve multi-tenants.

  25. 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.
  26. 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.
  27. Create a New product running 
 on top Extends with

    new features Integrate with other services A framework to build add-ons
  28. What does an Atlassian Connect add-on do?

  29. Declare itself with a descriptor

  30. Request appropriate scopes

  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 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
  32. Recognize the user

  33. Call the Atlassian applications REST API

  34. Respond to web hooks

  35. Register in the

  36. None
  37. None
  38. Register Add-on Descriptor

  39. Register Add-on Descriptor API Requests Webhooks

  40. Register Add-on Descriptor API Requests Webhooks

  41. Getting Started

  42. • A package to help you start a project to

    build add-ons easily atlas-connect npm install -g atlas-connect
  43. Create a HipChat project atlas-connect new -t hipchat name

  44. Demo

  45. • Must use ngrok to expose your site to HipChat

    • Need to update config.json to point to the ngrok url. Local development
  46. Lab Time

  47. • Fork the Bitbucket repo • http://bitbucket.org/rwhitbeck/rochesterjs-hipchat • Install the

    Cloud9 add-on • Open repo in Cloud9 • Start redis sudo service redis-server start • Run npm install && node app.js • Install into HipChat Lab 1
  48. Glances

  49. Glances • Shows useful information about an integration to a

    Room • Prevent spamming a room with many messages • Glances appear in sidebar • Click on a glance will opens a Sidebar view
  50. • Glance is declared in the descriptor file • Can

    declare more than one glance per add-on • Glances are dynamic and fetched from the integration server • The icon comes from the descriptor and the label and status are provided by the add-on Declaring a Glance
  51. Glance data

  52. Declaring a Glance "glance": [ { "name": { "value": "An

    addon glance" --> Is shown if the glance value cannot be loaded from your add-on (error state) or if queryUrl is not specified }, "queryUrl": "{{localBaseUrl}}/glance", --> REST endpoint exposed by the add-on for Glance data "key": "myaddon-glance", "target": "myaddon-sidebar", --> The key of a sidebar web panel, dialog or external page "icon": { "url": "{{localBaseUrl}}/img/logo.png", "url@2x": "{{localBaseUrl}}/img/logo.png" }, "conditions": [ ] } ]
  53. Node.js endpoint // This is an example glance that shows

    in the sidebar // https://developer.atlassian.com/hipchat/guide/hipchat-ui-extensions/glances app.get('/glance', cors(), addon.authenticate(), function(req, res) { res.json({ "label": { "type": "html", "value": "Rochester JS" } }); } );
  54. Lab Time

  55. • Add a glance called “RocJS Events” to the sidebar

    • Docs http://developer.atlassian.com/hipchat Lab 2
  56. Sidebar

  57. • Display custom HTML • Display a list of important

    objects • Display more information regarding a specific object • Allow users to take specialized actions Sidebar
  58. Declare a Sidebar "webPanel": [ { "key": "myaddon-sidebar", "name": {

    "value": "My Add-on Sidebar" }, "location": "hipchat.sidebar.right", "url": "{{baseUrl}}/sidebar" } ]
  59. • The Glance target property should match the sidebar key.

    • The target makes it so the sidebar opens when you click on the Glance Update the Glance
  60. Node.js endpoint // This is an example sidebar controller that

    can be launched when clicking on the glance. // https://developer.atlassian.com/hipchat/guide/hipchat-ui-extensions/views/sidebar app.get('/sidebar', addon.authenticate(), function(req, res) { res.render('sidebar', { identity: req.identity }); } );
  61. • Opens a view • Passes any information needed by

    the view. Node.js endpoint
  62. Lab Time

  63. • Declare a Sidebar • Update Glance to match sidebar

    key • Explore the Sidebar view HTML • Bonus: Create a list of upcoming events for Rochester JS Lab 3
  64. Thank you! RALPH WHITBECK • DEVELOPER EVANGELIST • ATLASSIAN •

    @REDWOLVES