Why Mobile with HTML, CSS & JS and why Ember

The web is pushing forward on the application front, catching up with native capabilities really fast. We are now at a point where building mobile applications with web technologies should be heavily considered.

Ember.js is one of the big javascript frameworks out there. While bigger in size than other frameworks, it also includes a lot more functionality than frameworks like angular or react. Touting itself as the SDK for the web, Ember.js is built for productivity and developer happiness with batteries included.

With its vast addon ecosystem, Ember.js shines in bringing in smaller external components with ease. Pulling in dependencies is as simple as running a single command on the command line.

Creating the Project

Before creating your project, make sure you have installed Node.js, npm and the Android SDK (or Android Studio).

If you are using Ubuntu Linux as your operating system, Node.js and the Android Studio can be installed with these commands:

$ sudo apt install git ubuntu-make
$ umake nodejs
$ umake android --accept-license
$ echo "ANDROID_SDK_ROOT=$HOME/Android/Sdk" >> ~/.profile
$ echo "PATH=$HOME/Android/Sdk/tools:\$PATH" >> ~/.profile
$ source ~/.profile

The Android SDK will be installed once the Android Studio is started.

After the installation is done, the Android Studio Launcher should be presented to you, click „configure“ then „SDK Manager“ to install all prerequisites.

Open up the standalone SDK-Manager by clicking „Launch Standalone SDK Manager“.

In the SDK-Manager select the SDK Platform and an Intel x86 Image based on your Host Architecture (x86 Atom on 32-bit systems and x86 Atom_64 on 64-bit systems).

Also install the „Android Support Repository“, which is needed for Crosswalk. ember-cordova utilizes Crosswalk by default. This way we ship the same WebView to all Android devices, giving us a consistent platform to develop for.

Next we create an AVD (Android Virtual Device), to run our example app on.

Example of an Nexus 6 Emulator:

Now we’re set and ready to create our Ember.js application.

Create your project by installing ember-cli and cordova with the following commands:

$ npm install -g ember-cli cordova
$ ember new my-application
$ cd my-application

There is a convenient Ember.js Addon to install and wrap our application in a cordova application called ember-cordova.
We can install Ember.js Addons by running ember install

$ ember install ember-cordova \
    --name=MyApplication \
    --cordovaid=com.example.MyApplication

Once installed, add the mobile platforms using the following ember-cordova command. This will download all the cordova components needed.

$ ember cordova:platform add android # or ios

As Ember.js uses the the HTML5 History API by default and cordova applications are served over the filesystem, we need to change the configuration to move Ember.js to using the hash based routing.

Open up config/environment.js:

module.exports = function(environment) {
  var ENV = {
    // ...
    // Change
    rootURL: '/',
    locationType: 'auto'
    // to
    rootURL: '',
    locationType: 'hash'
    // ...

To make livereload work with cordova, we need to put into ember-cordova/cordova/config.xml.

Then launch the development server with livereload support:

$ ember cordova:serve --platform=android

To launch the application on the emulator or connected device deploy the development version with:

# deploy to emulator
$ ember cordova run android
# or deploy to USB-Device
$ ember cordova run android --device

You are now be presented with the Ember.js welcome page on your device or emulator.

The Ember.js application is setup with livereload, once we create the application route template, the app should reload with its content.

Example:

$ echo "<h1>Hello World\!</h1>" > app/templates/application.hbs

The page should now reload and look like this:

If it does not reload, make sure your device (or emulator) runs on the same network as your workstation.

Building the Project

Before building a deployable version we have to remove the element in ember-cordova/cordova/config.xml again, which allows livereload in development mode.

Building the application for a deployable package simply run:

$ ember cordova:build --platform=android

Or for the production ready version:

$ ember cordova:build --platform=android --environment=production --release

Once the build is done, you’ll find the apk files in ember-cordova/cordova/platforms/android/build/outputs/apk/

Signing the APK files

To sign the generated APK files, we need a keystore file. Generate the keystore with the following command:

$ keytool \
  -genkey \
  -v \
  -keystore ember-cordova/cordova/my-application.keystore \
  -alias my-application \
  -keyalg RSA \
  -keysize 4096 \
  -validity 10000

Make sure you keep the keystore file secret.

Now we can run the ember cordova:build with the following parameters to generate signed APK files.

$ ember cordova:build \
  --platform=android \
  --environment=production \
  --release \
  --keystore my-application.keystore \
  --store-password yourstorepassword \
  --password yourkeyaliaspassword \
  --alias my-application

Once the build completed with, the signed APK files are ready to be uploaded to the Google Play Store 🙂