A Tip Calculator App (version 1) written in App Inventor

November 4, 2014 edwardm 5 Comments

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 first of 3 apps that will implement a tip calculator.

Version 1 (this tutorial) introduces the basic app and demonstrates the use of error checking to handle user data entry mistakes.
Version 2 will introduce an App Inventor feature that makes the app more interactive and reduces data entry errors.
Version 3 will introduce a way to avoid user data entry errors – by designing the app in such a way that the user can enter only correct values.

Check back in the days ahead to see how this app evolves to Version 2 and then Version 3. I think you will learn a lot, have a bit of fun, and end up with an app that might be rather useful!

The Tip Calculator User Interface

In version 1.0, The user interface features two inputs: one for the amount of the bill and one for the tip, as a percentage (such as 20 for 20%), plus a button to calculate the amount of the tip and the total bill including the tip.

A Notifier component displays a warning message when non-numeric values are entered for the amount of the bill and the tip. See “Display Warning and Alert Boxes in App Inventor apps” for a tutorial on the use of message boxes.

The label fields below the button display the result of the calculation.

The arrangement of the user interface controls relies on vertical and horizontal layouts. Please see “Chapter 4 – Layouts in Detail” – available here – to learn how to use the layout features to arrange components in the user interface. The layouts are arranged as shown in this components list:

If layouts are confusing for you, you may just drag and drop controls on to the Viewer any way you wish, but by using the Vertical and Horizontal Arrangement layouts, the controls can be arranged in a more pleasing way and centered on the screen. Your best bet is to learn how to use layouts as they provide a way of creating nice user interfaces that work in both portrait and landscape modes – automatically. Refer to Chapter 4-Layouts in Detail for a tutorial on layouts.

The labels used to display the calculation result are shown in 18 point font size. To set the font size, select the label in the Viewer and then enter a FontSize value of 18 (or other size – your choice) as shown here:

For the text box data entry, use the Hint property to enter an example data entry, as shown below:

The Blocks Code

This tutorial introduces data error checking – specifically, if the user enters non-numeric values for the bill or the tip amount, then a message box is displayed. The blocks code, below, is too large to display full size. However, you can view an enlarged version by clicking on the image. Depending on your Internet browser, you should be able to click a second time to zoom in on the image.

How This Works

An if-then-else block is used – together with the is a number? block – to ensure that only valid numbers are processed by the program. Note that there are two if-then else blocks – the first checks that the entered bill amount is a numeric value, and the second checks that the entered tip value is numeric. If either data entry contains non-numeric characters, a message is displayed on the screen about the problem.

The calculation of the tip is straight forward. The percent value (such as 20 for 20%) is converted to a decimal fraction – 20 becomes .20 – by dividing the percent (20) by 100. The bill amount is then multiplied by the tip percentage. For example, if the bill is 30 and the tip is 20 (%), the tip is 30 x 0.2 or 6. (I am leaving off $ signs to make this tip calculator generic for any currency.)

The total bill, including tip, is just the sum of the calculated tip amount and the original bill.

Key Features Shown

Use of is a number?
Use of error checking and processing
Use of layouts

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…”

Components, Programming Method

Sensors: Using the Accelerometer to detect motion

November 3, 2014 edwardm 4 Comments

This tutorial introduces the accelerometer – at a high level – as a tool to detect the phone being shaken. You can use this feature as another kind of user input to your app – for example, make a game where shaking the phone resets the game play or starts a new game.

An accelerometer is a hardware device that detects and measures motion, typically in three axes: X, Y and Z. For example, if the phone is moved left or right, the acceleration changes in the X axis and the accelerometer returns a value indicating the X axis movement.

Smart phones – and many modern devices – have special hardware accelerometer components built in. The orientation sensor, described previously, is actually a software sensor that uses the hardware accelerometer but converts acceleration into orientation values.

The purpose of this demonstration app is to show one example of using the accelerometer.

The user interface is simple – it displays a Start button and a Stop button, and the status of the accelerometer.

Continue reading Sensors: Using the Accelerometer to detect motion →

Components, Programming Method, Video

Sensors: How to use the Orientation Sensor

October 29, 2014 edwardm 3 Comments

Smart phones and tablets contain several kinds of “sensors” to sense information about their environment. For example, an accelerometer provides information about movement of the phone (or tablet) – letting us know the speed and direction of travel in x, y and z coordinates (three dimensions).

The orientation sensor tells us if the phone is tilted to the left or right, or up or down (or flipped over). App Inventor provides a simple to use interface to the orientation sensor. We can use this to control a sprite or ball on the screen – by tilting our phone, we can make graphic items move around on the screen!

Sample source code that you can download is at the bottom of this post!

After going through this tutorial, you now know enough to create your own interactive smart phone game!

Review

Before we get started, please review these earlier tutorials:

Continue reading Sensors: How to use the Orientation Sensor →

History

Some history behind App Inventor

October 23, 2014 edwardm 1 Comment

The history of App Inventor extends, in part, back to the 1980s, at least, which may sound odd.

App Inventor is a project, today, of the Massachusetts Institute of Technology but is based on the App Inventor project that was originally started by Google. Google’s project, turn, was based on an MIT Master’s thesis by Ricarose Roque.

The graphic building blocks approach to assembling program functionality was itself inspired by Scratch. Scratch is a simple programming system used for teaching programming concepts (especially to those age 8 to 16). Like App Inventor, Scratch has taken on a life of its own and is also hosted at MIT and runs in your Internet browser (plus a download version that runs on your own computer, is available). If you are interested, you can learn and use Scratch at scratch.mit.edu. You can learn about the history and philosophy of Scratch in this Communications of the ACM article. (ACM is a professional society for computer scientists and publishes many journals in the field of computer science.)

Continue reading Some history behind App Inventor →

Components, Programming Method

Controlling the sprite animation with your finger on the screen

October 21, 2014 edwardm

In the prior tutorial, we created a sprite-based bouncing animation – which is surprisingly easy to do in App Inventor.

But how might we make the animation interactive? Such as touching the bouncing object with a finger and flinging it (throwing it) off in another direction? In other words, as the object travels around the screen, we would like to touch it with our finger and then “drag” the object off in a new direction.

To implement this, just handle the Image Sprite’s “Flung” event, like this:

App Inventor (and the Android OS) handle the details of sensing our finger on the screen and translating that into some values we can use in our app.

When the “Flung” event occurs, App Inventor passes along several values – including the (x,y) coordinate values at the time we touch the object, the speed and heading in which we’ve dragged the object with our finger, and the x and y velocity. When this event is detected, our program sets the sprite’s current heading and speed to the values determined by our finger drag across the screen.

Click on the “speed” and “heading” parameters in the Flung event to find the “get heading” and “get speed” values.

I multiplied the speed parameter by 3 as the values returned by Flung were small and resulted in slow movement of the sprite. You can set this value to a smaller or larger value based on your preference.

Here’s the app screen, when in use:

As the sprite moves across the screen, touch it with your finger and “fling” it off in a new direction. (You may have to experiment for a bit in terms of how you do your “flings”).

Stopping the Sprite When Touched

If the sprite is moving quickly, it moves out from under your finger before you can take action. To fix this, we sense the finger touching the sprite and stop the sprite while it is being touched.

We implement the “TouchDown” event for ImageSprite1. The moment our finger touches the sprite, the sprite is stopped by setting its Speed property to zero. Now we can casually “fling” the sprite in a new direction. When we stop touching the sprite, the “TouchUp” event occurs – here we restore the original speed so that the sprite resumes moving. Of course, the “Flung” event occurs next and sets a new speed for the sprite based on our finger movement.

Update: Delete – do not use – the .Touchup block, shown below. It is not needed. Instead, when you lift your finger up as part of a “flung” operation, the flung event handler will set the sprite’s speed proportional to your finger movement. Thus, it is not necessary to restore the saved speed value.

Tips

What type of App Inventor tutorials do you prefer?

October 20, 2014 edwardm

I have created an online poll – see side bar at right of this post – to learn about what type of tutorials you prefer? Please click on your choice —> at right!

Do you like printed or text examples, like these blog posts, to read?
Do you like having or using online video tutorials?
Would your prefer both?

Help me know what works best for the most readers by answering the simple poll at right – you do not need to log in or go through extra hurdles. Just click on one of the selections.

Thank you!

Coldstreams Learn 2 Code with MIT App Inventor