Tutorial: Tu primera app con MIT App Inventor 2

Introduction

In this tutorial, you'll learn how to create your first application using MIT App Inventor 2. This guide will walk you through the process of building an app that features an image, text, two buttons, and a Text-to-Speech component. By the end of this tutorial, you'll have a functional app and a solid understanding of the basics of MIT App Inventor.

Step 1: Setting Up Your MIT App Inventor Environment

1. Access MIT App Inventor

   • Go to the MIT App Inventor website: MIT App Inventor.
   • Click on "Create Apps!" to enter the App Inventor environment.

2. Sign In

   • Use your Google account to sign in. You will need a Google account to create and save your projects.

3. Start a New Project

   • Click on "Projects" in the top menu and select "Start new project."
   • Name your project (e.g., "MyFirstApp") and click "OK."

Step 2: Designing Your App Layout

1. Add a User Interface Components

   • In the Palette, find the "User Interface" section.
   • Drag and drop the following components onto the Viewer:
     • Image: This will display a picture of a city or monument.
     • Label: Use this to add text to your app.
     • Button: Add two buttons for user interaction.
     • TextToSpeech: This component will convert text to speech.

2. Configure the Image Component

   • Select the Image component and set its properties in the Properties panel (e.g., upload an image of a city).

3. Set Up the Label Component

   • Choose the Label component and enter your desired text in the "Text" property (e.g., "Welcome to My App!").

4. Customize Button Components

   • Name the first button (e.g., "Speak") and set its text to "Speak."
   • Name the second button (e.g., "Clear") and set its text to "Clear."

Step 3: Adding Functionality with Blocks

1. Open the Blocks Editor

   • Click on the "Blocks" button in the top right corner to open the Blocks editor.

2. Implement the Speak Button Logic

   • Drag the "when Button1.Click" block from the Button component.
   • Attach a "call TextToSpeech1.Speak" block to this block.
   • Set the text to be spoken by entering the Label's text.

3. Implement the Clear Button Logic

   • Drag the "when Button2.Click" block from the second Button component.
   • Attach a "set Label1.Text to" block and set it to an empty string to clear the text when the button is pressed.

Step 4: Testing Your App

1. Connect Your Device or Emulator

   • Download the MIT AI2 Companion app on your Android device or use the emulator provided by App Inventor.

2. Test Your App

   • Click "Connect" in the top menu and select "AI Companion."
   • Scan the QR code with your device or start the emulator.
   • Interact with the app to ensure the buttons function correctly and the Text-to-Speech feature works.

Conclusion

Congratulations! You've successfully created your first app with MIT App Inventor 2. You learned how to design a simple layout, add interactive components, and implement basic logic using blocks.

Next Steps

• Explore more components and functionalities within MIT App Inventor to enhance your app.
• Consider diving into tutorials that cover more advanced topics or features, such as databases or APIs, to expand your app development skills.