Slide 1

Slide 1 text

RALPH WHITBECK • DEVELOPER EVANGELIST • ATLASSIAN • @REDWOLVES Building HipChat Connect add-ons with Node.js

Slide 2

Slide 2 text

ATLASSIAN CONNECT WHAT IS HIPCHAT CONNECT? CODE UP A HIPCHAT ADD-ON Agenda

Slide 3

Slide 3 text

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.

Slide 4

Slide 4 text

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.

Slide 5

Slide 5 text

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.

Slide 6

Slide 6 text

• Big cool statistic • 2,5 • Add-Ons in Marketplace

Slide 7

Slide 7 text

What is HipChat Connect?

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

Demo

Slide 20

Slide 20 text

How does this all work?

Slide 21

Slide 21 text

Atlassian Connect

Slide 22

Slide 22 text

Confluence Bitbucket HipChat Supported in JIRA

Slide 23

Slide 23 text

Atlassian Connect framework

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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.

Slide 26

Slide 26 text

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.

Slide 27

Slide 27 text

Create a New product running 
 on top Extends with new features Integrate with other services A framework to build add-ons

Slide 28

Slide 28 text

What does an Atlassian Connect add-on do?

Slide 29

Slide 29 text

Declare itself with a descriptor

Slide 30

Slide 30 text

Request appropriate scopes

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

Recognize the user

Slide 33

Slide 33 text

Call the Atlassian applications REST API

Slide 34

Slide 34 text

Respond to web hooks

Slide 35

Slide 35 text

Register in the

Slide 36

Slide 36 text

No content

Slide 37

Slide 37 text

No content

Slide 38

Slide 38 text

Register Add-on Descriptor

Slide 39

Slide 39 text

Register Add-on Descriptor API Requests Webhooks

Slide 40

Slide 40 text

Register Add-on Descriptor API Requests Webhooks

Slide 41

Slide 41 text

Getting Started

Slide 42

Slide 42 text

• A package to help you start a project to build add-ons easily atlas-connect npm install -g atlas-connect

Slide 43

Slide 43 text

Create a HipChat project atlas-connect new -t hipchat name

Slide 44

Slide 44 text

Demo

Slide 45

Slide 45 text

• Must use ngrok to expose your site to HipChat • Need to update config.json to point to the ngrok url. Local development

Slide 46

Slide 46 text

Lab Time

Slide 47

Slide 47 text

• 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

Slide 48

Slide 48 text

Glances

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

• 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

Slide 51

Slide 51 text

Glance data

Slide 52

Slide 52 text

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": [ ] } ]

Slide 53

Slide 53 text

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" } }); } );

Slide 54

Slide 54 text

Lab Time

Slide 55

Slide 55 text

• Add a glance called “RocJS Events” to the sidebar • Docs http://developer.atlassian.com/hipchat Lab 2

Slide 56

Slide 56 text

Sidebar

Slide 57

Slide 57 text

• Display custom HTML • Display a list of important objects • Display more information regarding a specific object • Allow users to take specialized actions Sidebar

Slide 58

Slide 58 text

Declare a Sidebar "webPanel": [ { "key": "myaddon-sidebar", "name": { "value": "My Add-on Sidebar" }, "location": "hipchat.sidebar.right", "url": "{{baseUrl}}/sidebar" } ]

Slide 59

Slide 59 text

• 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

Slide 60

Slide 60 text

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 }); } );

Slide 61

Slide 61 text

• Opens a view • Passes any information needed by the view. Node.js endpoint

Slide 62

Slide 62 text

Lab Time

Slide 63

Slide 63 text

• 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

Slide 64

Slide 64 text

Thank you! RALPH WHITBECK • DEVELOPER EVANGELIST • ATLASSIAN • @REDWOLVES