Creating Azure Mobile App With Visual Studio

DZone 's Guide to

Creating Azure Mobile App With Visual Studio

Check out this comprehensive tutorial for getting started with Azure, taking you step by step through building a data-driven project and connecting to your data.

· Cloud Zone ·
Free Resource

In this article, we are going to create a mobile application with Azure using Visual Studio. Before you start, make sure that you have some Azure credits with you. You can always create a new Azure free account where you can claim some free credits using the Azure free trial. Please note that you can get only limited Azure credits with the free account. But to get started, that is more than enough. Now we will go and create our application.

Download the Source Code

You can always download the source code here.


We all know what Azure is. If you are really new to Azure, I strongly recommend you look here. To get started, please make sure that you have installed Visual Studio on your machine. You can always download Visual Studio from here.

Setting Up Azure Portal 

Log in to the Azure portal from Azure Portal. Once you've logged in, you will see a dashboard and menu as follows:

Microsoft Azure Portal Menu Microsoft Azure Portal Menu

Now click on New -> Web+Mobile -> Mobile App.

Web Mobile Category In Azure Portal Web Mobile Category in Azure Portal

Now name your mobile application. Select your subscription; it will be automatically selected if you have only one subscription. Please select the subscription accordingly if you have multiple subscriptions. Select or create a new resource group. You may be thinking, "What is this resource group, and what are all the benefits for using it?" According to Microsoft, a resource group is a collection of resources, such as a domain name, virtual machine, or virtual network. A resource can be included only in one resource group and it is possible to link resources in another resource group. Please note that you can’t rename your resource group name. The only option you are allowed is to move your resources to your new resource group. Please see Move resources to a new resource group in Azure if you need to move your resources.

Now, select your service plan or location as needed. Click on the link. You can see all the service plans you have used so far, and you can select an existing one or create a new one.

Available App Service Plan In Azure  Available App Service Plan in Azure

To create a new one, please click the ‘Create new’ option.

New App Service Plan In Azure

New App Service Plan in Azure

Now you can select your app service plan, location, and pricing tier. When you select the pricing tier, please be cautious because Azure charges you according to your use. Select it according to your use.

App Service Pricing Tier  App Service Pricing Tier

Now, this is how your Mobile App service looks. You can always pin your mobile app to your dashboard.

Mobie App ServiceMobie App Service

Once this is done, if nothing goes wrong, you will get a notification that your mobile app deployment succeeded and you can see the app in your dashboard. Now, click on the settings of your mobile application and then Quick Start.

Quick Start Option In Azure Mobile AppQuick Start Option In Azure Mobile App

Select Windows (C#) from it. Now you will be asked to complete three actions.

  • Connect a database
  • Create a table API
  • Configure your client application

Connect a Database

Click on Connect a Database (we will create a database first). Click Add and add a data connection as follows.

Data Connections In Azure Mobile App 

Data Connections in Azure Mobile App

Now give your database a name and pricing tier. For now, I am going to select the Basic pricing tier. You can see 5 DTUs are available for Basic tier. According to Microsoft, The Database Transaction Unit (DTU) is the unit of measure in SQL Database that represents the relative power of databases based on a real-world measure: the database transaction. Please read more here.

Did you notice that there is a field called Collation? Basically, a collation is a set of rules and regulations we set for the proper use of characters. As characters are much different in different languages, we set the collation accordingly. The default collation for character data in an Azure SQL database is SQL_Latin1_General_CP1_CI_AS. You can read about collation here.

Next, set your server and click OK. Once you click OK, you can see the connection string is being set automatically for you. Creation of the data connection may take few minutes. 

Now we will create a table API.

Create a Table API

To store the data in your back end, of course, you need a table. The first option you will see here is to select the language for your back end actions. You can select either C# or Node.js.

There was a time that we could do server side actions only by using server side languages like C#, Vb.Net, or PhP. Now everything changes; we can do server side actions with few lines of JavaScript using Node.js.

Once you select your language, you will see a message: “Once you’ve downloaded your personalized server project, extract it and open in Visual Studio. Right-click the project and select 'Publish' to host the code in your mobile backend. The TodoItem table will be created automatically using Entity Framework.” Now we will do as suggested.

Please open your downloaded project in Visual Studio. Right click the project file then click publish. You can see a window and can finish the Profile, Connection, and Settings steps.

Azure Mobile App preview Azure Mobile App Preview

Click Publish once you have verified the settings. It may take few minutes according to your Internet bandwidth. In the meanwhile, you can see all the controllers and additional files have been created for us automatically. For example, below is the Values controller:

using System.Web.Http;
using System.Web.Http.Tracing;
using Microsoft.Azure.Mobile.Server;
using Microsoft.Azure.Mobile.Server.Config;

namespace SibeeshTasksService.Controllers
    // Use the MobileAppController attribute for each ApiController you want to use  
    // from your mobile clients 
    public class ValuesController : ApiController
        // GET api/values
        public string Get()
            MobileAppSettingsDictionary settings = this.Configuration.GetMobileAppSettingsProvider().GetMobileAppSettings();
            ITraceWriter traceWriter = this.Configuration.Services.GetTraceWriter();

            string host = settings.HostName ?? "localhost";
            string greeting = "Hello from " + host;

            return greeting;

        // POST api/values
        public string Post()
            return "Hello World!";

Once the publish process is completed, you can see a message as follows:

Azure App Service Publish Azure App Service Publish

Now, please go back to your Azure portal.

Configure Your Client Application

It is time to configure our client application now. Download the client application by clicking the link provided and open the project in Visual Studio. Please install the missing files if you are asked to do so.

MIssing Componenets  Missing Components

Once the installation is done, reload your project and you will be asked to enable Developer Mode for Windows 10. Go ahead and change that in Settings.

Now, please open the shared project and click on the MainPage.cs file. You can see the CRUD operation actions are already created for us.

using System;
using System.Collections.Generic;
using System.Text;
using System.Threading.Tasks;
using Microsoft.WindowsAzure.MobileServices;
using Windows.UI.Popups;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Navigation;

// To add offline sync support, add the NuGet package Microsoft.WindowsAzure.MobileServices.SQLiteStore
// to your project. Then, uncomment the lines marked // offline sync
// For more information, see: http://aka.ms/addofflinesync
//using Microsoft.WindowsAzure.MobileServices.SQLiteStore;  // offline sync
//using Microsoft.WindowsAzure.MobileServices.Sync;         // offline sync

namespace SibeeshTasks
    sealed partial class MainPage: Page
        private MobileServiceCollection<TodoItem, TodoItem> items;
        private IMobileServiceTable<TodoItem> todoTable = App.MobileService.GetTable<TodoItem>();
        //private IMobileServiceSyncTable<TodoItem> todoTable = App.MobileService.GetSyncTable<TodoItem>(); // offline sync

        public MainPage()

        private async Task InsertTodoItem(TodoItem todoItem)
            // This code inserts a new TodoItem into the database. When the operation completes
            // and Mobile App backend has assigned an Id, the item is added to the CollectionView.
            await todoTable.InsertAsync(todoItem);

            //await SyncAsync(); // offline sync

        private async Task RefreshTodoItems()
            MobileServiceInvalidOperationException exception = null;
                // This code refreshes the entries in the list view by querying the TodoItems table.
                // The query excludes completed TodoItems.
                items = await todoTable
                    .Where(todoItem => todoItem.Complete == false)
            catch (MobileServiceInvalidOperationException e)
                exception = e;

            if (exception != null)
                await new MessageDialog(exception.Message, "Error loading items").ShowAsync();
                ListItems.ItemsSource = items;
                this.ButtonSave.IsEnabled = true;

        private async Task UpdateCheckedTodoItem(TodoItem item)
            // This code takes a freshly completed TodoItem and updates the database. When the service 
            // responds, the item is removed from the list.
            await todoTable.UpdateAsync(item);

            //await SyncAsync(); // offline sync

        private async void ButtonRefresh_Click(object sender, RoutedEventArgs e)
            ButtonRefresh.IsEnabled = false;

            //await SyncAsync(); // offline sync
            await RefreshTodoItems();

            ButtonRefresh.IsEnabled = true;

        private async void ButtonSave_Click(object sender, RoutedEventArgs e)
            var todoItem = new TodoItem { Text = TextInput.Text };
            await InsertTodoItem(todoItem);

        private async void CheckBoxComplete_Checked(object sender, RoutedEventArgs e)
            CheckBox cb = (CheckBox)sender;
            TodoItem item = cb.DataContext as TodoItem;
            await UpdateCheckedTodoItem(item);

        protected override async void OnNavigatedTo(NavigationEventArgs e)
            //await InitLocalStoreAsync(); // offline sync
            await RefreshTodoItems();

        #region Offline sync

        //private async Task InitLocalStoreAsync()
        //    if (!App.MobileService.SyncContext.IsInitialized)
        //    {
        //        var store = new MobileServiceSQLiteStore("localstore.db");
        //        store.DefineTable<TodoItem>();
        //        await App.MobileService.SyncContext.InitializeAsync(store);
        //    }
        //    await SyncAsync();

        //private async Task SyncAsync()
        //    await App.MobileService.SyncContext.PushAsync();
        //    await todoTable.PullAsync("todoItems", todoTable.CreateQuery());


And, following is the XAML file created for our app design.


    <Grid Background="White">

        <Grid Margin="50,50,10,10">
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="*" />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="*" />

            <Grid Grid.Row="0" Grid.ColumnSpan="2" Margin="0,0,0,20">
                    <TextBlock Foreground="#0094ff" FontFamily="Segoe UI Light" Margin="0,0,0,6">MICROSOFT AZURE MOBILE SERVICES</TextBlock>
                    <TextBlock Foreground="Gray" FontFamily="Segoe UI Light" FontSize="45" >SibeeshTasks</TextBlock>

            <Grid Grid.Row="1">

                    <local:QuickStartTask Number="1" Title="Insert a TodoItem" Description="Enter some text below and click Save to insert a new todo item into your database" />

                    <StackPanel Orientation="Horizontal" Margin="72,0,0,0">
                        <TextBox Name="TextInput" Margin="5" MinWidth="300"></TextBox>
                        <Button Name="ButtonSave" Click="ButtonSave_Click" IsEnabled="False">Save</Button>


            <Grid Grid.Row="1" Grid.Column="1">
                    <RowDefinition Height="Auto" />
                    <RowDefinition />
                    <local:QuickStartTask Number="2" Title="Query and Update Data" Description="Click refresh below to load the unfinished TodoItems from your database. Use the checkbox to complete and update your TodoItems" />
                    <Button Margin="72,0,0,0" Name="ButtonRefresh" Click="ButtonRefresh_Click">Refresh</Button>

                <ListView Name="ListItems" Margin="62,10,0,0" Grid.Row="1">
                            <StackPanel Orientation="Horizontal">
                                <CheckBox Name="CheckBoxComplete" IsChecked="{Binding Complete, Mode=TwoWay}" Checked="CheckBoxComplete_Checked" Content="{Binding Text}" Margin="10,5" VerticalAlignment="Center"/>



Now please run your project. Here I am running the app in Visual Studio. You can always run the same in Windows Emulator. If nothing goes wrong you can see an output as follows.

Azure Mobile App Output  Azure Mobile App Output
Azure Mobile App Output Inserting And Reading Azure Mobile App Output Inserting and Reading

Just to make sure that the entries have been inserted and the data is getting into the database, we can go back to our Azure portal. We are all humans—we believe things when we can see them. We all asks for the proof, right? Click on SQL Databases from the menu. Now you can see all the databases you have created. You can get the server name, user id, and password from the connection string. Once you get it, open your SQL Server Management Studio on your local machine and provide the details you took from the connection string. Now you can see the Azure SQL database in your local SSMS.

Connect Azure SQL Database Through SSMS Connect Azure SQL Database Through SSMS

Now we can query our table and see the data.

USE [Tasks]

  FROM [dbo].[TodoItems]

I am sure you will get the result as follows:

Querying Azure SQL Database In SSMS Querying Azure SQL Database in SSMS

I guess that means we are done. Hope you enjoyed reading. I will see you soon with another article.


Did I miss anything that you think is needed? Have you tried Azure, yet? Have you ever created any mobile apps? Did you find this post useful? I hope you liked this article. Please share with me your valuable suggestions and feedback in the comments.

Your Turn. What Do You Think?

A blog isn’t a blog without comments, but do try to stay on topic. If you have a question unrelated to this post, you’re better off posting it on C# Corner, Code Project, Stack Overflow, Asp.Net Forum instead of commenting here. Tweet or email me a link to your question there and I’ll definitely try to help if I can.

azure, mobile, visual studio

Published at DZone with permission of Sibeesh Venu , DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}