Sunday, July 8, 2012

Android, Intellij IDEA and PhoneGap: Getting Started


An update to this post covering Intellij IDEA 12 CE is located here.

A few months ago I wrote a review of JetBrain’s WebStorm IDE, which is my new favorite IDE. Yet even after discovering WebStorm, I continued to slog through Eclipse for Android apps. Well WebStorm has a Java clone, IntelliJ IDEA. And it is way better than Eclipse. It isn’t that Eclipse is a bad IDE. It is just that IntelliJ IDEA is so much better than it. Even running on my quad-core Macbook with a SSD drive and 8 GB of RAM, Eclipse felt sluggish, but IntelliJ IDEA feels like I have the afterburners on full.

The main problem with using IntelliJ IDEA is that most Android stuff assumes that you are using Eclipse and it takes a bit of poking around to figure out how to do the something in IntelliJ IDEA. Case in point, PhoneGap. All of the tutorials I’ve read so far, and ones that I have written, are for Eclipse. Well here is how to get the PhoneGap, hello world app running in IntelliJ IDEA. This tutorial was written for the Mac version, but from what I can tell from JetBrains website, the PC and Linux version are nearly identical. 


Big thanks to the PhoneGap team, this tutorial borrows heavily from their Getting Started with Android page. For more information about IntelliJ IDEA please visit JetBrains website.



  • From the IntelliJ IDEA start page click Create New Project

  • On the New Project dialog box
    • Select Create project from scratch
    • Then click Next

  • In the Project name: type HelloCordova
  • Select type: Select Android Module
  • Click Next

  • Select Create source directory, make sure the relative path is src
  • Click Next

  • Make sure that Android SDK: shows Android SDK
    • If not use the ellipsis button to set the location of your Android SDK
  • Make sure that Application is selected and that all of the settings are correct for your needs
  • Click Finish

  • IntelliJ IDEA will now create your application
  • Create a new subdirectory of the /assets directory: www
  • Copy cordova-1.9.0.js to the directory /assets/www
  • Copy cordova-1.9.0.jar to the directory /libs
  • Copy the entire xml directory to /res

  • Right-click cordova-1.9.0.jar and click Add as Library...Make sure that:
    • Name: cordova-1.9.0
    • Level: Project Library
    • Add to module: HelloCordova
    • Click OK

  • Edit the MyActivity.java file
    • Add the following import: import org.apache.cordova.*;
    • Replace the class’s extend from Activity to DroidGap
    • Replace setContentView()
      with
      super.loadUrl("file:///android_asset/www/index.html");


  • Open the AndroidManifest.xml
  • Paste the following between the <uses-sdk.../> and <application.../> tags

<supports-screens
   android:largeScreens="true"
   android:normalScreens="true"
   android:smallScreens="true"
   android:resizeable="true"
   android:anyDensity="true" />
<uses-permission android:name="android.permission.VIBRATE" />
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_LOCATION_EXTRA_COMMANDS" />
<uses-permission android:name="android.permission.READ_PHONE_STATE" />
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.RECEIVE_SMS" />
<uses-permission android:name="android.permission.RECORD_AUDIO" />
<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
<uses-permission android:name="android.permission.READ_CONTACTS" />
<uses-permission android:name="android.permission.WRITE_CONTACTS" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.GET_ACCOUNTS" />
<uses-permission android:name="android.permission.BROADCAST_STICKY" />


  • Paste the following inside of the <activity.../> tag

android:configChanges="orientation|keyboardHidden"

  • Your AndroidManifest.xml file should look like:


  • RIght-click the www directory
  • Hover over New, the click HTML File
  • In Name: enter index
  • In Kind: select HTML5 file
  • Click OK



  • Paste following code into the file:

<!DOCTYPE HTML>
<html>
<head>
<title>Cordova</title>
<script type="text/javascript" charset="utf-8" src="cordova-1.9.0.js"></script>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>

  • Deploy your app to the emulator by clicking the Run selected configuration button, the green triangle next to the drop down which should say HelloCordova



And that’s it. In a short while your app should start running on the emulator. Hey if you like 



20 comments:

  1. This worked perfect, thanks!!

    ReplyDelete
  2. Thanks. Be sure to check out: http://therockncoder.blogspot.com/2012/07/jquery-mobile-phonegap-and-camera.html - there is an Android Intellij IDEA camera project there too.

    ReplyDelete
  3. This comment has been removed by the author.

    ReplyDelete
  4. http://venomvendor.blogspot.in/2012/04/easy-way-to-use-phonegap-in-eclipse.html

    This is much Better & simpler, all these tricks works in One Click, finally you can replace the Cordova-*.*.* as you wish & Change the same in HTML file more Details Here..


    http://venomvendor.blogspot.in/2012/04/phone-gap-161-in-eclipse-plugin-by-mds.html

    ReplyDelete
  5. Does this work on IntelliJ Community edition as well?

    ReplyDelete
    Replies
    1. Yes it does. In fact that is the version that I use.

      Delete
  6. I'm a flex developer crossing over to JS land, and this is fandabulous! You helped a lot, thanks!

    ReplyDelete
  7. This comment has been removed by the author.

    ReplyDelete
    Replies
    1. I would need to see how the project structure of your application is. It should have the following:
      (root)
      -- assets
      -- www
      -- index.html

      Meaning that at the project root there is a directory: assets, which has a subdirectory: www, which has a file: index.html

      Delete
  8. You are the man!! I couldn't stand another minute of Eclipse. Thanks for this. Keep up the awesome tutorials!
    -Mike

    ReplyDelete
  9. It's worth mentioning that you need IntelliJ 10 or greater:

    "IDEA 9 was released long time ago and doesn’t support the new format of Android SDK distribution which as changed recently, please download and use IDEA 10.5.2" - IDEA support

    ReplyDelete
  10. These articles have got complete sense without confusing the readers.
    google android news

    ReplyDelete
  11. Legend! I'm new to the app world and this has given me a good start in the right direction. Thanks so much!

    ReplyDelete
    Replies
    1. Wow, thanks for reading the post and taking the time to comment. Be sure to follow me on either Twitter or Google+ more stuff coming soon. Including my review of Telerik's Icenium.

      Delete
  12. Well done. This worked perfectly in the latest version of Idea. Great job!

    ReplyDelete
  13. I just wanted to drop a comment and let you know this no longer works for Cordova 2.5.0. Luckily, the process is much simpler now.

    ReplyDelete
  14. thank you for sharing. This is very helpful for us beginners
    lenovo p770

    ReplyDelete
  15. Hi Here is github with skeleton if someone need.. https://github.com/VladimirCacicArapovic/sencha-phonegap-intellij , and I link this tutorial because its is the best for intellij thanks...

    ReplyDelete
  16. Good site! Helpful blog post ,In the considering information and facts are and thus advantageous for everyone. thank you!
    iocean X7 Elite

    ReplyDelete
  17. thanks for the good tutorial but I recently installed intellijidea community edition 12.1.4 and I do nor see a javascript debugger neither javascript syntax highliter. Any solution ?

    ReplyDelete