There's a lot of buzz around PhoneGap, but I haven't really heard anyone talk about their experiences in the "early days" of this new venture, as they struggle through getting their first app up and running.
So, here we go, literally, day one. I decided to keep my blog post window open as I step through the process of hopefully getting a basic app up and running.
- Of course, you need a Mac, luckily I bought one last year, hoping to dive into Objective-C / Cocoa Touch development. That bombed, so here I am using PhoneGap!
I tried firing it up with my OS X Snow Leopard install, with Xcode 3.2. Oh, and using the latest release of PhoneGap – currently 1.7.
No go, after researching it a bit, I found that I really wanted to be on XCode 4.x, to properly use PhoneGap 1.7. All the Mac-lovers out there are already saying "Good luck with that, you need OS X Lion". They're not wrong.
- Download Lion from the app store, then install. My first install failed, saying that my disk was corrupt. This wasn't my day. I decided not to give up, did some more Googling. One lucky fellow suggested using the OS X Disk Utility, I do so, although I only 'Verified my Disk'. After that, my install went smooth as ever. Well, my laptop appeared to "go dark" for about 45 minutes – at which point, I almost shut it off and gave up, but soon found that it was silently installing the upgraded OS. Apple, how about a progress indicator, instead of a computer that looks broken!
- I then used this handy trick to install XCode. Basically, we're just dropping the following in the console:
sudo /Developer/Library/uninstall-devtools --mode=all
- Installed XCode 4, my previous PhoneGap install was already "integrated" into XCode, and available as a Cordova Application. So, I proceed to create a new Cordova-based Application. Not knowing any better, I left "Use Automatic Reference Counting" checked. Apparently, this breaks everything! Again, referencing the title of this post, I am not an expert, I'm simply running down what it took for me to get my first PhoneGap based iPhone app up and running.
- Quite a few tutorials told me I was good to go at this point, "Go ahead and click Run, and watch it go!", they said. Negative, this does not work.
First, you need to move the 'www' folder created by PhoneGap into your project. Okay, so where is the 'www' folder? I just used the Finder to grab it from my Project directory, the directory I choose when first creating this application. Then I dragged it over to the far left sidebar, to the title of my project.
- Another dialog box, with options unfamiliar to me. I went with the default option, "Create groups for any added folders". Don't do this – it doesn't work. I found that the other option – "Create folder references for any added folders" was a winner.
- Score! Clicked Run, and watched the demo unfold before my eyes.
- Break.
- Back at it. Okay, I brought in my entire mobile site, and simply added
<script type="text/javascript" charset="utf-8" src="cordova-1.7.0.js"></script>before any other <script> tags.
- Clicked Run, score again! Well, not quite. Everything on the home page worked great, but then realized that none of my links work. I am not using a framework such as jQuery mobile (although I am using jQuery).
- Issue: My external hosts are not configure properly. To do so, in the left panel of XCode, under Supporting Files, click Cordova.plist. Then, under External Hosts, simply add an asterisk (wild card). Is this a good idea, probably not, but it gets you up and running.