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

Fast prototyping tool - JustInMind (JIM)

I recently had to create quick prototypes from scratch and was looking for some tool. I found out there are many, tools available which can import your images and help you to work with those.

JustInMind is great tool which also provides data masters for prototyping with sample data. It also creates views automatically based on the data structure. It supports web, mobile etc. Overall, I am quite impressed with the initial week with JustInMind.
site url -  justinmind.com


It is free for evaluation for 1 month and thereafter have two versions - Free and other paid. I am currently in evaluation period and will decide about it later on.

Web API controllers with multiple get methods

Add following method after initializing Config with Azure.

 HttpConfiguration config = ServiceConfig.Initialize(new ConfigBuilder(options));

config.Routes.MapHttpRoute( 
   name: "ActionApi", 
   routeTemplate: "api/{controller}/{action}/{id}", 
   defaults: new { id = RouteParameter.Optional } 
);

Now, you can have multiple methods like following in the controller. 

ActionName attribute should be different for each method.

[HttpGet]
        [ActionName("GetVendorCustomerView")]
        public HttpResponseMessage Get(String vendorID,String CustomerID)

 [HttpGet] 

[ActionName("GetVendorCustomerViewDetails")]
public HttpResponseMessage GetDetails(String vendorID, String CustomerID)

Now, these can be accessed using given Action name.

Thoughts

It's easy to change the religion. I just have to stop non-believing one god and start non-believing other one :-)

It's ok if you don't know about law but make sure you understand Justice.

God has created me as an atheist. Can someone help him to correct his mistake ?

Don't make mistake of throwing us in hell, with our smile, we will make it better than heaven.

Add google analytics to Ionic

Main purpose is to add exception handling to ionic mobile app.Once exceptions are cached at global level, we need some service, where we can send exceptions. While exploring some of the options, I found some implementations of google analytics with AngularJS.

Following google analytics plugin is to be used.

https://github.com/danwilson/google-analytics-plugin/

Need to add following code to IONIC ready function,
analytics.startTrackerWithId('UA-XXXX-YY') where UA-XXXX-YY is your Google Analytics Mobile App property.
Note:- You can get Mobile app property by registering for Google analytic services at - https://www.google.co.in/analytics/

$ionicPlatform.ready(function() {

            if(typeof analytics !== undefined) {

                analytics.startTrackerWithId("UA-XXXXXXXX-XX");

            } else {

                console.log("Google Analytics Unavailable");

            }

        });

Once done, as per documentation on github as on 5-Jun-2015, following methods are supported.

To track a Screen (PageView):

window.analytics.trackView('Screen Title')
To track an Event:

window.analytics.trackEvent('Category', 'Action', 'Label', Value) Label and Value are optional, Value is numeric
To track an Exception:

window.analytics.trackException('Description', Fatal) where Fatal is boolean
To track User Timing (App Speed):

window.analytics.trackTiming('Category', IntervalInMilliseconds, 'Variable', 'Label') where IntervalInMilliseconds is numeric
To add a Transaction (Ecommerce)

window.analytics.addTransaction('ID', 'Affiliation', Revenue, Tax, Shipping, 'Currency Code') where Revenue, Tax, and Shipping are numeric
To add a Transaction Item (Ecommerce)

window.analytics.addTransactionItem('ID', 'Name', 'SKU', 'Category', Price, Quantity, 'Currency Code') where Price and Quantity are numeric
To add a Custom Dimension

window.analytics.addCustomDimension('Key', 'Value', success, error)
To set a UserId:

window.analytics.setUserId('my-user-id')
To enable verbose logging:

window.analytics.debugMode()