c Cpsc 110-08 -- Spring 2011 -- Timer

CPSC 110-08: Computing on Mobile Phones
One Minute Timer

A One Minute Timer

This tutorial teaches you how to use App Inventor's Clock component to create a simple alarm clock.

Snapshot

LayoutScreenshot
Blocks

The User Interface

The user interface for this app uses the following visible components. Follow the layout provided in the snapshot.

Drag these items onto the Viewer from the Palette. Place the + and - Buttons and the TextBox inside the HorizontalArrangement component as shown in the snapshot above. Then place the Start and Stop buttons below the HorizontalArrangement.

It's a good idea to rename some of these component so they will be easier to keep straight in the Blocks Editor. Use the following names (no internal spaces):

Adjust the Properties of the visible components as follows:

Invisible Components

This app uses two invisible components, a Clock (in the Basic drawer), and a Sound in the Media drawer. Drag each of these onto the Viewer.

Uncheck the TimerEnabled for the Clock.

For the Sound component, it will be necessary to do upload a sound effect:

When you're done with the user interface, it should look like the picture shown here (click to enlarge).


The Blocks Editor

We will use the Blocks Editor to program the behavior of our app. Click on the Open the Blocks Editor button (top right of the appinventor page) and click approval on the download permission.

Plug your phone into your laptop using the USB Cable and after a second or two, click on the the Connect to Device button in the Blocks Editor. You should see your phone listed there. Select it.

After a few moments, you should see the app starting up on your phone. It should look like this (click to enlarge):

Programming ButtonPlus

When the ButtonPlus button is clicked we want the number in the TextBox to increase by one. Here's how to write this piece of code:

When you are finished, your When ButtonPlus.Clicked block should look like this:

Now try clicking this button on your phone. Every time you click, the number in the text box should increase by 1.

Hands-on Exercises

Download the app's sourcecode and import it into App Inventor as one of your projects. Here's a couple of revisions you could try.

  1. Prettify it. Add some color and think about other ways to improve the app's appearance.

  2. Improve the sound effects. Add a tick/tock sound to the countdown.

  3. Improve the logic. Make the + button reset the timer to 0 when it exceeds 60 and make the - button reset it to 60 when it goes below 0.

  4. Add graphics and animation. For example, add a colored ball and change the color each second.

    Brainstorm: Propose a change and we'll try to do it together.