Building a Android Twitter Clone with Azure Mobile Services

The Azure Mobile Services are a toolkit of common cloud tasks for mobile apps with cross-platform SDKs and libraries. In practice, they enable developers to quickly enable usually complex tasks like authentication, data synchronization, push notifications and on-premises connections for a host of platforms, including Android, iOS, and Windows Phone - but also Xamarin, JavaScript/HTML, Sencha, Appcelarator, and Cordova (formerly known as PhoneGap).

This tutorial describes one of those tools for Android: We'll build a simple Twitter Clone, using Azure to synchronize tweets. Azure Mobile Services is fairly straightforward: It's a cloud service storing data in Azure SQL, SQL or Mongo. Setting up the service, you can choose between a JavaScript- and a .NET-based backend. The choice is interesting since you can extend and modify how the service handles data - if you prefer JS as a developer, a JS-based back-end will allow you to change the JS method responsible for inserting data, for instance. To connect your clients with the service, you simply choose the right SDK for your platform and glue your data and your brand-new cloud back-end together.

I'm assuming here that you already set up a back-end service in Azure - if you haven't, please log into the Azure Management Portal and set one up. Simply click on the 'New' button in the lower left, select 'Compute / Mobile Service'. Azure will open up a dialog asking for the name and type of back-end. As far as the database is concerned, feel free to test this thing out with the free 20mb SQL database - if you're more serious, the dialog will guide you through the creation of a new SQL Server.

Let's Gather our Tools

We'll be using Android Studio and the Android SDK 21 with build tools 21.1.2. Create a new project and choose 'Phone & Tablet' with the API level 21. When asked what kind of activity you want to add to the project, choose the 'Blank Activity'. That activity will be our timeline with tweets, so feel free to just call it timeline_activity.

To connect our app to the Mobile Service, we'll use the Azure Mobile Services Android SDK 2.0.2 (Beta 2), which is directly available from jCenter, meaning that Android Studio will automatically download it for us. In Android Studio, open up app/build.grade and add the following in the dependencies section:

Service, Table, Class

Here's what our integration looks like from 10,000 feet: Upon start of the app, we'll connect to our Mobile Service. If that succeeds, we'll create 'smart table' holding our tweets, Which is synchronized with a table in the cloud. Obviously, that table will need to know which class the items it's holding belong to.

The Tweet Class

Let's start with the class for the tweets. I'm keeping things simple here: Each tweet has an id, an author, a message, and a timestamp. Text, author and timestamp will just be simple Strings, while I'll follow good coding practice and enable the id to be get and set with methods called getId() and setId().

We can now use the OnCreate method to connect to the service. Initialize your MobileServiceClient with the URL and the key of your service (and the current context). Once that succeeds, we can initialize our 'smart table' by calling the client.

Adding the User Interface

Let's summarize the things we'll need: For a new tweet, we'll need the message, the author name, and a button used to submit the message. To display existing tweets, we need a ListView.

If you want to check out my UI solution, head over to GitHub to see the source code. I used a simple EditText for the message input, an ImageButton for the submit button, and a ListView for the list of tweets. You'll notice that I didn't ask for the users name - I'm doing that in a popup dialog, so that the user has to set it only once.

The Tweets ListView

A ListView needs an adapter, so let's create one. You can find mine on GitHub, but let's look at the individual parts: I'm extending the default ArrayAdapter, using only the GetView method used to decorate the individual tweet.

In that method, we get all the views for the individual tweet and decorate them with the actual data.

To actually get tweets, we'll be part of the cool crowd and use AsyncTask and Futures, brand new Android tools to deal with asynchronism. The core piece here is mobileServiceTable.execute().get() - we're calling the 'smart table', asking it to execute() a query and get() the results. Since I'm lazy and this demo is supposed to be simple, we're not doing any kind of smart logic here, which is why we're not providing an actual query, instead asking for all data.

Adding Tweets

Adding tweets looks a lot like getting tweets. We already created our user interface elements, but the activity isn't aware of them yet. Add properties for the tweet input element as well as a string able to hold the author value:

private EditText tweetInput;
private String author;

Next, in OnCreate(), set tweetInput to the actual input element in the layout:

Let's look at the logic in AddTweet(): We need to get the tweet input, ensure that the user has set a username value (and ask for one, if he or she hasn't), and send of the tweet. Let's look at ensuring the username first: