Wednesday, November 9, 2011

Get Started Guide for iOS using Phonegap

  • 1. Requirements

    • Intel-based computer with Mac OS X Snow Leopard (10.6)
    Necessary for Installing on Device:
    • An Apple iOS device (iPhone, iPad, iPod Touch)
    • iOS developer certification
  • 2. Install SDK + PhoneGap

    Download and install Xcode from Apple Developer Portal (Membership required)

    Download the latest copy of PhoneGap and extract its contents. Navigate to the iOS directory and run the installer until completion.
  • 3. Setup New Project

    • Launch Xcode, then under the File menu select New and then New Project...
    • Select PhoneGap-based Application from the list of templates
    • Select the Next button, Fill in the "Product Name" & "Company Identifier" for your app
    • Choose a directory to store your app
    • You should see your project in Xcode 4 now. Press the Run button in the top left corner. Your build should succeed and launch in the simulator
    • You should see a error in your simulator informing you index.html was not found
    • To fix this, we need to copy the www directory into the project. Right click on the project in the left navigation window and click show in finder
    • In Finder, you should see the www directory beside your project
    • Next step is IMPORTANT! Drag the www folder into Xcode 4. You can't just drag the www folder into your app's folder. It needs to be dragged into Xcode 4!! In my case I would drag it and drop it on HiWorld shown below.
    • After you drag, you should see a prompt with a few options. Make sure to select Create folder references for any added folders. Click Finish
  • 4. Hello World

    Open the folder named www and type <h1>Hello World</h1> after the <body> tag in index.html. You can also add any associated Javascript and CSS files there as well.
  • 5A. Deploy to Simulator

    • Make sure to change the Active SDK in the top left menu to Simulator+version#.
    • Hit Run in your project window header.
  • 5B. Deploy to Device

    • Open [AppName]-Info.plist and change BundleIdentifier to the identifier provided by Apple. If you have a developer license, you can access and run the Assistant at here and register your App.
    • Make sure to change the Active SDK in the top left menu to Device+version#.
    • Hit Run in your project window header.
  • No comments:

    Post a Comment