Note: This quick tutorial is for people that are using Macs and are familiar with Fireworks and its page linking capabilities.
So what exactly is this post about then?
As implied by the title, this post is going to explain how we can quickly load our prototypes, which are stored locally on our computers, onto our iPhones.
Before diving into details, here’s a quick overview of what’s ahead:
Install and Launch MAMP
Download TAP (Touch Application Prototypes)
Head over to UNITiD’s site and download the latest version of TAP. Once you’ve successfully downloaded the file, extract it (labeled tapv0.46 by default, but feel free to rename) and place it into your htdocs folder, which can be found in your MAMP directory.
Link and Export Your Fireworks File as .lbi
Link your pages together in Fireworks with the hotspot tool along with their corresponding iOS transitions. If you’re unclear with this part, refer to UNITiD’s site as they have provided an in-depth tutorial on how to do this.
Once your file is ready, export your Fireworks file as a .lbi file into the library folder, which can be found in your extracted TAP folder, with the following export settings:
Compile the Prototype
Before accessing your prototype, you need to compile the .lbi files that you’ve loaded into your htdocs folder. Also, make sure MAMP is running. Open a new web browser window and navigate to http://localhost:8888/tapv0.46/build/. This page basically lets you configure several settings for the prototype, but for now, let’s click on BUILD in the upper right corner. Once you’ve successfully compiled your prototype, it should look something like this.
Create an Ad Hoc Connection
So now that you have a web server running on your computer, we need to access your prototype via your iPhone. Since there’s currently no connection between the two devices, we need to set up an ad hoc network. Click on the network status symbol in the upper right and click on Create Network. You’ll have the option to edit your computer name and select a channel. Let’s ignore these for now and click on OK.
Now grab your iPhone and go to Settings > Wi-Fi and select the network with your computer name. If all things go well, you will be connected to your computer via your iPhone.
Accessing Your Prototype on Your iPhone
In order to access the prototype on your computer via your iPhone, first find out the IP address of your computer. You can do this by going to Network Preferences (make sure AirPort is selected, not Ethernet) > Advanced > TCP/IP. The IP address for your computer can be found next to IPv4 Address.
With your IP address handy, head back over to your iPhone and enter in the following URL (the folder name may vary depending on whether or not you renamed tapv0.46 to something else) http://ipAddressForYourComputer:8888/tapv0.46. You’ll be prompted to add the prototype to your home screen.
And voila, you’re done!
Wrapping It Up
One of the great things about having the prototype on your local machine is that it’s a lot quicker to update files, which means more iterations over a given amount of time. Also, it doesn’t require you to gobble up server space elsewhere.
If you would like to share your prototype with others, upload your folder, e.g. tapv0.46, onto the web and send them the link, e.g. http://yourDomain.com/tapv0.46 (or whatever you’ve named your folder). Similar to the step above, they will be prompted to add the prototype to their home screen.
As a parting gift, I’ve created a quick one pager below summarizing the key items above. Happy prototyping!