Controlling the Fantastic Robot with AppInventor

Controlling the Fantastic Robot with AppInventor

来自 Citilab Edutec


Citilab ED1



Controlling the Robot with AppInventor


  • AppInventor is a block programming environment created by Google Labs at the end of 2008 to develop Android applications.

Kids programming in AppInventor

  • Allows you to create applications in an easier way and in less time than with other more complex environments.

  • Apps can be tested in real-time before being compiled and installed on the device.

  • It has many tutorials to learn independently in addition to a very large community that shares its projects.

AppInventor Tutorials

Getting started with AppInventor

  • Go to AppInventor website.

  • Click on the button that says Create Apps!.

  • Enter your Google account credentials (email and password).

  • Accept the terms of service (Terms of Service).

  • Click on Continue in the welcome window that appears below.

AppInventor Welcome Screen

Create a new project

  • Optional: Change the language by clicking on English (above and on the right) and select your preferred language.

  • Create a new project by clicking "Projects > Create a new project…".

Create New Project

  • Name it (for example RobotED1) and accept.

Name the Project

Synchronize with the Companion

  • Download the AppInventor 2 Companion to your Android smartphone or tablet and open it.

Download Companion

  • Click on Connect > AI Companion.

Connect the Companion

  • Scan the QR code with the Scan QR Code option or write the code directly.

Scan QR Code

  • NOTE: The computer and device must be on the same network.

Adding buttons

  • We will start by adding buttons to be able to send commands to the robot. To add one, drag the Button element from the Palette to the Viewer.

Add button

  • Then we can change the names of these buttons by selecting them and clicking below where it says Rename (putting Next Button for example).


  • We can also change the text it shows by going to the Properties section and modifying the Text property, introducing a new one (putting Next for example).

Edit text

Challenge 1: Add 3 more buttons and change their name and display text.


Solution to challenge 1

Organize the buttons

  • By default AppInventor places the screen components one under the other. To organize the components we need the elements found in the Layout category.

  • If we want to place the buttons in a distributed manner on the screen, we can use the TableArrangement component.

<img src="cm19-12-table_arrangement.png" alt="!Table Arrangement" />

Challenge 2: Place the buttons like those on a remote control.


Solution to challenge 2

Change button size

  • When we add a visual component to our application they have the Height and Width properties set as Automatic. This means that their content is adjusted, as in the case of text of the buttons .

  • If we want to make the buttons have regular dimensions (square shape) we can assign a specific value of pixels in both properties, for example 100.


Square button

Detect pressed button

  • To start programming the application, go to the Blocks section, next to Designer.

Section Blocks

  • Once inside, to detect when we press a button, select it in the Blocks section and take the when Button.Click block.

Button Blocks

when Button click

Send web requests

  • In order to send web requests we need the Web component in the Connectivity category.

Web Component

  • To make a web request you must first use the set Web1 block. Url specifying the address and then use the call Web1.Get block to execute the request.

Web URL Block

Block Web get

  • To put the address we must use the first block available in the Text category.

Text block

URL text block

Challenge 3: Make each button execute the corresponding web request when pressed.


Solution to challenge 3


© 来自 Citilab Edutec 2019-2022.
This work is licensed under a CC-BY-SA 4.0 license.