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.
WireFrames
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 theme (i.e., 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
– User authentication using Bitbucket’s account (username, password)
– Displaying user Bitbucket account repos and also shared (personal and public) with
– Displaying repos in a table with their title, owner and last updated time.
– Clicking on a repo to view all its issues (If the repo has no issues, then it will not be clickable)
– Displaying issues in a table with its title, status, creator and last updated time.
– Filtering by text query in search
– Filtering by showing only the repos that have issues
– Filtering the issues and repos by their available fields (title, status, reported by, and last updated , assignee, etc)
– Displaying the selected repo issues offline (cache locally – only for selected repos)
– Manual Syncing via refresh button and Auto Syncing in Background after every 5 minute interval.
– Allowing users to create/add new issues via app directly,
– Enable/Disable notifications
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 it from here and let us know what you think about it!
We would love to hear your feedback. Thank you.
test
test
test