Ruby on Rails and iPhone Web App Development – Part 1

mediconnect1.png
In this article, I’ll be describing my setup for a simple iPhone application that I’ve built using Ruby on Rails.The primary objective was to quickly build out a prototype application demonstrating the use of a mobile device in entering critical data in the field (in this case, for Pharmaceutical Sales Reps) as well as content integration to another application for rapidly searching and repurposing legacy Word and Excel 2003 content (that part comes later!)

This is a high-level description, so I’ll be only providing an overview of some of the rails functionality, so those people looking for a full walkthrough might be a little disappointed.

PART 1 – Building the Basic Application and Simple Data Entry

My environment:

OS: Macbook Pro (Leopard 10.5.7)

Primary Dev Environment: Eclipse (Galileo) + Aptana RadRails (v1.5.1)

Target iPhone Device: iPhone 3G

My Plugins / Gems/ Rails Addons

jRails v0.4 – An excellent substitute for the default prototype libraries used in Rails.

tank-engine – austinrfnd’s branch branch of Noel Rappin’s tank-engine project.

Creating the Basic Application

After creating the basic application in Aptana studio, I created very a very basic page for handing new medical information requests:

script/generate scaffold mirequest summary:string description:string potential_ae:string potential_pc:string primaryproduct

At this point, I could access basic RESTful functions for index, new, edit, etc. through a standard browser.

Adding iPhone Functionality

In order to best use the iPhone, I first started with Noel Rappin’s tank-widget plug-in. This is simple successor to to his original rails-IUI plugin, but features integration with the jQuery library instead of using the iui javascript and css files. I actually started with one of the most current branches of this code based on some changes by austinrfnd in his own branch (tank-engine).

There are some good demonstrations of using this functionality in a series of articles hosted by IBM;

Developing iPhone applications using Ruby on Rails and Eclipse…

So, setting up the environment looked something like this:

Install the jQuery Rails plugin (my version is 0.4)

sudo script/plugin install git://github.com/aaronchi/jrails.git

Manually copy the javascript files in the plugin. to your javascripts directory.

Install the tank-engine widget

sudo script/plugin install git://github.com/austinrfnd/tank-engine.git

rake tank_engine:install

At this point, I needed to modify a few files to add the iPhone rendering format to my mirequests index view.

Copy and rename views/mirequests/index.html.erb to views/mirequests/index.iphone.erb.

The next step is to enable the controller to detect iPhone specific requests and to include the plug-in helpers for tank-engine.

  acts_as_iphone_controller :test_mode => true

  include TankEngineHelper

Finally, you can get a basic set of buttons and a title-bar by editing the index.iphone.erb.

Here’s what mine looks like.

%=

l = { :caption => ‘Create MI’, :url => new_mirequest_path, :html_options => { :class => ‘te_slide_left’ } }

r = { :back => true, :caption => ‘Back’, :url => “/”, :html_options => {} }

te_navigation_bar( r, “MI Request”, l ) %>

<% panel do %>

<div>

<h2>Pending MI Requests:</h2>

</div>

<% fieldset do %>

<% @mirequests.each do |mirequest| %>

<% row mirequest.summary do %>

<%=h mirequest.description %>

<%= te_link_to ‘Show’, mirequest %>

<% end %>

<% end %>

<% end %>

<% end %>

You can find documentation on these helpers in the tank-engine github site as well as the IBM articles listed above. I did have some formatting issues, however, and the usage of some of the tank-engine helpers wasn’t completely documented. One thing that I learned was that unless you place the row and fieldset helpers inside the panel helper, you won’t get the intended look and feel.

The result should look something like this:

200909111348.jpg

In the next article, we’ll discuss some of the formatting issues and shortcomings with the tank-engine library and how I chose to spice this up a little bit as follows:

200909111352.jpg

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s