http://bikle.com

A Recipe For An HTML5 iPhone Web App

Dan Bikle -- http://bikle.com -- 2009-09-03

Motivation

Ingredients

Installation

Start Rails

Start iPhone Web App

Conclusion

This page describes " iWant CRM .info " which is a demonstration iPhone Web app.
It can be used to access Sugar Accounts inside of SugarCRM On Demand.

Motivation

HTML5 Web apps can be compared to "native" iPhone apps:

• A native iPhone app requires much more effort to write than a HTML5 Web app
• Native iPhone apps are installed from the App Store
• Web apps are not installed; they run in the browser
• Native iPhone apps have access to all hardware resident on the iPhone
• Web apps access some hardware capabilities
• Like a native app, An HTML5 Web app can store data in the smartphone
• Like a native app, An HTML5 Web app can operate while "offline"
• An HTML5 Web app runs on any smartphone which supports HTML5
• A native iPhone app only runs on iPhone

The App Store offers some features to the iPhone end-user:

• A reliable software installation experience
• A source of reliable software

The App Store offers some features to the iPhone developer:

• A reliable software distribution platform
• A reliable revenue collection mechanism

The App Store presents some hurdles to the iPhone end-user:

• Software installation requires the end user to have an iTunes account
• The App Store search engine may not be optimal

The App Store presents some hurdles to the iPhone developer:

• Native iPhone apps must be approved by Apple
• Approval takes a week or more
• Bug fixes are delayed by the approval process
• Bug fix deployment is controlled by end-user

The above hurdles presented by the App Store make it less than optimal for distributing "Enterprise" iPhone apps.

Characteristics of "enterprise" apps:

• They don't need access to most hardware features (like the camera)
• They should be centrally controlled/maintained by IT experts
• End-users operate them to implement business processes
• An example would be an app which connects the end-user to a CRM system

It is obvious that most enterprise apps should be deployed as Web apps.

Ingredients

Like most recipes, this recipe requires you to collect some ingredients and then follow some instructions.
The ingredients for this recipe are listed below:

• SugarCRM Account
• Computer Running Mac OS/X, Linux, Free BSD or Solaris
• Ruby on Rails
• Gems For This Recipe
• iWant CRM .info Rails Application
• Safari
• Webkit
• Firefox

SugarCRM Account

It is easy to obtain a SugarCRM Account. Follow this link:
http://www.google.com/search?q=+SugarCRM+OnDemand
You need to make note of three pieces of information about that account:

• Username (probably "admin")
• Password
• Account URL (something like: http://eval.sugarondemand.com/bobsmith/)

Login and create 3 "Sugar Accounts". Give them names like IBM, Oracle, and Cisco.
Make sure each Sugar Account has a Billing City.
The combination of name and Billing City will appear on your iPhone later in this recipe.

If you want to short-circuit this recipe and go straight to the punch-line, you can now use your iPhone to see the Sugar Accounts you just created.
Instructions are here:

Start iPhone Web App

Computer running Mac OS/X, Linux, Free BSD or Solaris

You need a laptop or desktop computer running Mac OS/X, Linux, Free BSD or Solaris.
It is possible to build and test an HTML5 Web app on Windows but this recipe is suboptimal for that effort.

If your only computer runs Windows, consider renting a cheap Linux host on the net and using that to fill the "server" role of this recipe. Windows offers good X-Windows support (via cygwin). So, you can use X-Windows (running emacs or vim) to edit files and run shell commands on the Linux host.

Firefox 3.5.x or Safari 4.x running on Windows might do an adequate job of emulating Safari running on an iPhone. I'm not sure though, I have not tried it.

If you like this recipe and then start building HTML5 web apps, you will want to deploy the server portion on a host on the web which is running Mac OS/X, Linux, Free BSD or Solaris.

You might avoid some hair-pulling if you ensure that the OS of your development environment matches the OS of your production host on the net.

Ruby On Rails

This is more of a task than an ingredient. You want to install Ruby on Rails on your computer. I use this mini-recipe to install Ruby On Rails on any computer:

• Install Ruby 1.8.7
• Install Ruby Gems 1.3.1 (which depends on Ruby)
• Install Ruby on Rails 2.3.x (which depends on Ruby Gems)
• More details here: http://RubyOnRails.org

If you have problems with the above mini-recipe, you might try a "packaged-rails" solution named "BitNami":
http://bitnami.org/stack/rubystack

I tried using BitNami to install Rails on an XP-Windows-laptop. It seemed to install okay but the "gem" command gave me errors.

This recipe depends on the gem command so I powered down the XP-Windows-laptop and declared it a dud.

For Mac, Linux, BSD, and Solaris I don't use BitNami because I already have the 3-step-mini-recipe (listed above) which never fails.

Gems For This Recipe

Collect the gems listed below; they are simple files. Put them in a convenient directory.

• haml, version: 2.0.9
  http://rubyforge.org/frs/download.php/52102/haml-2.0.9.gem
• httpclient, version: 2.1.2
  http://rubyforge.org/frs/download.php/25673/httpclient-2.1.2.gem
• libxml-ruby, version: 1.1.3
  http://rubyforge.org/frs/download.php/53631/libxml-ruby-1.1.3.gem
• mongrel, version: 1.1.5
  http://rubyforge.org/frs/download.php/37321/mongrel-1.1.5.gem
• rack, version: 1.0.0
  http://rubyforge.org/frs/download.php/55681/rack-1.0.0.gem
• soap4r, version: 1.5.8
  http://rubyforge.org/frs/download.php/25771/soap4r-1.5.8.gem
• sqlite3-ruby, version: 1.2.4
  http://rubyforge.org/frs/download.php/42054/sqlite3-ruby-1.2.4.gem
• uuidtools, version: 1.0.7
  http://rubyforge.org/frs/download.php/47866/uuidtools-1.0.7.gem

iWant CRM .info Rails Application

The software you want is here:

http://sites.google.com/site/html5iphone/iw/ iwant crm .info .tgz

I wrote the above software; it is the main point of this recipe.

Download this software and put it in a convenient directory. For you, maybe a good place would be: ~/iw/

Safari

Safari 4 is useful for simulating the Safari browser in an iPhone.
But, you do not need Safari 4 to implement this recipe.
If you want to use Safari, you obtain Safari from Apple:
http://www.apple.com/safari/

Safari only runs on Mac and Windows.
If you are implementing this recipe on Linux, FreeBSD, or Solaris, you can use Firefox 3.5.x to simulate the Safari browser in an iPhone.

Webkit

Webkit is useful for tracing JavaScript on a Mac running Safari.
You obtain Webkit from this URL:
http://webkit.org/
When I run Webkit on my Mac, it brings up a copy of Safari.
I access Webkit functionality from the "Develop" tab of Safari.
More information about Webkit:
http://en.wikipedia.org/wiki/WebKit

Firefox

Firefox 3.5.x is useful for simulating the Safari browser in an iPhone.
You obtain the Firefox browser from this URL:
http://Firefox.com

Firefox runs well on Linux. This means that you can use Firefox on Linux to simulate an iPhone Safari browser.


At this point you have collected all the ingredients for this recipe.

Installation

Decide on a Home for iWant CRM .info software
Install iWant CRM .info software
Install Some Gems

Decide on a Home for iWant CRM .info software

On my Mac I decided to put my iWant CRM .info software in this directory: /pt/w/iw/

On your computer, maybe you could put it here: ~/iw/

Install iWant CRM .info software

Now that you have gathered all your ingredients, it is time to follow some instructions.
Here is the shell command to un-tar the iWant CRM .info software:

tar zxf iwantcrminfo.tgz

So, locate the iWant CRM .info software you downloaded when you were collecting ingredients. Then, un-tar the iWant CRM .info software into a convenient directory; cd to that directory and type ls -la. You should see something like this:

Tue Sep 01 17:05 /pt/w/iw/rs maco$ 
Tue Sep 01 17:05 /pt/w/iw/rs maco$ 
Tue Sep 01 17:05 /pt/w/iw/rs maco$ ls -la
total 56
drwxr-xr-x  19 maco  staff    646 Aug 29 19:50 ./
drwxr-xr-x  45 maco  staff   1530 Aug 30 18:14 ../
drwxr-xr-x  14 maco  staff    476 Aug 31 13:49 .git/
-rw-r--r--   1 maco  staff     60 Aug 23 18:22 .gitignore
-rw-r--r--   1 maco  staff  10011 Aug 23 14:55 README
-rw-r--r--   1 maco  staff    307 Aug 23 14:55 Rakefile
drwxr-xr-x   6 maco  staff    204 Aug 23 14:55 app/
drwxr-xr-x  10 maco  staff    340 Aug 30 02:33 config/
-rw-r--r--   1 maco  staff    186 Aug 23 14:55 config.ru
drwxr-xr-x   5 maco  staff    170 Aug 29 19:02 db/
drwxr-xr-x   3 maco  staff    102 Aug 23 14:55 doc/
drwxr-xr-x   3 maco  staff    102 Aug 23 14:55 lib/
drwxr-xr-x   6 maco  staff    204 Aug 30 11:41 log/
-rwxr-xr-x   1 maco  staff    100 Aug 29 19:50 mongrel_rails.sh*
drwxr-xr-x  19 maco  staff    646 Aug 31 14:34 public/
drwxr-xr-x  11 maco  staff    374 Aug 23 14:55 script/
drwxr-xr-x   8 maco  staff    272 Aug 23 14:55 test/
drwxr-xr-x   6 maco  staff    204 Aug 23 14:55 tmp/
drwxr-xr-x   5 maco  staff    170 Aug 23 16:13 vendor/
Tue Sep 01 17:05 /pt/w/iw/rs maco$ 
Tue Sep 01 17:05 /pt/w/iw/rs maco$ 

If you are a Rails developer, the above listing should look familiar. It is a copy of a Rails Root directory.

At that point you can consider the iWant CRM .info software to be "installed".

Install Some Gems

Gems are packages of software. All Rails sites depend on gems. You may install the gems in two places depending on your preference:

• Inside the Ruby Installation
• Inside the Rails Installation

When I build or deploy a Rails site, my preference is to install the gems inside the Rails installation. A gem which is installed inside a Rails installation affects only that Rails installation. You may, however, prefer to install the gems inside your Ruby Installation. Why? Because it is easier. The shell commands listed below will install the gems inside your Ruby Installation:

gem install haml-2.0.9.gem           --no-ri --no-rdoc 
gem install httpclient-2.1.2.gem     --no-ri --no-rdoc 
gem install libxml-ruby-1.1.3.gem    --no-ri --no-rdoc 
gem install mongrel-1.1.5.gem        --no-ri --no-rdoc 
gem install soap4r-1.5.8.gem         --no-ri --no-rdoc 
gem install sqlite3-ruby-1.2.4.gem   --no-ri --no-rdoc 
gem install uuidtools-1.0.7.gem      --no-ri --no-rdoc 

If you decide to install the gems inside your ruby Installation, you should then remove the gems which I put inside of the iWant CRM .info software. They are easy to find, they are in this subdirectory:

vendor/gems

You remove them with this shell command:
rm -rf vendor/gems

If you are wary of removing them, just move them to a convenient location with a shell command like this:
mv vendor/gems ~/my_vendor_gems

If you decide to use the gems which I placed in the iWant CRM .info software, then they will need to go through the "build" task. You do the "build" task with a simple shell command:

rake gems:build:force

If that command issues errors, try removing "dot-o" files:

find vendor/gems -name '*.o' -print | xargs rm -f

Then try:

rake gems:build:force

If you encounter problems, study this screen dump of me un-tarring the iWant CRM .info software and then building the gems:

oracle@zareason:/pt/w/iw$ 
oracle@zareason:/pt/w/iw$ 
oracle@zareason:/pt/w/iw$ 
oracle@zareason:/pt/w/iw$ pwd
/pt/w/iw
oracle@zareason:/pt/w/iw$ 
oracle@zareason:/pt/w/iw$ 
oracle@zareason:/pt/w/iw$ ll iwantcrminfo.tgz 
-rw-r--r-- 1 oracle dba 29399433 2009-08-30 11:51 iwantcrminfo.tgz
oracle@zareason:/pt/w/iw$ 
oracle@zareason:/pt/w/iw$ 
oracle@zareason:/pt/w/iw$ tar zxf iwantcrminfo.tgz 
oracle@zareason:/pt/w/iw$ 
oracle@zareason:/pt/w/iw$ 

oracle@zareason:/pt/w/iw$ 
oracle@zareason:/pt/w/iw$ 
oracle@zareason:/pt/w/iw$ ls -la
total 30724
drwxr-xr-x  4 oracle dba     4096 2009-09-02 14:37 ./
drwxr-xr-x  3 oracle dba     4096 2009-08-30 01:44 ../
-rw-r--r--  1 oracle dba 29399433 2009-08-30 11:51 iwantcrminfo.tgz
drwxr-xr-x 14 oracle dba     4096 2009-08-29 19:50 rs/
oracle@zareason:/pt/w/iw$ 
oracle@zareason:/pt/w/iw$ 
oracle@zareason:/pt/w/iw$ cd rs
oracle@zareason:/pt/w/iw/rs$ 
oracle@zareason:/pt/w/iw/rs$ 
oracle@zareason:/pt/w/iw/rs$ 
oracle@zareason:/pt/w/iw/rs$ ls -la
total 84
drwxr-xr-x 14 oracle dba  4096 2009-08-29 19:50 ./
drwxr-xr-x  4 oracle dba  4096 2009-09-02 14:37 ../
drwxr-xr-x  6 oracle dba  4096 2009-08-23 14:55 app/
drwxr-xr-x  5 oracle dba  4096 2009-08-30 02:33 config/
-rw-r--r--  1 oracle dba   186 2009-08-23 14:55 config.ru
drwxr-xr-x  3 oracle dba  4096 2009-08-29 19:02 db/
drwxr-xr-x  2 oracle dba  4096 2009-08-23 14:55 doc/
drwxr-xr-x  8 oracle dba  4096 2009-08-30 11:39 .git/
-rw-r--r--  1 oracle dba    60 2009-08-23 18:22 .gitignore
drwxr-xr-x  3 oracle dba  4096 2009-08-23 14:55 lib/
drwxr-xr-x  2 oracle dba  4096 2009-08-30 11:41 log/
-rwxr-xr-x  1 oracle dba   100 2009-08-29 19:50 mongrel_rails.sh*
drwxr-xr-x  7 oracle dba  4096 2009-08-30 11:03 public/
-rw-r--r--  1 oracle dba   307 2009-08-23 14:55 Rakefile
-rw-r--r--  1 oracle dba 10011 2009-08-23 14:55 README
drwxr-xr-x  3 oracle dba  4096 2009-08-23 14:55 script/
drwxr-xr-x  7 oracle dba  4096 2009-08-23 14:55 test/
drwxr-xr-x  6 oracle dba  4096 2009-08-23 14:55 tmp/
drwxr-xr-x  5 oracle dba  4096 2009-08-23 16:13 vendor/
oracle@zareason:/pt/w/iw/rs$ 
oracle@zareason:/pt/w/iw/rs$ 
oracle@zareason:/pt/w/iw/rs$ 
oracle@zareason:/pt/w/iw/rs$ 
oracle@zareason:/pt/w/iw/rs$ 
oracle@zareason:/pt/w/iw/rs$ find . -name '*.o' -print
./vendor/gems/libxml-ruby-1.1.3/ext/libxml/ruby_xml_xpointer.o
./vendor/gems/libxml-ruby-1.1.3/ext/libxml/ruby_xml_html_parser_context.o
./vendor/gems/libxml-ruby-1.1.3/ext/libxml/ruby_xml_encoding.o
./vendor/gems/libxml-ruby-1.1.3/ext/libxml/ruby_xml_xpath_expression.o
./vendor/gems/libxml-ruby-1.1.3/ext/libxml/ruby_xml_html_parser_options.o
./vendor/gems/libxml-ruby-1.1.3/ext/libxml/ruby_xml_node.o
./vendor/gems/libxml-ruby-1.1.3/ext/libxml/ruby_xml_sax_parser.o
./vendor/gems/libxml-ruby-1.1.3/ext/libxml/ruby_xml_input_cbg.o
./vendor/gems/libxml-ruby-1.1.3/ext/libxml/ruby_xml_schema.o
./vendor/gems/libxml-ruby-1.1.3/ext/libxml/ruby_xml_xinclude.o
./vendor/gems/libxml-ruby-1.1.3/ext/libxml/ruby_xml_parser_options.o
./vendor/gems/libxml-ruby-1.1.3/ext/libxml/ruby_xml_io.o
./vendor/gems/libxml-ruby-1.1.3/ext/libxml/ruby_xml_relaxng.o
./vendor/gems/libxml-ruby-1.1.3/ext/libxml/ruby_xml_dtd.o
./vendor/gems/libxml-ruby-1.1.3/ext/libxml/ruby_xml_parser.o
./vendor/gems/libxml-ruby-1.1.3/ext/libxml/ruby_xml_document.o
./vendor/gems/libxml-ruby-1.1.3/ext/libxml/ruby_xml_namespace.o
./vendor/gems/libxml-ruby-1.1.3/ext/libxml/ruby_xml_xpath_context.o
./vendor/gems/libxml-ruby-1.1.3/ext/libxml/libxml.o
./vendor/gems/libxml-ruby-1.1.3/ext/libxml/ruby_xml_error.o
./vendor/gems/libxml-ruby-1.1.3/ext/libxml/ruby_xml_parser_context.o
./vendor/gems/libxml-ruby-1.1.3/ext/libxml/ruby_xml_reader.o
./vendor/gems/libxml-ruby-1.1.3/ext/libxml/ruby_xml_namespaces.o
./vendor/gems/libxml-ruby-1.1.3/ext/libxml/ruby_xml_attr_decl.o
./vendor/gems/libxml-ruby-1.1.3/ext/libxml/ruby_xml_xpath_object.o
./vendor/gems/libxml-ruby-1.1.3/ext/libxml/ruby_xml_sax2_handler.o
./vendor/gems/libxml-ruby-1.1.3/ext/libxml/ruby_xml_xpath.o
./vendor/gems/libxml-ruby-1.1.3/ext/libxml/ruby_xml_html_parser.o
./vendor/gems/libxml-ruby-1.1.3/ext/libxml/ruby_xml.o
./vendor/gems/libxml-ruby-1.1.3/ext/libxml/ruby_xml_attr.o
./vendor/gems/libxml-ruby-1.1.3/ext/libxml/ruby_xml_cbg.o
./vendor/gems/libxml-ruby-1.1.3/ext/libxml/ruby_xml_attributes.o
./vendor/gems/mongrel-1.1.5/ext/http11/http11.o
./vendor/gems/mongrel-1.1.5/ext/http11/http11_parser.o
oracle@zareason:/pt/w/iw/rs$ 
oracle@zareason:/pt/w/iw/rs$ 
oracle@zareason:/pt/w/iw/rs$ 
oracle@zareason:/pt/w/iw/rs$ find . -name '*.o' -print|xargs rm -f
oracle@zareason:/pt/w/iw/rs$ 
oracle@zareason:/pt/w/iw/rs$ find . -name '*.o' -print
oracle@zareason:/pt/w/iw/rs$ 
oracle@zareason:/pt/w/iw/rs$ 
oracle@zareason:/pt/w/iw/rs$ rake -T gems
(in /pt/w/iw/rs)
rake gems                      # List the gems that this rails application ...
rake gems:build                # Build any native extensions for unpacked gems
rake gems:build:force          # Force the build of all gems
rake gems:install              # Installs all required gems.
rake gems:refresh_specs        # Regenerate gem specifications in correct f...
rake gems:unpack               # Unpacks all required gems into vendor/gems.
rake gems:unpack:dependencies  # Unpacks all required gems and their depend...
rake rails:freeze:gems         # Lock this application to the current gems ...
oracle@zareason:/pt/w/iw/rs$ 
oracle@zareason:/pt/w/iw/rs$ 
oracle@zareason:/pt/w/iw/rs$ rake gems:build:force
(in /pt/w/iw/rs)
Built gem: '/u2/pt/w/iw/rs/vendor/gems/httpclient-2.1.2'
Built gem: '/u2/pt/w/iw/rs/vendor/gems/soap4r-1.5.8'
Built gem: '/u2/pt/w/iw/rs/vendor/gems/sqlite3-ruby-1.2.4'
Built gem: '/u2/pt/w/iw/rs/vendor/gems/uuidtools-1.0.7'
Built gem: '/u2/pt/w/iw/rs/vendor/gems/haml-2.0.9'
Built gem: '/u2/pt/w/iw/rs/vendor/gems/rack-1.0.0'
Built gem: '/u2/pt/w/iw/rs/vendor/gems/libxml-ruby-1.1.3'
Built gem: '/u2/pt/w/iw/rs/vendor/gems/mongrel-1.1.5'
oracle@zareason:/pt/w/iw/rs$ 
oracle@zareason:/pt/w/iw/rs$ 
oracle@zareason:/pt/w/iw/rs$ 

Also I should point out that these gems depend on C libraries on your computer. On my computer which runs Ubuntu Linux I needed to install some C libraries.

Installation of C libraries on a Linux computer is a large topic. Google is very helpful for tackling this task.

To scratch the surface of this topic, though, I display command line examples I used to install some C libraries on my Ubuntu Linux computer:

sudo apt-get install libxml2 libxml2-dev
sudo apt-get install libsqlite3-dev


If you cannot install the gems into either your Ruby installation or the iWant CRM .info software, send me e-mail: bikle@bikle.com

Start Rails

After you install the gems, you begin the task of operating the Rails site which serves the iWant CRM .info web app to Safari on your iPhone. This is an easy task; you run this shell command:

./mongrel_rails.sh

The above shell command depends on a script named "mongrel_rails". The shell command assumes that mongrel_rails is installed under vendor/gems. If, however, you moved or removed vendor/gems then you need to fix the shell command. The script, mongrel_rails, should be in the same directory as all the other gem-executables. To find that directory type the command: "which ruby"

Then use the "ls" command to verify that mongrel_rails is in the same directory as ruby. Then edit the mongrel_rails.sh script so it references the correct location of mongrel_rails.

Once I got the mongrel_rails.sh script working on my Mac, I ran it; here is a screen dump:

Tue Sep 01 18:11 /pt/w/iw/rs maco$ 
Tue Sep 01 18:11 /pt/w/iw/rs maco$ 
Tue Sep 01 18:11 /pt/w/iw/rs maco$ ./mongrel_rails.sh 
** Starting Mongrel listening at 0.0.0.0:3000
** Loading additional MIME types from config/mime.yaml
** Starting Rails with development environment...
** Rails loaded.
** Loading any Rails specific GemPlugins
** Signals ready.  TERM => stop.  USR2 => restart.  INT => stop (no restart).
** Rails signals registered.  HUP => reload (without restart).  It might not work well.
** Mongrel 1.1.5 available at 0.0.0.0:3000
** Use CTRL-C to stop.

Start iPhone Web App

You have two ways to start the iWant CRM .info web app:

• Browse http:// iWant CRM .info with your iPhone
• Browse your local copy of iWant CRM .info with your iPhone

Here is a discussion about running it "locally".
The IP address of my desktop computer is this:
192.168.1.53

So, I typed this URL into Safari on my iPhone simulator:

http://192.168.1.53:3000/

My simulator showed me something like this:

Conclusion

A traditional iPhone app is written in the Objective-C language. Objective-C is optimal for writing native apps like games or musical instrument simulators. Objective-C exposes the full capability of the iPhone hardware to you the developer.

But Objective-C is difficult to learn and write.

In 2008 (and 2009 perhaps), startup-companies came to life based on the idea that iPhone developers wanted an easier method of writing iPhone apps. The prominent example of this is: http://PhoneGap.com

Developers wanted methods for writing apps which did simpler things like display stock quotes or tweet.

These startups offered frameworks which allowed the developer to write iPhone apps using higher level languages like HTML, JavaScript, and Ruby.

These frameworks made iPhone app development similar to web development.

Also these frameworks offered cross-platform compatibility. An app written with the PhoneGap framework could run on these types of smartphones:

• iPhone
• Android
• BlackBerry

As of September 2009, Safari in an iPhone supports HTML5 features well enough for me to write "enterprise" mobile applications. Mobile application development frameworks now have serious competition from HTML5.

HTML5 is supported in other types of smartphones. If you write an iPhone web app which does not use hardware like camera or GPS, then porting that web app to another type of smartphone should be easier than writing the app from scratch in Android or BlackBerry JME.

In late August 2009, RIM acquired a company called "Torch Mobile". It probably means that HTML5 support is coming to the RIM BlackBerry smartphone.
http://www.google.com/search?q=torch+mobile

Now, you the developer can write iPhone web apps using higher level languages: HTML5, JavaScript, SQL, Ruby on Rails, PHP, Python, and Java.

And one important advantage you will have over the developer using the frameworks (or Objective-C) is that any iPhone web app that you write, does not need to be approved by the Apple App Store.

---

---

---