Writing iPhone apps using open-source software

When the iPhone first launched there were no third-party applications for it, which was hardly surprising – Apple needed time to create and document the infrastructure for developers. Instead there were “web apps”: websites targeted at the iPhone version of Safari, tailored to its small screen size and rotatable display.

Once Apple did open the iPhone to third-party native applications there was an app explosion, with more than 50,000 available barely a year after the iTunes app store opened. Some of these are truly innovative, making the best use of the platform, while others are barely worth the bandwidth to download them.

From the earliest web apps to the current native applications, there has been open-source software available to help build them. There are complete web app frameworks, native application libraries, and even complete iPhone applications. I’m going to take a look at how you could use some to write an iPhone app.

To some extent those early web apps – purpose-built websites targeted at Safari – have been superseded by proper native applications, but there’s currently a resurgence of interest for two reasons. First, the abilities of Safari web are now available for other phones, particularly Android-based handsets that share the WebKit browser platform. Second, there are now packages that allow a developer to embed such a web app inside a “real” application.
So how do you build a web app? If you’re really keen you become an Apple registered developer and look at its examples So how do you build a web app? If you’re really keen you become an Apple registered developer and look at its examples – if you’re less keen you look at the toolkits available. All the toolkits I’ll mention here are similar in that they require you to create a website using their JavaScript and CSS libraries. Typically, you create a site as a collection of HTML DIVs containing unordered lists as navigation items. You don’t need to give much thought to the app’s appearance, since most of it is derived from the toolkit.

These toolkits require JavaScript, so you can extend the site’s navigation by making an initial page that shows ten blogs posts, with the 11th entry a link that loads a further ten, and so on. The web app need only show what’s required to get a user started, with extra content on demand.

One of the best and longest-running ones is the iUI framework, a JavaScript library plus CSS and images for developing iPhone web apps. This has been used in books and a number of iPhone websites. Recently, the package has been improved by incorporating some iPhone-dependent effects.

The iPhone version of Safari has certain special features designed to take advantage of the platform – in particular, various kinds of animation implemented via stylesheets. For example, an important user-interface feature is that whenever you select an element in a table, that table slides to the left and the next page slides in from the right.

The original version of iUI implemented this in a platform-agnostic manner using a JavaScript animation to move the positions of the two pages. While the process worked, it was slow and not like the real thing, so the most recent version of iUI implements the effect using Mobile Safari CSS stylesheet extensions, resulting in a faster, smoother effect.

Another similar library is iWebkit, which has a slightly richer set of navigation options but is slightly less developed. Two other web app frameworks I’d like to mention are Magic Framework and Jaipho. At first glance Magic Framework is similar to iUI and iWebkit, but it has one trick up its sleeve: it has a database built in.

It takes advantage of a powerful facility in HTML 5 that enables a web app to use client-side storage in the form of an SQL database, which is provided by the SQLite engine. This allows a bridge to be built between a completely web-based application and an application running on the phone itself, by supplying the web app with far more client-side storage than it could accomplish just using cookies.

Jaipho, on the other hand, shows exactly what you can do when you put your mind to it. Perhaps the neatest user interface elements on the iPhone are those “screen gestures” that allow you to scroll through items by sliding the current display with your fingers from left to right or right to left.

This is used on the iPhone’s main desktop to split up the applications into pages, and it’s particularly well employed in the Photos application where you can browse your photo album in much the same way as you’d thumb through a notebook. It has also started to appear in a few third-party applications, such as the recipe finder application Epicurous.

Jaipho implements that interface element in Mobile Safari, allowing you to create sites that work like the Photos application. There are good demos on the website, and with a bit of thought you can make it work with the iUI library mentioned above.

Towards native applications
It’s possible to create compelling web apps using the libraries above, or indeed by yourself: for example, the BBC’s iPlayer website is a good example of what can be done using only the capabilities of a web browser. However, many people move on to create native applications, to get better access to the facilities of the iPhone OS, most crucially to the user interface.

I can’t say that iPhone native programming is easy: compared with web development it’s hard for the simple reason that any error causes you to suffer the ignominy of crashing the phone itself. However, there are various open-source libraries and examples that can make life easier.
For the most part, web apps create an interface that looks like the original iPhone interface, but it’s only a facsimile of the real interface, and the fine details aren’t there For the most part, web apps create an interface that looks like the original iPhone interface, but it’s only a facsimile of the real interface, and the fine details aren’t there. While it may be possible to implement some of these details, the effort required may not be worth it. The Jaipho library mentioned above is tremendously impressive, but adding the functionality to it to implement a complete application may actually be harder than implementing a native application.

There are facilities available to the application developer that aren’t available to the web app developer, one of the obvious ones being the ability to work offline – a web app must always be connected to a web server to work. An iPhone application will have most of its resources installed alongside it in memory, so it doesn’t need to download them each time they’re needed. A well-written application can even cache resources it may need after it’s been installed, for example, by downloading and storing pictures.

An iPhone application can even detect whether there’s network access, and work differently if there is. Moreover, there are facilities that are available to the native application developer that aren’t available in Mobile Safari, varying from simple elements such as the ability to send email from within an application without switching to the Mail application, through to more complex facilities like integration with iTunes. For example, it’s now possible for an application to initiate a financial transaction and sell extra facilities or content.

To create an iPhone app you’re going to need two things: a Mac and a copy of the Apple Xcode development environment. The latter is free to download, although you’ll need to pay Apple if you want to become a registered developer able to submit your applications to the iTunes store. As a registered developer, you’ll also get early access to new releases of the iPhone OS.

Obviously, you do have to be slightly careful about targeting a new version of the OS, but most iPhone users are fairly prompt at updating their OS because they’re nagged every time they plug the phone into their computer. Before I look at some complete open-source iPhone applications, I’ll mention some libraries that you may find useful in your own applications.

Useful libraries
Writing applications for the iPhone is relatively simple, and the hardest part is getting used to the syntax of Objective C, which is the language of choice. Many of the user interface features are easily accessed via a collection of classes, but there are a couple of areas that are less well supported while also pretty important to most applications, and these include networking, data processing and data storage.

Many iPhone applications need network access to fetch content from web servers – for example, XML feeds of new articles or HTML for the articles themselves. The underlying network libraries support asynchronous calls to network servers, and there are also thread libraries that allow an application to carry out different tasks in separate threads.

The ASIHTTPRequest library combines both of these facilities into a single easy-to-use package, which can be used to submit data to and fetch data from web servers via a simple asynchronous interface. It supports synchronous access, but that may make your application hang until a request completes.

It supports all the principal operations required on web servers: both GET and POST requests; authentication; cookies; and compression. It also has the ability to queue up a number of requests and update a progress indicator as each request gets completed asynchronously. Finally, results can be downloaded from a web server to memory or the file system.
It’s possible to limit the bandwidth used by the application, which is particularly useful if the iPhone is using low GPRS data rates To see how all this can be used, consider an iPhone application for a news service. You employ the ASIHTTPRequest library to fetch the newsfeed, and then to download individual articles whose headlines are selected. Requests to download the accompanying images can be queued up to download later, and using the current version of the library it’s possible to limit the bandwidth used by the application, which is particularly useful if the iPhone is using low GPRS data rates as opposed to fast 3G or Wi-Fi.

Once you have the content downloaded you need to process it, and a particularly good set of libraries for processing XML is to be found in TouchXML, which forms part of the larger TouchCode project. Again, these libraries build on lower-level XML libraries that expose the XML structures in a way that’s simple to process. For example, an XML document often contains some repeating structure, as for example an RSS feed has an item for each news article: TouchXML turns these into arrays that can be iterated over using a simple loop.

Having downloaded some content and processed it, it’s very useful to have some way to organise it for future reference, but while the iPhone contains a file system that can be used to store flat files, it also has native support for the SQLite database. SQLite is an embedded SQL database system that works with ordinary files and lacks the complex facilities found in complete relational databases such as MySQL or SQL Server.

It supports “just enough” SQL to allow a developer to set up tables and query them, and supports all the usual SQL statements on tables and relational joins. In a similar way to the networking libraries, there are low-level SQLite functions available: a number of SQLite wrapper libraries make it more useful, and you can write your own. Two notable ones that are worth a look are EntropyDB and Flying Meat DB (FMDB).
EntropyDB is an object database that enables objects to be stored and retrieved later on (there’s a similar persistence framework in the main OS, but EntropyDB is slightly easier to use).

If you’ve set up a complex object to model your app, you can store it away whole when the app exits and retrieve it later on with all its state intact. FMDB, on the other hand, is a more conventional SQL framework that uses a tool such as the SQL Manager for Firefox, with which a developer can set up an initial database with tables and distribute it with their application.

Subsequently, when the application is used, it can store results in those tables and retrieve them later. If I were writing a new application I could use such a set of tables, say, to store these columns for reading later offline. There are no restrictions on what an application can do with SQLite, so it can create or drop whole tables. That means an application can be written in such a way as to create new tables or modify old ones whenever it’s updated from one version to the next.

Complete applications
If you’re trying to learn how to write iPhone applications, a great place to start is by looking at other people’s efforts. There are quite a lot of open-source applications out there, and a few of those show some interesting techniques.

At the simple end of the spectrum is this Wikipedia application, although I found the wikiHowTo app slightly more interesting. It contains an SQLite database, carries out asynchronous network calls, and has some interesting features: choosing a random article by shaking the iPhone is quite fun. Another similar application is Twitterfon, which was an open-source Twitter client but has now become closed-source – however, there do seem to be copies of the source code still in circulation.

At the other end of the spectrum is Molecules, which allows the user to view and manipulate three-dimensional renderings of complex molecules. While this may not be something that most people do professionally, or for pleasure, it is bizarrely fun for a few hours, and digging into its source code will illustrate many important programming techniques.

And not forgetting…
I know I’ve written about it before, but I do need to mention PhoneGap again. PhoneGap is an open-source project that allows you to leverage your web app into a self-contained application.

In essence, you first create your web app using HTML and JavaScript, which you can test to see you have it working the way you want both in the iPhone emulator and on a real iPhone. Once you’ve done that you then wrap it into an Xcode project and create a “real” iPhone app from it.

What’s interesting is that you can add “Xcode only” facilities to your web app, so you can build some of the interface options in Xcode and then embed your web app into them.