What about mobile?

ember cdv:build

Oz likes to party

Our Problem

Cordova vs PhoneGap

Packages

ember-cli-cordova

ember-cordova

Prequisites

Node

Npm

Xcode

ember-cli

Install

# Install New Project
ember install ember-cordova 
    --name=iamFiscus                           # project name
    --cordovaid=com.iamfiscus.ember.cordova    # cordova unque id
    --templatePath=../template                 # template path
# Create new Ember project
ember new ember-cordova-preso

Hash

Path

Relative

Platform

# Add Cordova platforms
ember cdv:platform add ios
ember cdv:platform add android
ember cdv:platform add browser #experimental

Performance

 Webviews as v0.3.0

Build

# Installs packages on a fresh clone
ember cdv:prepare

# Builds platform specific files
ember cdv:build

# Opens project in IDE
ember cdv:open

Hooks

  • beforeBuild
  • afterBuild
  • beforePrepare
  • afterPrepare
"use strict";

module.exports = function() {
  //do something
};

ember-cordova/hooks/{{hookName}}.js

Live Reload

# Serve application
ember cdv:serve

Serivces

Cordova

Platform

Keyboard

Splashscreen

Events

const CORDOVA_EVENTS = new A([
  'deviceready',
  'pause',
  'resume',
  'backbutton',
  'menubutton',
  'searchbutton',
  'startcallbutton',
  'endcallbutton',
  'volumedownbutton',
  'volumeupbutton',
  'batterycritical',
  'batterylow',
  'batterystatus',
  'online',
  'offline'
]);
import Ember from 'ember';
import subscribe from 'ember-cordova/utils/subscribe';

const {
  Route,
  inject
} = Ember;

export default Route.extend({
  cordova: inject.service(),

  logReady: subscribe('cordova.deviceready', function() {
    console.log('ready');
  })
});

Platform

<h3>hello {{model.group}}</h3>
  <p>Our platform is:</p>
  <ul>
    {{#each model.platforms as |platform|}}
      <li>{{platform}}</li>
    {{/each}}
 </ul>
import Ember from 'ember';

const {
  Route,
  inject
} = Ember;

export default Route.extend({

  // Platform Service
  platformService: inject.service('device/platform'),

  model: function(){
    return {
      group: 'World',
      platforms: this.get('platformService').platforms
    };
  }
});

Keyboard

# Add keyboard plugin
ember install ember-cordova-keyboard --save

# Prepare plugin
ember cdv:prepare

Plugins

// app/components/keyboard-example.js
import Ember from 'ember';

const {
  Component,
  inject
} = Ember;

export default Component.extend({
  keyboard: inject.service('cordova/keyboard'),
  keyboardIsShowing: false,

  didInsertElement() {
    this._super();

    this.get('keyboard').on('keyboardDidShow', this.keyboardDidShow);
    this.get('keyboard').on('keyboardDidHide', this.keyboardDidHide);
  },

  willDestroyElement() {
    this.get('keyboard').off('keyboardDidShow', this.keyboardDidShow);
    this.get('keyboard').off('keyboardDidHide', this.keyboardDidHide);

    this._super();
  },

  keyboardDidShow() {
    this.set('keyboardIsShowing', true);
  },

  keyboardDidHide() {
    this.set('keyboardIsShowing', false);
  }
});

Splash

# Add splashscreen plugin
ember cdv:plugin add cordova-plugin-splashscreen --save

# Prepare plugin
ember cdv:prepare

Plugins

config.xml

Splash

// app/routes/application.js
import Ember from 'ember';

const { Route } = Ember;

export default Route.extend({
  splashScreenService: Ember.inject.service('device/splashscreen'),

  beforeModel() {
    this.get('splashScreenService').show();
  },

  afterModel() {
    this.get('splashScreenService').hide();
  }
  // ...
});

Tools

# Add icon to default path
./ember-cordova/icon.svg

# Command
ember cdv:make-icons

# Options
ember cdv:make-icons --source=ember-cordova/cordova/generate --platform=ios

Icon Management

UI Helpers

Development Helpers

Resources

https://github.com/iamfiscus/ember-cordova-preso-example

http://embercordova.com/

https://www.emberscreencasts.com/

https://isleofcode.com/

https://www.youtube.com/watch?v=Ry639hvWKbM