Using Windows Azure Mobile services to develop Android Applications–Nigeria DevCamp
The Nigeria Events
If you attended our events in Nigeria you may have seen our team do a combined demo, which showed how you can develop a Windows 8 application, use the same logical layer with Windows phone 8 application. This was later improved to used Windows Azure Mobile Services (WAMS) and some very interesting features including push notifications and Facebook authentication and an Android application. So much fun!
You can review the event tweets and activities using @africaapps and #MSNigDevCamp.
Why Windows Azure Mobile Services
WAMS supports Windows Store, HTML, Windows Phone 8, iOS, and Android development and are free for your first ten apps.
Prerequisites
a) Android Developer toolkit. Download.
b) Additional files (ShoppingActivity.java, ItemAdapter.java, row_list_shopping.xml) Download.
The Recipe
In this particular post I will take you through the steps I followed to develop an Android application that used Windows Azure mobile services. In doing this, I'm not trying to show you how to develop Android applications, but to integrate WAMS into your application.
1) Create a new Android Application Project. Give it a name as follows. Click next button and configure the project to have a blank activity and a custom launcher icon. You can name the activity-name as ShoppingActivity, and that should give the layout the name activity_shopping.
2) Add the following mobile service libraries to the project. Drag them to the project lib folder and add them to project libraries build path, by clicking Add JARs.. as shown below.
- gson-2.2.2.jar
- httpclient-4.2.3.jar
- mobileservices-0.2.0-javadoc.jar
- mobileservices-0.2.0-sources.jar
- mobileservices-0.2.0.jar
You can download these files from here. I would recommend that you search for latest versions.
3) Add uses permission to internet to AndroidManifest.xml (android.permission.INTERNET)
4) Add class. Item
public class Item {
/**
* Item text
*/
@com.google.gson.annotations.SerializedName("text")
private String mText;
/**
* Item Id
*/
@com.google.gson.annotations.SerializedName("id")
private int mId;
/**
* Indicates if the item is completed
*/
@com.google.gson.annotations.SerializedName("iscompleted")
private boolean mComplete;
/**
* ToDoItem constructor
*/
public Item() {
}
@Override
public String toString() {
return getText();
}
/**
* Initializes a new ToDoItem
*
* @param text
* The item text
* @param id
* The item id
*/
public Item(String text, int id) {
this.setText(text);
this.setId(id);
}
/**
* Returns the item text
*/
public String getText() {
return mText;
}
/**
* Sets the item text
*
* @param text
* text to set
*/
public final void setText(String text) {
mText = text;
}
/**
* Returns the item id
*/
public int getId() {
return mId;
}
/**
* Sets the item id
*
* @param id
* id to set
*/
public final void setId(int id) {
mId = id;
}
/**
* Indicates if the item is marked as completed
*/
public boolean isComplete() {
return mComplete;
}
/**
* Marks the item as completed or incompleted
*/
public void setComplete(boolean complete) {
mComplete = complete;
}
@Override
public boolean equals(Object o) {
return o instanceof Item && ((Item) o).mId == mId;
}
}
5) Add the followowing on the strings.xml resource
<string name="add_textbox_hint">Add a shopping item</string>
<string name="add_button_text">Add</string>
<string name="mobile_services">Mobile Services </string>
<string name="menu_refresh">Refresh</string>
<string name="checkbox_text">Item Text</string>
6) Go to activity_shopping.xml. Delete contents. Right click on the properties and change the layout to vertical
7) Paste the following to get the Title of the application, progress-bar within the activity_shopping layout XML.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#71BCFA"
android:padding="6dip" >
<TextView
android:id="@+id/textViewTitle"
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_marginLeft="2dp"
android:layout_weight="0.12"
android:text="@string/mobile_services"
android:textAppearance="?android:attr/textAppearanceLarge" />
<ProgressBar
android:id="@+id/loadingProgressBar"
android:layout_width="28dp"
android:layout_height="28dp" />
</LinearLayout>
8) Add entry part of the application using the following markup.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#71BCFA"
android:padding="6dip" >
<EditText
android:id="@+id/textNewShoppingItem"
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_weight="1"
android:ems="10"
android:hint="@string/add_textbox_hint" >
<requestFocus />
</EditText>
<Button
android:id="@+id/buttonAddToDo"
android:layout_width="64dip"
android:layout_height="wrap_content"
android:onClick="addItem"
android:text="@string/add_button_text" />
</LinearLayout>
You should have the following on your grid layout.
9) Add the following markup to tie in the listview that will show the actual shopping list items.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#71BCFA"
android:padding="6dip" >
<ListView
android:id="@+id/listViewShoppingItem"
android:layout_width="match_parent"
android:layout_height="wrap_content"
tools:listitem="@layout/row_list_shopping"
android:padding="6dip" >
</ListView>
</LinearLayout>
10) Insert the following markup to include the refresh button in the menu markup file.
<item android:id="@+id/menu_refresh" android:orderInCategory="101"
android:showAsAction="always" android:title="@string/menu_refresh"></item>
11) Drag ItemAdapter and fix namespaces.
12) Drag ShoppingActivity and fix namespaces.
Happy running :)
More on the mobile services implementation
When the activity is executed, a new instance of a MobileServiceClient is created using the credeantials supplied. You will then access the differenct objects using this object.
// Create the Mobile Service Client instance, using the provided
// Mobile Service URL and key
mClient = new MobileServiceClient("https://yourservices.azure-mobile.net/", "yourkey", this)
.withFilter(new ProgressFilter());
The following line enables you to access the tables in WAMS
mShoppingTable = mClient.getTable(Item.class);
The following line enables the application to use FaceBook authentication. Remember... you can use Microsoft account and Google account for authentication too. Upon authentication the included callback handles success or failure and displayed appropriate message.
mClient.login(MobileServiceAuthenticationProvider.Facebook,
new UserAuthenticationCallback() {
@Override
public void onCompleted(MobileServiceUser user,
Exception exception, ServiceFilterResponse response) {
if (exception == null) {
createAndShowDialog(String.format(
"You are now logged in - %1$2s",
user.getUserId()), "Success");
createTable();
} else {
createAndShowDialog("You must log in. Login Required", "Error");
}
}
});
References
Thanks to the work of the team at MSOpenTech for their commitment to Microsoft and Opensource interoperability.
You can ge more information on the following links
1) Windows Azure
2) Windows Azure mobile services
https://www.windowsazure.com/en-us/develop/mobile/
3) MSOpenTech
4) Github