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 a hobbyist, self-taught programmer my full-time keeps me fairly busy as it is.  Enter web-apps - easily deployable, updateable with no need for app store approvals or developer accounts - the app works on any web browser, even in the car!  macOS, iOS, Android, Amazon tablet or Windows PC, it works across any mobile or internet based device.  Just about anywhere: chromeOS and Linux no problem.

Ionic's free creator app is a great place to start builidng a mobile framework.   You can create a free "app" at creator.ionic.io/    Apps are built using AngularJS and Javascript.   You can add a PHP server for backend. 

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 :

TipTopCalc.com

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):



Add to Home Screen Using the "up arrow" in safari



 Several Options are available - Round the tip, or Tip Pre-tax and Tip Rate
 







3 comments: