PhoneGap on Ubuntu 12.04 VirtualBox Guest with Windows 7 Host

My favorite customer hired me again to work with her, this time on a Javascript-based project. She wants to port her existing Javscript, HTML and CSS code base to both Android and IOS native (ish?) apps. We're getting started with PhoneGap to accomplish this single-codebase-two-platform project. I thought I would put together a quick post about the "gotchas" that I ran into while setting up my development environment. All of the guides I found don't really cater to a virtualized Ubuntu setup, so I figured that some of the problems I overcame might help someone else.

One important lesson I learned at my last 9-5 job was to take advantage of the tools and support an integrated development environment (IDE) can provide you with. A lot of the Android + PhoneGap documentation is present for Eclipse, so that's what I went with.

This is what my first virtual Android device looks like.

I'm using Eclipse with the Android Development Tools (ADT) pre-bundled, and linking in PhoneGap version 2.9.0 on my Ubuntu 12.04 Virtual Machine running inside VirtualBox.

The main things I learned so far are:

1. Running the ARM emulator takes a TON of resources. For the basic web development I mostly do, my Ubuntu VM is normally sufficient. I had to add another gig of RAM and double the processing capability to make this even responsive at all. It was basically taking about 5 minutes for the Android virtual device to boot before increasing the resources. After making this VM stronger, it became feasible to develop inside it.
2. 3D acceleration inside VirtualBox and the 3D acceleration for the Android simulation don't play well together. Simulating 3D inside a simulated 3D environment seems like it might have some problems. I disabled 3D acceleration for VirtualBox, and now I only get one warning from Android. I'm pretty sure this is 100% not supported but it seems to be working for me, right now. Previously, I received a ton of errors.
3. super.loadUrl("file:///android_asset/www/index.html");         super.loadUrl("file:///android_assets/www/index.html");
   
   are not the same. If you make this mistake, you will receive a "There was a network error. (file:///android_assets/www/index.html)" error. It needs to be "asset" not "assets." This is a little bit tricky, since inside Eclipse and my file system, you have "assets/www/" but when this gets moved to a phone, it's "android_asset/www/". 

PhoneGap development has been fun so far, even if I just barely finished with getting a "Hello World" program running. I'm not sure if I'll end up getting a Mac, or running on some sort of a weird virtualized Hackintosh to compile this for IOS using XCode. I don't yet have access to my customer's code base, so I cannot take the next reasonable step of trying to get their code running to see how native it looks, or if it works.

With getting this to actually run on my physical device, I had to install the Oracle VM VirtualBox Extension Pack on my Windows 7 host. I installed version 4.2.16. Then, my host went through some additional USB configurations, I rebooted the host and my guest, and I was able to see my phone from my Ubuntu VM.

DDMS Perspective in Eclipse

Inside my VM, I switched Eclipse to the perspective to DDMS. I didn't really know what DDMS stood for, or what it was, but all the other options seemed wrong. That was the correct guess, and I could select my device. I went to "Run" -> "Run", selected my device, clicked OK and then cheered when my Hello World program showed up on my screen.

Screen Shot of my Actual Screen - I'll try to take a picture, but my phone cannot take a picture of itself.

Task Manager While Running

The running app seems like it's taking a decent amount of memory. This is likely because PhoneGap requires a big .JAR file to be included with the project, in order for it to work.

Hopefully this post helps someone else, or me the next time I need to setup a PhoneGap development environment.