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 CodeYou can always download the source code here.Azure Mobile App With Visual StudioBackgroundWe 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 MenuNow click on New -> Web+Mobile -> Mobile App.Web Mobile Category in Azure PortalNow 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 AzureTo create a new one, please click the ‘Create new’ option.New App Service Plan in AzureNow 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 TierNow, this is how your Mobile App service looks. You can always pin your mobile app to your dashboard.Mobie App ServiceOnce 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 AppSelect Windows (C#) from it. Now you will be asked to complete three actions.Connect a databaseCreate a table APIConfigure your client applicationConnect a DatabaseClick on Connect a Database (we will create a database first). Click Add and add a data connection as follows. Data Connections in Azure Mobile AppNow 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 APITo 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 PreviewClick 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 [MobileAppController] 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; traceWriter.Info(greeting); 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 PublishNow, please go back to your Azure portal.Configure Your Client ApplicationIt 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 ComponentsOnce 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 items; private IMobileServiceTable todoTable = App.MobileService.GetTable(); //private IMobileServiceSyncTable todoTable = App.MobileService.GetSyncTable(); // offline sync public MainPage() { this.InitializeComponent(); } 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); items.Add(todoItem); //await SyncAsync(); // offline sync } private async Task RefreshTodoItems() { MobileServiceInvalidOperationException exception = null; try { // 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) .ToCollectionAsync(); } catch (MobileServiceInvalidOperationException e) { exception = e; } if (exception != null) { await new MessageDialog(exception.Message, "Error loading items").ShowAsync(); } else { 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); items.Remove(item); ListItems.Focus(Windows.UI.Xaml.FocusState.Unfocused); //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(); // await App.MobileService.SyncContext.InitializeAsync(store); // } // // await SyncAsync(); //} //private async Task SyncAsync() //{ // await App.MobileService.SyncContext.PushAsync(); // await todoTable.PullAsync("todoItems", todoTable.CreateQuery()); //} #endregion } }And, following is the XAML file created for our app design. MICROSOFT AZURE MOBILE SERVICES SibeeshTasks 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 OutputAzure Mobile App Output Inserting and ReadingJust 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 SSMSNow we can query our table and see the data.USE [Tasks] GO SELECT [Id] ,[Text] ,[Complete] ,[Version] ,[CreatedAt] ,[UpdatedAt] ,[Deleted] FROM [dbo].[TodoItems] GOI am sure you will get the result as follows:Querying Azure SQL Database in SSMSI guess that means we are done. Hope you enjoyed reading. I will see you soon with another article.ConclusionDid 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.