Friday, May 31, 2013

Build PhoneGap Apps with Intellij IDEA


At this point I am assuming that you have Intellij IDEA all set up and can build an Android app and deploy it either to a device or the emulator. If you don't have that working - STOP. Don't go any further until all issues are resolved. Installing PhoneGap on top of a broken Android development environment won't solve the problem.

This part of the setup is pretty easy compared to the first part, setting up Android. All we need to do is download ant and PhoneGap, then add paths to all of our build tools.

  • Adding ant
    • Ant is a tool for building Java applications. It is a free download. Most non-PC systems come with ant already installed.
    • Download ant
    • Move the folder, apache-ant-1.9.1, where desired. I moved mine to the same directory as my Android SDK.
  • Adding PhoneGap
    • Download the latest version of PhoneGap, at time of writing it is 2.7.0.
    • Extract the zip file.
    • Move the folder, phonegap-2.7.0, where desired. I moved mine to the same directory as my Android SDK.
  • Setting up your path:
    • From the Desktop, right-click My Computer and click Properties
    • Click Advanced System Settings link in the left column
    • In the System Properties window click the Environment Variables button
    • Select the PATH variable from the System variables section
    • Select the Edit button
      • I find it easier to copy the current path from the textbox and paste into a text editor like Intellij IDEA or Notepad++
    • Add Paths to the following:
      • ~\android-sdk\platform-tools
      • ~\android-sdk\tools
      • ~\phonegap-2.7.0\lib\android\bin
      • %JAVA_HOME%\bin
      • %ANT_HOME%\bin
    • Note: Each entry in the path is separated by a semicolon ";"
    • Here is what my path looks like:
    • C:\Users\tmiles\Android\android-sdk\platform-tools;C:\Users\tmiles\Android\android-sdk\tools;C:\Users\tmiles\phonegap-2.7.0\phonegap-2.7.0\lib\android\bin;%JAVA_HOME%\bin;%ANT_HOME%\bin
    • Save the new path.
  • Create JAVA_HOME (Only if you haven't already)
    • In the System variables section click New...
    • For Variable name:, enter JAVA_HOME
    • For Variable value:, enter the path to the JDK. For me it is, C:\Program Files\Java\jdk1.6.0_45
    • Click OK
  • Create ANT_HOME
    • In the System variables section click New...
    • For Variable name:, enter ANT_HOME
    • For Variable value:, enter the path to ant. For me it is: C:\Users\tmiles\apache-ant-1.9.1
    • Click OK
    • Click OK to exit the Environment Variable window
    • Click OK to exit the System Properties window
  • Create a PhoneGap project
    • From the command line
    • Navigate to the parent folder where you wish to create your PhoneGap project
    • type:
      create <folder name> <package name> <project name>
    • example:
    • create testPG com.example.testpg TestPG
      • testPG is the name of the folder
      • com.example.testpg is the name of the package in reverse domain style
        • This must be all lower case with
      • TestPG is the name of the Project
  • Import the project into Intellij IDEA
    • Start Intellij IDEA
    • From the start box, select Import Project
    • Navigate to your project
    • Choose to "Create project from existing sources"
    • Click Next
    • Keep the same project name.
    • Click Next
    • Keep the same source files
    • Click Next
    • Keep the same libraries
    • Click Next
    • If necessary select the Java version and select the latest Android platform
    • Click Next
    • Keep the Android Manifest file
    • Click Finish
    • After a few minutes, your project will appear
  • Build your project
    • In the Run menu, choose Edit Configurations
    • Edit the current configuration, for me it is testPG
    • If you are going to deploy to a device, select USB Device under Target Device. Otherwise leave it set for emulator.
    • Set the SDCARD size to 512 MB
    • Click OK
    • Take a break, it will take a while for the emulator to spin up.
    • The right pointing green triangle to deploy your app
  • Congratulations, now you are ready to do PhoneGap development with Intellij IDEA.