DotNetCurry Logo

Cross Platform Mobile Development in a Team using Xamarin, VSTS and Azure

Posted by: Subodh Sohoni , on 7/28/2016, in Category Visual Studio, VSTS & TFS
Views: 6741
Abstract: How a team can use VSTS for developing a cross platform mobile application in Xamarin on the Azure Platform

Developing a non-trivial application that targets multiple platforms like Android, iOS and Windows is not something an individual developer can do easily. It requires collaborative efforts of a team. When a team develops a software, it requires many more services than what a single developer may require. A team requires a centralized source control, version control, server-side build that also takes care of verification tests, and it also requires automated deployment after the build to the staging server, so that the testers can immediately start executing the tests on the deployed build.

This article is published from the DNC Magazine for Developers and ArchitectsDownload this magazine from here [Zip PDF] or Subscribe to this magazine for FREE and download all previous and current editions

Microsoft offers a platform for such application development which requires a team. This platform in the cloud is called Microsoft Visual Studio Team Services (VSTS) and on your premises it is called Microsoft Team Foundation Server (TFS). In this article, we will take an overview of how a team can use VSTS for all these services for a cross platform mobile application that they are developing on Azure.

Using Xamarin, VSTS and Azure to develop a Cross Platform Mobile app

Any mobile application can be divided in two tiers. The UI tier is on the mobile phone or a device like tablet. Resources on such a mobile device are limited. Some of the resources like data are at a remote location where a centralized database exists. For doing heavy computing, such a mobile device is not appropriate. Which is why the other tier of the application is located on a server that is accessible to all the devices through the Internet. Such a server based application tier can do heavy lifting of the computing load and can also access centralized resources like data, very easily. Microsoft Azure offers support for this service tier application to be hosted, monitored and managed. This type of application falls under the group of App Services. It is an MVC application which exposes a data table in the form of entity objects.

Let us take a step by step tour of creating such an application and use VSTS to implement Continuous Integration Continuous Deployment (CICD) of it. The focus of this tour is not to learn how to code the front end of a mobile application as that can be created even by an individual developer. Rather we are going to focus on the topic of how a team can develop back end service application for a non-trivial mobile application and then use VSTS to build it and deploy it on Azure. The last stop of this tour guides about how the front end mobile app that is linked to this back end service app, can be created. This tour requires Visual Studio with Xamarin and Azure SDK 2.9 onwards to be installed on your machine. We also assume that you have an Azure Account (either paid or a free trial account). We begin the tour by logging on to the New Portal of Azure (http://portal.azure.com).

Create back end of a mobile app in Azure App Service

Once we are logged in to the Azure portal, we will create a new App Service by clicking on the Add button at the top left corner of the Home page and then select the option of Web + Mobile.

create-mobile-app

Figure 1: Create Mobile App under Azure App Services

We will give a name to the app, like I have given it as “ssgsmobileapp” and select a resource group if you already have one. We can also create a new resource group. We will then select a App Service Plan with Location. The price of the application is dependent on the selected App Service Plan. There is a shared (free) plan also available which we can select for this overview. Finally we will click on the Create button to create and host the new Mobile Service App.

After the Service App is created, we can use the Quick Start wizard from the Settings blade of that app to configure necessary aspects of the app. First of all, we will select the target platform for the app. In this example, I have selected Xamarin.Forms that will use Xamarin to create common code for iOS, Android and Windows mobile platforms.

select-app-template

Figure 2: Select App type in the Quick Start Wizard

Create Database and Table API

As a next step, we can configure the database that will be containing the data of our application. If the database does not exist, a new database and its connection string can be created.

create-database-for-app

Figure 3: Create database for the app

After the SQL database is created, we move on to create the Table APIs for the database table that we have created. We can select either Node.js or C# as the language for generating those APIs. Here I have selected C#, just because I am more comfortable using C#.

select-language-table-api

Figure 4: Select Language for table API

Now we can Download the application which will be created and zipped, before it is downloaded on our machine. That downloaded application can be unzipped and copied wherever we want. It has a complete solution which we can open in Visual Studio 2015. Since we are going to use that application with the code that is generated, and not make any changes in that code, we are not showing you the code view here. You can open it in Visual Studio 2015 and go through the code if needed. Ensure that Xamarin is installed on Visual Studio 2015. Until a few days back, Xamarin could be installed on Visual Studio 2013 too, but now that version seems to be retired from Xamarin.com website. You can download Visual Studio with Xamarin over here https://www.visualstudio.com/en-us/features/xamarin-vs.aspx .

Create a Team Project and add project to Source Control

Before we open the project in Visual Studio 2015, we will create a repository in VSTS for the code. This is done by creating a new Team Project on VSTS. I have created a team project named “AzureMobileApp”. It is using the TFVC (Centralized) repository but everything works well even if you are using Git. Instead of check-in, you do the Commit and Push to trigger the deployment.

Now we can open the solution. As soon as it is opened, it should be built locally so that NuGet packages get restored. After that we will add the solution to the source control under the team project that we have created earlier. Before taking the next step, we can check-in the code to that source control.

Link Azure App Service to VSTS

We will now open the old portal of Microsoft Azure – https://manage.windowsazure.com. After logging in to the portal, we will open the Service Apps section and select the app that we have created. On the dashboard, we can view the link to integrate the app with the source control so that auto deployment can be configured.

integrate-source-control-with-service-app

Figure 5: Integrate source control with Service App

We can now select the source control software, which is VSTS, although the old portal still mentions it as Visual Studio Online which is the old name of VSTS. Then you can select the team project name that we have created for this example.

select-source-control-repository

Figure 6: Select Source Control repository VSTS (VSO)

As a security measure, it asks us to accept the request to connect our application and VSTS account so that they can be accessed by Azure service on our behalf.

authorize-azure-vsts-link

Figure 7: Authorize Azure to link to your VSTS Account

After the authorization has been provided by us, it links our application to the selected team project from our VSTS account. It also creates a build definition (XAML Build, not yet the new Scripted Build) that has Continuous Integration trigger set.

It also deploys the changes to the Service App as soon as the build is successfully completed.

service-app-linked-to-vsts

Figure 8: Service App linked to VSTS for automated build and deployment

Continuous Integration

We can make a small change now and check-in that. We can view the status of deployment while the build is executing.

continuous-integration-status

Figure 9: Continuous Integration – Deployment status continuously updated

We will also come to know when the build is deployed and which build is the active build.

automated-deployment-complete

Figure 10: Automated deployment complete

After the new build is deployed, if we detect any major bug in the application, it is possible to revert back to earlier build, in one click.

deployment-reversal

Figure 11: Deployment reversal

Create and Download Xamarin UI Application

Now that our backend service project is ready, let us create a UI application that will connect to this service application. To do so, we will go back to the new Azure portal. We will open the blade of the application and go to the Quick Start blade of that. Here we can see various client formats for iOS, Android and Windows platform with or without Xamarin. We will select Xamarin.Forms format so that we can create common (shared) code for multiple platforms. We can now see the download button for the new client application. By clicking on it, we can download the client app in ZIP form.

create-download-client-app

Figure 12: Create and download client app

Once the application is downloaded as a ZIP file, we can unzip it and open the solution of the client application. It is already wired to the back end Service App that we had created earlier.

client-app-opened-in vs2015

Figure 13: Client application opened in Visual Studio 2015

We can now put it in the same source control so that entire team can start development of that.

Summary

In this article, we took an overview of how to create an entire mobile application that uses Azure App Service to host its backend logic. We used Xamarin to create the front end of the application. We also used VSTS to do source control, build and automated development of the service app to Azure App Service.

Was this article worth reading? Share it with fellow developers too. Thanks!
Share on Google+
Further Reading - Articles You May Like!
Author
Subodh is a consultant and corporate trainer. He has overall 28+ years of experience. His specialization is Application Lifecycle Management and Team Foundation Server. He is Microsoft MVP – VS ALM, MCSD – ALM and MCT. He has conducted more than 300 corporate trainings and consulting assignments. He is also a Professional SCRUM Master. He guides teams to become Agile and implement SCRUM. Subodh is authorized by Microsoft to do ALM Assessments on behalf of Microsoft. Follow him on twitter @subodhsohoni


Page copy protected against web site content infringement 	by Copyscape




Feedback - Leave us some adulation, criticism and everything in between!