Development

5 min to a mobile app with Ember & Cordova

Jussi Kaijalainen

• 4 min read
5 min to a mobile app with Ember & Cordova

This is a quick guide for going from zero to a working app with all the bells and whistles like livereload, app icons and splash screens setup in about 5 minutes. If all goes to plan. ;)

Thanks to Ember Cordova project by Isle of Code, it has become super easy to build hybrid mobile applications using Ember and Cordova.

This guide assumes you are on MacOS and have the following basics set up already.

  • Recent version of Node.js, Npm & Git
  • Xcode & Android SDK
  • Apple developer account set up

Setting up the project

First, let's setup the project and proceed to install some basics. Below you can copy paste the relevant commands.

npm install ember-cli -g
ember new my-awesome-project
cd my-awesome-project
ember install ember-cordova

We have just created the basic Ember project with Cordova included. Ready to roll!

Next, we edit the ember-cordova/cordova/config.xml and set up a proper identifier for your app replacing the generated one. It should look something like com.company.appname for us it is com.wingmen.my-awesome-app.

vim ember-cordova/cordova/config.xml

Then we need to change the default Ember config a bit to support Cordova. Let's modify the rootURL and locationType in config/environment.js.

vim config/environment.js

Make it look like the following:

rootURL: '', // default was '/'
locationType: 'hash', // default was 'auto'

All set here. Let's proceed to add the icon & splash screen.

App icon and splash screen

Ok, I'll admit it, this part might take a bit more time if you don't have SVGs ready to go.

To setup the icon for the app, save you SVG logo to ember-cordova/icon.svg. The icon should be a square. Then you can run ember cdv:make-icons. And that's it for icons.

For the splash, place your SVG file at ember-cordova/splash.svg and run ember cdv:make-splashes. Splashes will be resized and added to ther project.

The splash image has to support a lot of different screen sizes. You should download the splash SVG template provided by Isle of Code at http://embercordova.com/examples/safe-splash-template.svg. The image should have a background filling the entire area, and icons/text should be kept to the ‘safe area’ box.

Setup platforms

Now we are ready to setup the platforms for deploying.

ember cdv:platform add ios
ember cdv:platform add android

Before being able to build the application, we need to open Xcode and select the development team. Xcode needs this to be able to sign the code. You can open the project in Xcode using the command below:

ember cdv:open

Then in Xcode open the project and set the team on the 'General' tab. Once the team is set and it shows the Signing Certificate below, you should save the project and get back to the terminal.

Now we have a basic functioning application, which you can build for iOS and Android with the following commands.

ember cdv:build --platform=ios && ember cdv:open
ember cdv:build --platform=android && ember cdv:open

Wohoo, done! Did it take more than 5 min? Probably the SVG part screwed you. Or then you ran into a mystical problem with something along the way. If you did, you should rage at us on Twitter.

Next, we move to the extra goodies.

On-device livereload

This feature makes developing and testing Cordova's native features a piece of cake. Change some code, save your file & app reloads automagically on your phone. Developer bliss.

First you have to add the following line <allow-navigation href="*" /> to your ember-cordova/cordova/config.xml. Remember to remove this line for production builds.

ember cdv:serve
ember cdv run --platform=ios --device

Pasting the above to your console should start your app in your phone with livereload enabled.

Nice Cordova plugins

Here's a few of our favourite Cordova plugins we find ourselves using time and time again.

Crosswalk Webview

This plugin lets you package a custom browser into you Android app, so the browser environment for your Cordova app stays the same independent of OS version. Pure gold for making testing on Android less painful. Adds quite a bit to the size of your app package though.

ember cdv:plugin add cordova-plugin-crosswalk-webview

Geolocation

This plugin provides information about device location.

ember cdv:plugin add cordova-plugin-geolocation

Network information

This plugin enables you to handle connectivity related things.

ember cdv:plugin add cordova-plugin-network-information

Statusbar

This plugin lets you configure how the status bar is displayed.

ember cdv:plugin add cordova-plugin-statusbar

Inappbrowser

This plugin lets you manage exactly how the links in your apps are opened. Many people seem to be fighting with opening links in system browser - this plugin helps with that.

ember cdv:plugin add cordova-plugin-inappbrowser

Keep plugins up-to-date

If you want to keep your plugins updated easily, you should check out cordova-check-plugins.

npm install -g cordova-check-plugins
cordova-check-plugins --update=auto

Useful ember-cli addons

Below you will find some of the most useful Ember addons for developing mobile apps.

Install with the commands below:

ember install ember-cli-sass
ember install ember-cli-autoprefixer
ember install ember-gestures

Further learning

You should consult http://embercordova.com/ if you're having trouble (maybe something changed) and if you're looking for more tips and tricks for building mobile apps with this stack.