[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:02.11,0:00:11.94,Default,,0000,0000,0000,,♩♫♪♬
Dialogue: 0,0:00:11.94,0:00:15.40,Default,,0000,0000,0000,,Hi! Welcome to App Inventor's Hour of Code
Dialogue: 0,0:00:15.40,0:00:18.52,Default,,0000,0000,0000,,We are here at the MIT's center for mobile learning. I am Shay.
Dialogue: 0,0:00:18.52,0:00:21.93,Default,,0000,0000,0000,,And I am Emily. Today we are going to show you how to build your first Android app.
Dialogue: 0,0:00:21.93,0:00:24.100,Default,,0000,0000,0000,,Today's app is called "Talk To Me", because, well, it talks to you.
Dialogue: 0,0:00:25.09,0:00:28.78,Default,,0000,0000,0000,,It's quite simple: You press a button and the phone speaks a phrase out loud.
Dialogue: 0,0:00:29.68,0:00:31.28,Default,,0000,0000,0000,,>Welcome to App Inventor<
Dialogue: 0,0:00:31.70,0:00:33.11,Default,,0000,0000,0000,,Can you make it say anything?
Dialogue: 0,0:00:33.11,0:00:34.12,Default,,0000,0000,0000,,Pretty much!
Dialogue: 0,0:00:34.14,0:00:36.34,Default,,0000,0000,0000,,I could have fun with this one!
Dialogue: 0,0:00:36.37,0:00:37.92,Default,,0000,0000,0000,,Okay, let's get started...
Dialogue: 0,0:00:37.94,0:00:40.22,Default,,0000,0000,0000,,Part 1: Create a New Project
Dialogue: 0,0:00:40.62,0:00:48.50,Default,,0000,0000,0000,,To get started building an app, click the "Create" button from the App Inventor homepage "appinventor.mit.edu".
Dialogue: 0,0:00:48.68,0:00:56.16,Default,,0000,0000,0000,,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.
Dialogue: 0,0:00:57.12,0:00:59.04,Default,,0000,0000,0000,,You can dismiss the splash screen for now.
Dialogue: 0,0:00:59.04,0:01:03.50,Default,,0000,0000,0000,,When you go into App Inventor for the first time you won't have any projects.
Dialogue: 0,0:01:03.66,0:01:06.35,Default,,0000,0000,0000,,So click "New Project" in the upper left.
Dialogue: 0,0:01:06.88,0:01:09.43,Default,,0000,0000,0000,,Our first App is called "TalkToMe".
Dialogue: 0,0:01:09.43,0:01:14.52,Default,,0000,0000,0000,,App Inventor project names can't have spaces. So type in "TalkToMe" with no spaces.
Dialogue: 0,0:01:15.39,0:01:19.81,Default,,0000,0000,0000,,Now you are in the design window where you can setup the components and the layout of your app.
Dialogue: 0,0:01:19.81,0:01:25.82,Default,,0000,0000,0000,,Our App needs a button component. So, click on "Button" and the drag it over to the viewer and then drop it.
Dialogue: 0,0:01:26.06,0:01:31.90,Default,,0000,0000,0000,,One of the neatest things about App Inventor is that you can see your app on your phone while you're building it.
Dialogue: 0,0:01:32.06,0:01:36.52,Default,,0000,0000,0000,,Let's get your phone connected so that you can see the app take shape and test it out as you go.
Dialogue: 0,0:01:36.52,0:01:41.65,Default,,0000,0000,0000,,Now, if you don't have an Android phone or tablet, you can still do this tutorial.
Dialogue: 0,0:01:41.69,0:01:47.82,Default,,0000,0000,0000,,But, you will need to pause this video and go read the instructions for starting an Android emulator on your computer.
Dialogue: 0,0:01:47.95,0:01:53.77,Default,,0000,0000,0000,,You can find out how to do that and also get lots of other helpful information by clicking on "Guide".
Dialogue: 0,0:01:54.25,0:01:56.95,Default,,0000,0000,0000,,Part 2: Connect to Phone
Dialogue: 0,0:01:57.00,0:02:04.56,Default,,0000,0000,0000,,Now, to get your Android phone connected to App Inventor, go up to the "Connect" menu and choose "AI Companion".
Dialogue: 0,0:02:04.74,0:02:11.26,Default,,0000,0000,0000,,You will need to have the App Inventor Companion app on your phone or tablet. It is very easy to do this:
Dialogue: 0,0:02:11.26,0:02:14.85,Default,,0000,0000,0000,,Just click on "Need help finding the companion app?".
Dialogue: 0,0:02:14.92,0:02:18.95,Default,,0000,0000,0000,,This takes you to the Google Play store to download the app.
Dialogue: 0,0:02:18.95,0:02:30.45,Default,,0000,0000,0000,,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".
Dialogue: 0,0:02:30.52,0:02:37.83,Default,,0000,0000,0000,,Okay, so once we have gotten the MIT AI2 Companion app installed, you'll need to start it up on your phone.
Dialogue: 0,0:02:40.35,0:02:47.58,Default,,0000,0000,0000,,If you closed the connection window in App Inventor, click once again on the "Connect" menu and choose "AI Companion".
Dialogue: 0,0:02:47.58,0:02:52.17,Default,,0000,0000,0000,,The connection window that pops up shows you a six-character code and a QR code.
Dialogue: 0,0:02:53.09,0:02:58.27,Default,,0000,0000,0000,,On the Companion app on your phone click the button "scan QR code".
Dialogue: 0,0:03:03.08,0:03:10.28,Default,,0000,0000,0000,,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".
Dialogue: 0,0:03:11.06,0:03:18.24,Default,,0000,0000,0000,,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.
Dialogue: 0,0:03:18.36,0:03:23.48,Default,,0000,0000,0000,,From now on, all of the changes you make to your app will show up on the phone right away.
Dialogue: 0,0:03:23.50,0:03:29.78,Default,,0000,0000,0000,,Seems like magic, right? Well, if you disconnect it from App Inventor you would no longer see the app on the phone.
Dialogue: 0,0:03:29.95,0:03:37.64,Default,,0000,0000,0000,,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.
Dialogue: 0,0:03:39.37,0:03:41.71,Default,,0000,0000,0000,,Part 3: Design Your App
Dialogue: 0,0:03:42.12,0:03:47.29,Default,,0000,0000,0000,,Notice that the button we've added says "Text for Button1" on it. Let's change that.
Dialogue: 0,0:03:47.63,0:03:54.47,Default,,0000,0000,0000,,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.
Dialogue: 0,0:03:54.65,0:04:01.14,Default,,0000,0000,0000,,To change the text that shows up on the button, click on "Text" and type in "Talk To Me".
Dialogue: 0,0:04:01.35,0:04:06.84,Default,,0000,0000,0000,,Notice, on your connected phone that the button's text changes there. \NCool, right?
Dialogue: 0,0:04:09.27,0:04:14.29,Default,,0000,0000,0000,,Great. So we only need one more component for this app before we go into the blocks to start programming.
Dialogue: 0,0:04:14.44,0:04:22.54,Default,,0000,0000,0000,,Go to "Media" and drag out a "TextToSpeech" component: Click on it, drag it over to the view and, drop it.
Dialogue: 0,0:04:22.72,0:04:28.58,Default,,0000,0000,0000,,You will notice that it drops down to the bottom, under non-visible components. That's all for components!
Dialogue: 0,0:04:28.75,0:04:35.36,Default,,0000,0000,0000,,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".
Dialogue: 0,0:04:37.06,0:04:39.88,Default,,0000,0000,0000,,Part 4: Program the Blocks
Dialogue: 0,0:04:40.04,0:04:41.78,Default,,0000,0000,0000,,And now you're in the blocks editor.
Dialogue: 0,0:04:41.96,0:04:47.22,Default,,0000,0000,0000,,The blocks editor is where you click blocks together to set the behavior of your app.
Dialogue: 0,0:04:47.37,0:04:50.46,Default,,0000,0000,0000,,We want our app to respond to a button click.
Dialogue: 0,0:04:50.66,0:04:54.73,Default,,0000,0000,0000,,So, go to "Button1" and see all of the blocks that go with a button.
Dialogue: 0,0:04:54.88,0:04:58.33,Default,,0000,0000,0000,,Choose "Button1.Click" and drop it in the work area.
Dialogue: 0,0:04:58.44,0:05:03.14,Default,,0000,0000,0000,,Now we have to put in the blocks to tell the app what to do when the button is clicked.
Dialogue: 0,0:05:03.38,0:05:09.41,Default,,0000,0000,0000,,Go to the TextToSpeech component, click on it and see all of the blocks that go with TextToSpeech.
Dialogue: 0,0:05:09.42,0:05:16.38,Default,,0000,0000,0000,,Choose call "TextToSpeech1.Speak" and drag it over to the "when Button1.Click" block.
Dialogue: 0,0:05:15.65,0:05:21.08,Default,,0000,0000,0000,,It will fit right inside and you will hear a click when the blocks connect. I love that sound!
Dialogue: 0,0:05:21.23,0:05:24.100,Default,,0000,0000,0000,,Now, we have one more thing to add before testing the app out.
Dialogue: 0,0:05:25.08,0:05:30.02,Default,,0000,0000,0000,,Notice that we have a blank socket here. We have to tell the "Speak" block what to say.
Dialogue: 0,0:05:30.03,0:05:41.24,Default,,0000,0000,0000,,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.
Dialogue: 0,0:05:41.38,0:05:43.61,Default,,0000,0000,0000,,Another satisfying click.
Dialogue: 0,0:05:43.68,0:05:51.29,Default,,0000,0000,0000,,Now click on that empty text block and type "Congratulations! You've made your first app!"
Dialogue: 0,0:05:52.15,0:05:54.22,Default,,0000,0000,0000,,Part 5: Test Your App
Dialogue: 0,0:05:54.23,0:05:57.89,Default,,0000,0000,0000,,Okay, you can test the app now! Go to your phone and click the button.
Dialogue: 0,0:05:58.22,0:06:00.49,Default,,0000,0000,0000,,>Congratulations! You've made your first app!<
Dialogue: 0,0:06:00.81,0:06:04.65,Default,,0000,0000,0000,,If you had any trouble with this tutorial you can view the written version on our website.
Dialogue: 0,0:06:04.76,0:06:07.08,Default,,0000,0000,0000,,That's it?\NEr ja...
Dialogue: 0,0:06:07.08,0:06:08.50,Default,,0000,0000,0000,,Okay, see you later!
Dialogue: 0,0:06:08.65,0:06:09.63,Default,,0000,0000,0000,,Wait, get back here!
Dialogue: 0,0:06:09.90,0:06:13.75,Default,,0000,0000,0000,,Well I thought the app would be a little cooler - I can talk to myself...
Dialogue: 0,0:06:13.92,0:06:18.95,Default,,0000,0000,0000,,Patience, young one! Now that we know how to use App Inventor, possibilities are endless.
Dialogue: 0,0:06:19.11,0:06:21.60,Default,,0000,0000,0000,,- Can we make it respond to shaking?\N- Ja
Dialogue: 0,0:06:21.60,0:06:23.76,Default,,0000,0000,0000,,- Or let the user input their own text?\N- Absolutely!
Dialogue: 0,0:06:24.20,0:06:27.23,Default,,0000,0000,0000,,In fact, in our next video, that's just what we're gonna do.
Dialogue: 0,0:06:27.29,0:06:32.65,Default,,0000,0000,0000,,We will make it so that when someone shakes the phone, it talks and also so the user can put in their own text.
Dialogue: 0,0:06:32.76,0:06:34.33,Default,,0000,0000,0000,,Awesome! I can't wait!
Dialogue: 0,0:06:34.33,0:06:43.82,Default,,0000,0000,0000,,♩♫♪♬