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 Architects. Download 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.
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.
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.
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#.
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.
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.
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.
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.
Figure 8: Service App linked to VSTS for automated build and deployment
We can make a small change now and check-in that. We can view the status of deployment while the build is executing.
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.
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.
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.
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.
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.
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.