Rectanglicle

The Personal Website of Ash M. White

How To: Develop Your iPhone Web Apps With Your Mac

by Ash White / 11.13.09

If you are building an iPhone web app, chances are you have gotten a bit tired of relying on your device for testing changes. It can definitely be tedious to upload your changes, pick up your device, and refresh Mobile Safari each time you make a change to your code. Here's a way to use your Mac to eliminate the device and the remote server from the development process.

Step 1 - Download the iPhone SDK

Download
Download

For this to work, you will need to download the iPhone SDK from the Apple website. This is a free download, but you will need to create an account and log in to gain access to the software downloads.

 

Step 2 - Make a Sandwich

Sandwich
Sandwich

The iPhone SDK is big. More than 2 gigs. Make a sandwich while you wait for it to download. Go on, you look hungry.

 

Step 3 - Install the SDK

Install
Install

This will also take a little while (see Step 2). If necessary, make another sandwich.

 

Step 4 - Load up the iPhone Simulator

iPhone Simulator
iPhone Simulator

After the install finishes, you can find a fully-functional iPhone simulator located in

/Developer/Platforms/iPhoneSimulator.platform/Developer/Applications/iPhone Simulator.app

Since this app is a bit hidden, I suggest creating a shortcut to it in your Dock or desktop, or by using Spotlight to launch it when needed.

 

 

Step 5 - Turn on Web Sharing

Sharing
Sharing

In order to access your web apps from your local machine without having to upload them to a remote server, you will need to enable Apple's Web Sharing in System Preferences -> Sharing. This turns on the built-in Apache web server that ship with every Mac.

 

Step 6 - Load up Your App

App Store Icon
App Store Icon

Now that you have a working iPhone simulator and a web server on your computer, you are free to access your apps from the simulator. First make sure that your iPhone is on the same WiFi network as your computer, then simply launch Mobile Safari and navigate to http://localhost/~your_mac_user_name. This address corresponds to the folder /Users/your_mac_user_name/Sites on your hard drive, so this is where your apps will need to live. There are ways to change that, but I'll leave that for another how-to.

Categories

Tags

blog comments powered by Disqus
info

All work is original and copyright 2014 by Ash White, with the exception of a handful of free third-party libraries, including the Scriptaculous JavaScript framework, Lightbox image overlay, Google Font Directory, Google Code Prettify, and Eric Meyer's CSS Reset.