Experience with ionic Create incredible Apps?

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.

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

  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

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

  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

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

  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.

 

 

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.

 

 

 

Helpful?

Leave a Reply

Your email address will not be published. Required fields are marked *