Theory
📱🧩 12. Speak and Change Cooler App
🌟 What is this app about?
- This app is like a chameleon that changes its screen colors when you tell it to.
- It listens to your voice with a big “SPEAK” button that you can press to start talking.
- The app’s design is simple and bold, making it super fun to interact with.
⚙️Components used in this app:
Speech Recognizer:
- 🗣️ The Speech Recognizer in App Inventor is like having a super-smart parrot in your app that listens and repeats what you say, but in typed words.
- 🎤 You talk to it, and it turns your voice into text on the screen, like magic!
- 📱 It’s perfect for when you want to tell your app what to do without even touching it.
- ✏️ You can make your own games where you score points by speaking the right words.
- 🚀 Imagine telling stories to your app and watching it write them down for you – that’s what Speech Recognizer does!
👩💻 Designing the App:
🎭 1. Prepare the Stage:
- 🚀 Open up App Inventor, create a new project, and you’ll have ‘Screen1’ ready to go.
- 🎨 Make sure everything is centred nicely by setting the ‘Align Horizontal’ and ‘Align Vertical’ properties to ‘Centre’.
🎚️ 2. Set Up Your Command Centre:
- 🏷️ Add a ‘Label’ with the text “SPEAK AND CHANGE COLOURS”, make it bold, font size 20, and let it stretch across the screen with ‘Width’ to ‘Fill parent’.
🔮 3. Create the Magic Button:
- 🎈 Place a ‘Button’ below the label and set its ‘Background Color’ to pink, ‘Font Size’ to 25, and shape to rounded for a friendly look.
- 🗣️ Label the button “SPEAK” so users know what to do.
👂 4. Add the Wizard’s Ear (Speech Recognizer):
- 🧙♂️ Drag a ‘Speech Recognizer’ component into your app; it won’t be seen, but it’s the secret behind the magic.
🌈 5. Program the Color Change:
- 🎨 In the Blocks Editor, add blocks that make the ‘Speech Recognizer’ listen when you tap “SPEAK” and then change the screen’s background color based on what you say.
🔮 6. Test Your Wizardry:
- ✨ Hit the “SPEAK” button, say a color, and watch the app work its magic!
👩💻 Coding the App:
Alright, let’s check out this cool spell (code) that makes your app listen and change colors! 🌈✨
- 🎤 When you press the “SPEAK” button (that’s the Click), it tells the app, “Hey, listen up, it’s time to hear what color we want!”
- 🗣️ After you say a color out loud, the Speech Recognizer (our app’s listening ear) wakes up and catches what you said with Get Text.
- 🤖 Then, the app thinks really hard about what you just told it (After Getting Text). It’s checking to see if it heard “red”, “black”, or “green”.
- 🔴 If it heard you say “red”, it changes the background color of the screen to red.
- ⚫ If you said “black”, it turns the background black.
- 🟢 And if it heard “green”, yep, you guessed it, the background goes green!
So, it’s like having a color-changing chameleon as an app – you talk, and it changes color just like that! What color will you try first?
🚀 What other similar apps you can create?
- 🎵 A music app where you say a genre and it plays a song from that category.
- 🍽️ A recipe app where you name an ingredient and it suggests a dish you can make.
- 📚 A storytelling app that writes down or reads back the story you tell it.
And just like that, you’ve made an app that’s as colorful and smart as you are! What will you command it to do next? 🌈🔮🎤