A few weeks ago, we introduced Atlassian Connect for Bitbucket, an add-on framework that lets you modify the Bitbucket UI. This post is a quick walkthrough on how to build a simple add-on that retrieves data from a repository, does some simple aggregation and displays it to the user.
Here’s a screenshot of the add-on we’ll be building:
The add-on creates a new link in the left-hand Bitbucket navigation menu (labelled File types in the screenshot above) and a new repository view that shows the types of files present in the repository. For a little bit of visual appeal, we’ll use a simple word cloud to represent how many files of each type are present. The
font-size for each file type corresponds to the number of times it occurs in the repository.
The video tutorial is thirty minutes long, but teaches you everything you need to know about building a static Bitbucket add-on from scratch. I recommend viewing it in full screen mode on YouTube.com in glorious 1080p:
Alternatively, if you’d prefer to dive right in and start hacking on your own add-on, you can jump straight to:
- the source code for the tutorial add-on,
- the Atlassian Connect for Bitbucket developer docs; or
- the Bitbucket add-on 5 minute quickstart.
If you’ve enjoyed the tutorial, or have questions or comments regarding Atlassian Connect, please hit me up on Twitter! I’m @kannonboy.