The Idea

I had just started learning the Ionic Framework for cross platform mobile app development by building demo apps to learn how certain native features work and/or reading Josh Morony’s tutorials when I found this xkcd on a reddit post and it gave me an idea.
What better way to learn a framework than to dive in and build a project?

Development Begins

So I create a new Ionic 2 project and decide to go with a tabs layout and start with the GPS features which I believe (incorrectly) would be the hardest part of the app.

Few hours into the project and the geolocation features where the easiest to add.
Lucky for me my development machine (Macbook Air) has a GPS receiver and so I’m able to test the location features directly through the browser.

I also manage to add typescript functions to calculate distance between two gps coordinates with Haversine’s formula and test the first iteration of the app on a local device.
On noticing the wildly inaccurate distances I realized that GPS is horribly inaccurate within a building , enough to locate the house but with rapidly changing values, off by at least 20-30 meters.

Now that the GPS functionality was added I tried to think of a way to transfer the GPS location from one app user to another, without them having to manually copy paste any data.
I could make a backend server with Rails and connect it to the app, but that would incur hosting costs.

So a few days later I get the idea to use either deep links or barcodes to allow transferring the data between users, and also encrypt the data so that the average user does not decode the barcode and find the location.

Development was paused for the next week and when I resumed I realized that the Ionic Native barcode scanner as well as cordova barcode scanner allow scanning from camera only not the gallery, guess I hadn’t thought this through.

After trying on many solutions, involving plugins not included into Ionic Native I finally got it working using the the port of zxing with the html canvas element and getting the images with cordova imagepicker.

Now that I could finally scan barcodes from gallery within the Ionic 2 app, I had to just implement the media sharing feature and I could then relax and focus on the UI, but that took a bit longer than expected.

The Canvas.decode function nested inside the ImagePicker kept on failing and multiple solutions to get it working failed, until I finally found out the issue:
the scope of this was changed and that’s why Canvas couldn’t be used.
So I assign this to another variable and manage to get it working again. 

1
2
3
4
ImagePicker.getPictures(options).then((results) => {
  for (let i = 0; i < results.length; i++) {
    let tempObj= this;
    tempObj.convertImgToBase64URL(results,function(base64Img){

(Hacky! :P, will fix this later)

Android 6.x.x issues with Ionic 2

So all this while I was using the browser to test the non-native stuff and the spare device to test the native features, the app worked perfectly on that phone (android 4) and I assumed it would work on later versions as well.

But I had some issues with the runtime permissions on Android 6.x.x.
Installing Ionic native diagnostic plugin raised some ‘Unmet Peer Dependency Warning’, so I decided to give the cordova diagnostic plugin a try instead which worked like a charm.

Release

Designed an icon, splashscreen and created app intro slides with photoshop.
Tested the app on an emulator running Android 6 and then pushed it to the play store.
A few screens: