talk.jpg


Goal: For our first app, we will be creating an app which speaks when you press a button. Check out this video to see a preview of the app.


0. Before you begin, you need to have a google account. Once you have that account, go to

http://ai2.appinventor.mit.edu/

1.**Start a new project.

Please name all of your files with a prefix of your first initial and last name. For example, if your name was Minnie Mouse, you could name your project: MMouse_TalkToMe


2.design button.pngYou’re on the Designer Window**

a. Customize the screen to change the title and make the background a different color. The screen represents what you will see on your device.

b. Add a Button that we will push to get the app to talk.

c. **Change text of Button to “Talk to Me” so the user knows what the button does.


3. design button.png Add **TextToSpeech. This is the component that makes the device speak text.


4. Screen Shot 2016-04-28 at 4.53.36 PM.pngSwitch to the **Blocks Window .

In the Blocks window, you will add functions to the button you have created.


a. Add a **when.Click block. This tells the device to do something when the button is clicked.

b. When the button is clicked, add the instruction to speak text by adding the **call.Speak block to the when.Click block.

c. Add a blank string ( " " ) textArgument to the call.Speak block and type in “Congratulations! You have made your first app.”



5. Test your app.*

Connect to a device

*Look at the device and see the changes live! Occasionally, you may have to reconnect, but the majority of changes you make won't require reconnection.

6. Now let’s make the app talk when we shake the device!

A) design button.pngAdd an **AccelerometerSensor component. This needs to be done in the Designer window.

B) Screen Shot 2016-04-28 at 4.53.36 PM.png **Add a block for when the AccelerometerSensor is shaking.




7. Now we want to make the device speak when you shake it. Just like before, you’ll need TextToSpeech!

A) Add the call.Speak block to when when.Shaking.

B) Add a textArgument and make the device say something like “Hey! Stop shaking me!”.


8. Wouldn't it be nice if it could say things that hadn't been pre-set?

A) design button.png Add a **TextBox component to the screen to allow the user to type in new things to say in the app.


9. Screen Shot 2016-04-28 at 4.53.36 PM.png We want the app to say the text in our textbox instead of the "Congratulations! You have made your first app"

Add a TextBox1.Text block to take the text the user types (strings) and replace the "Congratulations!" argument in the TextToSpeech component in the when.Click block. call.speak will speak the message when the user pushes the button (talk to me). This will replace the message you originally had your device speak.


10. Congratulations! You just built your first app. Now try it out and show your friends.


Challenges

1. (*) Add buttons which say different things.
2. () Put an image on your button
3. (*) Add a button which uses what is typed in the textbox, but changes all occurrences of "you" with "me" before speaking it.



Useful Terminology:
When -- "When Button Click" or other "When" blocks are called Events. When we respond to events, it is called event-handling. When the functioning of the app is totally controlled by the user clicking on buttons, we call it event-driven programming.
String -- A string is a series of characters (text). In App Inventor it is denoted by quotation marks " "
Argument -- is a piece of data needed by an instruction. For example, when you call TextToSpeech.Speak - until you give it what to say (the argument), the statement isn't complete.