0:00:02.110,0:00:11.945
♩♫♪♬

0:00:11.945,0:00:15.395
Hi! Welcome to App Inventor's Hour of Code

0:00:15.395,0:00:18.525
We are here at the MIT's center for mobile learning. I am Shay.

0:00:18.525,0:00:21.930
And I am Emily. Today we are going to show you how to build your first Android app.

0:00:21.930,0:00:24.996
Today's app is called "Talk To Me", because, well, it talks to you.

0:00:25.090,0:00:28.783
It's quite simple: You press a button and the phone speaks a phrase out loud.

0:00:29.683,0:00:31.280
>Welcome to App Inventor<

0:00:31.704,0:00:33.110
Can you make it say anything?

0:00:33.110,0:00:34.120
Pretty much!

0:00:34.140,0:00:36.340
I could have fun with this one!

0:00:36.370,0:00:37.920
Okay, let's get started...

0:00:37.938,0:00:40.218
Part 1: Create a New Project

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

0:00:48.682,0:00:56.162
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.

0:00:57.122,0:00:59.042
You can dismiss the splash screen for now.

0:00:59.043,0:01:03.497
When you go into App Inventor for the first time you won't have any projects.

0:01:03.663,0:01:06.351
So click "New Project" in the upper left.

0:01:06.875,0:01:09.432
Our first App is called "TalkToMe".

0:01:09.432,0:01:14.518
App Inventor project names can't have spaces. So type in "TalkToMe" with no spaces.

0:01:15.388,0:01:19.813
Now you are in the design window where you can setup the components and the layout of your app.

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

0:01:26.065,0:01:31.896
One of the neatest things about App Inventor is that you can see your app on your phone while you're building it.

0:01:32.059,0:01:36.515
Let's get your phone connected so that you can see the app take shape and test it out as you go.

0:01:36.515,0:01:41.654
Now, if you don't have an Android phone or tablet, you can still do this tutorial.

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

0:01:47.948,0:01:53.766
You can find out how to do that and also get lots of other helpful information by clicking on "Guide".

0:01:54.247,0:01:56.954
Part 2: Connect to Phone

0:01:57.003,0:02:04.565
Now, to get your Android phone connected to App Inventor, go up to the "Connect" menu and choose "AI Companion".

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

0:02:11.257,0:02:14.854
Just click on "Need help finding the companion app?".

0:02:14.924,0:02:18.954
This takes you to the Google Play store to download the app.

0:02:18.954,0:02:30.450
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".

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

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

0:02:47.582,0:02:52.170
The connection window that pops up shows you a six-character code and a QR code.

0:02:53.089,0:02:58.268
On the Companion app on your phone click the button "scan QR code".

0:03:03.078,0:03:10.276
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".

0:03:11.056,0:03:18.244
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.

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

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

0:03:29.951,0:03:37.636
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.

0:03:39.370,0:03:41.710
Part 3: Design Your App

0:03:42.119,0:03:47.289
Notice that the button we've added says "Text for Button1" on it. Let's change that.

0:03:47.628,0:03:54.468
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.

0:03:54.651,0:04:01.144
To change the text that shows up on the button, click on "Text" and type in "Talk To Me".

0:04:01.354,0:04:06.837
Notice, on your connected phone that the button's text changes there. [br]Cool, right?

0:04:09.273,0:04:14.293
Great. So we only need one more component for this app before we go into the blocks to start programming.

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

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

0:04:28.748,0:04:35.356
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".

0:04:37.058,0:04:39.879
Part 4: Program the Blocks

0:04:40.039,0:04:41.782
And now you're in the blocks editor.

0:04:41.958,0:04:47.220
The blocks editor is where you click blocks together to set the behavior of your app.

0:04:47.371,0:04:50.461
We want our app to respond to a button click.

0:04:50.657,0:04:54.728
So, go to "Button1" and see all of the blocks that go with a button.

0:04:54.880,0:04:58.331
Choose "Button1.Click" and drop it in the work area.

0:04:58.439,0:05:03.136
Now we have to put in the blocks to tell the app what to do when the button is clicked.

0:05:03.378,0:05:09.409
Go to the TextToSpeech component, click on it and see all of the blocks that go with TextToSpeech.

0:05:09.418,0:05:16.381
Choose call "TextToSpeech1.Speak" and drag it over to the "when Button1.Click" block.

0:05:15.653,0:05:21.075
It will fit right inside and you will hear a click when the blocks connect. I love that sound!

0:05:21.230,0:05:24.997
Now, we have one more thing to add before testing the app out.

0:05:25.085,0:05:30.021
Notice that we have a blank socket here. We have to tell the "Speak" block what to say.

0:05:30.028,0:05:41.236
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.

0:05:41.376,0:05:43.610
Another satisfying click.

0:05:43.683,0:05:51.291
Now click on that empty text block and type "Congratulations! You've made your first app!"

0:05:52.153,0:05:54.216
Part 5: Test Your App

0:05:54.226,0:05:57.894
Okay, you can test the app now! Go to your phone and click the button.

0:05:58.225,0:06:00.493
>Congratulations! You've made your first app!<

0:06:00.807,0:06:04.651
If you had any trouble with this tutorial you can view the written version on our website.

0:06:04.762,0:06:07.084
That's it?[br]Er ja...

0:06:07.084,0:06:08.502
Okay, see you later!

0:06:08.646,0:06:09.630
Wait, get back here!

0:06:09.903,0:06:13.751
Well I thought the app would be a little cooler - I can talk to myself...

0:06:13.924,0:06:18.954
Patience, young one! Now that we know how to use App Inventor, possibilities are endless.

0:06:19.112,0:06:21.597
- Can we make it respond to shaking?[br]- Ja

0:06:21.597,0:06:23.756
- Or let the user input their own text?[br]- Absolutely!

0:06:24.204,0:06:27.227
In fact, in our next video, that's just what we're gonna do.

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

0:06:32.757,0:06:34.327
Awesome! I can't wait!

0:06:34.333,0:06:43.820
♩♫♪♬