Controlling the Fantastic Robot with AppInventor

Controlling the Robot with AppInventor

AppInventor

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

• 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.

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.

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…".

• Name it (for example RobotED1) and accept.

Synchronize with the Companion

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

• Click on Connect > AI Companion.

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

• 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.

• 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).

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.

Detect pressed button

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

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

Send web requests

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

• 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.

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

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

Solution to challenge 3