App Inventor Task 1 & 2 - Basic Apps

Basic Program #1 - Colour Changer

This quick tutorial will teach you how to create an app that changes the background colour when you press different buttons. See the video:

In Designer layout, firstly drag four buttons from the Palette tab on the left side and drop them one at a time on top of each other in the Viewer.

In the Components tab, click on each button and press Rename to change the name (this makes it easier to code them later). You don't need to choose these four colours, but it is a good idea to start with these (you can change them later).

You should notice that you are only changing the name of the button - not the button on the text; these are two different variables.

Now to change the text on each button. Click on a button in the centre then in the Properties tab on the right scroll down to Text and change the text to a colour.

When you've changed all four button texts, then you can start to code.

Click on the Blocks button in the top right to start adding the code.

In the Blocks tab on the left click on each button block (e.g. Red, Blue, Green and Yellow) and drag over a 'when click' block for each colour.

Blocks we put inside of the 'when click' blocks will execute whenever that button is pressed.

Grab a set Screen 1 BackgroundColor from the Screen1 section in the Blocks tab and place one underneath each when click block.

Then line up the correct colour from the Colors section in the Blocks tab to the relevant button.

Program 1 Complete!

The easiest way to run an app that you have created at home using App Inventor 2 is to download the free MIT AI2 Companion App on your smartphone from the Google Play Store. At the top of the App inventor program on your computer, click on Connect and AI Companion. This will generate a six-digit code you can type into your phone.

If your school has the emulator installed, you can also use this to test your app.

Ideas to Improve Your App:

  • Use the when Screen1 BackPressed block from the Screen1 section in Blocks to turn the background colour white when the back button is pressed. The block is shown to the right; you can work out how to use it.

  • Add more buttons for different colours. Try purple, black and orange for example.

  • Change the BackgroundColour (in Properties) of each button to represent the colour it says. You might need to change the TextColour too for red and blue (see the image to the right).

 

Basic Program #2 - Password Checker

This quick tutorial will teach you how to create an app that requires a user to enter a correct password. See the video - maximise to see it clearly:

Firstly you need to grab a TextBox from the Palette tab on the left and place it in the Viewer. Then drag a Button and a Label. Put them in this order:

You need to change the Text for the button in the Properties tab to 'Enter Password'.

 

Click on your text box and delete the Hint Text from the Properties tab.

 

Click on the label and delete the Text from the Properties tab.

Don't worry, the label is still there!

Now time to code. Open up the Blocks layout by clicking Blocks in the top right.

 

Drag a when Button1 click block into the centre from the Button1 section in Blocks.

Drag an if then block from Control within the when Button 1 click block.

Click on the blue cog button and, in the new window underneath, drag an else block within the if block.

The top part will update by itself.

When the button is clicked we want to see if the text in the text box matches what we want it to be.

Grab an = block from Logic and connect it to the if block. Then place a TextBox1 Text block from TextBox1 in the first half and a blank " " block from Text in the second half.

In the " " block write what you want the password to be. I've chosen pikachu because pikachu is cool.

Grab a Set Label1 Text block from Label1 and put one next to then and another next to else.

Place a " " block from Text and snap it next to both of those blocks.

If the user has entered the password correctly then you want 'Correct Password' to appear. Otherwise, if they have entered anything else, you want 'Incorrect Password' to appear.

Program 2 Complete!

The easiest way to run an app that you have created at home using App Inventor 2 is to download the free MIT AI2 Companion App on your smartphone from the Google Play Store. At the top of the App inventor program on your computer, click on Connect and AI Companion. This will generate a six-digit code you can type into your phone.

If your school has the emulator installed, you can also use this to test your app.

Ideas to Improve Your App:

  • Change the password to something different.

  • If the correct password is entered change the background to green. If an incorrect password is entered change the background to red. You may want to scroll up to the first program as a reminder.

© CSNewbs 2020