log inhelp

View
 

Getting Started with PhoneGap iOS using Xcode 4

Page history last edited by Amir 2 months ago

    1. Requirements
    2. Step 1
    3. Step 2

This tutorial provides instruction on setting up the latest version of PhoneGap for your application on an iOS device using Xcode 4. 

  • For information regarding setting up PhoneGap 0.9.5 with Xcode 3, click here.
  • For information on setting up an iOS device for development, see the iOS Dev Center.
  • For information on setting up Cordova 1.5 and above with Xcode 4, click here.

 

Requirements

 

  • Intel-based computer with Mac OS X Snow Leopard (10.6) with Xcode and the iPhone SDK installed.  Make sure to install the default with the UNIX tools included.
  • an Apple iOS device (iPhone, iPad, iPod Touch)
  • iOS developer certification. (only necessary to install apps on an iOS device)

 

Step 1

 

  • Download the latest copy of PhoneGap and extract its contents. We are only interested in the iOS directory
  • Run the installer until completion.  (Make sure Xcode is closed)
  • Launch Xcode 4 then under the File menu, select "New" and then "New Project..."
  • Select PhoneGap-based Application from list of templates

 

          

 

 

  • Fill in the "Product Name" & "Company Identifier" for your app

           

  • Choose a directory to store your app
  • Now press the run button and your build should succeed and launch in the emulator.

           

  • You should see the following error in your emulator 

           

 

  • To fix this, we need to copy the www directory into the project (this folder was created when you compiled the project for the first time). 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 the following prompt. Make sure to select "Create folder references for any added folders". Click Finish.

     

 

 

  • Modify the contents of the "www" directory to add your HTML, CSS and Javascript.

 

     

 

  • Open [AppName]-Info.plist located in the "Supporting Files" directory. Change "BundleIdentifier" to the identifier provided by Apple. If you have a developer license, you can access and run the Assistant at http://developer.apple.com/iphone/manage/overview/index.action and register your App. If you do not have a developer license and simply wish to test PhoneGap on your desktop simulator, you can skip this step.

     

  • IMPORTANT: Make sure to change the Active SDK in the top left menu to Device+version#.

 

  • Click the Run button located at the top right

 

           

 

Step 2

 

  • Open [AppName]-Info.plist 

    located in the "Supporting Files" directory 

    and change "BundleDisplayName" to the name of your mobile application.

  • Replace the three icon.png files with your mobile application's icon. These are located in the "icons" directory under the "Resources" directory

  •  

    Change Default.png located 

    in the "splash" directory under the "Resources" directory

 

     And your done! 

     

                

 

 

PDF version