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

 

<span class="nv">$ </span>npm install -g cordova ionic

<span class="nv">$ </span>ionic start myApp tabs

or:

<code>$ ionic start myApp blank or: $ ionic start myApp sidemenu 
<span class="nv">$ </span><span class="nb">cd </span>myApp
<span class="nv">$ </span>ionic platform add ios

 

<span class="nv">and/or:</span>

<span class="nv">
$ </span>ionic platform add android

 

Build and run it on the emulator:

<span class="nv">$ </span>ionic build ios
<span class="nv">$ </span>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 
    <span class="pln">npm install </span><span class="pun">-</span><span class="pln">g n</span>

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

2. Downgrade with n 4.2.2 or whatever version you like

<span class="typ">Usage</span><span class="pun">:</span><span class="pln">
n                            </span><span class="com"># Output versions installed</span><span class="pln">
n latest                     </span><span class="com"># Install or activate the latest node release</span><span class="pln">
n stable                     </span><span class="com"># Install or activate the latest stable node release</span><span class="pln">
n </span><span class="pun"><</span><span class="pln">version</span><span class="pun">></span>                  <span class="com"># Install node <version></span><span class="pln">
n use </span><span class="pun"><</span><span class="pln">version</span><span class="pun">></span> <span class="pun">[</span><span class="pln">args </span><span class="pun">...]</span>   <span class="com"># Execute node <version> with [args ...]</span><span class="pln">
n bin </span><span class="pun"><</span><span class="pln">version</span><span class="pun">></span>              <span class="com"># Output bin path for <version></span><span class="pln">
n rm </span><span class="pun"><</span><span class="pln">version </span><span class="pun">...></span>           <span class="com"># Remove the given version(s)</span><span class="pln">
n </span><span class="pun">--</span><span class="pln">latest                   </span><span class="com"># Output the latest node version available</span><span class="pln">
n </span><span class="pun">--</span><span class="pln">stable                   </span><span class="com"># Output the latest stable node version available</span><span class="pln">
n ls                         </span><span class="com"># Output the versions of node available</span>

 

On Windows use nvmw

<span class="pln">npm install </span><span class="pun">-</span><span class="pln">g nvmw          </span><span class="com"># Install nvmw globally</span><span class="pln">
nvmw install v0</span><span class="pun">.</span><span class="lit">10.33</span>        <span class="com"># Install a specific version number</span><span class="pln">
nvmw use v0</span><span class="pun">.</span><span class="lit">10.33</span>            <span class="com"># Use the specific version</span>

 

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

<span class="kwd">function</span> <span class="typ">Inventory</span><span class="pun">(</span><span class="pln">$http</span><span class="pun">,</span><span class="pln"> url</span><span class="pun">,</span><span class="pln"> project_id</span><span class="pun">)</span> <span class="pun">{</span>
     <span class="com">/** The public method for getting the project price **/</span>
     <span class="kwd">this</span><span class="pun">.</span><span class="pln">price </span><span class="pun">=</span> <span class="kwd">function</span><span class="pun">(</span><span class="pln">callback</span><span class="pun">)</span> <span class="pun">{</span><span class="pln">
          $http</span><span class="pun">.</span><span class="kwd">get</span><span class="pun">(</span><span class="pln">url</span><span class="pun">+</span><span class="str">"?project="</span><span class="pun">+</span><span class="pln">project_id</span><span class="pun">)</span>
                <span class="pun">.</span><span class="pln">success</span><span class="pun">(</span><span class="kwd">function</span><span class="pun">(</span><span class="pln">value</span><span class="pun">)</span> <span class="pun">{</span><span class="pln">
                   callback</span><span class="pun">(</span><span class="pln">value</span><span class="pun">);</span>
                <span class="pun">});</span>
     <span class="pun">};</span>
<span class="pun">};</span><span class="pln">

angular</span><span class="pun">.</span><span class="pln">factory</span><span class="pun">(</span><span class="str">'InventoryFactory'</span><span class="pun">,[</span>
   <span class="str">'$http'</span><span class="pun">,</span>
   <span class="com">/** This is the factory method that Angular will execute only ONCE **/</span>
   <span class="kwd">function</span> <span class="typ">InventoryFactory</span><span class="pun">(</span><span class="pln">$http</span><span class="pun">)</span> <span class="pun">{</span>
       <span class="com">/** This is the function that will be injected into the directive, and called multiple times by the programmer **/</span>
       <span class="kwd">return</span> <span class="kwd">function</span><span class="pun">(</span><span class="pln">url</span><span class="pun">,</span><span class="pln"> product_id</span><span class="pun">)</span> <span class="pun">{</span>
           <span class="com">/** this is the new object that will be created and used by the programmer **/</span>
           <span class="kwd">return</span> <span class="kwd">new</span> <span class="typ">Inventory</span><span class="pun">(</span><span class="pln">$http</span><span class="pun">,</span><span class="pln"> url</span><span class="pun">,</span><span class="pln"> product_id</span><span class="pun">);</span>
       <span class="pun">};</span>
   <span class="pun">}]);</span><span class="pln">

angular</span><span class="pun">.</span><span class="pln">directive</span><span class="pun">(</span><span class="str">'inventoryStatus'</span><span class="pun">,[</span><span class="str">'InventoryFactory'</span><span class="pun">,</span><span class="kwd">function</span><span class="pun">(</span><span class="typ">InventoryFactory</span><span class="pun">)</span> <span class="pun">{</span>
     <span class="kwd">return</span> <span class="pun">{</span><span class="pln">
        link</span><span class="pun">:</span> <span class="kwd">function</span><span class="pun">(</span><span class="pln">$scope</span><span class="pun">,</span><span class="pln">$el</span><span class="pun">,</span><span class="pln">$attr</span><span class="pun">)</span> <span class="pun">{</span>
             <span class="kwd">var</span><span class="pln"> inventory </span><span class="pun">=</span> <span class="typ">InventoryFactory</span><span class="pun">(</span><span class="str">'/api/projects'</span><span class="pun">,</span><span class="pln">$scope</span><span class="pun">.</span><span class="pln">project_id</span><span class="pun">);</span><span class="pln">
             inventory</span><span class="pun">.</span><span class="pln">price</span><span class="pun">(</span><span class="kwd">function</span><span class="pun">(</span><span class="pln">value</span><span class="pun">){</span><span class="pln">
                $scope</span><span class="pun">.</span><span class="pln">price </span><span class="pun">=</span><span class="pln"> value</span><span class="pun">;</span>
             <span class="pun">});</span>
        <span class="pun">}</span>
     <span class="pun">}</span>
<span class="pun">}]);</span>

 

Angular JS

 

Call function of another factory

(Pseudo Code)

<span class="pln">angular</span><span class="pun">.</span><span class="kwd">module</span><span class="pun">(</span><span class="str">'myService'</span><span class="pun">,</span> <span class="pun">[</span><span class="str">'ngResource'</span><span class="pun">])</span>
  <strong><span class="pun">.</span><span class="pln">factory</span><span class="pun">(</span><span class="str">'test2'</span></strong><span class="pun">,</span> <span class="pun">(</span><span class="pln">$window</span><span class="pun">)</span> <span class="pun">-></span>
    <span class="kwd">return</span> <span class="pun">{</span><span class="pln">
      foobar</span><span class="pun">:</span> <span class="pun">()</span> <span class="pun">-></span>
        <span class="typ">Common</span><span class="pun">.</span><span class="pln">test</span><span class="pun">()</span>
    <span class="pun">}</span>
  <span class="pun">)</span>  
  <strong><span class="pun">.</span><span class="pln">factory</span><span class="pun">(</span><span class="str">'Common'</span></strong><span class="pun">,</span> <span class="pun">(</span><span class="pln">$window</span><span class="pun">)</span> <span class="pun">-></span>
    <span class="kwd">return</span> <span class="pun">{</span><span class="pln">
      test</span><span class="pun">:</span> <span class="pun">()</span> <span class="pun">-></span><span class="pln">
        alert </span><span class="str">'testing'</span>
    <span class="pun">}</span>
  <span class="pun">)</span>

Just inject it:

<strong><span class="pun">.</span><span class="pln">factory</span><span class="pun">(</span><span class="str">'test2'</span></strong><span class="pun">,</span> <span class="kwd">function</span> <span class="pun">(</span><strong><span class="typ">Common</span></strong><span class="pun">)</span> <span class="pun">{</span>
  <span class="kwd">return</span> <span class="pun">{</span><span class="pln">
    foobar</span><span class="pun">:</span> <span class="kwd">function</span> <span class="pun">()</span> <span class="pun">{</span>
     <strong> <span class="typ">Common</span><span class="pun">.</span><span class="pln">test</span><span class="pun">();  // call test() from Common factory</span></strong>
    <span class="pun">}</span>
  <span class="pun">};</span>
<span class="pun">})</span>

 

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.

 

 

 

Share it on:
Twitter
Facebook
Google
Linkedin
Pinterest
Tumblr
Diggit
Buffer
Flattr
Reddit
Stumbleupon
Vk
Yummly
Email
Print

See also:

TOC+ Plugin Extension Request WordPress Plugin TOC+ with sub menus (Table Of Contents Plus) Cocoa: Can’t find SaveDocument in First Responder for NSDocument? Swift: How can I use mutual dependencies, forward declarations?
Leave a Comment