Lesson Plan A7.M.21 Programming with App Inventor–Introduction What we will learn today: The App Inventor working environment Use of the control (graphical objects) buttons, label and image and change their properties Test our application
Consolidation Activities 1.
We will create an application that will allow us to translate into 5 languages the phrase «Πώς ονομάζεσαι;» (α) Create a new application with the name: What_is_your_name.
(b) Place on the screen 5 buttons and 1 label. Your screen should look like the following picture.
(c) Upload in the window media t h e p i c t u r e s Greece, UK, France, Germany and Russia, from your personal folder.
125
Α.7.Μ21
Α.7 Programming with AppInventor
(d) Change the properties as shown in the following table: Component (graphical object)
Property
Value
Screen1
Align Horizontal
Center
Screen1
Title
Μεταφραστής
Screen1
Background Color
Light Gray
Button1
Text
Button1
Image
Greece.png
Button1
Width
50 pixels
Button1
Height
50 pixels
Repeat the same with all other buttons changing the name and picture Label1
FontBold
Label1
Text
True
(e) Move to Blocks v i e w to program the buttons. For every button you will use the event click to change the text property of label1.
126
Α.7 Programming with AppInventor
Α.7.Μ21
Language
Translation
English
What is your name?
French
Comment vous appelez?
German
Wie ist Ihr Name?
Russian Как тебя зовут? You can use Google Translate to find the translations (https://translate.google.com/) (f) Test your application with one of the following ways: Install the app on your phone. Use the AI Companion. Use the emulator. Evaluation activities 2. Create an application with the name Countries ηwhich will provide the following information about the countries Cyprus, Greece, Italy and Spain. Country Capital
Flag
Cyprus
Nicosia
Cyprus.png
Greece
Athens
Greece.png
Italy
Rome
Italy.png
Spain
Madrid
Spain.png
The user will press a button which will bring up the name of the country and the corresponding information. The country flags are in the folder named flags.
+Additional activities 3.
Follow the steps to create an application that will allow you to draw something with your finger on screen and then delete it with just shaking your phone. (α) Create a new project w ith the name DigitalDoodle. (β) Disable the Scrollable option from the Screen properties.
127
Α.7.Μ21
Α.7 Programming with AppInventor
4.
Place a canvas control and an AcceleratormeterSensor on your screen
5.
Change the height and width width of the canvas, so that they cover the whole screen (Fill Parent).
6.
Move to the Blocks view. From the canvas select the event when canvas1 dragged.
7.
Place inside that event the procedure DrawLine.
The procedure drawline accepts as starting values (x1,y1) and final values (x2, y2) coordinates of your screen. Furthermore, the point in which you press to begin the line and the point where you lift your finger from the screen to finish the line.
128
Α.7 Programming with AppInventor
Α.7.Μ21
8.
For deleting the lines by shaking the phone you will have to program the AcceleratormeterSensor. You will use the when AcceleratormeterSensor Shacking event and the procedure Clear from the object canvas.
9.
The application is ready for testing.
129