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

Introduction

In this tutorial, we will learn how to create an interactive app using MIT App Inventor that makes your phone talk when you shake it and speaks out any phrase typed into the screen. This engaging project helps you understand the basics of app development and how to incorporate user interaction in your applications.

Step 1: Set Up Your Project

1. Open MIT App Inventor:

   • Go to the MIT App Inventor website and log in with your Google account.

2. Create a New Project:

   • Click on "Projects" in the top-left corner and select "Start New Project".
   • Name your project “TalkToMe” and click "OK".

3. Design the User Interface:

   Add a TextBox

   • Drag and drop a TextBox component from the “User Interface” palette onto the viewer. This will allow users to input text.

   Add a Button

   • Drag a Button component to the viewer. Label it "Speak" to trigger the speech function.

   Add a Label

   • Add a Label to display messages or instructions.

Step 2: Implement Speech Functionality

1. Add the Text-to-Speech Component:

   • Navigate to the “Media” palette and drag the TextToSpeech component into the viewer. It will appear as a non-visible component.

2. Set Up Button Click Event:

   • Click on the "Blocks" section to switch to the programming interface.
   • Find the Button you created in the blocks list.

   Create a block for the Button’s "click" event

   • Use the block “when Button1.Click do”.
   • From the TextToSpeech component, add the block “call TextToSpeech1.Speak”.
   • Connect the TextBox's text to the Speak block to read out what the user enters.

   Example code block:

   when Button1.Click do
      call TextToSpeech1.Speak(TextBox1.Text)
   

Step 3: Add Shake Detection

1. Enable Accelerometer Sensor:

   • In the “Sensors” palette, drag the AccelerometerSensor component into the viewer.

2. Implement Shake Detection:

   • In the Blocks section, find the AccelerometerSensor.

   Create a block for the "Shake" event

   • Use the block “when AccelerometerSensor1.Shaken do”.
   • Add a block to call TextToSpeech and set it to speak a predefined phrase, e.g., "Hello! You shook me!".

   Example code block:

   when AccelerometerSensor1.Shaken do
      call TextToSpeech1.Speak("Hello! You shook me!")
   

Step 4: Test Your App

1. Connect Your Device:

   • Use the MIT AI2 Companion app on your Android device to connect to your project.
   • Scan the QR code displayed in the App Inventor interface to load your app.

2. Check Functionality:

   • Type a phrase in the TextBox and press the Speak button to hear it spoken aloud.
   • Shake your device to see if it responds with the predefined message.

Conclusion

Congratulations! You have successfully created an app that speaks out text when a button is pressed and responds to shaking. This project not only enhances your understanding of MIT App Inventor but also serves as a foundation for more complex applications. Consider experimenting with different phrases or adding more features, like changing the voice or speed of speech. Happy coding!