Building Mobile Applications with Ember.js

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. In this blogpost we present Ember.js and Cordova.

Ember Logo

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:

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.

android-studio-launcher

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

android-studio-sdk-manager-arrow

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).

android-standalone-sdk-manager

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.

android-sdk-support-repository

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

android-sdk-manage-AVDs-cropped

Example of an Nexus 6 Emulator:

android-sdk-manage-AVDs-nexus6-cropped

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:

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 <addon-name>

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

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:

To make livereload work with cordova, we need to put <allow-navigation href="*" /> into ember-cordova/cordova/config.xml.

Then launch the development server with livereload support:

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

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

android-emulator-ember

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

Example:

The page should now reload and look like this:

android-emulator-helloworld

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 <allow-navigation href="*" /> element in ember-cordova/cordova/config.xml again, which allows livereload in development mode.

Building the application for a deployable package simply run:

Or for the production ready version:

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:

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.

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

Kommentare sind geschlossen.