The iPhone and iPod touch made Mobile Safari the most popular mobile browser in the United States. Although Mobile Safari is more than adequate at rendering normal Web pages, many Web developers created versions of applications aimed at the iPhone. This "Developing iPhone applications using Ruby on Rails and Eclipse" series shows how to use Ruby On Rails on the server side to identify and serve custom content to Mobile Safari.
In the months since Apple released the iPhone and the iPod touch, Mobile Safari has become the most commonly used mobile Web browser in the United States, and its market share continues to increase. Because the iPhone's form factor and user interface (UI) model are so different from other mobile browsers, many developers are choosing to redesign their Web sites to support Mobile Safari's particular UI model.
The decision to create custom content for the iPhone is the middle ground between two more extreme options. On the one extreme, you could do nothing. Mobile Safari's tap-and-zoom interface is designed to allow users to easily browse Web sites even if the sites were not designed for mobile devices. Apple takes this route on the theory that iPhone users expect to access the full and complete Web. At the other extreme, you could use the newly released iPhone software development kit (SDK) to place your application on the iPhone natively. This gives you an immense amount of flexibility in your UI, as well as access to iPhone features — such as the accelerometer or the camera — that are impossible to use in a Web application. On the downside, the overhead of creating a native SDK application is higher than creating a Web application, and if you already have a Web application, creating a custom iPhone Web version is the fastest way to get a clean iPhone UI into your users' hands.
This article shows how to build a Ruby on Rails application that dynamically recognizes iPhone or iPod touch browsers (throughout this article, I refer to the iPhone — remember that everything here also applies to the iPod touch), while allowing Mobile Safari users the option of seeing the full Web content if they want. The article also focuses on the server-side structures needed to support serving separate content to iPhone users and how to start to serve iPhone content. Part 2 of this "Developing iPhone applications using Ruby on Rails and Eclipse" series focuses on how to give that content an iPhone look and feel.
Setting up your environment
This article uses Eclipse with the Aptana plug-ins for Ruby on Rails and iPhone support. The Ruby on Rails plug-in provides Ruby- and Rails-specific syntax highlighting, shortcuts, execution environments, etc. The iPhone plug-in provides a preview environment for displaying your Web application in an iPhone-size viewport.
There are two options for acquiring the Eclipse/Aptana combination: You can add the Aptana plug-ins into an existing Eclipse environment or you can download the Aptana Studio, which is a derivative of Eclipse, and add the plug-ins from the startup screen provided by Aptana. If you already have an Eclipse environment set up, do the typical Eclipse plug-in search. Select Help > Software Updates > Find and Install and add the plug-in URLs provided in the Resources section. You need two Eclipse plug-ins to follow along. If you're using Eclipse for Rails development, you probably already have the RadRails plug-in. You'll also be using the iPhone development plug-in, which provides a mock iPhone screen for you to preview your development in an iPhone-size viewport. Although this plug-in is designed for previewing static HTML pages, it can also be configured to point to your Rails application. Figure 1 shows the plug-in in action.
Figure 1. The iPhone plug-in
The first thing you'll note about the plug-in display is that it's larger than an actual iPhone. This is to maintain pixel-for-pixel compatibility — the plug-in display has the same pixel dimensions as the iPhone display, but the iPhone has a much greater pixel density. If you are on a Macintosh, you have two other options for an iPhone simulator: iPhoney or the official iPhone simulator included in the iPhone SDK.
iPhoney is a dedicated application that provides a fake iPhone display similar to the Aptana plug-in. The two displays differ in what they show when the site is larger than the iPhone viewport. As you can see, the Aptana plug-in displays the content full size and offers scroll bars. In iPhoney, the Web page is compressed to the size of the viewport (more in keeping with the actual iPhone display of the page). Neither application supports Mobile Safari's double-tap to zoom in and out, so there's no complete substitute for testing on an actual iPhone.
If you have signed up and downloaded the official iPhone SDK, you can also use the official iPhone simulator that is part of that package. It sends the correct user agent and mimics all of Mobile Safari's behavior, including double-tap zoom. The only minor disadvantages are that you have to be running Mac OS X V10.5 and because it's simulating the entire iPhone operating system, you need to launch Mobile Safari on startup. You also can't get an HTML source listing as you would be able to from a desktop browser. If you can use it, it's the most faithful Mobile Safari simulator available.
Serving iPhone content
Suppose you are the proprietor of Soups OnLine, your online source for all things hot and brothy. Your site looks great on a desktop, but you become aware that a growing number of users need soup information on the road and are accessing the site via an iPhone. Currently, your iPhone users see what is shown below.
Figure 2. Desktop view on iPhone
It's not horrible, and thanks to Mobile Safari's nice zoom UI, the user can navigate the site. Still, it seems like the look could be cleaner and more directed to the needs of a mobile user.
I should mention here that Soups OnLine is the site created in my book Professional Ruby On Rails. I use it here largely because it's a complete site that already exists that I can mess around with and not step on somebody else's copyright. See Resources for code for the version of Soups OnLine used in this article and the template the original version was based on.
To serve your mobile users, your Rails application needs to manage the following:
Detecting when a user accesses the site using an iPhone or an iPod touch.
Allowing the user to freely switch between the mobile and regular versions of the site.
Using a different layout for Mobile Safari users, including separate Cascading Style Sheets (CSS) files and, possibly, JavaScript libraries.
Serving different content to mobile users.
The code used to perform these tasks in this article can be used as-is. It has also been gathered into a Rails plug-in called rails_iui, which you can add to your project to get all the same functionality in a single package.
IBM
