App Inventor allows us to create apps for Android devices quickly and easily. It runs in the cloud. It is a web application that runs in a web browser.

To create a new project, visit the URL: appinventor.mit.edu. Click on the Create Apps! button. Sign in using your Google Account (click Allow if prompted). Click on the New Project button. Enter the Project Name and click OK.

Note the following points while naming your project:
a) The project name must begin with an alphabet.
b) Remaining characters may include alphabets, digits, or underscores.
c) Blank spaces are not allowed.

By default, the Designer view opens up. You can click on the Blocks button to switch to the Blocks view.

In the Designer view, the Pallette column has components that can be inserted to our app. The Viewer column displays the app’s screen. The Components column displays a list of all the components currently added to your project. The Media column allows us to manage the media files. The Properties column allows us to view and modify the properties of different components added to our project.

Every app must have a Screen component which acts as a container for all the other components. Each component must have a unique name. The default name for the Screen component is Screen1. App Inventor doesn’t allow you to change the name of this component.

Select the Screen1 component from the Components column and set its Title property from the Properties column. The Title property is displayed in the screen’s title bar.

The Label component displays text on the app’s screen. You can drag it from the Pallette to the screen and rename it using the Text property. The label’s Width and Height properties are used to adjust the size of the label. By default, they are set to Automatic. The Fill Parent value will make it as wide as the container it is enclosed in. You can also specify the size in pixels or in percentage.

It is always a good practice to rename different components (except Screen1) with meaningful names. Select the component. Click the Rename button to rename it.

To delete a component, select the component and click on the Delete button.

The Button component also has a Text property to change the text that appears on the button.

When multiple components are added, they are left aligned on the screen and are placed vertically (one below the other). The Screen component has AlignHorizontal (Left, Center, Right) and AlignVertical (Top, Center, Bottom) properties to set the alignment of the components horizontally and vertically.

The Hello World App

1. Set the screen’s AlignHorizontal property to Center and the Title property to Hello World App.
2. Drag a Label component and clear its Text property. Rename the component as LabelMessage.
3. Drag a Button and set its name to ButtonDisplayMessage and its Text property to Click Here to See a Message.
4. Note that apps are event-driven programs. An event is an action that takes place. Switch to Blocks view and select the ButtonDisplayMessage component and drag the when ButtonDisplayMessage.Click do block.
5. Drag the set LabelMessage.Text to block and snap it inside the previous block.
6. Select the Text drawer and drag the text string block and snap it to the previous block.
7. Type Hello World in the empty space.

The Good Morning Translator App

1. Create a project named GoodMorning.
2. Set Screen1’s AlignHorizontal property to Center and Title property to Good Morning App.
3. The default BackgroundColor property of Screen1 is White. Set it to Light Gray.
4. Drag a Label and rename it as LabelPhrase and Text property to Good Morning. Enable the FontBold property and set the FontSize property to 24.
5. Drag a Button and rename it to ButtonItalian and set its Text property to Italian.
6. Drag another Button and rename it to ButtonSpanish and set its Text property to Spanish.
7. Drag one more Button and rename it to ButtonGerman and set its Text property to German.
8. Switch to Blocks view. Drag when ButtonItalian.Click do block and snap set LabelPhrase.Text to block inside it. Add an empty string to it and enter Buongiomo in it.
9. Similarly, for Spanish it should be Buenos Dias and for German it should be Guten Morgen.