Welcome to MIT App Inventor! :rocket: Your Journey to Building Amazing Apps Starts Here!

:dart: What We'll Learn Today

Get ready to become an app developer! :star2: By the end of today's lesson, you'll know how to:

• Set up MIT App Inventor on your device (super easy!) :hammer_and_wrench:
• Test your apps in 3 different ways (phone, tablet, or computer) :emoji:
• Install your very own apps - just like the ones on the App Store! :tada:
• Connect your computer to your phone like a pro developer! :computer::iphone:

:bulb: Did you know? :bulb:

MIT App Inventor was created by professors at MIT (that's one of the coolest universities in the world!) to help anyone - even kids like you - build real mobile apps! Over 8 million people around the world have used it to create amazing apps. Some kids have even made apps to help their communities! You could be next! :star2:

:information_source: Remember! :emoji: App Inventor 2 needs a modern browser to work properly! It does not work with Internet Explorer.

• :white_check_mark: Use Chrome (it's super fast!)
• :white_check_mark: Use Firefox (works great too!)
• :x: Don't use Internet Explorer

Let's Get Started! :rocket:

Watch These Awesome Setup Videos First! :emoji:

Before we dive in, let's watch these super helpful video guides. They'll show you exactly what to do! Grab some popcorn and let's learn together! :emoji:

Video

Video

Part One: Installing the MIT App Inventor Companion App :emoji:

:information_source: Remember! :emoji: The MIT App Inventor Companion App is like a magic bridge that connects your computer to your phone. It lets you see your app come to life instantly! When you make changes on your computer, BOOM! :emoji: They appear on your phone right away!

Time to install the MIT App Inventor Companion App! This is where the magic begins! :sparkles: Choose the option that works for you:

Option A: If You Have a Phone or Tablet :iphone:

Awesome! You have a device! Let's get the MIT AI2 Companion App on it. You can either:

1. Search for "MIT AI2 Companion" in your app store :mag:
2. OR scan these QR codes (it's like magic!) :sparkles:

For Android phones and tablets :emoji: (Samsung, Google, etc.):

For iPhone and iPad :emoji::

:bulb: Pro Tip! :bulb:

Ask your parents or teacher to help you scan the QR code if you're not sure how. It's like taking a photo of the square pattern!

Option B: If You Don't Have a Phone (No Worries!) :computer:

No phone? No problem at all! You can use an emulator - it's like having a pretend phone inside your computer! How cool is that? :video_game:

Choose one of these emulators to install:

:star2: OPTION 1 - aiStarter (We recommend this - it's easier! :thumbsup:):

1. First, find out what computer you have:
   • Click here for Windows computers 🪟
   • Click here for macOS (Apple computers) :emoji:
2. Download the emulator (it's like downloading a game!)
3. Install it by following the instructions on screen

OPTION 2 - Bluestacks (A bit more complex, but works great too!):

1. Watch this helpful video: "How to Set Up Bluestacks Emulator" :emoji:
2. Click here to "Download Bluestacks Emulator"
3. Download and install the emulator (just like installing a game!)
4. Then click this link: "Download App Inventor Companion App apk"
5. Download and install the companion app inside Bluestacks

Part 2: Setting Up Live Testing (This is Where the Magic Happens!) :sparkles:

Now comes the exciting part - connecting everything together! You have 3 awesome ways to test your apps. Pick the one that works best for you:

1. :emoji: Using AI Companion App (If you have a phone/tablet + WiFi) - Most popular!
2. :computer: Using Emulator (If you don't have a phone/tablet) - Works great!
3. :emoji: Using USB Cable (If you have a phone/tablet but no WiFi) - Super reliable!

Option One: Using AI Companion with WiFi :emoji: (The Easiest Way!)

This is the most popular way to test your apps! If you have a phone/tablet and WiFi, you're all set! :tada:

Here's how to do it:

Step One: Make sure both your computer and your phone/tablet are connected to the SAME WiFi network :emoji:

• Think of it like being in the same room - they need to talk to each other!

Step 2: Open your App Inventor project and choose one of these cool ways to connect:

• Type in the 6-letter code (like a secret password!) :emoji:
• OR scan the QR code (like magic!) :emoji:

:bulb: Cool Fact! :emoji:

When you connect, your phone and computer start talking to each other in real-time! Any change you make on the computer appears on your phone instantly - it's like teleportation for your code!

Option 2: Using an Emulator :computer: (Perfect if You Don't Have a Phone!)

No phone? No worries! An emulator is like having a virtual phone right on your computer screen! :iphone::computer:

Method A: Using aiStarter (Recommended! :star2:)

Step One: Launch aiStarter

• Windows users: Double-click the aiStarter icon (look for the green Android robot!) :emoji:
• Mac users: Good news! aiStarter starts automatically when you log in! :tada:

Step 2: Check if aiStarter is running When you see this window, you're ready to go! Give yourself a high-five! :emoji:

Step 3: Connect to the emulator Open your App Inventor project and click "Connect" -> "Emulator". If it asks to update, say yes!

Step 4: Be patient! ⏳ The emulator needs a few minutes to start up (just like a real phone!). Time to do a happy dance while you wait! :emoji:

Step 5: Success! :emoji: When the emulator appears and shows your app, you're officially an app developer!

Method B: Using Bluestacks (Alternative Option)

Step One: Open Bluestacks emulator :video_game:

Step 2: Find and open the MIT App Inventor Companion App inside Bluestacks

• It's like opening an app on a real phone!

Step 3: In MIT App Inventor, click "Connect" -> "AI Companion"

Step 4: Type the 6-letter code from MIT App Inventor into the Companion App

• Make sure to type it exactly as shown!

:information_source: Remember! :bulb: Bluestacks is like having an Android phone inside your computer. Pretty cool, right?

Option 3: Using USB Cable :emoji: (When WiFi Isn't Available)

No WiFi? No problem! You can connect your phone directly to your computer with a USB cable - just like charging your phone! :emoji:

Step One: Launch aiStarter (just like in Option 2!)

• Windows: Double-click the aiStarter icon :emoji:
• Mac: It starts automatically! :sparkles:

Step 2: Check that aiStarter is running You'll see this friendly window:

Step 3: Connect your phone to your computer with a USB cable

• Use the same cable you use to charge your phone! :emoji:

Step 4: In MIT App Inventor, click "Connect" -> "USB"

:bulb: Pro Tip! :bulb:

If it doesn't work the first time, try a different USB cable. Some cables only charge and don't transfer data!

Part 3: Installing Your Amazing Apps! :tada: (The Most Exciting Part!)

Ready to install your very own app on a real phone? This is the moment you've been waiting for! :star2:

:information_source: Important Note! :iphone: This section is for Android phones only. iPhone users can still test apps using the Companion App, but can't install them permanently (yet!).

First, let's prepare your Android phone:

Step One: Allow your phone to install your awesome apps! :emoji:

• Go to Settings on your phone :emoji:️
• Look for Security (or Safety or Privacy) :emoji:
• Find and check the box that says "Unknown sources" or "Install unknown apps" :white_check_mark:
• Your phone might warn you - that's okay! You know this app is safe because YOU made it! :emoji:

Step 2: Now choose how you want to install your app:

Method A: QR Code Magic! :emoji: (Easiest Way)

Step One: In MIT App Inventor, click the "Build" button :emoji:

Step 2: Select "Android App (.apk)" :iphone:

Step 3: Wait for the magical QR code to appear! (This takes about 30 seconds - perfect time for another happy dance! :emoji:)

Step 4: Scan the QR code with your phone's camera :emoji:

• A download link will appear - tap it!

Step 5: Install your app and become a real app developer! :emoji:

• Your phone will ask if you want to install - say YES!
• Open your app and show it to everyone! You made this! :star2:

Method B: Email Your App! :emoji: (Share with Friends and Family!)

Step One: Click the "Build" button in MIT App Inventor :emoji:

Step 2: Select "Android App (.apk)" :iphone:

Step 3: Click "Download .apk now" to save it to your computer :emoji:

Step 4: Email the app file to yourself (or share it with friends!) :emoji:

• Attach the .apk file just like you'd attach a photo!

Step 5: On your phone, open your email and download the attachment :emoji:

Step 6: Tap the downloaded file to install your amazing app! :dart:

Step 7: Open your app and celebrate! You're now a real app developer! :tada::emoji:

:bulb: Share Your Success! :star2:

Now you can share your app with friends and family! They can install it on their Android phones too. How cool is that? You're not just using apps anymore - you're MAKING them!

You Did It! :star2:

Congratulations, young app developer! You've just learned how to:

• :white_check_mark: Set up MIT App Inventor like a pro
• :white_check_mark: Connect your computer to your phone/tablet in 3 different ways
• :white_check_mark: Install your own apps on real devices

You're now ready to create amazing apps that can help people, entertain your friends, or solve problems in your community!

:information_source: Info What's Next? :rocket: In the next lesson, we'll start building your first real app! Get ready to bring your creative ideas to life!

Remember: Every great app developer started exactly where you are now. The apps you use every day were created by people just like you. Now it's YOUR turn to create something amazing! :muscle::star2: