Installing Phonegap on Ubuntu 13.10 (with local Android package building)


Published: October 24th, 2013 at 22:09 – Permalink

NOTE: This is an updated version of the previous tutorial for installing Phonegap on Ubuntu 13.04.  Almost all of the steps are the same, but the ‘ia32-libs’ package has been removed from 13.10’s repo, meaning there is enough of a difference between the two to warrant an updated tutorial.

This tutorial has been updated to include instructions for both x86_64 and i386 platforms.

Phonegap is a pretty interesting project.  For those unaware, Phonegap is an API based on HTML5 languages, which aims to allow for painless porting of a mobile application from platform to platform.  At the time of writing, all of the major mobile operating systems (Android, iOS, Windows Phone 8) are currently supported by the API, and a few minor and upcoming platforms are also supported (such as Blackberry 10 and Tizen).

Although Phonegap may sound intriguing, its lack of documentation can be a turnoff for casual developers.  Even a lazy archivist such as myself was amazed at the scarcity of helpful documents for an API (especially one owned by Adobe).

Case in point: there’s no install documentation on their website for Linux.  There’s not even a good reference that’s linked to it to help a newcomer out.

I’ll be the first to argue that this isn’t necessarily a bad thing, as software developers should probably be comfortable in their environment before they start using it for their coding.  But since Phonegap is essentially a product for coding on other platforms, that argument sort of gets thrown out of the window.

I’m currently writing this blog post as a documented checklist for myself, in the event that a snapshot on one of my clean-room coding VM’s fails.  Suffice to say, the official documentation did help in certain areas – but it still took me many forum posts and bugtracker requests to finally get a working system.

The following steps should successfully install Phonegap on a vanilla install of Ubuntu 13.10 on an i386 or x86_64 machine:

  1. Bring up a terminal window (Ctrl+Alt+T), and type sudo -s to sign in to a root session.
  2. Do a apt-get update and apt-get upgrade, just because it’s good practice.
  3. Copy the latest link to the node.js Linux package from this link.
  4. Change directory to /tmp: cd /tmp
  5. Type wget <URL of node.js package from Step #3> to download the latest version.
  6. Unzip the tarball by entering tar -zxvf node-*.tar.gz.
  7. Remove the tarball by entering rm node-*.tar.gz.
  8. Move the resulting directory somewhere friendly.  This tutorial will use /usr/lib/nodejs as the destination.  (If all goes well, you should see “bin” and “node_module” directories [amongst others] in the /usr/lib/nodejs path.)  To do this, type mv node-* /usr/lib/nodejs.
  9. Change directory to /usr/bin: cd /usr/bin
  10. Create a symlink for the node binary: ln -s /usr/lib/nodejs/bin/node ./node
  11. Create a symlink for the npm binary: ln -s /usr/lib/nodejs/lib/node_modules/npm/cli.js ./npm
  12. Now, we need to download git and some libraries that phonegap is dependent upon.  If you are running the x86_64 version of 13.10, type apt-get install lib32z1 lib32ncurses5 lib32bz2-1.0 lib32stdc++6 git -y. If you are running the i386 version, type apt-get install libz1 libncurses5 libbz2-1.0 libstdc++6 git -y.
  13. With any luck, we’re ready to start the PhoneGap install.  Type npm install -g phonegap.
  14. Exit the root shell by typing exit.  This is quite important for various permission-based reasons.
  15. Go back to your home directory by typing: cd ~.
  16. Run phonegap.  You should now see the manual page.
  17. Create an empty project by typing phonegap create helloWorld
  18. Navigate into the project’s directory: cd ~/helloWorld
  19. Build the program by entering phonegap build android -V

And that’s it!

Well, kind of.  As you will see, once you run the build command in PhoneGap, it will ask you to login with an Adobe ID account (hit CTRL-C to break out of this, if you wish).  This is necessary if you want to use PhoneGap’s cloud compilation services – which is probably a good idea if you just want a one-stop solution for producing an app on multiple operating systems.  Accounts to their cloud compilation service range from free (1 private project with unlimited open source projects) to $10/month to expensive, but it is definitely the easiest way to date to mass-produce apps for multiple platforms.  The drawback to this is that all of your code is uploaded to Adobe’s cloud (and Adobe’s authentication servers just recently got hacked)… just food for thought.

If you want to test your PhoneGap in a more secure environment, we can do so by building the packages locally and using the freely available Android emulator for testing.  I recommend this method since it does not require you to register with Adobe in order to run PhoneGap API applications.

After completing steps #1 – 14 above, perform the following steps:

  1. Type sudo apt-get install openjdk-7-jdk ant -y to install OpenJDK and Ant, both required by Android’s SDK.
  2. Go back into /tmp to download the Android SDK: cd /tmp
  3. Type wget <URL of Android SDK found here> to download the Android SDK ZIP.  This is quite large (~450MB for the x86_64 version).
  4. Type unzip adt-bundle-linux-*.zip to unzip the file.
  5. Type rm adt-bundle-linux-*.zip to delete the ZIP.  It is no longer needed.
  6. Now, we need to move the extracted files to a more suitable location.  Type sudo mv adt-bundle-linux-* /usr/lib/android-sdk, and enter in the password for your account if prompted.
  7. We now need to update our PATH environment variable in the bash configuration file, so that PhoneGap can call the Android emulator.  Type nano ~/.bashrc.
  8. Navigate to the end of the file (press the “Page Down” key multiple times until the cursor is at the bottom).  Type export PATH=$PATH:/usr/lib/android-sdk/sdk/tools:/usr/lib/android-sdk/sdk/platform-tools on a new line at the very end of the file, and press CTRL+X.  A dialog at the bottom of the screen will ask you if you want to overwrite the existing .bashrc file.  Type “Y” and hit the ENTER key to confirm.
  9. Type source ~/.bashrc to refresh your bash configuration.
  10. You should now be able to type in android and see the “Android SDK Manager” window.  Make sure that the checkboxes next to the “Tools” folder (at the top of the list) and the “Android 4.2 (API 17)” are checked, then click on the “Install # packages…” button below the list (where # is a number).  We are skipping Android 4.3/API 18 group as PhoneGap does not support it yet (and in fact, breaks the PhoneGap build process).
  11. Read through the EULA for the Android tools, and accept them.  Click “Install”.  Wait for everything to download and install.  This will download about ~400 MB of packages.
  12. Once finished, remain in Android SDK Manager. Click on the “Tools” menu, and select the “Manage AVDs” option.
  13. Click on the “New” button on the right-hand side of the screen, and give the AVD a name.  Select “Nexus S” as the Device, “Android 4.2.2 (API 17)” for the Target (IMPORTANT), and “ARM” as the CPU.  If your system can handle it, I would give the AVD at least 512 MB of RAM under “Memory Options” to speed things along.  Similarly, give the AVD a SD card of at least 64 MB.  Click “OK”.
  14. Select the AVD in the list, and click the “Start…” button on the right-hand side of the screen.  Click “Launch” on the popup window.
  15. If you start to see the emulator pop up, and see an “Android” splash screen, you’re all set.  Close out of the emulator, the Android Virtual Device Manager, and the Android SDK Manager.
  16. Returning to the shell, type cd ~/helloWorld to navigate to your PhoneGap project.
  17. Finally, type phonegap run android -V.  If all went well, you will see the Android emulator pop up after a minute or so, and install your PhoneGap project after a few more minutes of waiting.  Just to note: you may have to unlock the screen and go through Android’s tutorial before you can get to your project the first time.  It is a good idea to keep the emulator running while building new revisions of a PhoneGap project, as it only takes a few seconds to push a new version of the resulting APK to it (as opposed to the minutes it takes to cold-boot).

And that’s all there is to it.

Happy coding!

-Jake (@jakenovak)

GNOME on Ubuntu 13.10


Published: October 24th, 2013 at 21:33 – Permalink

One of my biggest complaints about Ubuntu is Unity.  Call me old, but I’m a stoic supporter of the traditional ‘desktop’ interface when I’m on an actual computer, regardless of the platform (translation: I’m also not a fan of Windows 8 and any OS X version above Snow Leopard).

It’s ugly.  It’s slow (even on new hardware).  And Amazon likes to “play NSA” with it.

But regardless of how I feel about Canonical/society’s insistence on pushing a “post-PC” interface on the traditional PC, I take solace in the fact that we can still revert back to the good ol’ days of Ubuntu (pre-11.04) in 13.04 and 13.10 by a simple terminal command:

sudo apt-get install gnome-session-fallback -y

Once this package is installed, you’ll be able to select it from the login menu by clicking on the Ubuntu logo next to your username.

Score one for us computing traditionalists.

-Jake (@jakenovak)

Installing Phonegap on Ubuntu 13.04 (with local Android package building)


Published: October 6th, 2013 at 23:41 – Permalink

UPDATE: There is a new version of this post for those wishing to install Phonegap on Ubuntu 13.10.  If this is you, read that post instead, as the process is slightly different.

Phonegap is a pretty interesting project.  For those unaware, Phonegap is an API based on HTML5 languages, which aims to allow for painless porting of a mobile application from platform to platform.  At the time of writing, all of the major mobile operating systems (Android, iOS, Windows Phone 8) are currently supported by the API, and a few minor and upcoming platforms are also supported (such as Blackberry 10 and Tizen).

Although Phonegap may sound intriguing, its lack of documentation can be a turnoff for casual developers.  Even a lazy archivist such as myself was amazed at the scarcity of helpful documents for an API (especially one owned by Adobe).

Case in point: there’s no install documentation on their website for Linux.  There’s not even a good reference that’s linked to it to help a newcomer out.

I’ll be the first to argue that this isn’t necessarily a bad thing, as software developers should probably be comfortable in their environment before they start using it for their coding.  But since Phonegap is essentially a product for coding on other platforms, that argument sort of gets thrown out of the window.

I’m currently writing this blog post as a documented checklist for myself, in the event that a snapshot on one of my clean-room coding VM’s fails.  Suffice to say, the official documentation did help in certain areas – but it still took me many forum posts and bugtracker requests to finally get a working system.

The following steps should successfully install Phonegap on a vanilla install of Ubuntu 13.04 on a x86_64 machine:

  1. Bring up a terminal window (Ctrl+Alt+T), and type sudo -s to sign in to a root session.
  2. Do a apt-get update and apt-get upgrade, just because it’s good practice.
  3. Copy the latest link to the node.js Linux package from this link.
  4. Change directory to /tmp: cd /tmp
  5. Type wget <URL of node.js package from Step #3> to download the latest version.
  6. Unzip the tarball by entering tar -zxvf node-*.tar.gz.
  7. Remove the tarball by entering rm node-*.tar.gz.
  8. Move the resulting directory somewhere friendly.  This tutorial will use /usr/lib/nodejs as the destination.  (If all goes well, you should see “bin” and “node_module” directories [amongst others] in the /usr/lib/nodejs path.)  To do this, type mv node-* /usr/lib/nodejs.
  9. Change directory to /usr/bin: cd /usr/bin
  10. Create a symlink for the node binary: ln -s /usr/lib/nodejs/bin/node ./node
  11. Create a symlink for the npm binary: ln -s /usr/lib/nodejs/lib/node_modules/npm/cli.js ./npm
  12. Now, we need to download git and some libraries that phonegap is dependent upon.  Type apt-get install ia32-libs git -y.
  13. With any luck, we’re ready to start the PhoneGap install.  Type npm install -g phonegap.
  14. Exit the root shell by typing exit.  This is quite important for various permission-based reasons.
  15. Go back to your home directory by typing: cd ~.
  16. Run phonegap.  You should now see the manual page.
  17. Create an empty project by typing phonegap create helloWorld
  18. Navigate into the project’s directory: cd ~/helloWorld
  19. Build the program by entering phonegap build android -V

And that’s it!

Well, kind of.  As you will see, once you run the build command in PhoneGap, it will ask you to login with an Adobe ID account (hit CTRL-C to break out of this, if you wish).  This is necessary if you want to use PhoneGap’s cloud compilation services – which is probably a good idea if you just want a one-stop solution for producing an app on multiple operating systems.  Accounts to their cloud compilation service range from free (1 private project with unlimited open source projects) to $10/month to expensive, but it is definitely the easiest way to date to mass-produce apps for multiple platforms.  The drawback to this is that all of your code is uploaded to Adobe’s cloud (and Adobe’s authentication servers just recently got hacked)… just food for thought.

If you want to test your PhoneGap in a more secure environment, we can do so by building the packages locally and using the freely available Android emulator for testing.  I recommend this method since it does not require you to register with Adobe in order to run PhoneGap API applications.

After completing steps #1 – 14 above, perform the following steps:

  1. Type sudo apt-get install openjdk-7-jdk ant -y to install OpenJDK and Ant, both required by Android’s SDK.
  2. Go back into /tmp to download the Android SDK: cd /tmp
  3. Type wget <URL of Android SDK found here> to download the Android SDK ZIP.  This is quite large (~450MB).
  4. Type unzip adt-bundle-linux-x86_64-*.zip to unzip the file.
  5. Type rm adt-bundle-linux-x86_64-*.zip to delete the ZIP.  It is no longer needed.
  6. Now, we need to move the extracted files to a more suitable location.  Type sudo mv adt-bundle-linux-x86_64-* /usr/lib/android-sdk, and enter in the password for your account if prompted.
  7. We now need to update our PATH environment variable in the bash configuration file, so that PhoneGap can call the Android emulator.  Type nano ~/.bashrc.
  8. Navigate to the end of the file (press the “Page Down” key multiple times until the cursor is at the bottom).  Type export PATH=$PATH:/usr/lib/android-sdk/sdk/tools:/usr/lib/android-sdk/sdk/platform-tools on a new line at the very end of the file, and press CTRL+X.  A dialog at the bottom of the screen will ask you if you want to overwrite the existing .bashrc file.  Type “Y” and hit the ENTER key to confirm.
  9. Type source ~/.bashrc to refresh your bash configuration.
  10. You should now be able to type in android and see the “Android SDK Manager” window.  Make sure that the checkboxes next to the “Tools” folder (at the top of the list) and the “Android 4.2 (API 17)” are checked, then click on the “Install # packages…” button below the list (where # is a number).  We are skipping Android 4.3/API 18 group as PhoneGap does not support it yet (and in fact, breaks the PhoneGap build process).
  11. Read through the EULA for the Android tools, and accept them.  Click “Install”.  Wait for everything to download and install.  This will download about ~400 MB of packages.
  12. Once finished, remain in Android SDK Manager. Click on the “Tools” menu, and select the “Manage AVDs” option.
  13. Click on the “New” button on the right-hand side of the screen, and give the AVD a name.  Select “Nexus S” as the Device, “Android 4.2.2 (API 17)” for the Target (IMPORTANT), and “ARM” as the CPU.  If your system can handle it, I would give the AVD at least 512 MB of RAM under “Memory Options” to speed things along.  Similarly, give the AVD a SD card of at least 64 MB.  Click “OK”.
  14. Select the AVD in the list, and click the “Start…” button on the right-hand side of the screen.  Click “Launch” on the popup window.
  15. If you start to see the emulator pop up, and see an “Android” splash screen, you’re all set.  Close out of the emulator, the Android Virtual Device Manager, and the Android SDK Manager.
  16. Returning to the shell, type cd ~/helloWorld to navigate to your PhoneGap project.
  17. Finally, type phonegap run android -V.  If all went well, you will see the Android emulator pop up after a minute or so, and install your PhoneGap project after a few more minutes of waiting.  Just to note: you may have to unlock the screen and go through Android’s tutorial before you can get to your project the first time.  It is a good idea to keep the emulator running while building new revisions of a PhoneGap project, as it only takes a few seconds to push a new version of the resulting APK to it (as opposed to the minutes it takes to cold-boot).

Whew… that should do it.  I can’t see much of these steps changing when Ubuntu 13.10 ships at the end of this month, but I’ll be sure to write a follow up when it’s released just in case. (UPDATE: I’ve written a new tutorial for those on Ubuntu 13.10: Installing Phonegap on Ubuntu 13.10)

Happy coding!

-Jake (@jakenovak)