Mobile websites have come a long way, but if you want to take full advantage of a smartphone’s hardware, or get listed in the iTunes App Store, you need to compile your code. In this tutorial, we’ll show you how to create a mobile web app with an iPhone look and feel using jQTouch, then turn it into a native iPhone app using Phonegap. No Objective-C necessary.

Tutorial Details

  • Program: Phonegap
  • Version: 0.80
  • Difficulty: Intermediate
  • Estimated Completion Time: 1 hour

 

Requirements

To complete this tutorial, you’ll need the following:

 

Introduction to PhoneGap

PhoneGap is an open-source framework that can turn any web app into a native app for iPhone, BlackBerry and Android. It pulls off
this trick by running your web code in a UIWebView, an embedded instance of Safari without the
toolbars and buttons of the standalone Safari app. PhoneGap then extends this basic functionality by mapping features of the
iPhone SDK to JavaScript objects you can call in your web code, so you can easily add features like GPS, camera, contacts, vibration,
SQLLite and accelerometer support. And when you’re ready to distribute your app, PhoneGap 0.80 is Apple-approved!

Included in the PhoneGap distribution is everything you need to build and run an iPhone app. The included XCode project is bundled
with a sample code showing how to use many of the native features, and all the supporting files necessary to compile the app and
run it in the iPhone Simulator or on your phone.

 

Building and Running an iPhone App

To test whether you’ve got your Mac ready to run your code, let’s try out the sample project included with PhoneGap.

First, open up the iPhone folder, and double-click on PhoneGap.xcodeproj:

This should open XCode with your project loaded. Although there’s a lot going on here, we as web developers only need
to concern ourselves with the www folder. This contains the web code that will become the interface and logic of
our app.

Now that we’ve got our project loaded, it’s time to take it for a spin. Bundled with the iPhone SDK is an iPhone Simulator that
hooks right in to XCode. All we have to do is click “Build and Run.”

 

Building Your Web App

For the sake of this tutorial, I’ve put together a simple, native-feeling app that displays my Tumblr feed with a slide-up “About”
screen. This app is based on the excellent jQTouch framework, a jQuery-based library of UI
elements, animations, and extensions that let you rapidly develop mobile web apps with native look and feel. Let’s take a quick look
at putting together a web app using jQTouch before we import this app into our Phonegap project.

First, we load jQuery, jQTouch, and some bundled theme files in the <head> tag; these will style our elements to look like
native iPhone UI widgets:

  1. <head>
  2. <script src=”jqtouch/jquery.1.3.2.min.js” type=”application/javascript” charset=”utf-8″></script>
  3. <script src=”jqtouch/jqtouch.min.js” type=”application/x-javascript” charset=”utf-8″></script>
  4. <style type=”text/css” media=”screen”>@import “jqtouch/jqtouch.min.css”;</style>
  5. <style type=”text/css” media=”screen”>@import “jqtouch/themes/apple/theme.min.css”;</style>
  6. <style type=”text/css” media=”screen”>@import “master.css”;</style>
  8. <script type=”text/javascript”>
  9. $.jQTouch();
  10. </script>
  11. </head>

Then we build out the skeleton of our app:

  1. <body id=”stage” class=”theme”>
  2. <div id=”home” class=”current”>
  4. </div>
  5. <div id=”about”>
  7. </div>
  8. </body>

jQTouch takes any direct descendent of the <body> tag and converts it into a full-screen “view”. This means every
<div> in the code above will take over the entire screen, and changing screens means swapping between <div>s by linking
to them by their id:

  1. <a href=”#about”>About</a>

 

JQTouch includes a variety of cool ways to transition between these screens, and they and can be enabled simply by adding CSS classes.
For example, to turn that link to the About page into a slide-up transition, we add the following:

  1. <a class=”slideup” href=”#about”>About</a>

Then, in the About page itself, we add a button to “close” the panel by sliding it back:

  1. <a href=”#” class=”grayButton goback”>Close</a>

On the default screen, we’ll add a toolbar with the aforementioned “About” button, and a spot to embed a Tumblr feed:

  1. <div class=”toolbar”>
  2. <h1>Home</h1>
  3. <a class=”button slideup” href=”#about”>About</a>
  4. </div>
  5. <h2>Live Stream</h2>
  6. <div id=”timeline”>
  7. <script type=”text/javascript” src=”http://YOUR_TUMBLR_USERNAME.tumblr.com/js”>
  8. </script>
  9. </div>

Lastly, a few CSS classes that will style the output of the Tumblr feed to match our “Apple” theme:

  1. ol {
  2. color: black;
  3. background: #fff;
  4. border: 1px solid #B4B4B4;
  5. font: bold 17px Helvetica;
  6. padding: 0;
  7. margin: 15px 10px 17px 10px;
  8. -webkit-border-radius: 8px;
  9. }
  11. ol > li {
  12. color: #666;
  13. border-top: 1px solid #B4B4B4;
  14. list-style-type: none;
  15. padding: 10px 25px 10px 25px;
  16. }

That’s it! After adding some content to our About page, we replace the files in our Phonegap project’s wwwfolder
with our new web app, and run it again:

Conclusion

Our web app is now compiled, and from here can be packaged up for distribution in the iTunes Store. It’s a simple start, but
in very little time we’ve got a native app that looks like Apple’s own, runs on any iPhone, and can be extended to a variety of uses.

I’ll be covering how to extend your app with support for cameras and geo-location in future tutorials. In the meantime, you can
read more about Phonegap at the Phonegap Wiki. Documentation is not fully fleshed out,
so you may find yourself digging through git repositories after the end of a long hunt.

To submit your app to the iTunes App Store, register for the iPhone Developer Program.
Once you’re registered, you’ll be given the tools to digitally sign and submit your app to the iTunes Store.

 

Leave a comment