Hipchat Custom Commands – Continually Improving our processes!

At NewVoiceMedia, like many companies, we hold Hackathons each quarter. This is a chance for everyone (not just developers) to create something that will be of benefit to our customers or help improve an internal process of the business. These small projects could be a proof of concept or a small feature that is ready to go straight into the Live product.

In the past, I’ve helped out on tiny projects with a couple of developers but for the last few hackathons, I’ve used it as a chance to improve my coding skills and create tools to help out other people. There has been a process that has bugged me for a while and we do the task every week, so I thought that it was a perfect place for improvement. We manually create/construct a URL that displays the release notes for our service, based on the “start” and “end” commit numbers, the “start” number being our deployed production version.  Like I said, this is a weekly task as that’s our current release frequency. I knew there was a better way and more efficient way to get this done. The URL in the images below is an internally used NVM address so it, won’t work anywhere outside of our Company.

A while back I read a great post by Neil Studd, He created a bot that was accessed via a custom slash command within the Slack platform. I thought it was impressive and it was something that I wanted to try to replicate myself! So I had a slight problem at the very beginning, we don’t use Slack at NVM (not my choice), we use Hipchat instead. I needed to figure out how I could get a custom slash command to work with that platform, thankfully, they do have their own version of this feature.

Similar to Neil’s method, I wanted to use Heroku to host my application, I mainly wanted to try this out because it was unfamiliar to me and it was a great opportunity to learn something new!!

Creating an MVP

I’ve recently been dabbling in NodeJS and creating little test tools that I use on my team, we also have a production API that uses this language so I’m quite comfortable in that space at the moment. For what I wanted to create, it was a perfect choice. I created a tiny Node Express app with a single POST “/notes” route, this was going to be the entry point from Hipchat. Once I got those two things hooked up and talking to each other I was sorted – because I’m a noob and couldn’t understand the Hipchat API Documentation fully, it took me bloody ages to figure out what was being sent from Hipchat and how I could grab that data to then start the next phase.

I found a video that really saved my skin and allowed me to move forward, the demo video used a tool called Requestbin that gives you a URL for Hipchat to POST the ongoing request. The Requestbin site then just displays every single piece of information in the request!! I was in business and I could navigate through the JSON, in the body of the request to get what I required.

Now that I had what I needed, I was able to use some Node modules to do most of the donkey work and get a working solution up and running quite quickly – At this point it was quite basic and very buggy, I think I broke it on the second request that I made to the application. I wasn’t actually thinking like a tester during the coding part, I was just trying to get something working. I actually don’t know why I didn’t plan and approach this like I would a normal project but you know, you live and learn.

 

mvp
My MVP

 

Bringing a tester onboard….

I needed to put my tester hat on and actually, think how I would use this application from a consumers point of view. I made a short bullet point list of possible ways that I can think that someone might use the tool or possible edge cases that I can mitigate against.

  • Entry point
    • /notes (I wanted this to be the only entry point)
    • /NOTES (I didn’t want this to return anything)
    • /NoTeS (I didn’t want this to return anything)
  • What could the user enter?
    • /notes valid number (/notes 12345)
    • /notes without a number
    • /notes number of digits (1, 2, many)
    • /notes and repeatedly entered 5 digit strings (/notes 12345 12345 12345)
    • /notes position in the sentence (“some words /notes 12345”)
  • Is the returned URL in the message a hyperlink? (Hipchat API auto picks up links, if in the correct message type “text/HTML”)
  • How do the other built-in slash commands behave (/code etc.)
  • What happens if the external GET resource is not available or returns the wrong data?

These are some of the questions that I was asking myself, I had many more but this is the general gist of the ideas in my head. The whole time that I was making changes to the code and then testing the outcomes I was thinking that I wanted to add something that would let me know what was going on behind the scenes of the application when the users were making requests. We recently had Richard Bradshaw come into our company to deliver his awesome Lego automation workshop, in this he mentioned “Giving your automation a voice” – This wasn’t test automation but I did want to know what was going on, it was only going to tell me if I actually told it too. I added log messages to the application at key points so that I could track what was actually happening rather than just seeing an output in a Hipchat room.

 

app_logging
Giving It A Voice

 

Another approach I was thinking about while testing was Ben Simo‘s FAILURE mnemonic if users were entering the wrong information, I wasn’t telling them (oops), It just didn’t return anything to the Hipchat room. That didn’t sit right with me and I used Ben’s heuristic to guide me, I wanted to give the users some feedback and let them know that “Something wasn’t quite right” with the data that they had inputted. As I could tell which Hipchat user sent the request, I grabbed that information from the JSON and made my returned messages (both good and bad) a bit more “friendly”. Manners don’t cost anything, as my Mum used to tell me.

 

release_notes_helper
Making It Friendly

 

error_handling
Appropriate Error Messages

 

Finding bugs in the wild…

I wanted to add an additional feature for users to specify a different environment when making the request (e.g. “/notes 12345 cloud4“), I initially defaulted the response to our main production node when users entered “/notes 12345“, as this matches the current behavior of the main internal release notes creation tool. I wanted to be a little bit more flexible, I had the opportunity to add extra functionality and let the users decide what the returned data was going to be. I added the code and rushed through the change, “It worked” so I left it and communicated out the new feature, giving an example of “exactly” how this worked. Great success! Maybe not…

 

cloud_request
Location Matching Feature

 

I’ve used Regular Expression in a number of places to capture certain things, I’m new to using Regex so I had a little help from the Regex101 site and also practised some of the Regex in the Chrome Dev Tools console (This was super useful!!). It turned out that my Regexfu is not so good and I omitted the “i” from the expression. meaning it was case sensitive so if someone entered “cloud4” it would return what they thought it would but “Cloud4” and “CLOUD4” wouldn’t return the same thing. From a users point of view, you would still get back a valid URL as it defaulted to a certain value if you didn’t enter exactly “cloud4”. I’ll get back to this issue.

Logging and Monitoring…

Using Heroku, I could access their built-in raw logs and could see what was happening while people started using the application. These were great and showed me what I wanted to see, the only trouble was, I had to go on to the Heroku site each time. At NVM we use Papertrail and I know that I could bolt on this log management tool to my Heroku app and feed the log messages into there. Great, I know this app and the search syntax so I was sorted….not quite, because we use in at NVM it annoyed me that I had to login and logout each time I want to see either the work logs or the ones that my app was producing.

Up stepped LogDNA – it was another option from the Heroku list, so I gave it a whirl. Luckily, the search syntax was very similar to Papertrail and it was extremely easy to get it set up in the way I wanted. It also had a feature where you can set up a notification on certain searches so that you get emailed when things start going wrong or just have something that lets you know who is using the app.

 

email_notification
Email Notification

 

Coming back to the Regex bug that I found earlier, I basically only saw this because of the logging that I had in place. I could see that a user had made a request, that should have failed (in my mind) but it returned the default value. I was able to spot the issue, fix it, test it and then deploy it again in super quick time without it impacting the users. Testability win!

Distribution…

I’ve now added this app to multiple Hipchat rooms and I’ve seen the usage steadily increase, which make it all worthwhile. I’ve also created an internal wiki page so that people can add it to any Hipchat room and it also explains some basic instructions with examples.

As well as doing this internally, I’ve knocked up a very simple bare-bones node app and placed this in a Github repository for anyone to use/rip apart etc.

You can grab the code here: https://github.com/DannyDainton/node-hipchatbot-basic

That was an epic read but hopefully, it makes sense and encourages other people to give things a go and try and improve a process that annoys you too!

Cheers!!

Advertisements

3 thoughts on “Hipchat Custom Commands – Continually Improving our processes!

  1. Neo May 25, 2017 / 10:09 am

    Hi,

    I have cloned the repo and followed the instructions but in the end how does it work with hipchat?
    Can you explain a bit more detailed or share a video how to do this?

    I tired the integration in hipchat by entering the URL and a slash command.

    Slash command: /hipchatbot
    URL: http:///hipchatbot

    I tested in POSTMAN and at least I get the response back. However I dont see any response while entering /hipchatbot on hipchat!

    Thanks in advance!

    Regards
    Neo

    • dannydainton May 25, 2017 / 4:19 pm

      Hey – Thanks for reading and for the question.

      So you will need to deploy your code and host it somewhere, I’ve used Heroku to host mine. You can choose anything that is externally available. If I understand your question correctly, you have the server running locally and when you make the request you can see the response but adding http://localhost:3000/hipchatbot in hipchat returns nothing.

      To help you out, I’ve deployed the same app from the repo to Heroku and you can add the “https://node-hipchatbot.herokuapp.com/hipchatbot” as the URL within Hipchat. This will hopefully give you an idea about the way it works.

      After the integration is added to the hipchat room – type: /hipchatbot

      This should give you a response back as a message in the room.

      I’ve added the new details to the readme on the repo.

      Hope this helps – If you’re still having problems, please give me a shout.

      Cheers,

      Danny

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s