Introduction App to App Inventor

Creators	Jan Pawlowski
Subject	Computer Science
Lenght	90 minutes
Pedagogical Approach	explorative learning
Competences	New technologies Block based languages
Grades	5-9
Technology	AppInventor

Introduction: The teacher briefly introduces the topic and explains to the students that they should think about which hobbies and other things they want to present within the app.

Development: The students program their app and create functions that represent their hobbies. The individual steps are given on the worksheet.

Reflection: The students present their finished apps to each other. They reflect how the development process went and discuss their experiences.

Dear children,

the following worksheet will guide you through your first custom app. 

To do this, first open the App Inventor. 

Now open a new project

Next, you should consider 3 things:

Who are we: each group should briefly introduce themselves by name – your text:

__________________________________________________________________________________________________________________________________

(e.g. Hello, we are Jan and Martin, we both work at the Ruhr West University of Applied Sciences).

Our hobbies: find a picture of the activity you all like, download that picture to your tablet. 

Last, record a short video – think of a task for the rest of the group (run around the house, jump 10 times as high as you can).

Now we start designing the screen. Add 3 “buttons” on the screen (who we are; our common hobby; our task for you).

Now switch to the blocks and we first assign a button. When you click the first button, a text should appear. You need this block.

Now we have to try the whole thing once. Select the Connect -> “Emulator” – now you have to wait a bit until the emulator starts – this is how it should look like. Press your button….

You can also test directly on your cell phone. For this you need the MIT AI Companion from the Google / Apple Store.

Select Connect -> AI Companion. You will then get a code or QR code:

Launch AI Companion on the cell phone / tablet. 

Either scan the QR code or enter the six-digit code. And then wait a moment until everything is transferred.

Now try what you see….

Now adds some more elements

1. A text describing what you can do (click the buttons!) 
2. A picture of you
3. A picture of your hobby
4. An area for video playback

In addition, you need blocks that are not yet visible, e.g. “TextToLanguage”, if you want to have something read aloud.

This is how it might look. Try what looks best when you change the width and height.

Now we change the view to the blocks. Take the following block.

Now you can try different things:

• Have a message read aloud
• Make an image visible (visible = true / false)
• Play a video

Try different alternatives – and this is what it could look like:

And now let’s try out what you all have developed – have fun!