[See how one can develop and deploy an application on iPhone, Android, Windows Mobile and Symbian in just 1 week and have it published on top app stores]

TweetMWC is a friendly twitter client showing tweets about the mobile industry's most attended event: Mobile World Congress in Barcelona.

This first article gives the ins and outs of how TweetMWC was created with ELIPS studio 3, from early concept to design and testing. For the publishing step and distribution on app stores, see the second article.

The Idea

The GSMA Mobile World Congress is an important "rendez-vous" in Europe to get early access to the industry trends and innovations and meet great people. Unfortunately, I am generally getting very busy with meetings during those 4 days in Barcelona so that I hardly find the time to keep up with all what is going on there. Well, that is all about the idea behind TweetMWC: a mobile app with the hot news about during show at hand and a way to share my views with other attendees. Pretty sure that those of you going to barcelona will find it useful!

The Design

Once you get an application idea in mind, you may be tempted to rush into the code. I would rather start with a rough design of the app. Why? Because first I can get it right from the very beginning by spending only 5 minutes sketching and figuring out basic use-cases. Then I tend to go faster when developing the app as it saves several iterations.

So just taking a piece of paper and writing down the high level use cases:

• Use Case 1 - I want to read about what is going on at Mobile World Congress
• Requirement 1.A - be friendly: no user interaction required (no login at start-up)
• Requirement 1.B - keep it simple: auto search of tweets containing relevant hash tags (#mwc10 OR #gsma)
• Use Case 2 – I want to share my views with others
• Requirement 2.A - must be secured: Twitter login/password required
• Requirement 2.B - stay simple: relevant twitter hash tag (#mwc10) is automatically appended to the message so it appears in the search state

Now that I have my use cases in mind, I can make some mockups of my app. It can be done on paper. I personally use balsamiq to bring my app to life quickly. So looking back to my use cases, I shall have one state to display the tweets, one state to post and an additional one about the app/company.

Choice of Platforms... and SDK

Choosing which device/platform to target can be more complex than it seems. It is all a matter of market and opportunities.

In my case, I would like my app to be available on major application stores (i.e. Apple App Store, Google Android Market, Microsoft Marketplace and Nokia OVI store). So I am selecting handsets from various vendors that I have at hand:

• Apple iPhone
• HTC G1 (Android), and other Android devices
• HTC touch 3G (Windows Mobile 6.1), and other Windows Mobile 6 devices
• Nokia 5800 (Symbian/S60 v5), and other Symbian-S60 v5 devices

I am not ready to spend time developing my app in 4 different programming languages. I obviously need a cross-platform development environment, meaning I develop my app only once for all the platforms. In such context, ELIPS Studio 3 seems particularly appropriate as:

1. It is cross-platform: so I'll be able to have a single code base to address all the platforms.
2. The front-end is based on Adobe Flex Builder: to which I am already familiar. Moreover, I will be able to benefit from existing ActionScript library to access Twitter.
3. It generates native code: that should give my app good performances. And it should be compatible to app stores' approval rules.

UI Design

Using the initial application mockups plus some graphical assets from a friend designer, I can now start designing my application using ELIPS Studio 3 plug-in to Flex Builder.

In Adobe Flex Builder, the UI is described in an XML oriented language (MXML) and logic is coded in AsctionScript, which makes it fairly productive for web developers.

The application layout is based on UI elements. They can be of two sorts:

• MX class contains basic flex UI elements such as Image, Label or HBox for instance.
• MOB class contains device-specific UI elements such as List, TextInput or ActivityIndicator. This means that the mob:List element will be rendered as a native iPhone UIListView on iPhone which is key in order to get acceptance when publishing on various app stores.

Managing application states is particularly fast in Flex as each state can be derived from a base one. A state can then add its own UI elements and remove or modify the elements existing in the base state.
This saves lots of lines of code as compared to native programming languages that may require one or several code files per state. This also makes state transition very easy to deal with, even if I am not planning to use them in this app.

Handling Model Variants

One of the important challenges, when it comes to program for mobile devices, is to deal with variants. Indeed, they can be many differences from one model to another like the screen size or the capabilities: does it supports screen rotation? Is it touch-based? What about GPS?

ELIPS Studio brings solid mechanisms for developers to manage such variants efficiently while keeping a single code base.

First, it is possible to define one set of resources per screen size. In my case, I am targeting 3 different screen sizes, so I will have 3 different graphical assets in my project resources:

• 240x320 (HTC touch 3G)
• 320x480 (iPhone and Android)
• 360x680 (Nokia 5800)

Then, for handset capabilities, there is an API called openplug.elips.device which allows putting some conditional coding. In my case, I will need to check the device screen size and support of rotation in order to adapt my list of tweets accordingly.

(re)Using ActionScript libraries

In the first place, I used fake data to design my application UI. I now need to connect it to twitter for displaying and posting real tweets.
When dealing with web services, one solution consists in sending HTTP requests to the server and parse the result.
In the case of Twitter, there are already several open source ActionScript libraries. See the twitterscript lib on google code. I basically imported it in my project and compile it after a light adaptation.

Of course, a similar approach can be done for many other web services where AS libs are available in open source like Flickr, Facebook, eBay or MySpace, just to name a few.

Testing on Simulation, and Generating for the Mobile Phones

ELIPS Studio includes a simulation for the various platforms and models of handsets which is pretty useful for validating the variants of your app very fast, on PC.

The app can then be generated for each targeted platform in the form of a ".sis" file for symbian, ".cab" file for windows mobile, ".apk" for android. For iPhone, ELIPS Studio beta still requires the generated code to be compiled with XCode on a Mac. This will be simplified in future version, see this article.

Check out the ELIPS Studio tutorials and videos page for more details on building your application for supported mobile platforms.

And Finally: Deploying the Application to Stores

That's it! After a week of design, development and testing, I've got my app running on the 4 major mobile platforms.
You can download the TweetMWC binaries from the samples page to try it out on your handset.