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

Introduction

In this tutorial, we will learn how to create a simple app using MIT App Inventor that enables your phone to talk using the Text to Speech feature. This is the first part of a series that aims to introduce you to app development with MIT App Inventor, making it accessible even for beginners.

Step 1: Set Up Your MIT App Inventor Account

1. Go to the MIT App Inventor website.
2. Click on "Create Apps!" which will redirect you to the login page.
3. Sign in using your Google account.
4. Accept any permissions requested by MIT App Inventor.

Practical Tip:

If you encounter issues logging in, ensure that your Google account is active and that you have a stable internet connection.

Step 2: Start a New Project

1. After logging in, click on "Projects" in the top menu.
2. Select "Start new project."
3. Name your project (e.g., "TalkToMe") and click "OK."

Common Pitfall to Avoid:

Ensure your project name does not contain spaces or special characters to prevent errors later.

Step 3: Design Your App Interface

1. In the Designer view, you will see a palette on the left.

Drag and drop the following components onto the viewer

• Label: This will display instructions or feedback.
• TextBox: This allows users to input text they want to be spoken.
• Button: This will trigger the speech function.
• TextToSpeech: This component will perform the text-to-speech action (found under the "Media" section).

Practical Tip:

Customize the Label text to say "Enter text to speak:" to guide users.

Step 4: Configure Button Properties

1. Click on the Button component.
2. In the properties panel, set the text to "Speak".

Real-World Application:

Make sure the button is clear and visible to enhance user experience.

Step 5: Program the Button Action

1. Switch to the Blocks view by clicking on "Blocks" in the upper right corner.
2. Find the Button component in the blocks palette.
3. Drag the "when Button.Click" block into the workspace.
4. Add the "call TextToSpeech.Speak" block beneath it.
5. Connect the TextBox's text to the "call TextToSpeech.Speak" block to specify what will be spoken.

Here is how your blocks should look:

when Button.Click
  call TextToSpeech.Speak
    Text = TextBox.Text

Practical Tip:

Ensure that the TextBox is properly referenced to avoid errors when running the app.

Step 6: Test Your App

1. Connect your Android device or use the MIT AI2 Companion app.
2. Click on "Connect" in the top menu, then select "AI Companion."
3. Scan the QR code with your device.
4. Enter text into the TextBox and press the "Speak" button to listen to the spoken output.

Common Pitfall to Avoid:

If the app doesn't respond, check your connections and ensure that the TextToSpeech component is properly configured.

Conclusion

Congratulations! You have successfully created a simple app that can speak text input using MIT App Inventor. This foundational skill opens the door to more complex app development. In the next tutorials, we will explore additional features and functionalities to enhance your app-building skills. Keep experimenting and happy coding!