If you create websites or web apps for the iPhone OS (iPhone, iPad, iPod Touch), it's important to setup a solid local development environment for testing. Using a desktop web browser (even Safari) or one of the many available "emulators" for testing is worthless because the real thing looks different.
The only way to test properly is with Apple's iPhone Simulator. Since you can't just type a local file path into the simulator, I'll show you step-by-step how to get it working (on a Mac).
What You Need
- Latest version of the iPhone SDK
- MAMP for Mac
- A text editor of your choice ... I love Textmate. You won't have to use Dashcode.
1- Install the SDK (with Xcode) and MAMP
The SDK is about 2.8GB so you should give it a while to download. Installation took about ten minutes for me.
MAMP is a great little application that gets you up and running with the local server environment on your Mac in about five minutes. All you need to do is install it like any other application.
2- Setup the location of your website or web app
Create a folder for your project. It can be anywhere on your computer. Place an index.html file in it with "hello world" or whatever you need to test that it's working when we open the simulator.
For this tutorial I'm going to call my folder "iphone-site" and put it in /Users/Nick/Sites/ on my computer.
3- Create an alias in MAMP
Go to the location where you installed MAMP (probably Applications), then open this file: /MAMP/conf/apache/httpd.conf. Around line 655 you should see the following code:
Alias /MAMP "/Applications/MAMP/bin/mamp"
Options Indexes MultiViews
Allow from all
Add a line of space after this code, then create your alias with this code:
Alias /iphone-site/ "/Users/Nick/Sites/iphone-site/"
Options Indexes FollowSymLinks
Allow from all
Replace the file path above with the file path to your site in both places.
Save the file and close it. Please note that if you ever make edits to the httpd.conf file while your MAMP server is running, you will have to restart the server to see those changes take effect. Also, if you ever change the location of your site, of course this file will have to be updated with the new file path.
What this does is keep the URL clean and easy to remember. Setting up an alias is not technically required, but I highly recommend it. Instead of the URL being this:
The new, clean URL would look like this:
4- Test It
Launch MAMP and make sure that the server is running. The window should look like this:
Now it's time to open the iPhone simulator. Open a finder window and navigate to the drive you installed the developer kit on (eg. "Macintosh HD"). The simulator is in the /Developer/Platforms/iPhoneSimulator.platform/Developer/Applications/ folder. It's a good idea to add it to your dock so you can access it easily in the future.
Once the simulator is running, open Safari. Navigate to http://localhost:8888/iphone-site/. Of course you will want to substitute iphone-site in the URL for the name of your project. You should see "hello world" (in very tiny text), which means you are good to go!
Now you can develop iPhone websites and web apps without depending on an internet connection, which should speed up development time significantly. Whenever you start another iPhone project, simply add another alias to your httpd.conf file and get started!
Testing on the iPad
The iPhone OS SDK version 3.2 and up includes support for the iPad in the iPhone Simulator application. It's a little confusing, but think of the iPhone as more of an operating system rather than a device in this context. From the iPhone Simulator, click "Hardware" in the main menu, then "Device" and you can select between the iPhone and iPad.
What about debugging?
Mobile Safari has a debugging console, but I didn't find it too helpful for basic front-end development. There isn't a substitute for Firebug or Safari's developer tools, so I would suggest continuing to use those in a desktop browser if you get stuck. Using the same localhost URL will work in other browsers as well as the simulator.
Once you have your test environment going, it's important to familiarize yourself with the mobile Safari browser and how to make the most of it. Here is a set of articles to get you started:
- Apple: Getting Started with iPhone Web Apps- all of the resources available on this page are very helpful
- Apple: Preparing Your Web Content for iPad- a good basic introduction to formatting web content for the iPad
- jQTouch- in my opinion the best library for developing native-style web apps for the iPhone