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.
[otw_is sidebar=otw-sidebar-1]
1. How to deploy your WCF application in 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…”.
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.
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.
Now you are ready to deploy your WCF application to Azure – simply start the publish process to Azure and wait a couple of minutes. 
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)
[otw_is sidebar=otw-sidebar-2]
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).
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.
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 a new Team Foundation server and enter your TFS URL (don’t forget it’s https!).
After a successful authentication you can choose the project you’ve created at your TFS online instance:
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.
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?
[otw_is sidebar=otw-sidebar-3]
3. How to set up TFS online as build and deploy service
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.
Next, you need to authorize the TFS connection:
After a successful authorization you can select the project which should be published from your TFS online repositories:
After a while, your selected TFS online project is linked and is ready to be built and subsequently deployed to Windows Azure:
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
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!”
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.
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.
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.
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.
Conclusion
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.
[otw_is sidebar=otw-sidebar-4]
Capture user feedback easily. Get more insights and make confident product decisions.
Getting feedback has never been easier and we hope you’ve realized that after reading this article. Let us know what you think, your feedback is important.
And if you’re ready to try out a customer feedback software, Usersnap offers a free trial. Sign up today or book a demo with our feedback specialists.
