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
$ 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
$ sudo add-apt-repository -y ppa:ubuntu-desktop/ubuntu-make
$ sudo apt-get update
$ sudo apt-get install ubuntu-make ant
- $ 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.