Bitbucket Issues Viewer

Narain Sagar
Mar 1, 2017 · 4 min read

FYI: This was my first ever blog post I written in my life.

Bitbucket & its Issue Tracker:

Bitbucket is a widely used tool by developers for source code versioning and project management. It is a cloud based hosting service, which offers both free accounts and paid plans.

Bitbucket has a whole host of capabilities. This post, however, will focus on its Issues Tracking feature. It’s a space under each project repository where a project’s feature requests and bug reports are raised by repository users.

The Idea — Bitbucket Issues Chrome Extension:

Bitbucket is a part of our daily workflow; we host all our projects on it. The main problem we had was opening Bitbucket’s website and going to the issues page over and again, just to view updates. What we needed was a small native app, which will allow access to issue on Bitbucket quickly and let us know about the basic updates (resolved / created / etc) without going to Bitbucket itself. We also wanted it to work in offline mode so that its not dependent on internet connectivity when viewing older issues/updates.

The starting point was a requirements analysis and a basic class diagram of how our app will look like from a design and code point of view.

Creating WireFrames:

Creating Class Diagram:

Implementation, Setting up the codebase | Choosing the frameworks / libraries:

We used Bootstrap for styling all the components of this app and used a Bootswatch Paper theme to top it all off.

For JS framework, we used Angular (MustacheJS) for a dynamic rendering of the view and the DynaTable jQuery plugin for adding interactivity to our views.

We also used GruntJS for automating our development process. For testing, we employed the TDD (Test Driven Development) approach. The libraries which we used for testing were Protractor for functional testing and MochaJS & ChaiJS for unit testing.

We kicked everything off by scaffolding the app using Yeoman generator and adding the required libraries using Bower & npm. Then we configured & isolated the calls from Bitbucket’s Web API Console to get a list of repositories and their respecting issues.

The Application Codebase — MVC (Model View Controller)

We had weekly sprints for building out the app — slowly adding features to it one by one (This was a side project of ours). Every week we released a new version of the app to all our colleagues at Recurship who would then use it and send feedback. This cycle was very important, as it helped us to understand what was important and needed for this application.

After several iterations, the app was ready for publishing. The basic features include configuring the repositories and its issues and filter by title, status and date. You can also create a new issue from the extension. The two favorite features for me were the keyboard shortcut toggle (command + shift + 9) which shows or hides the app instantly, and the auto refresh (in background), which checks for changes on a 5 min interval and gives desktop notifications.

Available Features

Following features are available in the current version (v2.0):

  • Accessing the extension in the browser toolbar

We have used basic authentication (i.e., using username and password) for now. We plan on converting to OAuth. OAuth is considered to be fairly tricky when implementing in Chrome apps, and requires logic to renew tokens every hour, thus we chose basic authentication for our MVP.

We have adopted the Bitbucket Issues Viewer in our daily workflow. We are also looking to improve it for a more wider audience.

Download and install the app from here and let us know what you think about it!

We would love to hear your feedback. Thank you.

Cheers,

Originally published at recurship.com/blog/bitbucket-issues-viewer-js

Narain Sagar

Full Stack JavaScript Developer, Currently focusing on Node.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store