App Inventor — My first project
In this article we cover how to start a project and how to see it working.
First we are assuming that you already have an account in App Inventor and all requirements to have it up and running. If not, check our article explaining how to do it.
In the home page of App Inventor click in the button “Start new project” on the top left corner.
If you do so there will be a pop-up screen asking what is the name of your project. The name should contain ONLY letters, numbers, and underscores. (This is an underscore _ ). Let’s call our project myfirstapp and click in the “OK” button.
You should be redirected to a screen that looks like the one below.
This screen has different areas. Let us take a moment to discuss them.
At the top green bar there is the name of the current project, options to manage screens, and two buttons at the right to change between the “Designer” and “Blocks” perspectives. Let us call this the Project area.
The development using App Inventor is based on two perspectives: Designer and Blocks. The Designer perspective is where you can create the layout of each screen and decide which components to use. The Blocks perspective is where the logical part of the app is created and you decide what happens when the user click in a button, for instance.
First, we will focus on the areas in the Designer perspective.
At the left we have the Palette area. It has the list of all components you can include in your app: buttons, text boxes, check boxes, grids, files, and so on. On its right we have the Viewer area. This is the area that shows what is in the screen we are working on. At the moment the screen has no components in it. Next, there is the Components area. It lists all components from the palette that were included in the screen. Currently, the screen (Screen1) is the unique component available. Under the Components area there is the Media area. This area will have the list of files that we import to use in our mobile App. Last, in right we have the Properties area. This last area shows all the properties from components selected in the Components area. In our current example the component Screen1 is selected and its properties are shown in the Properties area: AboutScreen, alignHorizontal, AlignVertical, appName, BackgroundColor, etc. Try changing the BackgroundColor or the ScreenOrientation to see how the properties work.
Next, by clicking in the “Blocks” button in the Project area you will move into the Blocks perspective.
In the Blocks perspective, at the left we have the Blocks area with the list of available blocks. The list starts with blocks that allow programming logic: Control, Logic, Math, Text, Lists, Colors, Variables, and Procedures. Following, each component included in the layout generates a new Block. In our example, the Screen1 is the unique layout component. Under the Blocks area appears the Media area. This is the same area that appears in the Designer perspective. Last, at the right there is a big area called the Viewer area. This area is where we will create the logic of our App. For instance, when button is clicked then show a message, etc. In the Viewer area we can see three additional elements: A Backpack (top right), a Bin (low right), and Show warnings (low left). The Backpack is used to save blocks for later use or for using in another screen, the Bin is used to discard a set of blocks, and the Show warnings indicates if there is any problem with the current logic.
Now, let us create a simple App that shows a message when we click in a button. Go back to the Designer perspective by clicking in the “Designer” button at the Project area.
Drag and Drop the Button component from the Palette area into the Viewer area. The result should look like the screen below. Let us change the text of the button to “Click me”. We can do it by changing its property called “Text” on the Properties area.
When you change the text from “Text for Button1” to “Click me” and press ENTER (or click on the screen) you will see the text o the button changing.
Next, let us add the text that will change. Drag and Drop a component “Label” from the Palette area into the Viewer area. Now, the screen should look like the one below.
Let us see what happens when we try loading it on our cell phone or through the emulator.
Note that at the top of the page, besides the logo there is a menu. Click on the item “Connect”. If you will use your Android phone, click on “AI Companion”. If you will use the emulator then click on “Emulator”.
If you choose Emulator, be patient and it will start your App automatically. If you choose AI Companion then you should see a screen like the one below. Open the AI Companion App in your Android phone, take a picture of the QR Code or enter the code manually. Your project should appear in your screen.
I acknowledge the AI2 Companion is the best option. I already faced many random problems with the Emulator, in special when using Windows. If you face any problems try reseting your connection (Click in “Connect” and then in “Reset Connection”) and try to connect again.
If you were able to see your app up and running you may try to click in the button you created. What happened?… nothing. We created the button but did not give it any functionality. We just created the design but not the logic yet.
In order to create the logic for our App we should go for the Blocks perspective (clicking in the “Blocks” button at the top right). Now the logic we want to program is the following:
“When the user clicks the button, the text “Hello World” appears in the screen.”
In terms of the components we created it could be rewritten as:
“When the user clicks Button1, the text “Hello World” should appears in the Label1"
The questions are: (1) How do we know the user clicked in Button1? (2) How do we write a text anywhere? (3) How do we make the text appear in the Label1?
Let’s go step by step.
(1) If you take a look at the Blocks area at the left, you can see that the components we included in the design (Button1 and Label1) appear in the list. Click at Button1 and you should see the following.
This new list is composed by all actions and properties related to Button1. Note that the first option shows something like “when Button1.Click do”. This option handles the event “when the user clicks on Button1”. And this is exactly what we want!! Click on this option and it should appear in the Viewer area.
(2) The next step is to create the text “Hello World”. But wait, we only included two components: a button, and a label. The button is only clickable then the obvious option for a text is… !? No, it is NOT the Label1 component. Why? The component Label is just to show something at the screen. While buttons are clickable and labels are just text printed at the screen. Before asking the application to print a text at the screen this text needs to come from somewhere.
Take a look at the other options in the Blocks area. Can you imagine any option that would have something like… Text? Yes, click on it and you would see something like the following screen.
Take a brief look at the list and ask yourself what each option could mean. How many of these you can guess? For now, let us focus on the first option. It will allows us to write a fixed text. Click on it an your screen should be like the following.
Yes, one component is on top of the other. Let us drag and drop the component we just included and move it around to be more visible.
Now, let us say what is the exact text we want it to write. Just click inside the square and write “Hello World”.
That’s it. We have a text.
(3) Now, how to put the text to appear in the Label1? Click on Label1 to check its options.
The list is composed by a set of methods that change properties of Label1. They can either “set” the property (i.e. change its value) or get the value of the property. In our case we want to set the text in Label1 to the one we just created. Go and look for the option “set Label1.Text to” and click on it (or drag and drop to the Viewer area).
Ok. We have the option to change the Text of Label1. Note that these blocks are like pieces of a puzzle. The Label1 requires a block at the right that specifies which text we want to set for the Text property of Label1. Let’s then click on the Text block and move it to match with the Set block. You should have something like the following.
Note that by doing that, the number besides the Attention icon at the low left changed from 2 to 1. Why?… The idea is that blocks need to be assembled together. If there are blocks around without connection the environment of App Inventor will let you know by increasing the “Attention number”.
(4) Hey! But there were only 3 steps! Yes, but you did not ask how to put everything together. Currently, when we click at the Button1, nothing happens. The fact is that we did not tell the Button1 what to do when it is clicked. We notice it is clicked (with the yellow) block but we do not state what it should do. What do we want it to do, by the way? Ah! Show “Hello World” at the screen.
The “Show Hello World at the screen” we already have (with the green and pink blocks), now we want it to happen at the moment that the Button1 is clicked. In order to do that just copy the whole stuff inside the block for the Button1.Click. It should look like the following.
We did not forget anything, did we? Let us try on the phone/emulator to see what happens when we click on the Button “Click me”.
That is it! Proud of your first ever App!? You should. You took your time, gave yourself a chance, followed the tutorial, and YOU made it! Well done!
See you in the next article! ;)
