Enhance HipChat and Bitbucket with Add-ons

Slide 1

Slide 1 text

RALPH WHITBECK • DEVELOPER EVANGELIST • PATRICK STREULE • ARCHITECT Enhance HipChat and Bitbucket with Add-ons

Slide 2

Slide 2 text

SSID: Summit15-Training  Password: SummitTra1n

Slide 3

Slide 3 text

http://bitbucket.org/hipchat/ hipchat-connect-training

Slide 4

Slide 4 text

http://bit.ly/summit15-hc

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

ATLASSIAN CONNECT HIPCHAT CONNECT BITBUCKET CONNECT Agenda

Slide 7

Slide 7 text

Atlassian Connect

Slide 8

Slide 8 text

Atlassian Connect framework

Slide 9

Slide 9 text

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

Slide 10

Slide 10 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 11

Slide 11 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 12

Slide 12 text

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

Slide 13

Slide 13 text

Confluence Bitbucket HipChat Supported in JIRA

Slide 14

Slide 14 text

What does an Atlassian Connect add-on do?

Slide 15

Slide 15 text

Declare itself with a descriptor

Slide 16

Slide 16 text

Request appropriate scopes

Slide 17

Slide 17 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 18

Slide 18 text

Recognize the user

Slide 19

Slide 19 text

Call the Atlassian applications REST API

Slide 20

Slide 20 text

Respond to web hooks

Slide 21

Slide 21 text

Slide 22

Slide 22 text

No content

Slide 23

Slide 23 text

No content

Slide 24

Slide 24 text

Slide 25

Slide 25 text

Slide 26

Slide 26 text

Slide 27

Slide 27 text

HipChat Connect

Slide 28

Slide 28 text

Built with Atlassian Connect

Slide 29

Slide 29 text

An API to build add-ons as micro-services Public contracts Platform independent Loosely coupled Language agnostic

Slide 30

Slide 30 text

Integration via web protocols REST API Webhooks

Slide 31

Slide 31 text

App Extensibility "webPanel": [ { "key": "message.reminder.sidebar", "name": { "value": "Message Reminders" }, "location": "hipchat.sidebar.right", "url": "https://addon.example.com/reminders" } ]

Slide 32

Slide 32 text

App Extensibility

Slide 33

Slide 33 text

JavaScript API: drive the App Open room Open 1-1 chat Open dialog

Slide 34

Slide 34 text

Atlassian Connect for HipChat

Slide 35

Slide 35 text

No content

Slide 36

Slide 36 text

Slide 37

Slide 37 text

Slide 38

Slide 38 text

Slide 39

Slide 39 text

Slide 40

Slide 40 text

Slide 41

Slide 41 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 42

Slide 42 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 43

Slide 43 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 44

Slide 44 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 45

Slide 45 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 46

Slide 46 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 47

Slide 47 text

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

Slide 48

Slide 48 text

Bahaa Galal CTO & Co-Founder http://notify.ly @bahaagalal

Slide 49

Slide 49 text

Whenever your business gets mentioned online. Get Notiﬁed. “ ”

Slide 50

Slide 50 text

Whenever your business gets mentioned online. Get Notiﬁed. “ ”

Slide 51

Slide 51 text

No content

Slide 52

Slide 52 text

No content

Slide 53

Slide 53 text

No content

Slide 54

Slide 54 text

No content

Slide 55

Slide 55 text

No content

Slide 56

Slide 56 text

No content

Slide 57

Slide 57 text

No content

Slide 58

Slide 58 text

Folks from these companies use Notify

Slide 59

Slide 59 text

Folks from these companies use Notify

Slide 60

Slide 60 text

No content

Slide 61

Slide 61 text

No content

Slide 62

Slide 62 text

No content

Slide 63

Slide 63 text

No content

Slide 64

Slide 64 text

No content

Slide 65

Slide 65 text

No content

Slide 66

Slide 66 text

No content

Slide 67

Slide 67 text

No content

Slide 68

Slide 68 text

No content

Slide 69

Slide 69 text

Slide 70

Slide 70 text

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

Slide 71

Slide 71 text

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

Slide 72

Slide 72 text

Glance Update Cron Job

Slide 73

Slide 73 text

Discuss

Slide 74

Slide 74 text

Actions

Slide 75

Slide 75 text

Building an   HipChat Connect add-on PATRICK STREULE • ARCHITECT

Slide 76

Slide 76 text

HipChat Client Frameworks

Slide 77

Slide 77 text

Client Frameworks • Handle the installation ﬂow • 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-ﬂask-hipchat/src

Slide 78

Slide 78 text

atlas-connect new -t hipchat my-addon

Slide 79

Slide 79 text

Capabilities descriptor

Slide 80

Slide 80 text

Add-on descriptor https://www.hipchat.com/docs/apiv2/capabilities

Slide 81

Slide 81 text

Validating your descriptor http://atlassian-connect-validator.herokuapp.com/validate?product=hipchat

Slide 82

Slide 82 text

Installation flow

Slide 83

Slide 83 text

Server-side

Slide 84

Slide 84 text

No content

Slide 85

Slide 85 text

No content

Slide 86

Slide 86 text

No content

Slide 87

Slide 87 text

No content

Slide 88

Slide 88 text

callbackUrl

Slide 89

Slide 89 text

No content

Slide 90

Slide 90 text

configurable/url

Slide 91

Slide 91 text

configurable/url

Slide 92

Slide 92 text

Client-side

Slide 93

Slide 93 text

No content

Slide 94

Slide 94 text

No content

Slide 95

Slide 95 text

No content

Slide 96

Slide 96 text

No content

Slide 97

Slide 97 text

installedUrl

Slide 98

Slide 98 text

installedUrl

Slide 99

Slide 99 text

No content

Slide 100

Slide 100 text

No content

Slide 101

Slide 101 text

Lab 1 Create and install an add-on http://bit.ly/summit15-hc

Slide 102

Slide 102 text

Using the HipChat REST API

Slide 103

Slide 103 text

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 notiﬁcation token The add-on (access limited to a room) +

Slide 104

Slide 104 text

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

Slide 105

Slide 105 text

Creating a token https://www.hipchat.com/docs/apiv2/method/generate_token

Slide 106

Slide 106 text

Creating a token https://www.hipchat.com/docs/apiv2/method/generate_token

Slide 107

Slide 107 text

Creating a token https://www.hipchat.com/docs/apiv2/method/generate_token

Slide 108

Slide 108 text

Creating a token https://www.hipchat.com/docs/apiv2/method/generate_token

Slide 109

Slide 109 text

Creating a token https://www.hipchat.com/docs/apiv2/method/generate_token kjhG976Ggpoiu986g

Slide 110

Slide 110 text

Example: sending a message

Slide 111

Slide 111 text

POST /v2/room/LabWeek/notification Authorization: Bearer kjhG976Ggpoiu986g Example: sending a message

Slide 112

Slide 112 text

POST /v2/room/LabWeek/notification Authorization: Bearer kjhG976Ggpoiu986g Example: sending a message

Slide 113

Slide 113 text

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

Slide 114

Slide 114 text

Lab 2 /hello you

Slide 115

Slide 115 text

API Rate Limits

Slide 116

Slide 116 text

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

Slide 117

Slide 117 text

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

Slide 118

Slide 118 text

Extending the HipChat Apps

Slide 119

Slide 119 text

Slide 120

Slide 120 text

Slide 121

Slide 121 text

Slide 122

Slide 122 text

Slide 123

Slide 123 text

Slide 124

Slide 124 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 125

Slide 125 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 126

Slide 126 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 127

Slide 127 text

Slide 128

Slide 128 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 129

Slide 129 text

Slide 130

Slide 130 text

Cards

Slide 131

Slide 131 text

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", }

Slide 132

Slide 132 text

Lab 3 You’re in a Card /hello

Slide 133

Slide 133 text

Glances

Slide 134

Slide 134 text

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

Slide 135

Slide 135 text

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

Slide 136

Slide 136 text

Glance data structure { "label": { "type": "html", "value": "23 Builds" }, "status": { "type": "lozenge", "value": { "label": “ALL GOOD", "type": "current" } } } { "label": { "type": "html", "value": "59 Hostile tweets" }, "status": { "type": "icon", "value": { "url": "https://…", "url@2x": "https://" } } } { "label": { "type": "html", "value": "Everything is awesome" } }

Slide 137

Slide 137 text

Glance conditions • Glance metadata and conditions can be used to specify if a Glance will show or not { "label": { "type": "html", "value": "Everything is awesome" }, "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

Slide 138

Slide 138 text

Lab 4 Glances

Slide 139

Slide 139 text

Views

Slide 140

Slide 140 text

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

Slide 141

Slide 141 text

Implementing a View: imports • 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)

Slide 142

Slide 142 text

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

Slide 143

Slide 143 text

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

Slide 144

Slide 144 text

Lab 5 Sidebar

Slide 145

Slide 145 text

Actions

Slide 146

Slide 146 text

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

Slide 147

Slide 147 text

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}

Slide 148

Slide 148 text

Lab 6 Open a Dialog from a message

Slide 149

Slide 149 text

Lab 7 JavaScript API

Slide 150

Slide 150 text

http://connect.atlassian.com Build something amazing!

Slide 151

Slide 151 text

RALPH WHITBECK • DEVELOPER EVANGELIST Bitbucket Connect

Slide 152

Slide 152 text

No content

Slide 153

Slide 153 text

No content

Slide 154

Slide 154 text

No content

Slide 155

Slide 155 text

No content

Slide 156

Slide 156 text

No content

Slide 157

Slide 157 text

No content

Slide 158

Slide 158 text

No content

Slide 159

Slide 159 text

No content

Slide 160

Slide 160 text

No content

Slide 161

Slide 161 text

No content

Slide 162

Slide 162 text

No content

Slide 163

Slide 163 text

Bitbucket & Atlassian Connect

Slide 164

Slide 164 text

Atlassian Connect REST Webhooks & UI elements Addons

Slide 165

Slide 165 text

No content

Slide 166

Slide 166 text

No content

Slide 167

Slide 167 text

No content

Slide 168

Slide 168 text

JavaScript bridge

Slide 169

Slide 169 text

Live coding time!

Slide 170

Slide 170 text

@kannonboy Contrasting to and

Slide 171

Slide 171 text

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

Slide 172

Slide 172 text

Coming soon

Slide 173

Slide 173 text

Add-on contexts Administrator Available to everyone

Slide 174

Slide 174 text

Add-on contexts Personal Team / Account

Slide 175

Slide 175 text

Javascript bridge Requires: - OAuth2 consumer - User to accept scopes

Slide 176

Slide 176 text

Different dev loop Local instance Atlassian Cloud

Slide 177

Slide 177 text

Different dev loop

Slide 178

Slide 178 text

And now, some statistics..

Slide 179

Slide 179 text

Bitbucket has 3,000,000+ users and 450,000+ teams

Slide 180

Slide 180 text

Professional teams 93% 7% 2% 98%

Slide 181

Slide 181 text

Professional teams 93% 7% 2% 98% Mostly closed source

Slide 182

Slide 182 text

Professional teams 93% 7% 2% 98% Mostly closed source Branches rather than forks

Slide 183

Slide 183 text

87% 13% 7,000,000+ repos

Slide 184

Slide 184 text

87% 13% Smaller pie still GIANT audience 7,000,000+ repos

Slide 185

Slide 185 text

17% 5% 5% 5% 6% 6% 9% 10% 15% 22% …

Slide 186

Slide 186 text

17% 5% 5% 5% 6% 6% 9% 10% 15% 22% … Vastly understated

Slide 187

Slide 187 text

< 256 KB < 1 MB < 10 MB < 100 MB < 1 GB 28% 18% 28% 20% 6%

Slide 188

Slide 188 text

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

Slide 189

Slide 189 text

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