Monthly Archives: November 2014

Components, Programming Method, User Interface/Design

App Inventor Tip Calculator version 3

What the App Does

This is a simple app to calculate the tip and total bill at a restaurant – or other service provider where a tip is common place.

This is the third of 5 apps that implement a tip calculator.

  • Version 1 introduced the basic app and the use of error checking to handle user data entry mistakes.
  • Version 2 introduced the Slider user interface component to select the tip amount. Using the Slider, the user selects a tip from 0% to 30%. Since there is no text entry, it is not possible for an incorrect tip value to be entered.
  • Version 3 shows how to re-design the user interface to eliminate user data entry errors. With the new user interface, only correct numeric values may be entered.
  • Version 4 introduces “procedures” to clean up the code in preparation for version 5.
  • Version 5 revises Version 4 to make the calculation of the tip fully automatic plus fixes some minor oddities.

(Note: I revised the order of new features to appear in Version 4 and Version 5!)

The Tip Calculator User Interface

Version 3 eliminates the text box for entering the amount of the bill for service. Why? A text box allows the user to enter any kind of data, not just numbers – which means the user can enter data values that are not numbers.

By changing the program to use a “numeric keypad” interface, only numeric digits may be entered – and we eliminate potential data entry errors.

You can see how this works in this screen capture showing a calculator like keypad for entering the amount of the bill:

TipCalculator3a-ScreenShot

 

To use, just touch the numbers on the keypad. (There are some minor user interface oddities in this version of the program that will be addressed in version 5 – play with the program and see if you can spot minor problems!)

Continue reading App Inventor Tip Calculator version 3 →

General

An Update on the Tip Calculator App, and How to share on social media

I have added buttons after each post on the App Inventor Tutorial so you can quickly share these posts on Facebook, Twitter, Google+ and so on. Please feel free to share! Your friends might like to know how they can create their own Android apps too (unless they are stuck using an iPhone … oh dear!)

An Update on the Tip Calculator App

I said there would be 3 versions and I was going to publish version 3 this evening … but we ate at a restaurant tonight and I used version 3 to calculate the tip and promptly thought of improvements!

So this evening I rewrote Version 3 (whose tutorial will appear shortly) and then created two more versions!

  • Version 3 will introduce a refined user interface that eliminates user data entry errors completely.
  • Version 4 introduces “procedures” to clean up the code in preparation for version 5 and introduces the concept of “refactoring” where we rewrite the code to make it better.
  • Version 5 revises Version 4 to make the calculation of the tip fully automatic.

So scratch those previous references to three Tip Calculator versions – we are going for five!

Tips

Tip: Copy and Paste within the App Inventor Block Editor

This is not obvious but … you can select a group of blocks and press Ctrl-C (on Windows) and then press Ctrl-V (on Windows) to copy and paste your blocks.

Press Ctrl-X (on Windows) to delete  a selected group of blocks.  If you did not mean to delete those blocks, press Ctrl-V and paste them back!

Another trick is to select a block or blocks and then press right-click on your mouse (or Ctrl-click on Mac OS X) and then select Duplicate from the popup menu. Copy and paste should also work on Mac OS X using the standard Mac OS X keystrokes but I have not yet tested it there.

 

Components, User Interface/Design

Tip Calculator App (version 2) for App Inventor

What the App Does

This is a simple app to calculate the tip and total bill at a restaurant – or other service provider where a tip is common place.

This is the second of 3 apps that implement a tip calculator.

  • Version 1 introduced the basic app and the use of error checking to handle user data entry mistakes.
  • Version 2 (this tutorial) introduces the Slider user interface component to select the tip amount. Using the Slider, the user selects a tip from 0% to 30%. Since there is no text entry, it is not possible for an incorrect tip value to be entered.
  • Version 3 will introduce a way to avoid all user data entry errors – by designing the app in such a way that the user can enter only correct values.

The Tip Calculator User Interface

In version 2, we eliminate the text box for tip percentage and replace it with a Slider component and we use a Label component to display the current setting of the Slider. A slider is something you drag with your finger, as shown in this screen shot:

Screenshot_2014-11-05-12-31-57

We set the tip amount by putting our finger on the “thumb” and dragging the thumb left or right. “Thumb” is the name given to the moveable control that appears on the slider.

As we drag the “thumb” control on the slider, the amount of the selected tip is shown – which is 20% in this screen shot.  Using this design with a Slider, it is impossible for someone to enter an invalid tip!

Continue reading Tip Calculator App (version 2) for App Inventor →