Explore MIT App Inventor

:video_game: Activity Time!

Time needed: 25-30 minutes

What you'll do: Create your very first mobile app! You'll build a magical app that can make images appear and disappear with the tap of a button. It's like having superpowers in your phone! :iphone::sparkles:

Before You Start:

:white_check_mark: Have a computer or tablet ready
:white_check_mark: Make sure you can access MIT App Inventor website
:white_check_mark: Have the MIT AI2 Companion app installed on your phone (optional)
:white_check_mark: Pick a fun image you'd like to use in your app
:white_check_mark: Get ready to become an app developer!

Watch and Learn! :emoji:

Follow along with this helpful video tutorial:

What You'll Build:

Your amazing app will have:

• 2 Magic Buttons: One to show your image, one to hide it
• One Cool Image: Any picture you choose!
• Special Powers: Make the image appear and disappear!

Step-by-Step Instructions:

One. Start Your App Journey

• Open MIT App Inventor in your browser
• Click "Create Apps!" and sign in
• Start a new project - give it a cool name like "Magic Image App"

2. Design Your App Screen

• Drag 2 buttons from the palette to your screen
• Name them "Show_button" and "Hide_button"
• Add an Image component
• Upload your favorite picture!

:bulb: Choose a fun image like your pet, favorite cartoon character, or a cool drawing you made!

3. Add the Magic (Programming)!

Switch to the Blocks editor and create this logic:

For the Show Button:

• When Show_button.Click
• Set Image1.Visible to true

For the Hide Button:

• When Hide_button.Click
• Set Image1.Visible to false

4. Test Your Creation!

• Click "Connect" -> "AI Companion"
• Scan the QR code with your phone
• OR use the emulator on your computer
• Try clicking your buttons - watch the magic happen!

How You'll Know It Works:

:white_check_mark: Tap "Show" -> Your image appears!
:white_check_mark: Tap "Hide" -> Your image disappears!
:white_check_mark: You can make it appear and disappear as many times as you want!tip If your image doesn't show up, check that you uploaded it correctly and that your blocks are connected properly!

:trophy: Challenge Yourself!

Finished early? Try these cool extras:

• Add more images and buttons
• Make the image change size when it appears
• Add a sound effect when buttons are clicked
• Change button colors to make them more exciting

Remember:

You just created a real mobile app! That's amazing! Every app developer started with simple projects like this. Keep practicing and you'll be making incredible apps in no time! :star2:

Great job, App Developer! :tada: