Experience with ionic - Create incredible Apps?
With ionic you can create amazing Apps for iOS and Android
NOTE:
ionic was not developed to the end for version 1.0 so many things are missing. Then they developed
a new version, but without backwards compatibility. So you CAN NOT change your own HTML / XML input stream
on-the-fly. So if you need this, then choose an other framework. Framework7 for example.
Ionic is the beautiful, open source front-end SDK for developing hybrid mobile apps with web technologies.
And it uses AngularJS Angularjs.org which gives your App logic and content. Main site of iconic is: http://ionicframework.com
Document-version: 1.0.0 (2015-11nov-06)
Installation
0. If you develop with Xcode (iOS on a Mac) you need to install Xcode if you not have it already.
- Install Node if you not already have it. https://nodejs.org
Check if you already have it with:
$ node --version v4.2.2
2. Install NPM if you not already have it
Check npm version
$ npm --version 2.14.7
$ npm install -g cordova ionic
$ ionic start myApp tabs
or:
$ ionic start myApp blank or: $ ionic start myApp sidemenu $ cd myApp
$ ionic platform add ios
and/or:
$ ionic platform add android
Build and run it on the emulator:
$ ionic build ios
$ ionic emulate ios
Run on a real device:
Just load the Xcode project and choose your device and build.
iconic build ios and iconic emulate ios does nothing?
Downgrade node.
- Install "n" with
npm install -g nMabye see also https://github.com/tj/n
2. Downgrade with n 4.2.2 or whatever version you like
Usage:
n # Output versions installed
n latest # Install or activate the latest node release
n stable # Install or activate the latest stable node release
n <version> # Install node <version>
n use <version> [args ...] # Execute node <version> with [args ...]
n bin <version> # Output bin path for <version>
n rm <version ...> # Remove the given version(s)
n --latest # Output the latest node version available
n --stable # Output the latest stable node version available
n ls # Output the versions of node available
On Windows use nvmw
npm install -g nvmw # Install nvmw globally
nvmw install v0.10.33 # Install a specific version number
nvmw use v0.10.33 # Use the specific version
Development
- So you edit the source files within ./www/
- (You can also just open ./www/index.html in a HTML5 browser. Chrome, Firefox or Safari is OK.)
- Test your App on a real device for iOS (iPhone or iPad):
- iconic build ios
- iconic emulate ios
Generating Icons and Splash Screens
- Change or replace ./resources/icon.png and/or ./resources/splash.png
- Rebuild with:
$ ionic resources
Develope for Android
Unlike Xcode, the Android IDE does not create APK Android bundles ready-to-use for Google Play™. You need to do that manually.
Step 1: How do I sign a APK for Android? (only once per App)
$ keytool -genkey -v -keystore my-release-key.keystore -alias MY_ALIAS_TO_REMEMBER -keyalg RSA -keysize 2048 -validity 10000
Step 2. How to create a release build version APK for Android?
$ cordova build --release android
Step 3. How do I sign an APK for Android?
$ jarsigner -verbose -sigalg SHA1withRSA -digestalg SHA1 -keystore my-release-key.keystore android-release-unsigned.apk MY_ALIAS_TO_REMEMBER -storepass PASSWORD -keypass PASSWORD
Step 4. How do I ZIP align 4 for Android?
$ ~/Library/Android/sdk/build-tools/23.0.2/zipalign -v 4 android-release-unsigned.apk android-release-ready-for-google-play.apk
Ionic Basics
Factory
function Inventory($http, url, project_id) {
/** The public method for getting the project price **/
this.price = function(callback) {
$http.get(url+"?project="+project_id)
.success(function(value) {
callback(value);
});
};
};
angular.factory('InventoryFactory',[
'$http',
/** This is the factory method that Angular will execute only ONCE **/
function InventoryFactory($http) {
/** This is the function that will be injected into the directive, and called multiple times by the programmer **/
return function(url, product_id) {
/** this is the new object that will be created and used by the programmer **/
return new Inventory($http, url, product_id);
};
}]);
angular.directive('inventoryStatus',['InventoryFactory',function(InventoryFactory) {
return {
link: function($scope,$el,$attr) {
var inventory = InventoryFactory('/api/projects',$scope.project_id);
inventory.price(function(value){
$scope.price = value;
});
}
}
}]);
Angular JS
Call function of another factory
(Pseudo Code)
angular.module('myService', ['ngResource'])
.factory('test2', ($window) ->
return {
foobar: () ->
Common.test()
}
)
.factory('Common', ($window) ->
return {
test: () ->
alert 'testing'
}
)Just inject it:
.factory('test2', function (Common) {
return {
foobar: function () {
Common.test(); // call test() from Common factory
}
};
})
What if ... ? (Problem > Solution)
Error: EACCES: permission denied, .config/configstore/update-notifier-cordova.json You don't have access to this file
$ ionic build ios
/usr/local/lib/node_modules/cordova/node_modules/update-notifier/node_modules/configstore/index.js:53
throw err;
^
Error: EACCES: permission denied, open '/Users/<your-user-name>/.config/configstore/update-notifier-cordova.json'
You don't have access to this file.
at Error (native)
at Object.fs.openSync (fs.js:549:18)
at Object.fs.readFileSync (fs.js:397:15)
at Object.create.all.get (/usr/local/lib/node_modules/cordova/node_modules/update-notifier/node_modules/configstore/index.js:34:26)
at Object.Configstore (/usr/local/lib/node_modules/cordova/node_modules/update-notifier/node_modules/configstore/index.js:27:44)
at new UpdateNotifier (/usr/local/lib/node_modules/cordova/node_modules/update-notifier/index.js:34:17)
at module.exports (/usr/local/lib/node_modules/cordova/node_modules/update-notifier/index.js:123:23)
at checkForUpdates (/usr/local/lib/node_modules/cordova/src/cli.js:64:20)
at cli (/usr/local/lib/node_modules/cordova/src/cli.js:114:5)
at Object.<anonymous> (/usr/local/lib/node_modules/cordova/bin/cordova:41:1)
------------------------------------
Ionic CLI is out of date:
* Locally installed version: 1.7.7
* Latest version: 1.7.8
* https://github.com/driftyco/ionic-cli/blob/master/CHANGELOG.md
* Run npm install -g ionic to update
------------------------------------
Solution
$ ls -arlt /Users/<USER>/.config/configstore/update-notifier-cordova.json
-rw------- 1 root staff 55 Nov 9 12:07 /Users/<USER>/.config/configstore/update-notifier-cordova.json
$ sudo chown USER /Users/<USER>/.config/configstore/update-notifier-cordova.json
$
How to check if and where your Ionic framework uses IDFA Ad framework support
So you have copied an existing Ionic project contianing Ad support and want to remove it? Here is how.
Solution
- Check for Ad usage:
$ grep -r advertisingIdentifier . Binary file ./platforms/ios/build/Der die das.build/Debug-iphonesimulator/Der die das.build/Objects-normal/i386/CDVAdMobPlugin.o matches Binary file ./platforms/ios/build/emulator/Der die das.app/Der die das matches Binary file ./platforms/ios/build/emulator/Strongsdict.app/Strongsdict matches Binary file ./platforms/ios/build/Strongsdict.build/Debug-iphonesimulator/Strongsdict.build/Objects-normal/i386/CDVAdMobPlugin.o matches ./platforms/ios/Strongsdict/Plugins/cordova-plugin-admobpro/CDVAdMobPlugin.m: NSUUID* adid = [[ASIdentifierManager sharedManager] advertisingIdentifier]; Binary file ./platforms/ios/Strongsdict/Plugins/cordova-plugin-admobpro/GoogleMobileAds.framework/GoogleMobileAds matches ./plugins/cordova-plugin-admobpro/src/ios/CDVAdMobPlugin.m: NSUUID* adid = [[ASIdentifierManager sharedManager] advertisingIdentifier]; Binary file ./plugins/cordova-plugin-admobpro/src/ios/GoogleMobileAds.framework/GoogleMobileAds matches $
Aha, it uses the cordova-plugin-admodpro plugin.
2. Remove Ad plugins
$ cordova plugin remove cordova-plugin-admobpro Uninstalling 1 dependent plugins. Uninstalling cordova-plugin-extension from android Uninstalling cordova-plugin-admobpro from android Uninstalling cordova-plugin-admobpro from ios Removing "cordova-plugin-admobpro" $
3. Rebuild your project
$ ionic build ios
And check again:
$ grep -r advertisingIdentifier . $
If necessary, remove also iAd.framework and remove GoogleMobileAds.framework from within your Xcode project.
Links
ionic - HTML5 iOS Android App Framework
http://ionicframework.com - Main Site
http://ionicframework.com/docs/ - Docs
http://learn.ionicframework.com/formulas/ - iconic Tutorials
http://ionicframework.com/docs/v2/components/ - iconic UI components
http://view.ionic.io - Testing your ionic App on real devices
iconic Plugins
http://www.gajotres.net/must-have-plugins-for-ionic-framework/ - ionic Must have Plugins
Node.js
https://nodejs.org - Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient.
https://github.com/creationix/nvm - Node Version Manager
https://github.com/hakobera/nvmw - NVM but for Windows
NPM - Open Source Libaries
https://www.npmjs.com - NPM - Node.js' package ecosystem, npm is the largest ecosystem of open source libraries in the world.
Atom - a cool Editor for OS X, Windows, OS X and Linux
https://atom.io - atom main site, Atom is a desktop application built with HTML, JavaScript, CSS, and Node.js integration. It runs on Electron, a framework for building cross platform apps using web technologies.
