Informatika MIT APP Inventor SpeechBoard Part 1

Introduction

In this tutorial, we will explore how to create a SpeechBoard application using MIT App Inventor. This project is perfect for beginners who want to learn about mobile app development and incorporate speech recognition features into their apps. By the end of this guide, you will have a functional application that can recognize and respond to voice commands.

Step 1: Setting Up MIT App Inventor

1. Access MIT App Inventor

   • Go to the MIT App Inventor website: appinventor.mit.edu
   • Click on "Create Apps!" to start.

2. Sign In

   • Use your Google account to sign in to the platform.

3. Start a New Project

   • Click on “Projects” in the top menu and select “Start new project.”
   • Name your project "SpeechBoard."

Step 2: Designing the User Interface

1. Add Components

   • Drag and drop the following components from the Palette to the Viewer:
     • Label: This will display recognized text.
     • Button: This will initiate the speech recognition.
     • TextBox: For user input (if needed).

2. Configure Properties

   • Click on each component and modify properties in the Properties panel:
     • Label: Change its text to "Say something!" and adjust font size.
     • Button: Change its text to "Speak" and set its background color.

3. Arrange Components

   • Position the components neatly in the viewer for a user-friendly layout.

Step 3: Adding Functionality with Blocks

1. Access the Blocks Editor

   • Click on the “Blocks” button to switch to the Blocks Editor.

2. Create Speech Recognition Logic

   • Find the "Button" component in the Blocks section.
   • Drag the “when Button1.Click” block to the workspace.
   • Attach the “call SpeechRecognizer1.GetText” block to this event.

3. Display Recognized Text

   • Use the “when SpeechRecognizer1.AfterGettingText” block.
   • Attach a “set Label1.Text to” block and connect it to the output from the speech recognizer.

Step 4: Testing the Application

1. Use the MIT AI2 Companion

   • Download the MIT AI2 Companion app on your mobile device.
   • Connect your device to the App Inventor by scanning the QR code.

2. Run Your App

   • Press the “Connect” button in App Inventor and select “AI Companion.”
   • Test the speech recognition feature by pressing the button and speaking.

Conclusion

In this tutorial, you learned how to set up MIT App Inventor, design a SpeechBoard user interface, add speech recognition functionality, and test your application. This foundational knowledge can help you expand your app with more features, such as adding responses or integrating additional speech commands. For your next steps, consider exploring more components in MIT App Inventor to enhance your app further!