Teach Your App to See: Your First Mobile AI
What if you could give your app a superpower? Not just a button that tells a joke, but an app that can *see* and *understand* the world? Get ready, builder, because today we are doing exactly that. This is the boss battle of our advanced track so far! 🚀
🎯 Your Mission: The AI Fruit Sorter!
Our main quest today is to build an app with a brain. Using a free tool called Lobe.ai, we'll teach a computer to tell the difference between a banana and an apple just by showing it pictures! You become the AI's teacher. It's a real *whoa* moment. Here's how it works:
Your Camera takes a picture
Your AI Brain (trained in Lobe)
Your App says "I see a banana!"
To complete this mission, we first need to learn some magic spells in the app's language, Kotlin, to give it instructions. Ready? Let's gear up!
🛡️ Safety Check: Fair AI! An AI is only as smart as the data we give it. What if you only trained your fruit-sorter with red apples? It might get confused by a green one! This is called bias. To build fair and kind AI, we must always train it with lots of different and diverse examples. Be a responsible AI trainer!
Your First Kotlin Spell: Making Buttons Work
When you tap a button... you're asking the app to look up a recipe! In Kotlin, that recipe is called a function. The magic word to start any new recipe is fun. Let's write our first one!
✨ Your AI Playground!
Heads up, Builder! This phone simulator is a web tool to help us learn Kotlin *logic* quickly. The Kotlin brain you're writing here is the real deal.
👀 How this looks in a real app (XML)
<!-- In a real app, you design the look with XML! -->
<Button
android:id="@+id/myCoolButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Tell Me a Joke!" />Use the AI to invent a button for a silly app! Describe what you want, and the AI will write the Kotlin code for you. Not sure where to start? Try an idea starter!
My Silly App
Click "Generate" and watch this screen! The AI will create code to make this button interactive.
🕵️♀️ Code Explorer!
The AI just wrote a magic spell in Kotlin! Click on the lines of code below to see what part of the app they control. Let's break it down so we understand its power:
🍱 fun onButtonClick(...) { ... }
The fun is our mission container! It's short for 'function'. Everything inside the {...} happens when the button is clicked. It’s the recipe for one specific action.
🎉 button.text = "New Words!"
Think of your button as your favorite LEGO brick. The .text is the sticker on it. With the = sign, you're telling the app to peel off the old sticker and put a new one on!
💬 Toast.makeText(...).show()
A Toast is that little pop-up message. makeText is the spell that creates the message. .show() is you shouting 'Abracadabra!' to make it appear.
🧠 Quick Check!
In our Kotlin code 'recipe', what's the magic word that starts every new mission?
🕵️ Code Detective: What's `(view: View)`?
You'll see (view: View) inside the parentheses of your function. This is Kotlin's way of knowing *what* was just touched. The `view` is a special variable that holds a reference to the exact button that was clicked!
Aha! Moment
To see why `view` is useful, click the button below! It will ask the AI to add a new line to your code that uses `view` to tell you what kind of thing you just clicked.
💥 Code Mad Libs Challenge!
Let's remix our app! Fill in the blanks below with your own ideas and hit the button to see your changes happen instantly on the phone!
// ... some code ...
button.text = ""
Toast.makeText(this, "", Toast.LENGTH_LONG).show()
// ... more code ...🧩 Level 2 Remix Puzzle
A real app gives the user feedback! Can you figure out how to make the button turn green after you click it? Hint: Go back to the AI Playground and try telling it to "set the button's background color to green." Let's see if you can solve the puzzle!
🌶️ Spicy Challenge: Pro Loading State
(For older builders!)
Your Mission, from the Project Manager:
Real apps need to stop the user from clicking a button a million times while it's working! When the button is clicked, it must:
- Change its text to "Thinking...".
- Disable itself so it can't be clicked again (`button.isEnabled = false`).
- Wait 2 seconds.
- Show the final toast message.
- Re-enable itself and reset its text.
Hint: To solve the "wait" part, ask the AI to use something called a Handler and postDelayed in Kotlin. (This is what the pros read!)
🚀 Level Up: Save Your Work Like a Pro
(For older builders!)
Imagine you add a cool new feature, but it accidentally breaks the whole app. Panik! With a tool called Git, you can instantly rewind time to a version that worked. It's the ultimate undo button for your entire project. GitHub is like a cloud drive for your code.
This is a real skill that pro developers use every single day. When you're ready to take the next step, ask a parent to help you explore the official, free "Introduction to GitHub" course.
Explore GitHub Skills🎉 Mission Accomplished & Next Steps
You did it! You've learned how to give an app instructions and even seen how you can give it an AI brain. For our grand finale, we'll take these skills and build a real app you can install on a phone.
Ready for the real thing? Check out this official Google Codelab that walks you through building a real image classification app in Android Studio. It's the perfect next step for a motivated builder!
Try a Google Codelab🛡️ Safety Check! Google Codelabs and Android Studio are pro tools. They are safe, but they are more complex. Always work with a parent when installing new software or exploring new websites. The only safe place to get Android Studio is from its official site: `developer.android.com`.
👨👩👧 Parent Corner
Your builder just completed one of our most advanced web-based lessons! They grappled with core programming concepts (functions), user experience (loading states), and the ethics of AI (bias). This is huge!
Your role: Celebrate the win! The "next steps" in this lesson point towards professional tools like Android Studio and Google Codelabs. These are fantastic, free resources, but they represent a significant jump in complexity. This is a great time to be a co-pilot, helping them navigate new websites and software installations if they're excited to proceed.
Conversation Starter: Ask them about the AI bias "Safety Check." "If you were building an AI to recognize different types of dogs, what kinds of pictures would you need to show it to make sure it was fair to all dogs, not just golden retrievers?" This reinforces the core concept in a fun, relatable way.