Getting Started with App Inventor (Quick Guide) to be used

1 Getting Started with App Inventor (Quick Guide) to be used in conjunction with Webinar/Video Material. MIT App Inventor and it’s logos are trademarks of MIT. This material is developed and adapted from material licensed under Creative Commons 4.0 by the Caribbean Industrial Research Institute.

The following guide takes you through how to access App Inventor and download and install the App Inventor Companion App: the MIT AI2 Companion App from the Google Play Store and takes you through the building of a sample beginner’s app Dino Roar. Note: that MIT App Inventor is only available for Android Devices and must be used with an authorized Google Account

Section 1: Accessing the MIT App Inventor Website and Logging in/Creating an account 3

Section 2: Logging into App Inventor for the First time, Downloading the AI Companion App 5

Section 3: Creating your App Inventor Project 10

Section 4: Designing your App, Understanding the Interface 15

Section 5: Working with Media and Files 20

Section 6: Working in the Blocks section to build your app’s logic/Algorithms 27


Section 1: Accessing the MIT App Inventor Website and Logging in/Creating an account

Go the MIT App Inventor Website located at https://appinventor.mit.edu/ The MIT App Inventor Website contains a number of helpful resources and information besides access to the platform. To log in and start building apps click the orange Create Apps button at the top of the page


https://appinventor.mit.edu/

https://appinventor.mit.edu/

You need a google account to sign up for and into App Inventor If you do not have an account you can sign up for one at www.gmail.com Your parents may have to allow your account to access MIT App Inventor if they set it up for you. If you run into authorization issues ask a parent to sign in with their google or gmail account this may help. You should always consult with your parent before signing up for any Web or App Service


http://www.gmail.com/

Section 2: Logging into App Inventor for the First time, Downloading the AI Companion App

This is the App Inventor welcome screen that you will see after login. It contains the version number and more information. In order to test our apps we need you to install the MIT App Inventor Companion App. Click setup and connect an Android Device


Clicking the button will open a website. Scroll down on the web page until you see till you see Option One and click the blue Instructions button


The previous step will carry you to a new webpage. Scroll down on the page until you see the two options for installing the MIT AI2 Companion App on your phone. You can click the link to activate the Google Play Store and install the app on your phone. You can also open the Google Play Store on your phone and install it.


Clicking the link for the Google Play Store will carry you to this screen. You can install the app directly from here if you have a phone with a connected Google account. If you need the link you can find it below: https://play.google.com/store/apps/details?id=edu.mit.appinventor.aicompanion3&hl=en You can also open the Google Play Store on your phone and install it. Just Search MIT AI2 Companion When installing on your phone make sure to match the information you are seeing on the web page with the information you are seeing on the Play Store page.


https://play.google.com/store/apps/details?id=edu.mit.appinventor.aicompanion3&hl=en




This is the MIT AI2 App Inventor Companion App Screen. During the course the instructors will advise you on how to connect your phone to the MIT App Inventor Platform When connecting it is important that you connect to the QR Code you see on your screen and not the one in this document or on the instructor screen. The codes are unique to you.


Section 3: Creating your App Inventor Project

To create a file we need to go back to the welcome screen. Click Continue


This will bring up a tutorial screen. We will ignore this and build our own project from scratch. Go ahead and click Start A New Blank Project


Name your project in the window that is created and click Okay. In the Video, we are calling our project DinoRoar. A list of your projects will appear. Go ahead and Click your Project’s name.


A list of your projects will appear. Go ahead and Click your Project’s name. (See orange Step 1 in diagram)


Congratulations you’ve created your first app. But it’s a bit blank In the next sections, we will be building out the app.


Section 4: Designing your App, Understanding the Interface

The App Inventor Platform has two main views the Design View which holds information on the different windows (See underlined on right) Viewer: Where we design the Interface or Screens of our App. We currently have one. Components: The components that make up our interface things like buttons, videos, music. Properties: The properties of any components on our Screen. Palette: Where we can access different components to make up our own interfaces.


The other view is the Blocks View. Scroll up to the top of the page and at the top right of the screen, you will see Designer and Blocks. (see underlined on right) These two buttons switch the views between the two modes. The designer is where you build your app’s look. Blocks are where you add all of the Algorithmic Logic or code


For this step go back to the Designer View by clicking the Designer button at the top right Our Screen One is empty, go ahead and drag two elements from the Palette onto the Viewer on Screen One.

● A Label and ● A Button.

You can also try deleting one with the delete button under the components window or renaming it.


Components are examples of something we called Objects in programming. Objects have properties which define them and can interact with other objects through code. In the next step we will be changing the properties of our label


To change the properties of our label to match the diagram in the last step we are going to do the following steps.

1. Click the Label :In this case named DinoRoarLabel in the Components Window.

2. Click Background Color. Click the white box and change it to Green.

3. Click the checkbox under Font Bold to make the Text Bold

4. Change the FontSize property to 20

5. Change the Text Property to Dino Roar!

6. Change the text color property by clicking the white square to Blue


Challenge! We need to change the text property of the Button1 Component to Roar. Repeat the steps in the last example until the button reads Roar.

Section 5: Working with Media and Files

We need to start adding media in this section. Specifically, we need to upload an image of a Dinosaur and the sound of a T-Rex roaring. A link to these files are available below: http://www.cedcariri.com/ias/wp-content/uploads/2020/05/Media-Files-Fundamentals-of-App-Development.zip


http://www.cedcariri.com/ias/wp-content/uploads/2020/05/Media-Files-Fundamentals-of-App-Development.zip





Now that your files are saved we need to upload them. In the Video we show two methods, in this handout we will cover one. Scroll to the bottom of the page and locate the Media tab at the bottom of the Component Window It should be empty. Follow the following steps:

1. Click the upload button

2. The Upload File

dialog will come up. Click Choose File and locate the file


With the Dialog open Select Dino2 and click Open. Then Click OK on the next upload file screen. Repeat the last two steps for the Roar.mp3 file


The two files will now appear listed in the Media Tab. Click Button One in the Component Panel and then in the Properties Panel select Image, change the Image from None to Dino 2


1. Click the Button1 you placed in the Components Panel and

2. then select the Image Property in the Properties Panel. Change the Image from None to Dino 2.

Tip (Optional 3 and 4) If your dinosaur does not scale properly adjust the height and width properties from Automatic to Fill Parent.


Our Button should have the appearance of a dinosaur. Next, we need to add the sound file. The goal is to click the dinosaur and hear the sound. Go ahead and in the Palette Window click Media and select Sound. Drag the Sound component onto the Viewer. It appears at the bottom as a Non-Visible Component (after all sound does not have an appearance beyond its waveform)


Change the properties of the Sound1 Component Source so that the Source is no longer None but is now your Roar.mp3 which you uploaded in the previous step


Section 6: Working in the Blocks section to build your app’s logic/Algorithms

We need to program the logic between the button and the sound. Open Blocks View notice the new components appear as blocks. Button1 and Sound1 The Algorithm we need to make is: When Button1 is clicked play Sound 1. Let’s go ahead and do this in the next sections


Click Button1 in the blocks window A series of optional blocks appears you are looking for the one that reads When Button1 Click do. Drag it onto the viewer


Your screen should now look like this


We have the first part of our Algorithm to get it to play the sound we need to: Click Sound1 in the blocks Window and Look for a code block that reads Call Sound1 Play Drag it to the viewer We have the two parts of our algorithm. Notice that the purple block looks it can fit in the orange Drag it so that it fits like a puzzle. You’ll hear a click and they snap together


We have the two parts of our algorithm. Notice that the purple block looks it can fit in the orange Drag it so that it fits like a puzzle. You’ll hear a click and they snap togetherr


Our Algorithm is complete. App Inventor is a high-level interface which means it is very close to English. Read the blocks and you’ll see it’s fairly simple to understand. When Button1 is clicked Do (Call Sound1 Play) This translates to when Button1 is clicked call the sound1 component and play the file Let’s connect to your phone to see this app in action.


In the top menu 1. Click Connect

2. Then Click AI

Companion You should see a dialogue box similar to what is on the image. Scan the QR Code or enter the six-digit or six-letter code that you see on your phone in the AI Companion App. It is important that you scan the code that appears on your screen and not on the video or in this document. These codes have limited uses and are unique to each user Your app should load.


You have completed this exercise. Click the Dinosaur on your screen to hear your phone roar. Imagine the different apps you can build using this same process. The possibilities are only limited by your imagination.


Documents

Getting Started with App Inventor (Quick Guide) to be used