Android In-App products testing

Following things should be taken care of

1. .p12 file which is required to create X509Certificate2 should be placed in the same directory and account running IIS pool should have access to that. You can do that, by setting  ApplicationPool -> Advance Settings -> Process model -> Load user profile to True

2. Add user service account email address xxxxx@developer.gserviceaccount.com as administrator user in google play settings. This solves following error 
"The current user has insufficient permissions to perform the requested operation."

3. .APK which is used for testing should be signed with the same store key and should have same version as the latest published APK.

GCMIntentService.java:13: error: package android.support.v4.app does not exist

Reference - http://stackoverflow.com/questions/21141198/package-android-support-v4-app-does-not-exist-android-17

Copy android-support-v4.jar from $ANDROID_HOME/extras/android/support/v4/ to ${project}/platforms/android/libs/ you also have to remove the dependency from gradle script ${project}/platforms/android/project.properties and build.gradle

Ionic - libsass` bindings not found. Try reinstalling `node-sass

In case, you have node version >= 4. Try following to fix the issue

npm uninstall --save-dev gulp-sass

npm install --save-dev gulp-sass@2

Reference - http://stackoverflow.com/questions/28409100/try-reinstalling-node-sass-on-node-0-12

Ionic app - display tweaks for Android versions between 4 and 4.4

Ionic works great for most of the browsers. We faced some issues while testing on Android 4.1.1 and 4.2 webkit browsers. Following are some of the tweaks in html, css which resolved the issues we were facing. Main issue was how to debug and find out the issues as there is very limited support for browser testing in versions < 4.4. This stackoverflow answer helped me to get old Safari version which works on same webkit version that of jelly bean.
http://safari.en.softonic.com/

 http://stackoverflow.com/questions/31073592/how-to-develop-cordova-apps-for-jelly-bean



HTML changes to make it work on android browsers > 4.0.
1. float:left and float:right does not work on some divs. Remove, if not necessary.  - This will fix display errors.
2. button-bar adds some style due to which icon is not shown. (eg. - add button on rates and payments screens) - remove the button bar displays icon.
3. Add display-block for all drop downs (select element). This will help them to show with 100% width, else it will take only space required in select elements.
4. Placeholder is not shown for input type "number" - solution is onfocus:"this.type='number'" onblur="this.type='text'" or make input-type="tel"

Ionic - add custom icons

I am using ionic to develop my next android app. I wanted to use icons which were not provided by ionicons. Following are the steps, which can help to easily add new font icons to your app.

1. Create .svg file using tool like Adobe illustrator
2. Create fonts file using tool like Icomoon and save those files in the www\fonts folder
3. In the file www\css\styles.css , add
@font-face {
    font-family: 'icomoon';
    src:url('../fonts/icomoon.eot');
    src:url('../fonts/icomoon.eot') format('embedded-opentype'),
        url('../fonts/icomoon.woff') format('woff'),
        url('../fonts/icomoon.ttf') format('truetype'),
        url('../fonts/icomoon.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}
.custom-order:before {
  display: inline-block;
  font-family:"icomoon"; /* "Ionicons";*/
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  text-rendering: auto;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

.custom-order:before {
  content: "\e900"; }/* e900 is the icon, I need for orders.*/
 
 4. add custom-order in the tabs.html in place of previous icon.

 ion-tab title="Orders" icon-off="custom-order" icon-on="custom-order"

You can use these fonts similarly across the application.

Ionic disable-enable Back Button action

There is one service provided for enabling-disabling the back button, in ionic cordova app.


https://gist.github.com/mircobabini/689955216a036544d594

.service( 'HardwareBackButtonManager', function($ionicPlatform){
  this.deregister = undefined;

  this.disable = function(){
    this.deregister = $ionicPlatform.registerBackButtonAction(function(e){
 e.preventDefault();
 return false;
    }, 101);
  }

  this.enable = function(){
    if( this.deregister !== undefined ){
      this.deregister();
      this.deregister = undefined;
    }
  }
  return this;
})

// usage
.controller( 'YourController', function( 'HardwareBackButtonManager' ){
 HardwareBackButtonManager.disable();
 
 // re-enable it when you want,
 HardwareBackButtonManager.enable();
})

// usage

.controller( 'YourController', function( 'HardwareBackButtonManager' ){
 HardwareBackButtonManager.disable();
 
 // re-enable it when you want,
 HardwareBackButtonManager.enable();
})

Front end designer help - CodePen

I have started working with Ionic and AngularJS for hybrid mobile app development. When searching for examples and tutorials, most of the examples were shared via CodePen. This is online tool where we can put our code, try out few things and immediately see the results.

It is very easy to work with and fast. You can try it at - CodePen.io