Tuesday, April 24, 2018

Tip-Top Calculator = A PhoneGap and Progressive Web Apps project

Lately, I haven't had time to update my iOS and Android Apps.  As many of you know, I'm a hobbyist, self-taught programmer/tinker-er with no actual formal training as my full-time job as a doctor keeps me fairly busy as it is.

I've been experimenting this week with a new framework using PhoneGap which is based on Apache Cordova.   The new thing is to create Progressive Web Apps which are apps that are essentially structured as webpages but can be viewed and used offline (caching) and work on a variety of platforms.  Using PhoneGap the app hopefully can be easily ported to a variety of platforms such as iOS and Android and Windows.  This tutorial was extremely helpful.

So here is the first little experiment - a Tipping Calculator with features to round the tip, total or split the check however many ways you need to.   I was able to create this easily in less than a few hours as the Vue.js framework shown in the Tutorial.   I also learned about firebase, which is a google product, where you can host a progressive web app for free.  You can find the app at :

tinyurl.com/tiptopcalc    (caution: it still may be buggy)

Once you load it in iOS in Safari for example, hit the "up arrow" at the bottom of safari and scroll to find "Add to Home Screen".  This will create a nice little icon for the program and the web-"app" is installed.  For chrome browser, load the above URL, and then CTRL+SHIFT+I --> go to the applications tab in the new window that appears (you may have to scroll right) and "add to Homescreen" (it will prompt you if it's okay to "add to shelf", click "add".  Then in Chrome look for the "Apps" icon in the near top left of the browser.   Find the Tip-top calc app and right click it to Create shortcuts.

The nice thing is this will load on chrome, firefox, edge, safari desktop, iOS and android - a whole variety of platforms as a web-app!  In the past, this would have taken countless more hours to host across various platforms.

Here's a iOS screenshot* (using the chrome developer tools window emulator):