Tag Archives: app inventor

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 →

Components, Programming Method

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

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.

TipCalculatorUI

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:

TipCalculatorComponents

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:

TipCalculatorPropertiesLabel

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

TipCalculatorPropertiesTxtBox

 

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.

TipCalculatorBlocks

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

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.

AccelUI

 

Continue reading Sensors: Using the Accelerometer to detect motion →

Components, Programming Method, Video

Sensors: How to use the Orientation Sensor

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 →

Components, Tips

Using TinyDB in App Inventor

33 Comments

(This post was completely rewritten and updated on October 30, 2015)

What is TinyDB?

TinyDB is a simple “database” that stores data on your phone or tablet. Unlike program variables that go away when your app is finished running or your phone is re-set, values stored in TinyDB remain on your phone for use the next time your app is run.

About Memory on your Phone or Tablet

Your smart phone or tablet typically has two primary types of memory: RAM and FLASH memory.

RAM stands for “random access memory” – but today we mostly think of RAM as memory that can be accessed very fast (as compared to Flash or hard drive memory storage). RAM retains values as long as power is applied to the RAM circuity. Once we turn off the power, the values stored in RAM are lost. (In some applications, extra batteries are used to continuously provide power to RAM even when the “normal” power is turned off.)

Flash memory retains values when the power is turned off. But access to Flash RAM is not as fast as access to conventional RAM memory.

Why is it called “Flash”?  There was an early version of memory technology where the memory was erased by literally flashing it with ultraviolet light. However the inventor of Flash RAM chose the name “Flash” for different reasons. Modern Flash RAM is read, written and erased electronically.

App Inventor variables are stored in RAM memory – and the content of RAM is erased or reset whenever the power is turned off. TinyDB, on the other hand, stores values in FLASH RAM, where the values remain even when the power is turned off.

Using TinyDB

TinyDB provides a simple way to store and retrieve data efficiently and to store the data in long-term storage.  TinyDB is based on the concept of a “tag” to identify the stored data, and the data value. Think of a “tag” as like using your name as your identification to look up your address:

Tag value: Martin

Value: 123 Main St, Anytown, USA

or

Tag value: Alexa

Value: 321 Other St, Someplace, USA

TinyDB uses the “tag” (such as Alexa) to quickly locate the corresponding value. Even if you have 100 names and addresses stored in TinyDB, TinyDB can  look up the “tag” quickly and use the tag to find the corresponding value. We do not need to know how TinyDB does its look up so fast – it just does it [see Footnote 1].

In most database programs, the “tag” is known as a “key” or “key value”. App Inventor uses the name “tag” in place of “key”. As I am used to the name “key”, I tend to use “key” were I should have used “tag” in App Inventor! You will see this is the sample program, below!

To learn how to put TinyDB in operation, we construct a very simple app, described below.

Continue reading Using TinyDB in App Inventor →