Ever wanted to go to lunch with some colleagues and end up in an endless string of messages trying to line everyone up to meet in the lobby, pick a spot and show up on time? Next, everyone claims that their car is dirty and they don't want to drive. "It is not always this dirty I swear!"
- What if you could call for an Uber right from HipChat?
- What if your colleagues could join your ride?
- What if you could get a fare estimate then split the cost between the riders?
- What if you could see when the car pulled up in front of your office?
Sure, we could easily build an integration with Uber that used slash commands, but do you really want to trouble your users with typing in commands?
Introducing Uber for HipChat
If you've used the Uber app before, you'll know that the experience of requesting an Uber ride is pretty special. With essentially a tap, you can have a car head your way within just a few minutes. It's magic made possible by the little devices we all carry around.
We wanted to build an experience within HipChat that represents Uber and that magic. Slash commands or talking to a chat bot would not have provided that experience. With HipChat Connect, requesting a ride with Uber is intuitive and easy. Once a ride is requested, you're instantly notified in the room of your ride's status (as well as on your Uber mobile app).
In addition to requesting a ride, your team can can join a ride that's been requested. This gives you the ability to self organize without having to do the curbside shuffle.
When your team's ride is arriving, each rider will will be notified in the room:
All of these features amount to a rich experience that's intuitive and useful. Here’s a more complete demo:
The Uber API + HipChat Connect
Uber's API is very straightforward and easy to use. Everything you can do in the Uber app, you can pretty much do in their API – right down to tracking where your ride is in real-time. So, we set out to design the experience we wanted. We could have easily built a slash command based integration in a matter of hours:
But, now that we have HipChat Connect, a slash command solution seems like an anti-pattern. Slash commands are difficult to discover and use; Imagine typing in your destination address without auto-complete. While many of our technical users adore them, the other 80% of us are often confused with how to interact with them. HipChat Connect allowed us to build a more immersive user experience.
How did this come together?
This new integration with Uber was made possible by HipChat Connect and Uber's API. If we had built this integration without HipChat Connect, we'd be stuck with a bunch of slash commands that are difficult to use and impossible to remember – all the magic of Uber would be gone. The command line experience is still useful for those who prefer that. We actually have an /uber command stubbed out in our add-on, but haven't implemented it – and we may never implement it. The fact of the matter is, most users won't use a slash command if there's a better option available.
Underneath this new add-on is a bunch of really cool tech:
- Firebase – Firebase makes it easy for us to build a real-time service and UI.
- React / Redux – React is this decade's jQuery and what all the cool-kids are using to build highly maintainable UI views. Redux is the state manager that brings sanity and maintainability to web apps.
- Node / Express – We're using our own HipChat Connect SDK that's built on top of Node and Express
If you're interested in seeing what it looks like underneath the hood, feel free to clone it and run it locally. We've open sourced this add-on and would love for you to contribute to it:
How do I install this thing?
HipChat Connect is still in beta, but you can use it and build on it today. The next time you need a ride for your team, try using Uber from HipChat. Add it to your room today:
You can also find Uber for HipChat along with 100+ other awesome HipChat integrations and 2000+ add-ons for all Atlassian products in the Atlassian Marketplace.
If you’d like to see more features, reach out to us on Twitter at @hipchat or send us a pull request.