How To Add Azure Mobile App To An UWP App

In this article, you will go step by step to create Azure Mobile App using Azure Portal and Insert data from Universal Windows Platform App. Mobile Apps come under Azure App Service. Azure App Service is a fully managed Platform as a Service (PaaS) offering for professional developers that brings a rich set of capabilities to web, mobile, and integration scenarios. Mobile Apps offer a highly scalable, globally available mobile application development platform for Enterprise Developers and System Integrators that brings a rich set of capabilities to mobile developers. Mobile App features:

• Build native and cross platform apps
  
  
  • Building native Windows, iOS, Android apps
  • Cross platform Xamarin or Cordova
    
    
• Connect to your enterprise systems – With the help of this feature, you can add corporate sign on option to connect with on-premises or cloud resources. Azure Active Directory is available for identity providers for enterprise authentication, also, social providers, such as Facebook, Twitter and Microsoft account.
  
  
• Build offline-ready apps with data sync – Develop app using this feature to save data offline as well as sync data with the cloud to get the latest data or records in the background when the connectivity is available. This service allows you to easily integrate with other NoSQL and SQL data providers, including Azure Table Storage, MongoDB, DocumentDB and SaaS API providers like Office 365 and Salesforce.com
  
  
• Push Notifications to millions in seconds - Engage your customers with instant push notifications on any device, personalized to their needs, sent when the time is right.

Prerequisites

• Microsoft Azure Subscription (MSDN subscribers or sign up for one month free trial )
• Visual Studio 2015 with UWP SDK – For Download Click here
• .NET Azure SDK for Visual Studio 2015 – For Download Click here

You will learn,

• How to Create Azure Mobile App
• How to Create Database & Server
• How to Develop UWP App
• Add Mobile App to Existing UWP App

Create Azure Mobile App

Step 1: Navigate to Azure Portal & Sign in with Azure Credentials.

Step 2: Click on New button -> Web + Mobile -> Mobile App



Step 3: Enter Mobile App Name, Choose Azure Subscription, Create new or use existing Resource Group.


Click on App Service Plan/Location -> Create New.



Enter App Service Plan name, Location, Pricing tier.



Step 4: Mobile App is created successfully. Click on “Easy tables” inside Mobile section. Click on Easy Table Configuration option.





Step 5: First, select “Connect to database“ option. Add new data connection by clicking on “Add” button.





Step 6: Choose Type of Database: SQL Database or Storage. Click on SQL Database & create a new database.


 
Step 7: Enter Database name, Pricing Tier, Target Server, Collation. No server created as of now; so please select Target server & create a new Server. Enter Server name, admin login, password, location.



Step 8: Select last option of database “Connection string” option. Just check if all the data filled is correct or not.



Wait for few seconds. The database & server are being created.


 
Step 9: Database & Server has been created in Easy Tables. Now, check on “I acknowledge that this will overwrite all site contents” & click on “Initialize App” button.


Step 10: Click on Add button to create table in database.



Step 11: Enter table name & all permissions: Insert, Update, Delete, Read, Undelete.


For this example, we are considering “Allow anonymous access”.

Step 12: Click on Table Name.



Next step is to create columns or fields in table, so click on “Manage Schema”.


Step 13: Add columns,

• Column name : firstname , Type : String
• Column name : lastname , Type : String
• Column name : city , Type : String
  
  
  

Create UWP App

Step 14: Start Visual Studio 2015 & Create New Project.



Step 15: First, select Universal templates & then select Blank App (Universal Windows).


Note: if Windows Universal Platform SDK is not installed, then this options will not be available. So, please check when the Visual Studio installation is going on.

Select Target Version of UWP Project


 
Step 16: To deploy or run a UWP App, it’s required to enable the Developer Mode. So, please follow the below steps to enable the same.







Now, the UWP app is ready to add Azure Mobile app.


 
Step 17: Open MainPage.xaml file & add the below code for app designing or UI part.

<StackPanel Margin="12">
    <TextBlock Text="Azure Mobile App - UWP App" FontSize="22" Margin="12" />
    <TextBox x:Name="txtFirstName" PlaceholderText="first name" />
    <TextBox x:Name="txtLastName" PlaceholderText="last name" Margin="0,20,0,0" />
    <TextBox x:Name="txtCity" PlaceholderText="city" Margin="0,20,0,0" />
    <Button x:Name="btnSave" Content="Save" Tapped="btnSave_Tapped" Margin="0,20,0,0" HorizontalAlignment="Stretch" />
</StackPanel>

Step 18: Right click on Project Name & select “Manage NuGet Packages…”



Select “Browse” tab. Search for “Azure Mobile Client” & install the packages.






 
Step 19: After adding Azure Mobile App NuGet Packages, open App.xaml.cs.



Add reference:

using Microsoft.WindowsAzure.MobileServices;
Also add MobileServiceClient
//Please change Mobile App name
public static MobileServiceClient MobileService = new MobileServiceClient("https://<azuremobileappname>.azurewebsites.net");

Step 20: Again, right click on Project Name & Add new class. Please mention the same name of the class as given to table name on Azure.

public class usertable {
    public string id {
        get;
        set;
    }
    public string firstname {
        get;
        set;
    }
    public string lastname {
        get;
        set;
    }
    public string city {
        get;
        set;
    }
}

Step 21: Open MainPage.xaml.cs file.



Add references

using Microsoft.WindowsAzure.MobileServices;
using Windows.UI.Popups;
IMobileServiceTable < usertable > userTableObj = App.MobileService.GetTable < usertable > ();
private void btnSave_Tapped(object sender, TappedRoutedEventArgs e) {
    try {
        usertable obj = new usertable();
        obj.firstname = txtFirstName.Text;
        obj.lastname = txtLastName.Text;
        obj.city = txtCity.Text;
        userTableObj.InsertAsync(obj);
        MessageDialog msgDialog = new MessageDialog("Data Inserted!!!");
        msgDialog.ShowAsync();
    } catch (Exception ex) {
        MessageDialog msgDialogError = new MessageDialog("Error : " + ex.ToString());
        msgDialogError.ShowAsync();
    }
}

Step 22: Now, run the app.




Navigate to Mobile App's Easy Tables on Azure.




Congratulations from UWP! The app data is successfully saved on Azure, using Mobile App.