Year 8 · Summer 2

Raid: App Forge · Lesson 2 of 5

App Inventor: screens and components

PracticalTopic 14 Programming further

Year 8 · Raid: App Forge · Lesson 2 of 5

You will learn to

  • Identify the Designer and the Blocks editor in App Inventor, and what each one is for.
  • Create a screen with a label, a text box and a button.
  • Change a component's properties, like its text, size and colour.
  • Use the AI Companion app or the emulator to run your app.

Year 8 · Raid: App Forge · Lesson 2 of 5

Success criteria

You have got it when you can say:

  • I can drag a label, a text box and a button onto the screen.
  • I can change the text, font size and colour of a component.
  • I can give each component a clear name, like btnSay.
  • I can run my app on a phone or on the emulator.

Year 8 · Raid: App Forge · Lesson 2 of 5

Retrieval starter

Questions from before. Write your answers, then show them.

  1. Last lesson

    A variable made inside a function is…

    A Saved to a fileB Local: only exists inside it while it runsC Global: usable anywhere

    B. Local: only exists inside it while it runs

  2. Last unit

    A linear search on 50 unsorted items, looking for something that is not there, makes…

    A 25 checksB 50 checksC 1 check

    B. 50 checks

  3. Earlier this year

    Which controls how a page looks?

    A HTMLB CSSC DNS

    B. CSS

Year 8 · Raid: App Forge · Lesson 2 of 5

Key words (1 of 2)

List
One name holding many values in order. Also called an array.
Index
An item's position in a list, counting from 0.
Subroutine
A named block of code you can call when needed.
Function
A subroutine that returns a value.

Year 8 · Raid: App Forge · Lesson 2 of 5

Key words (2 of 2)

Parameter
A placeholder in a subroutine for a value passed in.
Validation
Checking input is reasonable before using it.
Boundary data
Test data at the very edge of what's allowed.

The explanation · step 1 of 4 · part 1 of 2

Two halves: Designer and Blocks

MIT App Inventor is a free website for making phone apps. You build the code with blocks, like in Scratch.

It has two halves. Switch between them with the buttons at the top right.

HalfWhat you do thereLike in Scratch
DesignerBuild the screen. Drag on buttons, labels and pictures. Set how they look.Choosing sprites and costumes
BlocksSnap blocks together to say what the app does.The code area

The explanation · step 1 of 4 · part 2 of 2

Two halves: Designer and Blocks (continued)

★Remember

Designer = what the app looks like. Blocks = what the app does.

The explanation · step 2 of 4 · part 1 of 2

Components and properties

A component is one part of the app, like a button or a label.

A property is one setting of a component, like its text or its colour.

ComponentWhat it doesUseful properties
LabelShows text that the user cannot changeText, FontSize, TextColor
TextBoxA box the user can type inHint, Text
ButtonSomething to pressText, BackgroundColor, Width
ImageShows a picturePicture, Width, Height

The explanation · step 2 of 4 · part 2 of 2

Components and properties (continued)

  1. Find a component in the Palette on the left.
  2. Drag it onto the Viewer, the phone in the middle.
  3. Click it. Change its settings in the Properties panel on the right.
e.g.Example

A Scratch sprite has a size and a direction. An App Inventor button has a text and a colour. Both are properties.

The explanation · step 3 of 4 · part 1 of 2

Give every component a clear name

App Inventor names things Button1, Label1 and TextBox1. With ten buttons, that gets confusing.

Click Rename under the Components panel. Use a short tag for the type, then the job.

Name it getsBetter name
Button1btnSay
Label1lblGreeting
TextBox1txtName

The explanation · step 3 of 4 · part 2 of 2

Give every component a clear name (continued)

?Why?

Why bother?

In the Blocks editor you see only the names. when btnSay.Click tells you what it does. when Button3.Click does not.

The explanation · step 4 of 4 · part 1 of 2

Test it on a phone

  1. Install the free MIT AI2 Companion app on a phone or tablet.
  2. In App Inventor, open the Connect menu and choose AI Companion. A QR code appears.
  3. Scan the code with the Companion app. Your app opens on the phone.
  4. Change something in the Designer. The phone updates by itself.

The explanation · step 4 of 4 · part 2 of 2

Test it on a phone (continued)

!Watch out

The phone and the computer must be on the same Wi-Fi network. If that does not work at school, use the Emulator.

The Emulator is a pretend phone on the computer screen. It needs a helper program called aiStarter installed first.

Year 8 · Raid: App Forge · Lesson 2 of 5

Worked example (1 of 2)

Build the screen for a greeting app. It needs a place to type a name, a button, and a place to show the answer.

  1. Drag a TextBox onto the Viewer. Rename it txtName. Set its Hint to 'Type your name'.
  2. Drag a Button below it. Rename it btnSay. Set its Text to 'Say hello'.
  3. Drag a Label below that. Rename it lblGreeting. Set its FontSize to 24.
  4. Connect with the AI Companion. Check that all three show on the phone.

Year 8 · Raid: App Forge · Lesson 2 of 5

Worked example (2 of 2)

Build the screen for a greeting app. It needs a place to type a name, a button, and a place to show the answer.

  1. The button does nothing yet. Next lesson, blocks will make it work.

Year 8 · Raid: App Forge · Lesson 2 of 5

Quick quiz · 1 of 3

Typing your new password twice so they can be compared is…

  1. A Verification
  2. B Validation
  3. C Authentication

A. Verification

Verification checks data was entered correctly. Double entry is one method.

Year 8 · Raid: App Forge · Lesson 2 of 5

Quick quiz · 2 of 3

open("log.txt", "w") on a file that already holds 100 lines…

  1. A Adds to the end
  2. B Gives an error
  3. C Wipes it first

C. Wipes it first

"w" empties the file before writing. Use "a" to append.

Year 8 · Raid: App Forge · Lesson 2 of 5

Quick quiz · 3 of 3

The program runs but gives the wrong answer. That's a…

  1. A Runtime error
  2. B Logic error
  3. C Syntax error

B. Logic error

The code is valid and doesn't crash; the thinking is wrong. Only testing finds it.

Year 8 · Raid: App Forge · Lesson 2 of 5

Exit ticket

Answer on paper before you go. Then check.

  1. Program runs but gives the wrong answer. That's a…

    A Syntax errorB Logic error

    B. Logic error The code is valid; the thinking is wrong.

  2. In ["a", "b", "c"], the index of "c" is…

    A cB 2C 3

    B. 2 Counting starts at 0: a = 0, b = 1, c = 2.