Experience with ionic Create incredible Apps?

Experience with ionic - Create incredible Apps?

With ionic you can create amazing Apps for iOS and Android

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)


0. If you develop with Xcode (iOS on a Mac) you need to install Xcode if you not have it already.

  1. Install Node if you not already have it. https://nodejs.org

Check if you already have it with:

$ node --version


2. Install NPM if you not already have it

Check npm version

$ npm --version


$ npm install -g cordova ionic
$ ionic start myApp tabs


$ ionic start myApp blank or: $ ionic start myApp sidemenu 
$ cd myApp
$ ionic platform add ios



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.

  1. Install "n" with
    npm install -g n

    Mabye see also https://github.com/tj/n

2. Downgrade with n 4.2.2 or whatever version you like

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



  1. So you edit the source files within ./www/
  2. (You can also just open ./www/index.html in a HTML5 browser. Chrome, Firefox or Safari is OK.)
  3. Test your App on a real device for iOS (iPhone or iPad):
    1. iconic build ios
    2. iconic emulate ios


Generating Icons and Splash Screens

  1. Change or replace ./resources/icon.png and/or ./resources/splash.png
  2. 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


function Inventory($http, url, project_id) {
     /** The public method for getting the project price **/
     this.price = function(callback) {
                .success(function(value) {

   /** 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);
                $scope.price = value;


Angular JS


Call function of another factory

(Pseudo Code)

angular.module('myService', ['ngResource'])
  .factory('test2', ($window) ->
    return {
      foobar: () ->
  .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
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


$ 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.


  1. 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.




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



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.





Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *