Jd Fiscus
Standard Nerd
ember cdv:build
ember-cli-cordova
ember-cordova
Node
Npm
Xcode
ember-cli
# 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
Relative
# Add Cordova platforms
ember cdv:platform add ios
ember cdv:platform add android
ember cdv:platform add browser #experimental
Webviews as v0.3.0
# Installs packages on a fresh clone
ember cdv:prepare
# Builds platform specific files
ember cdv:build
# Opens project in IDE
ember cdv:open
"use strict";
module.exports = function() {
//do something
};
ember-cordova/hooks/{{hookName}}.js
# Serve application
ember cdv:serve
Cordova
Platform
Keyboard
Splashscreen
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');
})
});
<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
};
}
});
# 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);
}
});
# Add splashscreen plugin
ember cdv:plugin add cordova-plugin-splashscreen --save
# Prepare plugin
ember cdv:prepare
Plugins
config.xml
// 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();
}
// ...
});
# 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
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
By Jd Fiscus