Talk To Me (part 1), MIT App Inventor Tutorial #1

♩♫♪♬

Hi! Welcome to App Inventor's Hour of Code

We are here at the MIT's center for mobile learning. I am Shay.

And I am Emily. Today we are going to show you how to build your first Android app.

Today's app is called "Talk To Me", because, well, it talks to you.

It's quite simple: You press a button and the phone speaks a phrase out loud.

>Welcome to App Inventor<

Can you make it say anything?

Pretty much!

I could have fun with this one!

Okay, let's get started...

Part 1: Create a New Project

To get started building an app, click the "Create" button from the App Inventor homepage "appinventor.mit.edu".

You'll need a Google account to log in. This can be a Gmail account or a school account if your school uses Google Apps for education.

You can dismiss the splash screen for now.

When you go into App Inventor for the first time you won't have any projects.

So click "New Project" in the upper left.

Our first App is called "TalkToMe".

App Inventor project names can't have spaces. So type in "TalkToMe" with no spaces.

Now you are in the design window where you can setup the components and the layout of your app.

Our App needs a button component. So, click on "Button" and the drag it over to the viewer and then drop it.

One of the neatest things about App Inventor is that you can see your app on your phone while you're building it.

Let's get your phone connected so that you can see the app take shape and test it out as you go.

Now, if you don't have an Android phone or tablet, you can still do this tutorial.

But, you will need to pause this video and go read the instructions for starting an Android emulator on your computer.

You can find out how to do that and also get lots of other helpful information by clicking on "Guide".

Part 2: Connect to Phone

Now, to get your Android phone connected to App Inventor, go up to the "Connect" menu and choose "AI Companion".

You will need to have the App Inventor Companion app on your phone or tablet. It is very easy to do this:

Just click on "Need help finding the companion app?".

This takes you to the Google Play store to download the app.

The easiest thing to do is to open a QR code reader on your phone and scan the QR-code. You could also go to the Play store and search for "MIT AI2 Companion".

Okay, so once we have gotten the MIT AI2 Companion app installed, you'll need to start it up on your phone.

If you closed the connection window in App Inventor, click once again on the "Connect" menu and choose "AI Companion".

The connection window that pops up shows you a six-character code and a QR code.

On the Companion app on your phone click the button "scan QR code".

If you don't have a camera on your phone you can just type in the six-character code and then click "connect with code".

Great! Now your phone is connected in real-time to App Inventor! You should see the button that we've already added to the app.

From now on, all of the changes you make to your app will show up on the phone right away.

Seems like magic, right? Well, if you disconnect it from App Inventor you would no longer see the app on the phone.

To get the app to stay on your phone or to pass it along to a friend's phone, you will have to package it up. But we'll talk about how to do that later.

Part 3: Design Your App

Notice that the button we've added says "Text for Button1" on it. Let's change that.

Over here on the right is the properties pane. This is where you can set the properties for all of the components in your app.

To change the text that shows up on the button, click on "Text" and type in "Talk To Me".

Notice, on your connected phone that the button's text changes there.
Cool, right?

Great. So we only need one more component for this app before we go into the blocks to start programming.

Go to "Media" and drag out a "TextToSpeech" component: Click on it, drag it over to the view and, drop it.

You will notice that it drops down to the bottom, under non-visible components. That's all for components!

Now that we've set the components for our app, we need to specify what the components should do. For that we click on "Blocks".

Part 4: Program the Blocks

And now you're in the blocks editor.

The blocks editor is where you click blocks together to set the behavior of your app.

We want our app to respond to a button click.

So, go to "Button1" and see all of the blocks that go with a button.

Choose "Button1.Click" and drop it in the work area.

Now we have to put in the blocks to tell the app what to do when the button is clicked.

Go to the TextToSpeech component, click on it and see all of the blocks that go with TextToSpeech.

Choose call "TextToSpeech1.Speak" and drag it over to the "when Button1.Click" block.

It will fit right inside and you will hear a click when the blocks connect. I love that sound!

Now, we have one more thing to add before testing the app out.

Notice that we have a blank socket here. We have to tell the "Speak" block what to say.

To do that, go to the text drawer under "Built-in" blocks. Take a blank text block and bring that over. Click it right into the TextToSpeach1.Speak block.

Another satisfying click.

Now click on that empty text block and type "Congratulations! You've made your first app!"

Part 5: Test Your App

Okay, you can test the app now! Go to your phone and click the button.

>Congratulations! You've made your first app!<

If you had any trouble with this tutorial you can view the written version on our website.

That's it?
Er ja...

Okay, see you later!

Wait, get back here!

Well I thought the app would be a little cooler - I can talk to myself...

Patience, young one! Now that we know how to use App Inventor, possibilities are endless.

- Can we make it respond to shaking?
- Ja

- Or let the user input their own text?
- Absolutely!

In fact, in our next video, that's just what we're gonna do.

We will make it so that when someone shakes the phone, it talks and also so the user can put in their own text.

Awesome! I can't wait!

♩♫♪♬