Third Party Controls

Build and Deploy Web Application and Web API as Azure Web App through VSO Continuous Integration

I thought to write this post which might help my fellow developers to know how to create a CI build for any web application or web API through Team Services of VSO. Just like in one of the post I have explained how we can create a NuGet package using CI build, this post might give more insight about building and deploying an web application directly to Azure using CI build. Let’s get through the steps involved.

Step 1: Install and configure Azure PowerShell

This step is highly important if you don’t have Azure PowerShell installed. The cmdlets of Azure PowerShell can be used to create/configure cloud apps/services, VM, virtual networks, etc. Download an install Azure PowerShell from this link.

Once installed open Windows PowerShell in administrative mode and run the following Azure PowerShell cmdlets to get details of your Azure subscription and resources available. Main that you need is your Subscription Name and Subscription Id.

Command to get Azure Account Information: Login-AzureRmAccount

image

Command to get Azure Resources available: Get-AzureRmResource

Command to get the Subscription Name and Id: Get-AzureRmSubscription

Command to get the Azure Publish Settings File: Get-AzurePublishSettingsFile

This command is important to get profile settings for publishing your web app in Azure. This will download the publish settings file along with the credentials in your local box.

SNAGHTML1b92cac

Step 2: Create New Service Endpoint in Team Services dashboard

This step will help us to register or add our Azure subscription to TFS. This is done only once and at collection level using the Service tab. Just select New Service Endpoint and select Azure Classic.

 

In Add New Azure Classic Connection choose Subscription Id and Subscription Name that you got from Azure Command Get-AzureRmSubscription. The Connection Name can be based on your preferred one. You can even open the downloaded Publish Settings file to get the Subscription Id and Subscription Name. Also from the file, copy the content of Management Certificate and paste it in place holder as shown below while creating the new Connection.

 

Now this service endpoint is ready to be used while publishing the azure web app.

Step 3: Configure the Build and Deployment properties of Team Project

Create the build definition file for the team project for which you want to instantiate the CI build at every check in process to source control. For that select Azure WebApp from the Deployment tab of Build Definition window.

 

As usual in Build definition created, update your Mapping information to point to source control repository of your solution in Repository Tab. Update your CI filter in Trigger tab to point to source control repository of your solution.

Next lets select the Build tab and select Azure Deployment. In details section, you need to select the new service endpoint created and select the Web App Name.

 

That’s all we need. Now you can queue the build to see how it works.

Third Party Controls

PhoneGap – Installing and using PhoneGap with Windows Phone SDK

I had been thinking for a long time to start something with PhoneGap. Well let me tell you what PhoneGap is.

PhoneGap is an HTML5 application platform that allows to write native applications with web technologies and get access to API stores. It is basically used for writing applications for iPhone, Androids, Blackberries, Windows Phone and contains HTML, CSS and JavaScript. PhoneGap bridges the gap between JavaScript and native code which means it is taking the native language of each platform C#, Objective-C and Javascript and provide a framework with these languages that expose interface to JavaScript developer.

More about PhoneGap can be learned from various forums and sites but especially you can look into Phonegap.com for more detailed understanding of this framework.

Let’s follow some steps to install and associate Phonegap with Visual Studio.

Step 1: First of all you need to download the Windows Phone Software Development Kit (SDK) 7.1 from the following location. This will install Visual Studio 2010 Express for Windows Phone in your development machine.

image

During installation of the kit, you might encounter an error if you are using a system with Windows 8/8.1 which states “Your version of Windows Phone SDK 7.1 isn’t compatible with this version of Windows.” No need to worry, since you still have the chance to install the kit. Download and install the Live redistributable latest version of  Games for Windows from the following link.

image 

Once done, try to reinstall the same SDK  for Windows Phone 7.1. Now since we are planning to do Windows Phone development, we need to install Windows Phone SDK 7.1.1 Update.

Then create your membership account in Windows Phone Dev Center where you can submit your app and test it in a device.

image

image

Step 2: Currently Phonegap has been renamed as Cordova. Now to associate or setting up Phonegap for Microsoft Visual Studio, you can download and install Cordova 2.1.0 from the following location. To install PhoneGap you need to run the below command as shown in the screenshot using Node Package Manager. But remember you need to have NodeJS installed in  your machine. If NodeJS is not installed, then install it from the http://nodejs.org and then run the below command.

image

Install Node.JS from the following location.

image

Now run the following command to install Phonegap

C:> npm install -g phonegap

image

Step 3: Next you need to download PhoneGap 2.9.1 from this http://phonegap.com/install where you can get the list of zip files, Download the zip file from there.

image

Once downloaded extract the zip file and browse inside the extracted folder of PhoneGap 2.9.1 to the path \phonegap-2.9.1libwindows-phone. There you will find a windows batch file named createTemplates. Run that batch file and it will create two template file CordovaWP7_2_9_1 and CordovaWP8_2_9_1.

image

Now copy the template CordovaWP7_2_9_1 into the Project Templates folder of Visual Studio 2010.

image

Once this task is completed, start Microsoft Visual Studio 2010 Express for Windows Phone that you have installed earlier and select New Project. There you can find the template of Cordova.

image

Once you create the solution then you can see the solution structure that got created.

image

Run the project and you will find the emulator running and setting up the Cordova device

image   image

Good we have our emulator ready to use.

Also you can do the same by downloading Phonegap-start-master.zip from the following location

image

In my next session I will try to create a sample application with PhoneGap using HTML5.

Third Party Controls

PhoneGap – Installing and using PhoneGap with Windows Phone SDK

I had been thinking for a long time to start something with PhoneGap. Well let me tell you what PhoneGap is.

PhoneGap is an HTML5 application platform that allows to write native applications with web technologies and get access to API stores. It is basically used for writing applications for iPhone, Androids, Blackberries, Windows Phone and contains HTML, CSS and JavaScript. PhoneGap bridges the gap between JavaScript and native code which means it is taking the native language of each platform C#, Objective-C and Javascript and provide a framework with these languages that expose interface to JavaScript developer.

More about PhoneGap can be learned from various forums and sites but especially you can look into Phonegap.com for more detailed understanding of this framework.

Let’s follow some steps to install and associate Phonegap with Visual Studio.

Step 1: First of all you need to download the Windows Phone Software Development Kit (SDK) 7.1 from the following location. This will install Visual Studio 2010 Express for Windows Phone in your development machine.

image

During installation of the kit, you might encounter an error if you are using a system with Windows 8/8.1 which states “Your version of Windows Phone SDK 7.1 isn’t compatible with this version of Windows.” No need to worry, since you still have the chance to install the kit. Download and install the Live redistributable latest version of  Games for Windows from the following link.

image 

Once done, try to reinstall the same SDK  for Windows Phone 7.1. Now since we are planning to do Windows Phone development, we need to install Windows Phone SDK 7.1.1 Update.

Then create your membership account in Windows Phone Dev Center where you can submit your app and test it in a device.

image

image

Step 2: Currently Phonegap has been renamed as Cordova. Now to associate or setting up Phonegap for Microsoft Visual Studio, you can download and install Cordova 2.1.0 from the following location. To install PhoneGap you need to run the below command as shown in the screenshot using Node Package Manager. But remember you need to have NodeJS installed in  your machine. If NodeJS is not installed, then install it from the http://nodejs.org and then run the below command.

image

Install Node.JS from the following location.

image

Now run the following command to install Phonegap

C:> npm install -g phonegap

image

Step 3: Next you need to download PhoneGap 2.9.1 from this http://phonegap.com/install where you can get the list of zip files, Download the zip file from there.

image

Once downloaded extract the zip file and browse inside the extracted folder of PhoneGap 2.9.1 to the path \phonegap-2.9.1libwindows-phone. There you will find a windows batch file named createTemplates. Run that batch file and it will create two template file CordovaWP7_2_9_1 and CordovaWP8_2_9_1.

image

Now copy the template CordovaWP7_2_9_1 into the Project Templates folder of Visual Studio 2010.

image

Once this task is completed, start Microsoft Visual Studio 2010 Express for Windows Phone that you have installed earlier and select New Project. There you can find the template of Cordova.

image

Once you create the solution then you can see the solution structure that got created.

image

Run the project and you will find the emulator running and setting up the Cordova device

image   image

Good we have our emulator ready to use.

Also you can do the same by downloading Phonegap-start-master.zip from the following location

image

In my next session I will try to create a sample application with PhoneGap using HTML5.

MVC, Programming, Scripting Language, Third Party Controls

Morris.JS Chart in an MVC Application

As a designer we always wanted to have a good chart plugins in our application where we can provide data visualization through some graphical interface. We try to hook through various paid and free version of Charting controls. Recently I found a pretty good chart plugins which is an open source and can be downloaded from Github. This chart plugin is called Morris.js which is a jQuery based chart plugin and can be downloaded from the following link.

Here I am trying create a sample MVC application and show you the basic implementation of Morris.JS. Let’s get started by creating a basic MVC application without any Authentication logic. Once created, let’s have a new layout page and name it as _CustomLayout.cshtml under ~/Views/Shared folder.

Once you download the Morris.js library, unzip the file and place the unzipped folder under ~/Content folder.

image

Morris.js library entirely depends on another library named raphael.js and morris.js. So you need to download the raphael-min.js script file from the following location and place it under ~/Scripts folder.

image

Once done update your _CustomLayout.cshtml file with the following code where you need to refer the scripts and css files.

<!DOCTYPE html>

<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>@ViewBag.Title</title>
<link rel="stylesheet" href="@Url.Content(@"~/Content/morrisJS/morris.css")" />
<link rel="stylesheet" href="@Url.Content(@"~/Content/bootstrap.min.css")" />
<link rel="stylesheet" href="@Url.Content(@"~/Content/custom.css")" />
http://@Url.Content(@
http://@Url.Content(@
http://@Url.Content(@
http://@Url.Content(@
</head>
<body>

@RenderBody()

</body>
</html>

Next create an index.cshtml view where you would like to display these charts. Apply the following code in the view.

@{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_CustomLayout.cshtml";
}

<h2>Morris.JS Example</h2>







</div>
</div>



</div>
</div>
</div>





</div>
</div>



</div>
</div>
</div>
</div>
</div>
</div>

The divs (“line-chart”, “bar-chart”, “area-chart” and “donut-chart”) will draw the graphs but for that to happen we need to provide a client-side script to get the data and draw the graph in these divs. The ID for these graphs will be the id of these divs. Let’s provide the script after the main div in the same view index.cshtml.


Morris.Line({
element: 'line-chart',
data: [
{ year: '2001', item1: 100, item2: 90 },
{ year: '2002', item1: 80, item2: 40 },
{ year: '2003', item1: 60, item2: 30 },
{ year: '2004', item1: 45, item2: 30 },
{ year: '2005', item1: 30, item2: 20 },
{ year: '2006', item1: 20, item2: 15 }
],
xkey: 'year',
ykeys: ['item1', 'item2'],
labels: ['Production', 'Sales'],
});

Morris.Donut({
element: 'donut-chart',
data: [
{ label: 'Sales In 2001', value: 100 },
{ label: 'Sales In 2002', value: 80 },
{ label: 'Sales In 2003', value: 60 },
{ label: 'Sales In 2004', value: 45 },
{ label: 'Sales In 2005', value: 30 },
{ label: 'Sales In 2006', value: 20 }
]
});
Morris.Area({
element: 'area-chart',
data: [
{ year: '2001', item1: 100, item2: 90 },
{ year: '2002', item1: 80, item2: 40 },
{ year: '2003', item1: 60, item2: 30 },
{ year: '2004', item1: 45, item2: 30 },
{ year: '2005', item1: 30, item2: 20 },
{ year: '2006', item1: 20, item2: 15 }
],
xkey: 'year',
ykeys: ['item1', 'item2'],
labels: ['Production', 'Sales']
});

Morris.Bar({
element: 'bar-chart',
data: [
{ year: '2001', item1: 100, item2: 90 },
{ year: '2002', item1: 80, item2: 40 },
{ year: '2003', item1: 60, item2: 30 },
{ year: '2004', item1: 45, item2: 30 },
{ year: '2005', item1: 30, item2: 20 },
{ year: '2006', item1: 20, item2: 15 }
],
xkey: 'year',
ykeys: ['item1', 'item2'],
labels: ['Production', 'Sales']
})

Once the script is done we need some custom style to provide a background box which will provide the x-axis and y-axis values with preloaded data on hovering over the graph. Let’s keep this custom style under ~/Content folder.

image

Let’s add some style inside the custom.css file.

.morris-hover {
position: absolute;
z-index: 1000;
}

.morris-hover.morris-default-style {
border-radius: 10px;
padding: 6px;
color: #666;
background: rgb(255, 216, 0);
border: solid 2px rgba(230, 230, 230, 0.8);
font-family: sans-serif;
font-size: 12px;
text-align: center;
}

.morris-hover.morris-default-style .morris-hover-row-label {
font-weight: bold;
margin: 0.25em 0;
}

.morris-hover.morris-default-style .morris-hover-point {
white-space: nowrap;
margin: 0.1em 0;
}

Once the style is finalized, it’s our turn to run the application and review the output. Here is the screenshot below which shows how the graph is drawn in the view

image

That’s it. This is a basic implementation of Morris.js chart plugin. We can also drive the data dynamically as JSON and then create the graph without hard-coding it. Happy coding