Lessonplan eng

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