Azure Mobile App With Xamarin

Azure Mobile App on Windows, IOS and Android
Azure Mobile App on Windows, IOS and Android

Today, I’m going to explain how to create Azure Mobile App (Back-end) with database to use it with your client application whatever the platform IOS, Android, Windows.

What is Azure Mobile App ?
Azure Mobile App is Platform as a Service (PaaS), that offer you as a developer a set of capabilities to the web, mobile integration. For more info Azure Mobile App.

First of all, you need an Azure Account you can create if for free Azure Free Trial.

Let’s start the demo.

Step 1: Create a Resource Group to put all the service and resources in it.

  1. Open azure.com and log in with your account.
  2. In the dashboard, click on Resource Groups.
  3. Click on + Add button to add a new Resource Group.
  4. Enter a name for the Resource Group, and select the subscription, and the location, in our case the nearest location is West Europe, then click Create.

This slideshow requires JavaScript.

Step 2: Create Azure Mobile App (Backend).

  1. On Azure Dashboard, click on + button, from the Marketplace list click on Web + Mobile, then click on Mobile App.
  2. Enter the App name, select which subscription to use, select the Resource group that you created before (or you can create a new one), then click on App Service Plan.
  3. In App Service plan section, click on + Create New, then enter the name and select the Nearest Location, then click on Pricing tire.
  4. Select the Pricing tire that suit your application, S1 Standard is recommended (it can scaled up and down later) and click on Select then
  5. Then click on Create in the Mobile App Section, a notification with Deployment started will appear, after a few minutes you will receive a notification Deployment Succeed.

This slideshow requires JavaScript.

Step 3: Create SQL Database.

  1. On Azure Dashboard, click on + button, from the Marketplace list click on Databases then SQL Database.
  2. Enter the database name, and select which subscription to use, and select the same resource group that you created before, then select Blank database the source of the database, then click on the Server.
  3. In the server section, click on Create a New Server
  4. Enter the server name, and the server admin login, and the password, then select the nearest location, then click on Select.
  5. In the SQL Database server, select the pricing tire, we recommend to select B Basic and wait for the deployment to finish.

This slideshow requires JavaScript.

Step 4: Add Data Connection to the App Service (Backend).

  1. In the App Service that you created before, scroll down to Data connections, and click on it, then click on + Add to create a new data connection.
  2. Select the type SQL Database, then click on SQL Database to select the Database that you created before.
  3. Set the connection string and the SQL admin username and the password and wait for the deployment.

This slideshow requires JavaScript.

Step 5: Create Easy table.

  1. In the App Service that you created before, scroll down to Easy Table, and click on it, then click on + Add to create a new data connection.
  2. In the Easy Table Section, click on Need to configure Easy Tables.
  3. In the Easy Table Section, tick “I acknowledge that this will overwrite all site contents.”, then click on Initialize App, and wait until the initialization is finished.
  4. Click +Add, to add a new table.
  5. Enter the table name, and manage the permission as you need.
  6. Click on the table, then on the top bar, click on Manage Schema, then click on Add a column, and add a column(s) in your table.

This slideshow requires JavaScript.

Now we done of the Azure part, you just created a Mobile App (backend) with SQL Database, Data connections, and tables.


Let’s Start the Xamarin part On Visual Studio. 

Connecting your Client App with Azure Mobile App

Step 1: Create a Xamarin Android App on Visual Studio.

  1. In Visual Studio, File -> New -> Project.
  2. From the side menu, Installed -> C# -> Android -> Blank App, then enter the app name and hit Ok.

Step 2: Add Azure Mobile Client Package.

  1. In Solution Explorer, right click on your app and click on Manage NuGet Packages, then click on Browse and search for “Azure Mobile Client” and install it and click Ok and then I Accept.
  2. Wait for installation to finish.

This slideshow requires JavaScript.

Step 3: Connect Azure Mobile App with the App.

  1. On Azure, open the backend that your created, and scroll down to Quickstart
  2. Scroll down to the step 3 and follow the instructions.
  3. Uncomment the following line of code in MainActivity.cs
    SetContentView (Resource.Layout.Main);

    This slideshow requires JavaScript.

Step 4: Create a class for user table.

  1. In Solution Explorer, right click on your app, Add -> Class ->  then create a new class for the table you have created on Azure.
  2. In the class create a setter and getter for the columns in user table.

This slideshow requires JavaScript.

Step 5: Adding a EditText and Button to Main.

  1. In Solution Explorer open, Resources -> layout -> Main.axml.
  2. From the ToolBox, drag and drop 2 EditText objects, and 1 Button.
  3. You can change the IDs of the objects.

This slideshow requires JavaScript.

Step 5: Let’s have some code.

Simply read the comments in the code!

This slideshow requires JavaScript.

Now we are done, the app we just created on Xamarin is connected to the Azure Mobile Service and can insert records into the SQL Database.

Thank you! Hope you enjoyed the demo.