Written by Altınok Darıcı on 20 - Mar - 2015

Xamarin & Azure Mobile Services Sample Project

In this post, I'll trying to develop an Android Application. I'll use Xamarin and C# at frontend, Azure Mobile Services at the backend.

First, you should have Xamarin Studio(at least Indie license) and Azure subscription ( you can create a free trial subscription for Azure)

Azure Mobile Services

You should create a Mobile Service with JS Backend, then navigate the DATA tab on management portal and create a table which name is Post. That is all about Azure settings. Let's move on to Xamarin.

Xamarin

Create an Android Application Project in Xamarin Studio.

Xamarin Studio Create Project

As you see at the above image, you should select C# -> Android at the left sidebar, then select Android Application at the middle of the form, after that you should give a name for your project and press the OK button.

Aim of this project is that, users send posts and then other users see these posts. As you see there is no authentication, caching, notifications. This is very easy project, I'll try to show step by step.

After creating project, move to Resources/Layout/Main.axml in the Solution Explorer.

As you see on the above, there is "Source" button and click on it. Then write the below code in it.

Above codes create a Button and a ListView on UI. When user click the button, application will redirect the AddPost page. On the MainPage, users will see existing posts on ListView

Create a ListViewItem.axml in the Layout folder. Write the below code in ListViewItem.axml. This page is item template for ListView. This means that each row in ListView, will be shown as ListViewItem.axml.

Now, create a UI (Layout) for adding new post. Right click on the Layout folder in Solution explorer then add a new Layout which name is AddPost.axml then write the below code on it.

Above code create a EditText, Button and a progress bar. Users enter their post in to EditBox then click the Button and application send content of edittext to Azure Mobile Services. While this request is sending, user should see the progress bar.

Create a AddActivity.cs. This activity class is code behind of AddPost.axml.

Now, add Azure Mobile Services component to our project, Right click on Component folder in Solution explorer, click the get more component button on context menu, then search Azure Mobile Services. Click Add To App button. Now your project have some references for Azure Mobile Services.

Add Azure Mobile Services Component to Project

Create a new class for our project which is called Post.cs. This class is Data Model.

Create a new class MobileServicesRepository.cs for our project. This class is actually a repository, it will manage connection and data transfer between application and Azure mobile services.

Let's move to the MainActivity.cs and then write the below code in it.

Now, go to AddActivity.cs write down below codes.

I set the variables for UI elements, and handle the click event of button, when user click this button, user navigate to MainPage after the post send to Azure. While sending this post, user will see the progress bar.

You can find the sample project on github.com

http://github.com/altinokdarici/XamarinAndroidWithAzureMobileService

comments powered by Disqus