{"id":283,"date":"2013-05-28T12:55:30","date_gmt":"2013-05-28T10:55:30","guid":{"rendered":"http:\/\/blog.usersnap.com\/?p=283"},"modified":"2025-10-14T08:48:13","modified_gmt":"2025-10-14T06:48:13","slug":"continuous-everything-from-coding-to-feedback","status":"publish","type":"post","link":"https:\/\/usersnap.com\/blog\/continuous-everything-from-coding-to-feedback\/","title":{"rendered":"Continuous Everything – From Coding to Feedback"},"content":{"rendered":"\n

Continuous Integration<\/a> and Continuous Deployment<\/a> 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<\/a> every commit is submitted to the production system<\/a>, unless this process is actively suppressed.<\/p>\n\n\n

Try Usersnap for User Feedback<\/h2>Try Usersnap Now<\/a><\/div>\n\n\n\n

<\/p>\n\n\n\n

Ever decreasing software release cycles also require to rethink the way feedback from real users is gathered. Bimonthly user experience<\/a> 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.<\/p>\n\n\n\n

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.<\/p>\n\n\n\n

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

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.<\/p>\n\n\n\n\n\n\n\n

1. How to deploy your WCF application in Azure<\/h2>\n\n\n\n
\"Pushing<\/a><\/figure>\n\n\n\n

<\/p>\n\n\n\n

Before we start, please make sure to either have a recent version of Visual Studio installed.<\/p>\n\n\n\n

– alternatively you may download Visual Studio Express 2012<\/a> 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<\/a>. Open the solution, build and run it – a browser should start displaying the demo application – a tweet wall which displays recent tweets about Usersnap<\/a>.<\/p>\n\n\n\n

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<\/a>  – there is a free 90 day trial available.<\/p>\n\n\n

\n
\"Windows<\/a><\/figure>\n<\/div>\n\n\n

Next, you need to connect your Visual Studio project with Azure. Right-click on your project and choose “Publish to Windows Azure…”.
<\/p>\n\n\n\n

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<\/a>.<\/p>\n\n\n

\n
\"Manage<\/a><\/figure>\n<\/div>\n\n\n

<\/p>\n\n\n\n

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.<\/p>\n\n\n

\n
\"Windows<\/a><\/figure>\n<\/div>\n\n\n

<\/p>\n\n\n

\n
\"Deployment<\/a><\/figure>\n<\/div>\n\n\n

Now you are ready to deploy your WCF application to Azure – simply start the publish process to Azure and wait a couple of minutes. <\/p>\n\n\n\n

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<\/a>)<\/p>\n\n\n

[otw_is sidebar=otw-sidebar-2]<\/p>\n\n\n\n

2. Using Team Foundation Server Online<\/h2>\n\n\n\n

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).<\/p>\n\n\n

\n
\"Adding<\/a><\/figure>\n<\/div>\n\n\n

<\/p>\n\n\n\n

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<\/a>). 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.<\/p>\n\n\n

\n
\"Setting<\/a><\/figure>\n<\/div>\n\n\n

<\/p>\n\n\n\n

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…”<\/p>\n\n\n

\n
\"Add<\/a><\/figure>\n<\/div>\n\n\n

<\/p>\n\n\n\n

Add a new Team Foundation server and enter your TFS URL (don’t forget it’s https!).<\/p>\n\n\n

\n
\"Connect<\/a><\/figure>\n<\/div>\n\n\n

<\/p>\n\n\n\n

After a successful authentication you can choose the project you’ve created at your TFS online instance:<\/p>\n\n\n

\n
\"Initial<\/a><\/figure>\n<\/div>\n\n\n

<\/p>\n\n\n\n

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.<\/p>\n\n\n

\n
\"TFS<\/a><\/figure>\n<\/div>\n\n\n

<\/p>\n\n\n\n

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?<\/p>\n\n\n

\n
\"Push<\/a><\/figure>\n<\/div>\n\n\n

<\/p>\n\n\n\n

 <\/p>\n\n\n\n

3. How to set up TFS online as build and deploy service<\/h2>\n\n\n
\n
\"Visual<\/a><\/figure>\n<\/div>\n\n\n

<\/p>\n\n\n\n

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.<\/p>\n\n\n

\n
\"Windows<\/a><\/figure>\n<\/div>\n\n\n

<\/p>\n\n\n

Try Usersnap for User Feedback<\/h2>Try Usersnap Now<\/a><\/div>\n\n\n\n

<\/p>\n\n\n\n

Next, you need to authorize the TFS connection:<\/p>\n\n\n

\n
\"Authorize<\/a><\/figure>\n<\/div>\n\n\n

<\/p>\n\n\n\n

After a successful authorization you can select the project which should be published from your TFS online repositories:<\/p>\n\n\n

\n
\"Set<\/a><\/figure>\n<\/div>\n\n\n

<\/p>\n\n\n\n

After a while, your selected TFS online project is linked and is ready to be built and subsequently deployed to Windows Azure:<\/p>\n\n\n

\n
\"TFS<\/a><\/figure>\n<\/div>\n\n\n

<\/p>\n\n\n\n

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.<\/p>\n\n\n\n

4. Receive continuous feedback with Usersnap<\/h2>\n\n\n
\n
\"Continuous<\/a><\/figure>\n<\/div>\n\n\n

<\/p>\n\n\n\n

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.<\/p>\n\n\n\n

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