Wednesday, January 7, 2015

Apache Cordova Development Environment Setup on Ubuntu 14.04

This is my "Happy New Year" post.  I had a goal over Winter break to find a process my students could use to setup an Apache Cordova development environment on their Ubuntu 14.04 laptops (I'm actually using Peppermint OS 5, which is a great light weight version of Ubuntu 14.04).

After several days of false starts and dead ends, I finally came up with something that works. I never succeeded in getting an Ubuntu environment working, and decided to give up on that for now until things settle down and the Ubuntu development team makes the process easier for beginners.  Firefox OS was wonderfully simple, and will definitely be my preferred choice of target system when introducing this to my students.  Android was only a bit more troublesome, since it involved the dreaded Oracle Java, but thankfully Cordova will shield us from having to deal with that directly once we have it setup.

Setup for Building Firefox OS Apps

 

Install Apache Cordova CLI And Create Hello App

$ sudo apt-add-repository -y ppa:cordova-ubuntu/ppa
$ sudo apt-get update
$ sudo apt-get install cordova-cli
Everything else we need to develop for Firefox OS is now built into the browser (how cool is that!? ;-) To make and run the Hello App, choose a good location for the project code, and:
$ cordova create hello
$ cd hello
$ cordova platform add firefoxos
$ cordova build
That's all there is to building the app for Firefox OS.  We now have a ./platforms/firefoxos/www directory that contains our app.  What we need now is an emulator to run it on.  The latest Firefox makes this a snap:
  • Open WebIDE in Firefox by pressing Shift+F8.
  •  Click Select Runtime and select Install Simulator, then choose a simulator (I choose the latest one marked "stable", 2.0 at the time I'm writing this) and click install.
  • Click Select Runtime again and click on your simulator. An emulator is launched running Firefox OS (if only life could always be this easy! ;-)
  • Back in the WebIDE window, click on Open App, then select Open Packaged App ... and navigate to the./platforms/firefoxos/www directory inside the hello directory and click Open.
  • The previous step will load the source directory into WebIDE.  Click the run button in the top center of the WebIDE window (it is a triangle next to a square), and we are rewarded with a running app.

 
Granted, it doesn't do much yet, but this was by far the most pain free process I experienced in my several days of trying to get cordova apps running on emulators.

Setup for Building Android Apps


To build for Android will require dealing with the evil Oracle Java environment and setting up the Android SDK, but the fine folks at the webupd8team and ubuntu-desktop teams have made this easy to do, and cordova will then permit us to develop with HTML, CSS and JavaScript and take care of the rest for us:

Install the Oracle Java 7 JDK 

$ sudo add-apt-repository -y ppa:webupd8team/java 
$ sudo apt-get update 
$ sudo apt-get install oracle-java7-installer oracle-java7-set-default

Install Ubuntu Make 

$ sudo add-apt-repository -y ppa:ubuntu-desktop/ubuntu-make 
$ sudo apt-get update 
$ sudo apt-get install ubuntu-make ant

Install Android Studio and SDK

  • $ umake android
  • Choose the installation path (I choose /home/<username>/.local/tools/android/android-studio to keep things from cluttering my home directory).
  • [I Accept (a)/I don't accept (N)] a
  • Wait while Android Studio downloads and installs… Installation done
  • Start Android Studio from menu (Programming -> Android Studio on Peppermint or use the Dash on regular Ubuntu).
  • [I do not have previous version…] OK [Setup Wizard - Welcome] Next [Custom] Next
  • Android SDK Location: /home/<username>/.local/android/sdk (again, I put things in .local to avoid clutter).
  • Next [Accept] Finish … Long wait while everything installs … Finish
  • Create a .bashrc file (or add to the one you already have) with the following: 
ANDROID_HOME=$HOME/.local/android/sdk 
PATH=$ANDROID_HOME/tools:$ANDROID_HOME/platform-tools:$PATH


export PATH ANDROID_HOME
  • Start the Android SDK Manager with $ android
  • Select Android 4.4.2 (API 19) and click Install 16 packages… [Accept License] Install
We now have the Android development environment setup.  Cordova CLI integrates nicely with this.  All we need to do to add Android as a target platform for our Hello App is to run the following from inside our hello directory:
$ cordova platform add android
$ cordova build
$ cordova run android

Developing for mobile platforms is becoming a compelling thing for me to do as an IT/CS teacher to maintain student interest in learning.  Cordova makes it possible to use the tools we have already been learning, HTML, CSS and JavaScript, to start working on mobile platforms.

Next: Find good tutorials for learning cordova.

8 comments:

  1. Hi Jeff,

    These instructions are almost the most complete ones and cleanest I have found. Though there are problems with it. On a brand new installation 64bit Ubuntu 14.04 it will not work:

    + adb is 32bit, it will fail to run, you need to install the 32bit support: http://askubuntu.com/questions/454253/how-to-run-32-bit-app-in-ubuntu-64-bit
    + Also, additional libraries are missing, besides the previous 32bit support, there also needs to be added the zlib: http://stackoverflow.com/questions/19523502/how-to-make-androids-aapt-and-adb-work-on-64-bit-ubuntu-without-ia32-libs-work
    + One must also update the android library to include API19
    + Also, the target adv needs to be built - which can be done via: android create avd –name TestDevice-19 –target android-19 --abi default/armeabi-v7a

    Thank you for the instructions it was 98% of what I needed to have a clean environment.

    ReplyDelete
    Replies
    1. Thanks, James. Strange, I tried this "recipe" several times on fresh install 64 bit versions of Ubuntu 14.04 (mostly PeppermintOS).

      At which step did you run into the 32bit adb issue?

      Delete
  2. Hello Jeff,

    There is not specific step when the 32bit issue took place, I basically added additional installation steps after I started seeing errors. I believe the best thing is to install all the libraries prior to running the installations:

    + adb is 32bit, it will fail to run, you need to install the 32bit support: http://askubuntu.com/questions/454253/how-to-run-32-bit-app-in-ubuntu-64-bit
    + Also, additional libraries are missing, besides the previous 32bit support, there also needs to be added the zlib: http://stackoverflow.com/questions/19523502/how-to-make-androids-aapt-and-adb-work-on-64-bit-ubuntu-without-ia32-libs-work

    Then I would advise that after installing the google SDK, one needs to do:

    + One must also update the android library to include API19
    + Also, the target adv needs to be built - which can be done via: android create avd –name TestDevice-19 –target android-19 --abi default/armeabi-v7a

    And finally resuming to your section of:

    "
    $ cordova platform add android
    $ cordova build
    $ cordova run android
    "

    I would also suggest to place a direct link to the Google SDK download, which is not available from the page - it just makes the flow even smoother.

    As I said this is a great (the best by far) set of instructions for Ubuntu 14.04 -

    BTW - my release is:
    Distributor ID: Ubuntu
    Description: Ubuntu 14.04.1 LTS
    Release: 14.04
    Codename: trusty

    Last suggestion - you could provide a docker container which has the installation in place, this would simplify everything to all your students and you could update the docker container at your heart's desire - your students would simply have to map their filesystem to the docker container in order to have their projects local to their host OS rather than being on the container.

    ReplyDelete

  3. Really nice post. Thank you so much for sharing a wonderful post. Email Marketing in Karachi

    ReplyDelete
  4. Hi, I am glad that i came to see this, really loved it. Thank you for sharing it. I have bookmarked your page as SEO Expert in Karachi excited to see more of it.

    ReplyDelete