Archive for the ‘Mobile development’ Category

Review of Appcelerator Titanium

Appcelerator Titanium is an open source mobile application development tool for iPhone and Android which allows you to code apps with HTML, CSS and JavaScript. I tested out the platform this morning. Having developed an iPhone application with Objective C before, I can tell you that Titanium makes the iPhone development process a whole lot easier. Getting the Android SDK working was a bit tricky but development itself is simple. I love being able to compile native applications by writing standard web code!

Here’s an example of just how easy it can be:

Code for a simple Titanium App

Code for a simple Titanium App

The Titanium app in iPhone

The Titanium app in iPhone

The Titanium app in Android

The Titanium app in Android

.

Getting the Andriod emulator installed correctly can be a real pain. After you have downloaded the Android SDK, open the Android SDK and AVD Manager and make sure you install all of these:

  • Android SDK Tools
  • SDK Platform Android 1.5, API 3
  • Google APIs by Google Inc., Android API 3

In your Titanium Developer profile, set the Android API location to /Applications/android-sdk-mac_86. Also, I found the Android emulator to be frustratingly slow, but I don’t think that’s Titanium’s fault.

To create useful mobile applications I think it would be a good idea to start with the following:

I have included some screenshots of the Kitchen Sink application built in Titanium below so you can get an idea of what can be done.

Slider UI

Slider UI

Entering text input

Entering text input

Saving data on the device

Saving data on the device

We should be developing mobile apps now

Barriers to mobile app development are getting so low they are almost non-existent. As web developers today we have no excuse not be creating for mobile. We don’t need to wait for Flash CS5. The tools to create rich, responsive mobile apps for iPhone, Android and Nokia are already available with HTML5. If we have to deploy a native app there are open source tools available to convert web standards like HTML and JavaScript into native iPhone, Android, Blackberry, Palm and Nokia applications.

There are a number of advantages to developing with HTML5 instead of writing native Objective C applications for iPhone. You have probably already heard these:

  • Developing with web technology is much faster than with Objective C,
  • Bug fixes and updates can be deployed instantly,
  • We can utilize our existing HTML, CSS & JavaScript talent.

But what you might not have realised is:

Of course there are still differences between the various mobile devices, but with a bit of tweaking the same HTML5 app can be made to run on iPhone, Android, Palm and Nokia devices because they all use the Webkit browser engine.

Sometimes we might need to generate native applications, to sell the application in Apple’s App Store for example. But even that doesn’t mean we have to resort to Objective C or Java. There is a clever open source tool called Appcelerator Titanium which deploys native applications to iPhone and Android – and we can code them in standard HTML, CSS and JavaScript. Of course deploying as native apps removes some of the benefits inherent to web apps – such as rapid deployment and development iteration. But this approach still dramatically reduces barriers to development. Phone Gap is another open source tool for deploying native mobile applications from standard web technologies. Unlike Appcelerator, Phone Gap supports Blackberry, Palm and Nokia as well as iPhone and Android. However it doesn’t offer as rich of a feature set as Appcelerator. Rhomobile offers yet another framework, but it is targeted towards Ruby developers.

So when you next have an idea for a mobile app, don’t give up on it because you don’t know Objective C or Java, or because it is too difficult to create a cross-platform app. Put your existing HTML, CSS and JavaScript skills to use and take advantage of HTML5 or an open source web-to-native compiler. I will have a play around with Appcelerator and Phone Gap and post my findings on this blog.

Comparison of mobile application development methods

Native apps Web apps Native apps compiled from standard web code
  • Fast, best method for games
  • Easily monetised
  • Slow, separate development process for each platform
  • Instant deployments of bug fixes and updates
  • Can be cross-platform
  • Uses web standards
  • Avoid the App Store gatekeeper
  • Easily monetised
  • Easily deployed to multiple platforms
  • Uses web standards

WRT widgets for Nokia N97

Because Pieter talked about “the mobile landscape” earlier, I’m going to talk about my first experiences with making a WRT widget for the Nokia N97. The widget is a simple RSS reader but was really fun to make. Making widgets with the WRT framework is quite simple actually. WRT widgets are small HTML and Javascript mini sites that run on the S60 software platform used in loads of Nokia phones.

What do you need?

Actually, you don’t need much to get started. You only need a IDE like Dreamweaver or so. There are a couple tools available for Dreamweaver, Aptana and Visual Studio but they are not necessary to make widgets. I used the Aptana plugin in Eclipse. The good thing about these plugins is that you can test your widget in your IDE in stead of deploying it to the device with each change you make. And that is probably the only reason I would use such a plugin, because debugging a widget can be quite a pain in the *** (even with the plugin). For example: if you have a javascript error, you won’t know about it unless your widget just doesn’t work anymore.

Getting started!

You’ve got your IDE and are ready to go? Download this empty WRT widget template and get started! WRT widgets are just a couple of files, zipped up, and have the extension renamed to ‘wgz’. So if you download the empty WRT template widget, rename the extension to ‘zip’ en unpack it, you can see the contents. WRT widgets have to contain an info.plist file that declares the specs of your widget: the widget’s name, the HTML page is should load by default and all other widget-specs like for example if the miniview should be enabled. The HTML page has to have a special doctype and a meta tag with a “viewport” setting but that’s the only thing that’s special about that page I guess.

Development.

All your actions are declared in javascript. Because a WRT widget is just a HTML page you can use javascript libraries like jQuery, MooTools or the prototype framework. These are not necessary but can be quite useful and a time-saver in the development process. The rest of it is just plain old HTML and CSS. You can use libraries like the WRTKit, but you don’t need them to get started.

Troubles.

One thing I quickly noticed was that animations in a WRT widget are in fact “not done”. I tried using the typical jQuery animations like the slideDown effect and the animate effect but it just didn’t work very well. A setInterval method worked best for animating DOM elements but I ended up deleting all animations because it just sucked bigtime! That’s really a bummer, but if you really want animations in your widget, I would advice to switch over to Flash lite.

The Mobile Landscape

If you’re developing mobile content, the first thing you need to ask yourself is what road will you follow. A mobile project, more so than a web project, is about choices. The choice which phones you will support, which mobile OS’s and perhaps most importantly, which platform you will use to develop your content.

The Platform

Just like the browser wars, the mobile community has its own battle to fight. The world of mobile devices is littered with proprietary APIs and different solutions for packaging and deploying your application to the device. On one side you have Apple with its proprietary iPhone OS that almost exclusively offers applications through its App Store, while on the other side you have Nokia supporting Flash Lite applications and allowing you to package your content as a Web Runtime widget which will run on most S60 phones. (new generation Nokia phones as well as some others like Samsung and LG). Though far from a complete list (others include BlackBerry OS, Palm OS, Windows Mobile and Google’s emerging Android system), these two currently hold the biggest market share for mobile devices and chances are you will be developing for one of these platforms.

The Tools

Once you’ve decided on the platform, you will need to decide which tools to use. If you’re developing for the iPhone, you have only one real option, the iPhone SDK, which lets you develop iPhone applications using Objective C. Fortunately, this kit is short from perfect, with excellent ease of use and an incredible emulator which allows you to test your content without necessarily having to upload it to your device.

If you’re developing for the Series 60 or Series 40  phones, there is a huge selection of tools and programming languages available to you, ranging from the more low-level languages like JavaME and C++ to web technologies like Flash Lite and Web Runtime (which is basically an HTML page with Javascript and CSS). From here on in, I will mostly focus on these last two. On the point of IDEs, there’s an even bigger variety, depending on the programming language of your choosing. Here at These Days, we tend to use Eclipse with the Aptana Plugin and Adobe Device Central for our mobile projects.

The Clash: WRT vs. Flash Lite

So, as a multi-skilled mobile content developer, which of these technologies should you choose? Well, each certainly has its merits and although a good many of you might tend to rush in and pick the technology that you feel most comfortable with, it’s often better to look at the needs of your application or widget and then decide on which technology suits those needs best. Else you may find yourself drumming your head against the wall in agony later on. For example, one of the new features supported on high-end phones, most notably Nokia’s new N97, is the homescreen. The Nokia N97 homescreen is highly customizable and allows the user easy access to his favorite apps or widgets. This very interesting feature does come with a downside, namely that you’re bound to using Nokia’s Web Runtime and cannot deploy your content for instance, as a .sis or .jar application.

YouTube Preview Image

Since WRT widget are comprised of plain old HTML, CSS and Javascript they are often the most cost-effective solution for widgets that deliver customizable content to the user, like RSS readers, weather applications or applications that tie in to your website in some other way.  (Facebook has an excellent example, pre-installed on the N97) It’s even possible to add some Flash Lite content, but be warned that you lose out on a lot of the power and possibilities of Flash Lite when it is embedded in a WRT widget, since you most likely will not be able to use any of the API’s used to interface with the device. (unless you build a communication layer between Flash Lite and Javascript)

This is one of the reasons that Flash Lite is much more suitable for small games and standalone applications where you don’t need to leverage the special features only available to WRT widgets, like the homescreen. But here also, keep in mind that Flash Lite nor the devices that run it are not anywhere near what we’ve become accustomed to, performance-wise. So if you’re going the Flash Lite way, expect Actionscript 2 (Flash Lite 3.x supports Flash Player 8 capabilities, all versions below support Flash Player 7) for at least another year (rumor is that by the end of this year, Adobe will present the beta to Flash Lite 4 and with it long-awaited support for AS3) and don’t overdo it with embedded bitmap images and tweens.

The Conclusion

The only advice I can give you is: make sure that you think long and hard on which technology suits your needs best. At this moment, I think WRT, due to its ease-of-use and extensive components library (WRTKit) is slightly more feasible than Flash Lite, and only time will tell if that delicate balance will tip in Adobe’s favor once more.

I’ll leave off with some excellent resources: