Creating the app

You can start by typing the following link in your browser http://ai2.appinventor.mit.edu

The page will ask you to log in with your Google username and password.

After that, you will see a screen similar to the one shown in Figure 1.

Click on the New Project button and you will be asked for the project’s name. Give a name to your app. I have used myFirstApp. Your project page now appears, and looks like what’s shown in Figure 2.

You can now design your app here - you can select its appearance, the UI, etc. I will demonstrate a simple app, which will have a text label that displays: “Who are you?” Below the label, there will be a text box and a button. On entering a name in the text box and on clicking the button, the text in the label will change to, “Nice to meet you <name>”.

All the GUI elements are available on the left side pane. Drag and drop the elements you require to the app screen. I have also added a background image to the screen. You, too, can do so by uploading any image on your computer. My app UI looks similar to Figure 3. Once you are happy with the look of your app, it’s time to add functionality to it. For that, on the top right of the page, you will find two buttons called ‘designer’ and ‘blocks’.

Till now, we were in the designer mode; now, let's shift to the blocks mode.

You will get a blank screen similar to the page you got in the designer mode. But here, instead of the left pane having UI elements, it will have blocks for programming.

The bottom part of the left side pane will have the UI elements you inserted during the designer phase. Click on button1 and you can see some of the logic that is associated with it.

Select the other blocks from the respective element as shown in Figure 4. You are free to implement any logic you wish, and if you browse through the options you will find that there are many types of logic that can be implemented.