Gene Lu's Portfolio

Prototyping Your Next iOS App Directly on Your Mac

Note: This quick tutorial is for people that are using Macs and are familiar with Fireworks and its page linking capabilities.

In recent years, there have been many ways to quickly prototype an iOS app. The best prototyping tool that I’ve seen so far that doesn’t require any programming has been a combination of Adobe Fireworks and a PHP/Javascript library called TAP. Created by the folks at UNITiD, TAP allows you to mimic iOS transitions by simply filling out the “alt” field of hotspots (within your Fireworks file) with the type of transition that you would like to see after tapping on that hotspot. Fortunately, UNITiD has already put together a thorough tutorial on how to use TAP.

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 onto your computer.
  • Download the TAP folder and extract it into your MAMP folder.
  • Export your Firework files as .lbi into the TAP folder.
  • Compile the prototype.
  • Create an ad hoc connection between your computer and iPhone.
  • Access the prototype on your iPhone via an ad hoc connection.

Install and Launch MAMP
If you’re unfamiliar with MAMP, it is an application that runs a web server on your computer. And? And with a server on your computer, you can run the PHP and javascript that comes with the TAP files that you’re about to download, but first, 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:

Export settings when exporting as .lbi

Export settings when exporting as .lbi

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.

Successful builds look something like this (without errors in red)

Successful builds look something like this. If you have red errors, something’s wrong.

Creating a network

Creating a network

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.

Adding your prototype to your home screen

Adding your 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!

2 Comments

  1. Matthijs Collard
    March 20, 2012

    Great idea! This is indeed much faster than uploading the updated prototype to a webserver.

    I’ll add a link on the TAP page to this tutorial.

    • genelu
      March 20, 2012

      Oh, I’m glad that this came in handy. Thanks again Matthijs and the rest of UNITiD for dedicating your off time in creating something that’s been a big help in the prototyping world.

Information

  • 19 Mar 2012

Filed Under

Tags

Recent Articles

Lead UX Designer on Nike+ Running at R/GA.