Microsoft Azure – Easy Tables with Universal Windows 10 Apps

Microsoft Azure – Easy Tables with Universal Windows 10 Apps

AzureEasyTables1

Short introduction

Propably you know that nowadays most of the mobile applications need back-end. This is to enable easy access from the mobile application to your database for instance. Microsoft Azure supports developers and provides many components to create back-end for the mobile apps easily. On of them is Azure Mobile Apps. But in this article we will concentrate on Azure Easy Tables – part of Mobile Apps component to provide the way to create back-end for you app without writing any code for back-end. “Easy tables” solution is also known as “No-Code Table or API”. They are still backed with Azure SQL. Let’s go through this topic and see how easy it is!

What do I need to start?

1) Visual Studio 2015 Community (for free) or higher

2) Microsoft Azure subscription (you can test it for free here)

Let’s start

1) Go to the Azure Portal and select new Mobile App like on the screen below:

AzureEasyTables2

Provide the name for your Mobile App backend. Subscription will be automatically selected. Choose the resource group (or create the new one). The same for the Plan/Location.

Click “Create”. You will see information about the progress. Once its done you will be notified.

AzureEasyTables3

AzureEasyTables4

2) Now you need to prepare data storage for newly created back-end:

a) Select your Mobie App (it should appear in the Portal like below):

AzureEasyTables5

b) Select “Settings” icon on the top and choose “Data Connections”:

AzureEasyTables6

c) Click “Add” and choose either new SQL Database to create or use existing one. I will select my previous one:

AzureEasyTables7

AzureEasyTables8

d) You should see the confirmation once you select the database for your Mobile App back-end:

AzureEasyTables9

3) Enable “Easy Tables” for your back-end:

a) Click on the “Settings” icon at the top and select “Easy tables”. You should also see blue notification that you need to configure Easy Tables for your Mobile App:

AzureEasyTables10

b) During next step Azure will automatically detect that you have already configured data connection (in the previous step). You have to only select the checkbox to initialize you app:

AzureEasyTables11

c) Once initialization is done you will see the confirmation notification:

AzureEasyTables12

4) Add new table to the Mobile App:

a) Select “Settings” icon on the top and choose “Easy Tables” and then click “Add” button:

AzureEasyTables13

b) Type the name of your table you want to create. After that set permissions (Insert, Update, Delete, Read, Undelete) – all to anonymous. Once table is ready you will see the notification:

AzureEasyTables14

c) Once you click on the created table you can manage schema, change permissions, clear and delete table:

AzureEasyTables15

As you can see only default columns are added to your table (like Id or CreatedAt).

d) You can add your own columns by editing the schema:

AzureEasyTables16

Type the columns name and data type, then click “OK”:

AzureEasyTables17

That’s it! Now you can connect mobile applications to your back-end in Azure. Below I will show you how to achieve that. Remember that you can always edit the schema for created tables.

 

5) Connect to Easy Tables from Universal Windows 10 App:

1) Open Visual Studio and create new blank project with Universal Windows 10 App:

AzureEasyTables19

2) Add NuGet package called Azure Mobile SQLiteStore  to your app:

AzureEasyTables20

 

3) Create class that will represent model of the table that you have created earlier:

 

In my case this is User class (you do not have to match all fields – Id is required).

 

public class User
    {
        [Newtonsoft.Json.JsonProperty("Id")]
        public string Id { get; set; }

        [Newtonsoft.Json.JsonProperty("First_name")]
        public string First_name { get; set; }

        [Newtonsoft.Json.JsonProperty("Last_name")]
        public string Last_name { get; set; }

        [Newtonsoft.Json.JsonProperty("Email")]
        public string Email { get; set; }
    }

AzureEasyTables21

4) Create “AzureDataService” class to enable eady way to connect with you back-end:

 

public class AzureDataService
    {
        public MobileServiceClient MobileService { get; set; }
        IMobileServiceSyncTable<User> usersTable;



        public async Task Initialize()
        {
            //Create MobileService reference with the back-end address:
            MobileService = new MobileServiceClient("https://easytablesdemo.azurewebsites.net");

            //setup our local sqlite store and intialize our table
            var store = new MobileServiceSQLiteStore("localstore.db");
            store.DefineTable<User>();
            await App.MobileService.SyncContext.InitializeAsync(store);

            //Get our sync table that will call out to azure
            usersTable = MobileService.GetSyncTable<User>();
        }

        public async Task<List<User>> GetUsers()
        {
            await SyncUsers();
            return await usersTable.ToListAsync();
        }

        public async Task AddUser()
        {
            var user = new User
            {
                First_name = "Daniel",
                Last_name = "Krzyczkowski",
                Email = "mobileprogrammer@..."
            };

            await usersTable.InsertAsync(user);

            //Synchronize coffee
            await SyncUsers();
        }
        // Azure automatically syncs our local database and the backend when connectivity is reestablished:
        public async Task SyncUsers()
        {
            await usersTable.PullAsync("users", usersTable.CreateQuery());
            await App.MobileService.SyncContext.PushAsync();
        }
    }

5) Let’s test the connection and data exchange:

a) Create simple xaml page with one button to add user and listview to display users from the table:

 

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Grid.RowDefinitions>
            <RowDefinition Height="301*"/>
            <RowDefinition Height="339*"/>
        </Grid.RowDefinitions>
        <ListView x:Name="UsersListview" Grid.Row="0"/>
        <Button x:Name="AddUserButton" Content="Add new user" HorizontalAlignment="Center" Grid.Row="1" VerticalAlignment="Center" Click="AddUserButton_Click"/>

    </Grid>

b) Now add some code behind to handle events – adding new user and displaying users from the table:

 

 public sealed partial class MainPage : Page
    {
        AzureDataService _azureDataService;
        List<User> _usersList;
        public MainPage()
        {
            this.InitializeComponent();
            _azureDataService = new AzureDataService();
            _usersList = new List<User>();
            connectWithbackend();
        }

        private async void connectWithbackend()
        {
            await _azureDataService.Initialize();
        }
        //Fill the listview with users:
        private async void fillUsersList()
        {
            _usersList = await _azureDataService.GetUsers();
        }

        //Add new user (it is hardcoded now in the AzureDataService class):
        private async void AddUserButton_Click(object sender, RoutedEventArgs e)
        {
            await _azureDataService.AddUser();
            fillUsersList();
        }
    }

That’s all. Now you can try to implement whole solutions accordingly to your needs.

Please also note that currently there is an isssue with access to local storage when using MobileServiceSQLiteStorage class – Microsoft team is working on this now.

Sum up

In this article I tried to show you how easily you can build the back-end for your mobile apps with Azure Mobile Apps and Easy Tables. I used Universal Windows 10 App as example but you cann still use Easy Tables with different platforms like Xamarin iOS, Android or Forms. Have fun and build great apps!

Advertisements