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:

 

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

The Designer View

To create the numeric keypad, we use a TableArrangement layout for 3 columns wide by 4 rows high. Refer to Chapter 4-Layouts in Detail for a tutorial on layouts.

A variety of layouts are used in this user interface including Vertical-, Horizontal– and TableArrangements as shown in the Components list:

Note how each Button component has been renamed to btn1, btn2, btn3 and so forth, where the number at the end of the button name refers to the value shown on the keypad. This naming scheme makes it easy to refer to the correct button inside the Blocks code.

The last two buttons – btnDel and btnDecPoint – refer to the buttons for deleting or backspacing over the previous numeric digit, and for entering a decimal point.

The Blocks Code

For each button, enter blocks that look like the following.  When btn1 is pressed, the Click event occurs. The AmountBilled is treated as a text variable and the digit “1” is joined onto the end of the present value of AmountBilled.  Similar code is added for btn2, btn3 and all the other digit values. Please see Chapters 6 “Introduction to Text” and Chapter 9 “Advanced Text Functions” in the App Inventor Tutorial e-book for more information on the use of text and text processing blocks.

Add additional blocks for the remaining key pad digits.

The “delete” key removes the last digit from the input. But, if there are no digits in the AmountBilled, then obviously, we must not try to delete or remove more!

Because of this, the btnDel event handler checks that the current input has at least one digit – we do this by checking that the length of AmountBilled is greater-or-equal to 1 character in length – if it is 1 or more characters in length, then the text block “segment” function extracts all but the last character.

We start with the current length of the input and subtract 1 from that length. Example: if our input value is “1234”, then the length of this text is 4 characters. We subtract 1 from the length, giving a value of 3. The “segment” text block extracts the characters from position 1 to position 3, thereby throwing away the 4th character (in this example).

If we have deleted everything, then we set AmountBilled to a value of zero.

The btnDecPoint click event adds a decimal point or the period (“.”) into the string so that we can enter fractional values such as “30.45”. To do this, we must add a special check – if the input already contains a decimal point, we must not add another decimal point! If we have entered “30.45” it makes no sense to add another decimal point on to the end (“30.45.” is not a valid number).

A simple way to prevent a duplicate decimal point from being entered is to use the text block “contains“. If AmountBilled does not have a decimal point, then add one – otherwise, do nothing.

Tip – “contains text” tells us where the decimal point is located inside a piece of text. In App Inventor, a non-zero value may be treated as a logical true and a zero value as a logical false. The not operator inverts the value: if “contains text” finds a “.”, it provides the location in the string, which we treat as “true” or “false”. If its “true”, then “not” inverts that to false. Which is the same as saying “if its not true that this contains ‘.'” then add a decimal point to the end of the AmountBilled.

If you do not quite understand logical values (and the world of Boolean algebra), do not worry about that (for now!).

Key Features Shown

• Introduced the use of a numeric key pad to eliminate numeric data entry errors. This shows how a change to the user interface can improve the program by eliminating the possibility of user input errors.
• Implemented the numeric key pad as a series of button blocks, including special handling for the decimal point and the “Del” delete key.
• Check back here for Version 4 and Version 5.

Downloads

• Source code App Inventor “.aia” source file (App Inventor source code files have the filename extension .aia)
• Download the source code to your computer. Then, in App Inventor, go to the Projects menu and select “Import project (.aia) from my computer…”

Please Share on Social Media

Please click on the buttons below this post to share with your friends on Facebook or other social media.

If you are not already following this blog, click on the following links to like on Facebook, add to your Google+ circles or follow on Twitter or in your RSS news reader.