The Easiest Way to Build your First iPhone App
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:
- Mac OS X
- XCode (included with Mac OS X, but installed separately)
- iPhone SDK (registration required)
- PhoneGap 0.80
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:
<head> <script src="jqtouch/jquery.1.3.2.min.js" type="application/javascript" charset="utf-8"></script> <script src="jqtouch/jqtouch.min.js" type="application/x-javascript" charset="utf-8"></script> <style type="text/css" media="screen">@import "jqtouch/jqtouch.min.css";</style> <style type="text/css" media="screen">@import "jqtouch/themes/apple/theme.min.css";</style> <style type="text/css" media="screen">@import "master.css";</style> <script type="text/javascript"> $.jQTouch(); </script> </head>
Then we build out the skeleton of our app:
<body id="stage" class="theme">
<div id="home" class="current">
</div>
<div id="about">
</div>
</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:
<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:
<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:
<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:
<div class="toolbar">
<h1>Home</h1>
<a class="button slideup" href="#about">About</a>
</div>
<h2>Live Stream</h2>
<div id="timeline">
<script type="text/javascript" src="http://YOUR_TUMBLR_USERNAME.tumblr.com/js">
</script>
</div>
Lastly, a few CSS classes that will style the output of the Tumblr feed to match our “Apple” theme:
ol {
color: black;
background: #fff;
border: 1px solid #B4B4B4;
font: bold 17px Helvetica;
padding: 0;
margin: 15px 10px 17px 10px;
-webkit-border-radius: 8px;
}
ol > li {
color: #666;
border-top: 1px solid #B4B4B4;
list-style-type: none;
padding: 10px 25px 10px 25px;
}
That’s it! After adding some content to our About page, we replace the files in our Phonegap project’s www folder
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.
Write a Plus Tutorial
Did you know that you can earn up to $600 for writing a PLUS tutorial and/or screencast for us? We’re looking for in depth and well-written tutorials on HTML, CSS, PHP, and JavaScript. If you’re of the ability, please contact Jeffrey at nettuts@tutsplus.com.
Please note that actual compensation will be dependent upon the quality of the final tutorial and screencast.
- Follow us on Twitter, or subscribe to the Nettuts+ RSS Feed for the best web development tutorials on the web.
Enjoyed this Post?
Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!
By Bill Peña
Getting Good with JavaScript
Learn how to liven up your webpages, from start to finish. Veteran Nettuts+ author Andrew Burgess helps you Get Good with JavaScript.
Join our newsletter!
UberMenu - WordPress Mega Me ... only $14.00 
RoyalSlider – Touch-Enable ... only $12.00 
Kult House - More
Web Basix
Just getting started? Start with our basix tutorials on the fundamentals. View All Basix Tutorials
Create a Tutorial, Get Paid!
Have something to teach the world? Want to earn money doing it? Tutorials, screencasts, and articles published here on Nettuts+ are largely contributed by readers just like you! We'll pay you great money for good content. Find Out More
I have been waiting so long for Nettuts to do some iPhone stuff. I read a book on making iphone apps last summer, it was fun and somewhat simple, but the thing is, I forgot just about all that I learned. This is a good refresher.
already a plus screencast is about iPhone here…
Really… I need to pay more attention to my plus feed…
i agree. i would love to see more here too. but, i bought a game development book last week, so, starting with that sometime soon.
Indeed Valuable.
Anyone know of software for windows… or should i fork out an buy a mac?
Without *illegally* running OS-X virtually on a PC, there doesn’t seem to be any other way than to buy a Mac.
You’ll want to check out MonoTouch.
http://monotouch.net/
Scratch that, I didn’t realize MonoTouch required a Mac.
That’s not for Windows…..
Ash, you should try http://www.aptana.org/studio
I doubt that you can get very far with this program (I Haven’t started developing for the iPhone OS as of yet, I don’t have a Mac either) but the sample iPhone pages are pretty nice to look at. Hope this helps.
No. You cannot use the SDK on Windows. XCode is Mac-only, and I really can’t see Apple changing that anytime soon.
This is a valuable tut.
I will give it a try INSHALLAH
What about http://www.appcelerator.com/ ? It is also open source project and I think it has more features then Phonegap, what do you think about it? I would appreciate tutorials for that “framework” as well.
yeah, that’s what i’ve been using, i’ve just been waiting for a time when i have good bandwidth to download the simulator
From what I can tell the main difference is that appcelerator will actually break down all the JS/HTML/CSS into the natural iPhone style binary. From what people say, this makes it more difficult for Apple to see that you are not using their native SDK so that they can reject the app.
This was great. I too want an appcelerator tut.
Agreed an appcelerator tut would be great.
hello
Ok now i can build iphone app, but Can I sell it after that
thanks
And please, also consider an android tutorial!!!
@اسعار الذهب اليوم: You can sell it. Some html/js/css driven apps are already in the store. Probably apple will reject it…
I don’t think it’s worth to code all that in html/css/js.
You can’t even use all frameworks. Just get some time to learn cocoa. :)
I found it useful to change the color of the statusbar based on the design, the easiest way to do so is to open up the info.plist file and add key UIStatusBarStyle and set its value to one of
UIStatusBarBlack
UIStatusBarBlackTranslucent
UIStatusBarTranslucent
to change it to the default
UIStatusBarDefault
I wouldn’t call this an iPhone tutorial. Its basic markup and JS. The only thing iPhone related is that its ran within an iPhone.
agreed
agreed.
If your gonna bring up the iPhone just do something on XCode.
Excellent stuff! I’ve been having a look at making iPhone/iPod apps today, and had in fact just downloaded the SDK when this popped up in mail! It’s currently 1:15 AM where I am now, so I’ll check this out tomorrow, but it looks fantastic. Will phonegap work with the iPad? If not, do you know of any plans to add such functionality?
Keep up the splendid (yes, I’m English) work!
I used jqtouch and phonegap to write an app that searches the PubMed database with 16 million medical articles.
Apple accepted it.
You can learn more here:
http://mobileabstracts.com
http://itunes.apple.com/us/app/mobile-abstracts/id348575624?mt=8&uo=6
I see that you’re not a web designer :)
I am open to constructive feedback.
Marc that’s great! Congratulations
Nice tutorial. I didn’t know about PhoneGap. Appcelerator looks awesome too.
It will suffice!
Wow !
That’s great !
Thanks !
Bill! Woo!
Exactly what I was looking for. Thank you for posting this! Good stuff!!!
Illastr8
This was an excellent example! An Andriod tutorial would be wounderful as well.
Niiiice, All these new Programs and Compilers are keeping us from actually learning Obj C. I think we are all going to have to learn it eventually though. Nice Article!!
Silly me, I though I’d cliked on Net tuts, not Mac App Storm….
Anyway you could upload your completed code?
Also… how would one compile the app into an .IPA file for testing on an actual phone?
Completed code would be appreciated. The tut didn’t quite spell out exactly what the markup should look like. My app is just opening up Safari on the iPhone Simulator (obviously not working). I’m not sure if it is my HTML markup or what.
Good topics for you. Phone Gap is important Relay for fast working.
hola
very nice tuto… but i might be silly, but do you compil the code, to transform “simple” html code into native app ?
Is there any application that uses this method and that I can download from the store
Mobile Abstracts – a PubMed Search Engine.
http://itunes.apple.com/us/app/mobile-abstracts/id348575624?mt=8&uo=6
Here are some free promo codes for Mobile Abstracts so that people can see it without paying the 99 cents.
YTRKKNWFPK4E
F4F4EWTWAKTY
EFRHJRM3RWAW
WK69RX6WE6Y9
44RL7TY3PH94
http://itunes.apple.com/us/app/mobile-abstracts/id348575624?mt=8&uo=6
Would you like some fun games and humour, check out this new iphone app called iSICKO
http://bit.ly/986BGN
Apple themselves also supply some tutorials and good documentation found when you’re logged in to the iPhone dev center; another possibility is development using HTML, CSS & javascript – tjek out PhoneGap.
Is this tutorials not possible to try in windows?
This is awesome, but would you be able to access core iphone functions? Or is it just a web app running as an iphone app?
Love this and would love to see a lot more iPhone tuts, possible a channel for iPhone.tutsplus.com
You can do most of the example on a Win/Linux box using javascript/jQuery/jQTouch and displaying on safari but if you want to deploy to iPhone or use the accelerometer/camera/contacts/gps/etc, you will need to do use phoneGap on the Mac. Johnathon Stark has a book out on this (oReilly).
Safe to do this on a jailbroken iPhone?
Is apple now blocking these pre-made template/framework things?
Yeah Floris, Apple has decided to block everything which is not *originally* written in Objective-C, C or C++
The problem is you see, any gaping/bridging etc. technology drastically decreases the performance and the capabilities of your app, if you are really serious about developing a stunning app you need to go the Objective C way
Besides the fact this practice is not banned from the App store, the tutorial is quite well written, enjoyed
Check out http://www.BiznessApps.com – its an easy DIY iPhone app company for small businesses. They offer iPhone apps for only $39 a month.
Thank you for this tut! I came here while searching the web for good iPad programming tuts for starters.
If you’ll forgive the plug there’s also my new book, HTML5 for iOS and Android, which enables you to take web apps created in HTML, JavaScript & CSS, and turn them into standalone apps that you can upload to the app stores (for free or to sell). See http://html5formobile.com – the wrappers to do this for the iOS and Android SDKs are freely available on the website, and you don’t need any knowledge of either programming language if you follow the instructions in the book.
Check this out – http://iosappdevelopment.blogspot.com/2011/07/best-ways-to-find-out-great-iphone-app.html, to know best ways to find out best-matching iPhone app developer for you.
I have to agree with Miles comment, this is indeed basic markup and JS.Still udeful though none the less..