Year 8 › Raid: App Forge › Lesson 2 of 5Year 8 · Summer 2 · Raid: App Forge App Inventor: screens and components Topic 14 Programming further
KS3 Computing · Real programs keep data in lists, take text apart as strings, split work into subroutines, check their input, save to files, and get tested on purpose.
Programming Cambridge Lower Secondary Computing 0860
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. Success criteria 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.
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.
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. 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.
★ RememberDesigner = what the app looks like. Blocks = what the app does.
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.
Find a component in the Palette on the left. Drag it onto the Viewer , the phone in the middle. Click it. Change its settings in the Properties panel on the right. e.g. ExampleA Scratch sprite has a size and a direction. An App Inventor button has a text and a colour. Both are properties.
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.
? 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.
Test it on a phone Install the free MIT AI2 Companion app on a phone or tablet. In App Inventor, open the Connect menu and choose AI Companion . A QR code appears. Scan the code with the Companion app. Your app opens on the phone. Change something in the Designer. The phone updates by itself. ! Watch outThe 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.
e.g. Worked exampleBuild the screen for a greeting app. It needs a place to type a name, a button, and a place to show the answer.
Drag a TextBox onto the Viewer. Rename it txtName. Set its Hint to 'Type your name'. Drag a Button below it. Rename it btnSay. Set its Text to 'Say hello'. Drag a Label below that. Rename it lblGreeting. Set its FontSize to 24. Connect with the AI Companion. Check that all three show on the phone. The button does nothing yet. Next lesson, blocks will make it work. Mark this lesson as done Saved on this device.
← Previous lesson Writing a design brief from user needs Next lesson → Events and logic: buttons, variables and conditions