-
♩♫♪♬
-
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!
-
♩♫♪♬