Fundamentals Of Microsoft Azure Mobile Service

Microsoft Azure Mobile Service gives us the authority to create a Cloud Service Mobile Application. This will leverage us with more flexibility and make an Application more portable.

This is a short introduction of Azure Mobile Service. Now, let’s create and integrate new mobile Service with new or an existing Application. Thus, let’s understand Azure Mobile Service and I am sure, it would mesmerize the users.

Let’s create a new mobile Service

First go to your Azure portal and select the Mobile Service option. Click plus new icon in the bottom of the page.

Create a new Mobile Service.

After creating Mobile Service, open the Mobile Service and select the dropdown option “CONNECT AN EXISTING WINDOWS OR WINDOWS PHONE APP” below the Get Started option.

Now, copy the code and paste it in the App.xaml.cs file of your Application. Please focus on the additional instruction, which is right above the code.

Now, create a new class named MyItems, which will make all the necessary tables of your Mobile Service. 

class MyItems
{
    [JsonProperty(PropertyName = "id")]
    public string Id { get; set; }

    [JsonProperty(PropertyName = "message")]
    public string Message { get; set; }

    [JsonProperty(PropertyName = "location")]
    public string Location { get; set; }

    [JsonProperty(PropertyName = "Date")]
    public DateTime Date { get; set; }
}

I have created four attributes namely fieldsID, Message, Location and Date. Please remember for JsonProperty attribute, which we have to install ‘Newtonsoft.JsonNuGet package manager’.

Now, to perform any CRUD operation like insert, update and delete the data in your SQL table, let’s write the code in .cs files.

To begin with, let’s create MainPage.xaml. We need a ListBox to display the data from out Mobile Service table. As there are multiple attributes and columns, here we re showing only Message, Location and Date values. 

<ScrollViewer>
    <StackPanel Margin="10,10,0,0">
        <ListBox x:Name="listBox"
                        Margin="10,10"
                        RequestedTheme="Dark"
                        FontSize="20"
                        Background="White"
                        Foreground="Black" BorderThickness="1"
                        BorderBrush="Transparent" >
            <ListBox.ItemContainerStyle>
                <Style TargetType="ListBoxItem">
                    <Setter Property="HorizontalContentAlignment" Value="Stretch"></Setter>
                </Style>
            </ListBox.ItemContainerStyle>
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <Border BorderThickness="0,0,0,1" BorderBrush="#c0c0c0">
                        <StackPanel>
                            <TextBlock Foreground="Black" Text="{Binding Message}" />
                            <TextBlock Foreground="Black" Text="{Binding Location}" />
                            <TextBlock Foreground="Black" Text="{Binding Date}" />
                        </StackPanel>
                    </Border>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>
    </StackPanel>
</ScrollViewer>

Listing: 2

Put the code given below in MainPage.cs, which is above the constructor.

/// <summary>
/// Mobile Service
/// </summary>
private MobileServiceCollection<Item, Item> Myitems;
private IMobileServiceTable<Item> itemTable = App.MobileService.GetTable<Item>();

Listing: 3

Now, in constructor; initialize MainPage_Loaded method and implement, as shown below. 

public MainPage()
{
    this.InitializeComponent();
    this.Loaded += MainPage_Loaded;
}

async void MainPage_Loaded(object sender, RoutedEventArgs e)
{
    Myitems = await itemTable.ToCollectionAsync();
    this.listBox.ItemsSource = Myitems;
}

Listing: 4

Here, listbox is the name of out ListBox control. Thus, we set an item source as Myitems, which sets Mobile Service table’s values.

If you run the Application, it will show all the data in the ListBox control.

Conclusion

I hope, you understood the basics of Microsoft Windows Azure Mobile Service. Till next time, keep learning.