This blog is a first part of 3 series blog. In our first part, we’ll be discussing How to create an Azure Mobile Application and publishing it. We will be discussing the web end of such an application, how we create the database model, how do we publish it.

I recently had the chance of using Azure Mobile App, and I was somewhat stunned that almost all of the existing blogs on this topic uses the “Quick start” method of deploying the “Todo Item” model, and hardly few demonstrates on using it with custom models. So we’ll be going through custom model, where we can perform CRUD operations on database holding the First Name and Second Name of users.

Getting started with the application, let’s start by creating an Azure Mobile App from Azure portal.





Once our application is created, we have to connect our application to a database. We can either create a new database for the application or we can simply connect an existing database to our application. For this demo, we’ll be creating a new database and connecting it. We need to browse to our created application, and we need to click on “Data Connections” under “Mobile” tag in options bar.





Click on “SQL Database” and a new blade will appear on the right. And click on “Create a new database” if you want to create a new database, otherwise choose the desired server from the list.


Similarly, you can either connect your database with a new server, or create a new server as shown in figure below


By clicking “Select” under “Server” blade, either our new server will be created, or our connection with the existing server will be established, depending on our choice. Same will be the scenario of clicking on “select” under “SQL Database” blade. Azure portal will create and configure the connection, and will give us a notification when our connection is ready to be used.

Once our connection is ready, our “Data Connection” blade will update as per the following screen

Now, we are all set to move towards the code aspect of the demonstration. Let’s create the “Azure Mobile App” in our visual studio.

Although we’ll be hosting our website on Azure later on, but we’ll not be clicking the option right away.

We’ll be just clicking “ok” and moving directly towards the model of our application. Once our application is created, our project will look something like this

Now, let’s start by writing our new DataObject, this object will be translated as Database table. When we create the application, a sample object by the name of “TodoItem” already exists in the folder “DataObject” of the application. We can either delete it or let it be there, but good practice dictates that we should delete it as it’s a redundant object. If you decide to delete it, make sure to delete it’s reference from “MobileServiceContext.cs” in “Models” folder as well. Similarly, don’t forget to delete its controller from “Controllers” folder.

Let’s add our DataObject by the name of UserData as depicted in the picture

To make this class compatible with Microsoft Azure tables, we need to inherit our DataObject from “Entity Data”, this class contains the fields such as “Id”, “Updated At”, “Version” and other such fields. To reference “Entity Data”, we have to include “using Microsoft.Azure.Mobile.Server;”. Our class should look something like this

Before moving forward and declaring fields for FirstName and LastName, we have to create another field, which will be used as our Primary Key. This field cannot be named as Id, as Id is a member of “Entity Data”, and if we override it, “Internal Server Error” comes at the time of data insertion. The reason behind it is that Microsoft Azure treats this “Id” as a “string”, and database needs the primary key to be “int”. So, along with FirstName and LastName, we will create another field by the name of “Pk”.

By writing “[Required] [DatabaseGenerated(DatabaseGeneratedOption.Identity)]” above “Pk”, we are stating the this field is going to be the Identity field in our application.

 

Next step is to connect our application with our database. There are two methods for this connection; We can either copy/paste the “Connection String” directly from Azure published application, or we use Visual Studio “SQL Server Object Explorer” to connect to our database and get our connection string from it.

If we want to use to the former method, open Azure Portal and navigate to your application. The “Connection String” can be found by clicking on “Data Connections” under “Mobile” and then clicking on the Name of the string which we created earlier in the blog.

  

 

Our Connection string will be shown by clicking “Show connection string value”. Just copy the complete string and paste it in “MobileServiceContext.cs” as shown in figure below

 

 

In-case we want to use Visual Studio “SQL Server Object Explorer” to get our “Connection String”, open your “SQL Server Object Explorer” and click on “Add SQL server”

 

Enter your Azure credentials and choose your database from the list of databases under “Azure”. Enter your credentials and connect with your database

 

A popup will appear asking you to add your IP to firewall exception to accept connection to the desired Database, allow it and it will connect. Once connected, go to your database in “SQL Server Object” and expand your SQL server and click on your database and right click it and click on “Properties”. Depending on your internet connection, it’s properties will appear under “Properties” blade of Visual Studio. In-case of slow connection, Visual Studio might stop responding but let it be, it will start responding once properties are retrieved. Navigate to “Connection String” in your properties and copy the value from it. We will update our constructor as per the following diagram

 

Once we are done with providing “Connection String”, we have to create a “DBSet” of “UserData” Type.

 

 

Now, let’s open the “Startup.MobileApp.cs” under “App_start” folder and remove the “TodoItem” references from Seed Method. Initially it should look something like

But after removing references, it should look something like

 

 

Then, we have to Enable Migrations in our project. Open “Package Manager Console” and write command “Enable-Migrations”

 

Now we have to update the “ConfigureMobileApp(IAppBuilder app)” method to accommodate our requirements. The current configuration requires us to update database before running the application, whereas we have to update it when our application runs. Our current code should look like this

 

We have to delete “MobileAppSettingsDictionary settings = config.GetMobileAppSettingsProvider().GetMobileAppSettings();” and add

 

var migrator = new DbMigrator(new Migrations.Configuration());

            migrator.Update();

            var settings = config.GetMobileAppSettingsProvider().GetMobileAppSettings();

 

This chunk of code applies our migration on run time. Now, let’s add the migration to project. Browse to “Package Manager Console” and write “Add-Migration Demo_1”.Once our migration is added, we need to create individual controllers for mobile and web portal. Let’s create the Mobile Controller.

Choose the desired Context file and the Model for the controller

 

This will create our controller for the mobile. Once our controller is ready, just simply run the application once, so that our database is created at server. You can see the database being created using Visual Studio Diagnostic tools.

 





Once your application runs locally successfully, you can publish your application on azure and your azure backend is ready to be consumed. To publish it, Right click your project and choose publish

 

Choose “Microsoft Azure App Service”

 

Choose the Azure Application which we created initially in Azure

 

 

 

And then just click “Publish”. The application will be published to azure by Visual Studio and once it’s published, your application will be opened in your default browser.

 

 

 

In next part, I’ll demonstrate on how we can consume this application using Cross Platform Application developed in Xamarin. And last part of the series will be on how we can use MVC framework to create views and perform CRUD functionality on our application.