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

♩♫♪♬

Hi and welcome back to App Inventor's Hour of Code.

- I am Emily.
- And I am Shay.

In our last video we showed you how to make the Talk To Me app: You push a button and the phone talks to you.

- So cool.
- Well, we had to start somewhere!

I am ready to get to the cool stuff.

Okay, now we are going to extend the Talk To me app so that it responds when we shake it and also so the user can input their own text.

>Stop shaking me!<

- Cool enough for you now?
- I see endless opportunities. I can go on a run and get constant encouragement.

Great! So we are gonna get started and the great thing is, this takes only a couple of minutes because App Inventor makes it really easy.

Is your phone talking to you? Well, hang on, because it's about to get even more fun.

We left off with our Talk To Me app in the blocks editor. Right now we need to go back into the designer to add another component.

We want to extend Talk To Me so that the phone speaks when you shake it. To do that we need an accelerometer component.

Click on the sensors drawer and drag out an accelerometer sensor. This is another non-visible component - so it drops down to the bottom of the screen.

That's all we need for right now! Go back over to the blocks editor.

As you develop your apps you will move back and forth between the designer and the blocks editor quite a bit.

We now need a block for when the phone is shaking. This is also called an event handler.

Drag out the "when AcceleromenterSensor1.Shaking" block.

So, when this event is triggered that's when the phone is being shaken.

What do we want to happen then? We want the phone to talk to us, right?

So, we already know the blocks that handle that - the same blocks that we have inside the "Button1.Click" event.

Here is a cool shortcut that will help you program in App Inventor even more quickly. You can copy and paste blocks.

Click on the purple TextToSpeech block. Hit the key combination your computer for copy just like you would do with text.

And then hit the key combination for paste. Voilà, you have a new set of the TextToSpeech and text blocks.

Drag this new set down into the accelerometer shaking event block.

If you had any trouble copying and pasting blocks, that's okay. You can also drag out new blocks from the drawers on the left.

Remember, we got the TextToSpeech.Speak block from TextToSpeech and we got the plain text block from the built-in text drawer.

So, right now, the phone will speak out loud if you shake it. But wouldn't it be much more fun if the phone says something about been shaken?

Let's put in a funny phrase. I am going to type in "Stop Shaking Me!".

Okay, try it out! Pick up your phone and shake it.

>Stop Shaking Me!<

So, our app is pretty cool, right? But wait! There is one more thing to add. Imagine sharing this app with your friends: Don't you think it would be a lot more fun if they can tell the phone what to say?

To set this up go back into the designer, go to the user interface drawer and pull out a text box.

Let's rearrange that a bit and put the button under the text box.

Okay, guess what...

Back to the blocks.

Click on TextBox1 and look at the blocks it has. We now want to change what happens when the button is clicked.

Instead of saying a fixed phrase we want the app to say whatever the user has typed into the text box.

Scroll all the way down to the green blocks that we call "getters" and "setters" because they allow you to get and set the properties of the component.

You want to get the text that has been typed into the box. So you need the getter block for "TextBox1.Text".

Put that block inside the "when Button1.Click" block.

To do this you have to throw away the old text block and then click this new TextBox1.Text block in its place.

Try your app out again. When you click in the blank text box on your phone your keyboard will come up and you can type in whatever you want.

Then, click "Talk To Me" and see what happens.

>Hello World<

There are some cool ways to extend this app. See the written tutorial for some great ideas for making it even better.

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

>Stop! Stop! Stop! Stop!<
- Aw man, we made a real app!

>Stop! Stop! Stop! Stop!<
- That's kind of annoying!

>Stop! Stop! Stop! Stop!<
- You made it!

Oh right.

Well you are gonna have a ball with our next step because we're gonna show you how to make a ball roll around the screen when you fling it with your finger.

>Stop! Stop! Stop! Stop!<
- Can't wait!

>Stop! Stop! Stop! Stop! Stop! Stop! Stop Shaking Me!<

♩♫♪♬