Submitted My Day To-Do’s  first Android app for review to the Google Play Store and it’s not a native Android app but a hybrid app built using the Ionic framework. This is the first Hybrid app that I have worked on at My Day To-Do and as it goes with all first time experiences, there were some lessons learned along  the way. In this post, I will highlight some of those problems and share my solutions to them. I hope this post, saves some developers some time.

App in question

The app submitted to the Play Store for review was the recently released iOS app, Numbers Game. It’s a simple app in which the goal is to perform arithmetic calculations without using a calculator. Each game consists of a randomly generated question that the user needs to solve by writing their answer. The app keeps track of how long it takes for the user to answer a question, so at any given time, it can show the user the problems they solved along with the time they took to solve it.

Javascript Array.sort()

One of the first problems, I ran into was when building the page to show users past game results. To give users an idea of their progress, to get a sense of whether they have improved or regressed, we decided to show them past game outcomes starting with the last game played. Technically speaking, it was a sorting problem i.e sort each game result in descending order from the datetime played.

As an experienced Javascript programmer, my first solution at sorting this was to write a typical Javascript sorting function.

let array = this.pastresults.sort(function(obj, obj2) {
    if(obj2.solvedOn.getTime() > obj1.solvedOn.getTime()) {
        return 1;
    } else {
        return -1; 
    }
    return 0;
});

But I kept getting the error,

Property ‘solvedOn’ does not exist on type ‘UserSolution[]’.ts(2339)

I was so confused at first? Then after reading a few things, I realised, there are no types in Javascript but they are in Typescript. So, I just added types to obj1 and obj2, hence the correct  function looks like this (have a look at any),

let array = this.pastresults.sort(function(obj:any, obj2:any) {
    if(obj2.solvedOn.getTime() > obj1.solvedOn.getTime()) {
        return 1;
    } else {
        return -1; 
    }
    return 0;
});

Like the blog? Subscribe for updates

Data not showing up in template

Yeah….I am almost embarrassed to mention this here! I am not sure if this qualifies as an issue because it’s really about browser/device inconsistency coupled with forgetting that Angular Pipes exist . Once again, we are talking about the Past Game Outcomes part of the app. As mentioned, I wanted to show the game the user played, along with the time they played it. This problem came to be due to the way in which I was displaying the time they played the game. I was doing something like this in the template

<ion-card-subtitle>
    Solved on: {{usersolution.solvedOn.getDay()}} {{usersolution.solvedOn.getMonth()}} {{usersolution.solvedOn.getFullYear()}}
</ion-card-subtitle>

and that worked fine in the browser. However when deployed to an Android device, the past results page would be empty.  My first instinct was to do an online search, which brought me to this question in the Ionic forums.

I didn’t quite get a solution on that forum, so I decided to spend a few minutes and just think about what could be the problem here. I soon realised that the solution may just be about something as simple as using an Angular Pipe to solve this. So… I changed the above code to this

<ion-card-subtitle>
    Solved on: {{usersolution.solvedOn | date: 'medium'}}
</ion-card-subtitle>

and Viola!!! the problem was gone. Angular Pipes are great!

Like the blog? Subscribe for updates

AdMob plugin issues & Android build

This has to be one of the worst problems encountered while preparing a build to submit to the Play Store. It all started with the desire to display Ads in the app. The process is so easy and straight forward for iOS apps, so how hard could it be here?

Well, the first hurdle here was, as it is with all open-source development, there’s a choice between 3 Cordova plugins for this. AdMob Free, AdMob Plus and AdMob Pro. Pro is a paid plugin so that was disqualified at this stage. While choosing between Plus and Free, the docs say AdMob Plus is a successor to AdMob Free and encouraged using Plus newer apps, so I thought hmm why not? However, I soon realised that there are more tutorials and docs out there to support AdMob Free, hence I uninstalled AdMob Plus  and added AdMob Free. This introduced a series of problems, with increasing levels of difficulty.

I will only mention a couple of them here. The first issue was

Type ‘AdMobFreeOriginal’ is not assignable to type ‘Provider’.
Type ‘AdMobFreeOriginal’ is missing the following properties from type ‘FactoryProvider’: provide, useFactoryts(2322)

This was a simple one and the solution is just this,

import { PluginName} from '@ionic-native/pluginName/ngx';

The final problem was the mother of all problems and it’s the sort of problem that may lead to sleepless nights. It’s one of those where you know the solution is simple or there’s some configuration issue and you don’t give up and keep at it.

The issue was, when doing the Android build, I kept seeing the error

duplicated with element declared at AndroidManifest.xml

My first thought was that it’s something to do with the fact that I had installed and uninstalled AdMob Plus followed by installing AdMob Free. So, on that impulse, I did a grep search for AdMob Plus being mentioned anywhere in the source code and removed all mention of AdMob Plus. Turns out, even after uninstalling AdMob Plus via npm uninstall, it was mentioned in a number of places. After that, I did a build and again, the same error. I spent a few hours on this, until I decided to go nuclear i.e. remove everything and install it again. I rm -rf plugins, node-modules folder etc and installed everything back and it works. I am not too proud of this because it’s not a solution, it’s a “hack” if the problem presents itself again, this “hack” may or may not work.

But anyway there you have it, some of the problems encountered while building and submitting the first app to the Play Store.

As usual, if you find any of my posts useful support us by  buying or even trying one of our products and leave us a review on the app store.

‎Snap! I was there
‎Snap! I was there
Developer: Bhuman Soni
Price: $3.99
  • ‎Snap! I was there Screenshot
  • ‎Snap! I was there Screenshot
  • ‎Snap! I was there Screenshot
  • ‎Snap! I was there Screenshot
  • ‎Snap! I was there Screenshot
  • ‎Snap! I was there Screenshot
  • ‎Snap! I was there Screenshot
  • ‎Snap! I was there Screenshot

Leave a Reply

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