February 24, 2012

Xamarin Mobile World Congress 2012 Unofficial Conference App Released!

By

Navigate the 2012 Mobile World Congress Conference in style with Xamarin’s mobile cross-platform Unofficial MWC 2012 app (MWC 2012)! Or, better yet, jump in and take a look at the source to see how we shared 100% of our backend code, including the database, across iOS, Android, and Windows Phone 7!

Cross-Platform Mobile Development with C#

Over drinks one evening, a couple of us decided it would be fun to build an app for the Mobile World Congress to showcase how great cross-platform mobile development with C# using Xamarin’s platform can be. And so a plan was hatched.

Built as a side project over coffee and beer, MWC 2012 app was written to illustrate how awesome cross-platform mobile development with C# using Xamarin’s Mobile Platform can be. And what better place to show that experience than the worlds largest mobile conference!

The MWC 2012 app runs on iPhone, iPad, Android and Windows Phone 7 and was built using Xamarin’s Mobile Platform (MonoTouch & Mono for Android), as well as Microsoft’s Windows Phone 7 Platform. It utilizes a shared code base for everything except the UI and App Layer. The user interface utilizes the native control toolkit on each platform; which means a familiar user-experience, and because it runs as a native application there are no performance sacrifices.

Installs & Source Code

Install it here:

App Store    Android Market   for Windows Phone 7

You can find the complete source code for all three platforms here.

Features

MWC 2012 includes the complete MWC schedule for quick and easy offline reference as well as:

  • Sessions – The complete session schedule is included, as well as session information, time, and location. You can even mark your favorite sessions and then view them!
  • Speakers – Including speaker bios, company information, and photos.
  • Maps – Integrated map view showing the location of the conference.
  • Twitter – Constantly updating Twitter feed keeps you up to date on the MWC Twittersphere.
  • News Feed – Google-powered news feed with all things Mobile World Conference.
  • Exhibitors – Complete exhibitor list including where to find them at the conference.

Architecture

Additionally, MWC 2012 stands as an excellent guide for mobile cross-platform architecture and implementation. Built on a fully layered architecture, MWC adheres to the fundamental principles of Object Oriented Programming and illustrates how to build maintainable cross platform mobile applications using C# and .NET.

Cross-Platform SQL

One of the first challenges in creating the app was to get a unified cross-platform data layer. Android and iOS both ship with SQLite built in, so we decided to use the C# port of SQLite on WP7. This gave us SQL API parity on all three platforms and allowed us to utilize SQLite.NET – an amazing third-party SQLite ORM designed specifically for mobile application needs.

SQLite.NET ORM

Mobile applications benefit from lightweight and fast frameworks because of their generally limited processing power. SQLite.NET (an ORM – not to be confused with the C# port of SQLite) is just such a framework that allowed us to take care of the usual data access plumbing with very little effort on our part.  SQLite.Net was designed by Frank Krueger (author of the notable iCircuit app, among other things), and is incredibly easy to use.

Shared Business Layer

Just as with our Data Layer, the Business Layer is platform-agnostic (it’s completely separated from the platform-specific bits such as the UI and App Layer), so we were able to share it completely across all three platforms.

Keeping the Data Fresh

In order to keep the application up to date in the case of schedule/speaker/etc. changes, the data is constantly refreshed from the Mobile World Congress Web site. We originally considered building in a parser into the mobile application, but that had two major disadvantages:

  1. If the site format changed, the parser in the app would be broken and fixes to the parser could require lengthy app-approval (in the case of the Apple App Store and Microsoft’s App Marketplace), which would render the parser broken in the meantime.
  2. Parsing the web site data would be expensive in terms of network data transfer and could really tax not just the device, but also clog the conference WiFi for people using the app at the conference.

Because of this, we decided to create a server application that did a twice-daily refresh of the data and posted the data as XML files at a known location (http://mwc.xamarin.com). For the parser, we used the open-source HTML Agility Pack and standard C#/.NET code. Once again, this allowed us to leverage existing skill sets and keep the code base all centered around the incredibly awesome .NET platform. We could have also exposed this data as a web service, but in this case we decided again to keep it simple because of our timeline and just drop XML files.

Accessing those XML files from the app was a snap, since we just leverage the WebClient class to pull the XML down, and then used standard .NET serialization to deserialize into our serializable entities.

Native UI Usage and Device Capabilities

One major advantage that Xamarin’s Mobile Platform has over other cross-platform mobile technologies is that it provides direct access to the native UI kits on each platform. This allows developers to create applications that look the part on each platform, rather than pander to the lowest common denominator.

We took advantage of the in the MWC app and used native controls and UX on each platform to design an app that really feels like it belongs, no matter what platform you’re using it on:

Additionally, because we have full platform SDK bindings, we can take advantage of features on each platform. A few examples:

  • In iOS and Android we used the native tab controls and in WP7 we used the native Metro Panorama UX to switch between app sections.
  • In iOS we used MonoTouch.Dialog extensively which, among other things, gave us pull-to-refresh and search functionality for free. We also provided table indexing for scroll by letter functionality.
  • In Android we utilized the ListView Fast-Scrolling as well as the hardware Menu key.
  • In WP7 we incorporated Bing maps, the hardware Back button, and Pin-to-Start functionality for session, speaker, and exhibitor information.

And of course, if we had more time there are any number of other platform-specific features that we could have built in (and you can too, if you want to play with the source).

The Big Win

Between MonoTouch, Mono for Android, and Microsoft’s .NET, We were able:

  1. Write the entire set of apps, including the web site parser using C# and .NET
  2. Share all of the non UI and platform feature code across all the apps
  3. Minimize the amount of code written by using existing frameworks

Reuse Metrics

Our core library (of which 100% was shared across the apps) wound up being 1,635 lines of code (771 of that was the drop-in ORM), so looking at each of the apps, we have the following reuse metrics:

  • iPhone + iPad (2,476 LOC / 2 Apps) – 57% Reuse
  • Android (1095 LOC)  – 60% Reuse
  • WP7 (896 LOC) – 65% Reuse

Not only is that impressive, but considering that much of the platform specific code is actually based around platform specific features (menu for Android, pin-to-start for WP7, etc.), and that the app is so few lines of code, we’re actually hitting amazing metrics.

Other Benefits

The benefits here go way beyond just code sharing. Utilizing the same language and framework for all of the apps meant that we didn’t need to either hire specific resources for each app, or have people learn a bunch of different languages and frameworks. Leveraging things like the ORM for data access, .NET framework for web calls, MonoTouch.Dialog for iOS UI, and other bits, meant we were able to significantly reduce the amount of code that it took to create these apps.

Use it at your Conference

Feel free to re-brand and re-use the app at your own conference or event. All we ask is that you keep the “About” page in there with our info. :)

So give it a spin and tell us what you think!

TwitterFacebookGoogle+LinkedInEmail