Hello World!
Published September 30, 2021
When you start to learn programming apps, the first app you learn to make is a Hello World app. It's simple: the app only shows the text 'Hello World!'. You do not need to program this app, fortunately.
🏷️ Tags: #newbie, #tutorials-and-guides
Step 1. Logging in to App Inventor
Make sure you have the following to log in to MIT App Inventor first:
a) a Gmail/Google account
b) a computer
c) an Android phone/tablet. Huawei, Samsung, Oppo and Xiaomi are all Android brands.
Go to https://appinventor.mit.edu/. Click on the orange button 'Create apps'.
You will then be asked to log in to your Google account. Log in to continue.
Step 2. Starting a new project
If this is your first time visiting MIT App Inventor, you won't have any projects. So, your interface should look like this.
Press 'Start a new project' in the popup.
Enter 'HelloWorld' in the new popup. App Inventor projects should not contain spaces, so type in 'HelloWorld' without spaces.
Press 'OK'.
Step 3. Understanding App Inventor
This is what you will see after you click 'OK'. (Annotated in different colors)
Palette (red): All of the components you can add to your app. Components and screens are parts of an app. If you consider an app as a book, the screens are the pages, and the components are all of the elements that make up your book. To add a component, drag it to the middle of your phone. Demo: https://drive.google.com/file/d/1DldVjEPB3f9MvO70DGvQQq4-nlKtzDRu/view?usp=sharing
Viewer (orange): What your app will look like after you have installed it on your phone. You can preview your app on phones, tablets, or monitors.
Media (yellow): Where you upload images and sound files to your app.
Components (blue): Shows all of the components you added to your app. You can rename or delete a component (not screens) in this window.
Properties (purple): All of the properties of your components.
To understand App Inventor, try this:
a. Change the background color of your app by using the properties window,
b. Rename your app using the properties window,
c. (required) Drag out a label from the Palette. Labels can help you display texts.
After you dragged out a label from the User Interface, click on Label1 in the components window. This is the Label you have added to your app.
After you clicked on the label, reset its text (Properties) to "Hello World!".
Step 4. Finish!
Make sure your app look like this (I resetted the background color to White, renamed my app to Test).
After you'r done, congratulations! You have completed your first app!
If you finished this tutorial, you already know how to...
✔️ Changing properties of components in the Designer,
✔️ Adding components in the Designer,
✔️ Renaimg your app name (not project name).
