Continuous Everything – From Coding to Feedback

Web development integration: integrate project management tool asana with bug tracker

Continuous Integration and Continuous Deployment are strong concepts in modern software development and specifically useful and necessary for cloud applications. Delivering code continuously keeps the product development agile and allows for fast iterations. Specifically when it comes to SaaS products or services, the way to ship software has to follow the continuous track, delivering new “releases” several times a day. For example, at Quora every commit is submitted to the production system, unless this process is actively suppressed.

Ever decreasing software release cycles also require to rethink the way feedback from real users is gathered. Bimonthly user experience reviews with a selected set of customers are not suitable if new features of a product are published daily. Tools to suggest improvements and to report bugs need to be actively integrated in the product development process, addressing not only a selected group of testers but also includes real users.

This blog post is essentially an extended tutorial, explaining how to set up a 3C software production chain:- Continuous Integration, Continuous Deployment and Continuous Feedback.

We will use Microsoft Visual Studio and deploy directly to Windows Azure (Section 1). After that we connect Microsoft Team Foundation Server Online to our tool chain (Section 2) and subsequently connecting TFS with Windows Azure to establish Continuous Deployment directly from Visual Studio (Section 3). Finally we will add Usersnap to introduce Continuous Feedback to our setup (Section 4).

Since a standard “Hello-World” approach is always disappointing, we decided to create a tweet-wall which displays tweets containing the hashtag #usersnap. Lots of screenshots should provide a step-by-step tutorial to get you started with Visual Studio 2012, Team Foundation Service and Azure and finally Usersnap. There is no need to write code while walking through this tutorial.

1. How to deploy your WCF application in Azure

Pushing code to Microsoft Azure

Before we start, please make sure to either have a recent version of Visual Studio installed.

– alternatively you may download Visual Studio Express 2012 for Web with Windows Azure SDK (V11.0.507727 from Oct, 26 2012). Then get the Usersnap TFS Demo code: Usersnap TFS Tweet Wall Demo. Open the solution, build and run it – a browser should start displaying the demo application – a tweet wall which displays recent tweets about Usersnap.

Since we want to deploy this application in Azure, we need an Azure account. You can sign up for a Windows Azure Account here: http://www.windowsazure.com  – there is a free 90 day trial available.

Next, you need to connect your Visual Studio project with Azure. Right-click on your project and choose “Publish to Windows Azure…”.
Windows Azure Subscription Setup

Upload the certificate from step 2. (“Copy the full path”) in your Azure Management Console under “Settings” – “Management Certificates”. Then you need to set up your Azure subscription details, the subscription ID can be found in your Azure management console: Windows Azure Management.

Manage Azure certificates

After that, you will be asked to specify a cloud service. Choose a meaningful name and a location – the name will be used as deployment domain URL.

Windows Azure Publish Settings

Now you are ready to deploy your WCF application to Azure – simply start the publish process to Azure and wait a couple of minutes. Deployment of your project from within Visual Studio

In the Azure Activity log you can closely watch the deployment process. You will get the same information, if you are logged in to the Azure management console. After everything is finished your application will be accessible on the given name (in this case: http://usersnaptfsdemo.cloudapp.net)

2. Using Team Foundation Server Online

Right now, the source code resides locally, no source control management features are available. We will now utilize Microsoft’s new online version of Team Foundation server (TFS).

Adding Team Foundation Server to your project

You can sign up for a TFS account here and you will get your very own TFS online instance (sign up here: https://tfs.visualstudio.com). You may use TFS online for up to 5 team members for free. Create a project (e.g. Usersnap TFS Demo) and choose your favorite process template.

Setting up Team Foundation Server Online

Now let’s connect your local WCF project to your new TFS account: Change to Visual Studio, right-click on your solution in the solution explorer and choose “Add Solution to Source Control…”

Add your solution to TFS

Add a new Team Foundation server and enter your TFS URL (don’t forget it’s https!).

Connect to TFS

After a successful authentication you can choose the project you’ve created at your TFS online instance:

Initial check-in to TFS

We ran into an error while connecting to our specified Team Foundation Server, because Visual Studio uses the Internet Explorer to authenticate you. If the current user in Internet Explorer is different from the user you’ve used to set up TFS you need to start Internet Explorer and log out the other account used there. If this doesn’t work, clear Internet Explorers’ Cookies.

TFS connection error and how to solve it

Now let’s push some code to our TFS online instance – Click on “Pending Changes” in your Team Explorer, add a meaningful commit comment and hit “Check In”. Your source code will now be transfered to your TFS online instance. Great, isn’t it?

Push code to TFS


3. How to set up TFS online as build and deploy service

Visual Studio, TFS and Microsoft Azure

By now, publishing to the Azure Cloud and pushing code to TFS online are two separate processes. In this step, we will connect TFS with Microsoft Azure – log in to your Azure Management console, select the instance of your project and click on “Set up TFS publishing” as indicated below.

Windows Azure Dashboard

Next, you need to authorize the TFS connection:

Authorize TFS connection

After a successful authorization you can select the project which should be published from your TFS online repositories:

Set up publishing

After a while, your selected TFS online project is linked and is ready to be built and subsequently deployed to Windows Azure:

TFS and Azure connected

Now let’s use the complete chain: Add some code changes in Visual Studio and commit the changes to TFS online – what happens now is, that your code is being built by TFS online and subsequently pushed to your staging instance. You can watch this process in Visual Studio by clicking “Home” – “Builds” in your Team Explorer. If you like your changes, swap both, production and staging instances in your “Azure Management Console” and with just a single commit you successfully deployed your changes.

4. Receive continuous feedback with Usersnap

Continuous Feedback: Add Usersnap to your tool chain

By now, we have an almost complete chain from coding to source control management to continuous integration and continuous deployment. TFS online also provides an efficient bug tracker. What’s missing is a closed loop delivering continuous feedback from your users. Usersnap fills this gap: it’s a small javascript tool which is added to our project and allows to create annotated screenshots directly in the browser. The screenshots are subsequently transfered to TFS online where they can be triaged.

Sign up for a Usersnap account here: http://usersnap.com/signup and create a new API key as displayed below:

  • Name your new Usersnap Project (e.g. “TFS Usersnap Project”)
  • Enter your Windows Azure deployment URL (e.g. “http://usersnaptfsdemo.cloudapp.net”)
  • Select “Visual Studio” as the way to deliver screenshots
  • Enter your TFS online username
  • Do not enter your TFS online password here, rather set up alternative credentials for 3rd party tools (Please read the instructions here)
  • Enter your TFS online URL (e.g. “https://usersnaptest.visualstudio.com”) and click “Connect now!”

Connect Usersnap with Team Foundation Server

After successfully connecting Usersnap with TFS online, you can select your TFS online project, the type of ticket Usersnap will create within TFS and the according severity of the tickets. Moreover, you get a personalized snippet of javascript-code which you need to copy to the index.html file. Simply start Visual Studio, open index.html and search for “Usersnap” and replace the existing Usersnap snippet with your freshly created Usersnap snippet.

Usersnap and TFS connected

Push the modified index.html to TFS online and deploy it to Windows Azure. Visit your deployment in your favorite browser – you will get a Feedback button in the bottom right corner – this is Usersnap! You can now give visual feedback by

  • Drawing directly in your browser with the pen tool
  • Highlight areas
  • Place notes to annotate your remarks

Usersnap can be extensively configured, more information can be found here.

How to use Usersnap in your browser

For now, just add some remarks and click “Send”. A screenshot of this situation will be created and transfered to your selected TFS online backlog list, including meta information such as the used browser and the used operating system. This is specifically useful, when it comes to browser related bugs. The good news here is that the person who reports a bug or gives feedback can be done by anybody, without installing any tool locally. This essentially enables you to get feedback from your stakeholders, visitors or customers continuously.

A Usersnap ticket in Team Foundation Server

In TFS you can conveniently examine all reports, change the severity and assign your tickets. In case you need to get in touch with the person sending the report, the sender’s email adress is also present.


A closed loop between real users, product development and software development is an effective method to continuously improve and grow a product in a rapid pace. The required tools to set up a 3C chain (Continuous Integration, Continuous Deployment and Continuous Feedback) are available today and easy to set up – Microsoft’s tools are well aligned and even allows to integrate Continuous Feedback with Usersnap. Just give it a try!

If you have any questions: we’re always happy to help – just leave a comment below or simply send us a tweet here: http://usersnaptfsdemo.cloudapp.net.