Return to Video

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

  • 0:02 - 0:12
    ♩♫♪♬
  • 0:12 - 0:15
    Hi! Welcome to App Inventor's Hour of Code
  • 0:15 - 0:19
    We are here at the MIT's center for mobile learning. I am Shay.
  • 0:19 - 0:22
    And I am Emily. Today we are going to show you how to build your first Android app.
  • 0:22 - 0:25
    Today's app is called "Talk To Me", because, well, it talks to you.
  • 0:25 - 0:29
    It's quite simple: You press a button and the phone speaks a phrase out loud.
  • 0:30 - 0:31
    >Welcome to App Inventor<
  • 0:32 - 0:33
    Can you make it say anything?
  • 0:33 - 0:34
    Pretty much!
  • 0:34 - 0:36
    I could have fun with this one!
  • 0:36 - 0:38
    Okay, let's get started...
  • 0:38 - 0:40
    Part 1: Create a New Project
  • 0:41 - 0:49
    To get started building an app, click the "Create" button from the App Inventor homepage "appinventor.mit.edu".
  • 0:49 - 0:56
    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:57 - 0:59
    You can dismiss the splash screen for now.
  • 0:59 - 1:03
    When you go into App Inventor for the first time you won't have any projects.
  • 1:04 - 1:06
    So click "New Project" in the upper left.
  • 1:07 - 1:09
    Our first App is called "TalkToMe".
  • 1:09 - 1:15
    App Inventor project names can't have spaces. So type in "TalkToMe" with no spaces.
  • 1:15 - 1:20
    Now you are in the design window where you can setup the components and the layout of your app.
  • 1:20 - 1:26
    Our App needs a button component. So, click on "Button" and the drag it over to the viewer and then drop it.
  • 1:26 - 1:32
    One of the neatest things about App Inventor is that you can see your app on your phone while you're building it.
  • 1:32 - 1:37
    Let's get your phone connected so that you can see the app take shape and test it out as you go.
  • 1:37 - 1:42
    Now, if you don't have an Android phone or tablet, you can still do this tutorial.
  • 1:42 - 1:48
    But, you will need to pause this video and go read the instructions for starting an Android emulator on your computer.
  • 1:48 - 1:54
    You can find out how to do that and also get lots of other helpful information by clicking on "Guide".
  • 1:54 - 1:57
    Part 2: Connect to Phone
  • 1:57 - 2:05
    Now, to get your Android phone connected to App Inventor, go up to the "Connect" menu and choose "AI Companion".
  • 2:05 - 2:11
    You will need to have the App Inventor Companion app on your phone or tablet. It is very easy to do this:
  • 2:11 - 2:15
    Just click on "Need help finding the companion app?".
  • 2:15 - 2:19
    This takes you to the Google Play store to download the app.
  • 2:19 - 2:30
    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".
  • 2:31 - 2:38
    Okay, so once we have gotten the MIT AI2 Companion app installed, you'll need to start it up on your phone.
  • 2:40 - 2:48
    If you closed the connection window in App Inventor, click once again on the "Connect" menu and choose "AI Companion".
  • 2:48 - 2:52
    The connection window that pops up shows you a six-character code and a QR code.
  • 2:53 - 2:58
    On the Companion app on your phone click the button "scan QR code".
  • 3:03 - 3:10
    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".
  • 3:11 - 3:18
    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.
  • 3:18 - 3:23
    From now on, all of the changes you make to your app will show up on the phone right away.
  • 3:24 - 3:30
    Seems like magic, right? Well, if you disconnect it from App Inventor you would no longer see the app on the phone.
  • 3:30 - 3:38
    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.
  • 3:39 - 3:42
    Part 3: Design Your App
  • 3:42 - 3:47
    Notice that the button we've added says "Text for Button1" on it. Let's change that.
  • 3:48 - 3:54
    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.
  • 3:55 - 4:01
    To change the text that shows up on the button, click on "Text" and type in "Talk To Me".
  • 4:01 - 4:07
    Notice, on your connected phone that the button's text changes there.
    Cool, right?
  • 4:09 - 4:14
    Great. So we only need one more component for this app before we go into the blocks to start programming.
  • 4:14 - 4:23
    Go to "Media" and drag out a "TextToSpeech" component: Click on it, drag it over to the view and, drop it.
  • 4:23 - 4:29
    You will notice that it drops down to the bottom, under non-visible components. That's all for components!
  • 4:29 - 4:35
    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".
  • 4:37 - 4:40
    Part 4: Program the Blocks
  • 4:40 - 4:42
    And now you're in the blocks editor.
  • 4:42 - 4:47
    The blocks editor is where you click blocks together to set the behavior of your app.
  • 4:47 - 4:50
    We want our app to respond to a button click.
  • 4:51 - 4:55
    So, go to "Button1" and see all of the blocks that go with a button.
  • 4:55 - 4:58
    Choose "Button1.Click" and drop it in the work area.
  • 4:58 - 5:03
    Now we have to put in the blocks to tell the app what to do when the button is clicked.
  • 5:03 - 5:09
    Go to the TextToSpeech component, click on it and see all of the blocks that go with TextToSpeech.
  • 5:09 - 5:16
    Choose call "TextToSpeech1.Speak" and drag it over to the "when Button1.Click" block.
  • 5:16 - 5:21
    It will fit right inside and you will hear a click when the blocks connect. I love that sound!
  • 5:21 - 5:25
    Now, we have one more thing to add before testing the app out.
  • 5:25 - 5:30
    Notice that we have a blank socket here. We have to tell the "Speak" block what to say.
  • 5:30 - 5:41
    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.
  • 5:41 - 5:44
    Another satisfying click.
  • 5:44 - 5:51
    Now click on that empty text block and type "Congratulations! You've made your first app!"
  • 5:52 - 5:54
    Part 5: Test Your App
  • 5:54 - 5:58
    Okay, you can test the app now! Go to your phone and click the button.
  • 5:58 - 6:00
    >Congratulations! You've made your first app!<
  • 6:01 - 6:05
    If you had any trouble with this tutorial you can view the written version on our website.
  • 6:05 - 6:07
    That's it?
    Er ja...
  • 6:07 - 6:09
    Okay, see you later!
  • 6:09 - 6:10
    Wait, get back here!
  • 6:10 - 6:14
    Well I thought the app would be a little cooler - I can talk to myself...
  • 6:14 - 6:19
    Patience, young one! Now that we know how to use App Inventor, possibilities are endless.
  • 6:19 - 6:22
    - Can we make it respond to shaking?
    - Ja
  • 6:22 - 6:24
    - Or let the user input their own text?
    - Absolutely!
  • 6:24 - 6:27
    In fact, in our next video, that's just what we're gonna do.
  • 6:27 - 6:33
    We will make it so that when someone shakes the phone, it talks and also so the user can put in their own text.
  • 6:33 - 6:34
    Awesome! I can't wait!
  • 6:34 - 6:44
    ♩♫♪♬
Title:
Talk To Me (part 1), MIT App Inventor Tutorial #1
Description:

more » « less
Video Language:
English
Duration:
06:47

English subtitles

Revisions Compare revisions