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 OS X and have the following basics set up already.
- Recent version of Node.js, Npm & Git
- Xcode & Android studio
- 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 with the following command.
ember cdv:build --platform=ios && 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 peace of cake. Change some code, save your file & app reloads automagically on your phone. Developer bliss.
First you have to add the following line 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
Below you'll find a copy-pasteable list of commands to install some often needed plugins.
ember cdv:plugin add cordova-plugin-crosswalk-webview
ember cdv:plugin add cordova-plugin-geolocation
ember cdv:plugin add cordova-plugin-network-information
ember cdv:plugin add cordova-plugin-splashscreen
ember cdv:plugin add cordova-plugin-statusbar
ember cdv:plugin add cordova-plugin-inappbrowser
Also, if you want to keep your plugins up to date 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.
- Ember-cli-sass adds SCSS support
- Autoprefixer takes care of CSS prefixes
- Ember-gestures makes it easy to work with gestures and adds ember-hammertime to remove the 300ms tap delay
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.
