Using Your Phone's Superpowers
What if you could teach your app to *see*? Imagine pointing your phone's camera at a banana and having your app shout "IT'S A BANANA!" 🍌. That's On-Device AI, a real superpower. Today, you'll learn the magic spells in Kotlin to build the *controls* for an AI's brain and make it react to your commands!
🎯 Your Mission: Build the AI's Control Panel!
Your Command
AI Code Writer
App's Controls
Your mission is to learn the magic spells in the app's language, Kotlin, to make buttons and pop-up messages work. This is the control panel for your AI. You'll use our friendly AI to write the code, then see it happen live! Ready? Let's go!
🛡️ Safety Check: Build Fair AI!
Imagine you're teaching a robot about fruit. If you only show it pictures of red apples 🍎, what will it do when it sees a banana 🍌? It'll get confused! To build a smart and fair AI, you have to show it lots of different things. This is called avoiding "bias," and it's how you make your AI kind and helpful to everyone.
Your AI Playground
This is where the magic happens! On the left, you'll tell our AI what you want your app to do. On the right, you'll see it come to life on a phone simulator. Let's start with a quick warm-up.
Step 1: Mad Libs Warm-up! Fill in the blanks below to create your first button.
🧩 The Sticker Book Challenge
Nice work! Now for a creative challenge. Your buttons are missing their text! Drag the right "sticker" from the sticker book to the button that needs it. (Don't worry, this is just a practice run—just click the sticker you think is right!)
✨ Go Wild! Try Your Own Ideas!
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!
⚙️ AI System Prompt (Advanced)
My AI Vision App
Use the AI Playground to build the controls!
💡 Connecting the Dots: From Button to Brain
See how this works? Instead of a button click just showing a joke, in a real app it would tell the AI, "Hey brain, look at this picture from the camera RIGHT NOW!" The pop-up `Toast` message would then show the AI's answer: "That's a banana! 🍌". You're learning the exact skills you need to command an AI!
🧠 Quick Check!
In our Kotlin code 'recipe', what's the magic word that starts every new function?
🧩 Remix Puzzle: Color Power!
Real apps give users feedback! Can you make the button turn green after you click it? Go back to the "Go Wild" playground and try telling the AI to "set the button's background color to green."
🏆 Peek at the Pro-Level Code!
📜 Your Final Spellbook
You've experimented and remixed! Here's pro-level Kotlin code that combines everything. This is a trophy you've earned!
fun onButtonClick(view: ViewThis is the 'what'. It tells our code which specific thing (like a button) was just clicked.) {
// 1. Change text and disable the button
val button = view as ButtonType Casting: We tell the code, "Trust me, this generic 'View' is actually a 'Button', so let me use button powers!"
val originalText = button.text
button.text = "Thinking..."
button.isEnabled = false
// 2. Wait for 2 seconds (2000 milliseconds)
Handler(Looper.getMainLooper())This is a pro tool to run code after a delay without freezing the whole app. Super important!.postDelayed({
// 3. Do the final action!
button.setBackgroundColor(Color.GREEN)
Toast.makeText(this, "Success! You are a pro! 🏆", Toast.LENGTH_LONG).show()
// 4. Reset the button
button.text = originalText
button.isEnabled = true
}, 2000)
}
🎁 Your Secret Take-Home Project!
🏆 Your First Real Project File
You've mastered the logic in Kotlin. Now, translate it to a real mobile app framework! A pro developer's most common task is translating logic between languages. Are you ready for the challenge?
Open this Expo Snack. It's a real tool for building apps that run on both iPhone and Android, and it works right in your browser. Your mission is to modify the `App.js` file to recreate the button you just designed.
Open Expo Snack Project ↗Show JavaScript Hint
// In JavaScript (for Expo), the logic looks like this:
import { Button, Alert } from 'react-native';
function handlePress() {
Alert.alert("Pop-up Title", "You're a real builder! 🚀");
}
// And in the app's display part:
<Button title="Click Me!" onPress={handlePress} />
🚀 Launch It!
Once you've built your button in Expo Snack, find the "My Device" tab on the right side. It will show you a QR code. Open the camera app on a real phone, scan the code, and run the app you just built. You've officially shipped a project! Show it to your family and friends.
👨👩👧 Parent Corner
Your builder just used an AI to write code, debugged it with visual tools, and learned how to translate logic into a real-world app framework. This is a huge step that mirrors how professional developers work!
Your role: Celebrate the win! The final project uses a tool called Expo Snack, which is a fantastic, free resource for building real apps. This is a great time to be a co-pilot, exploring these new tools alongside them. Help them scan the QR code to see their creation on a real device—that "wow" moment is unforgettable.
Conversation Starter: "I saw your lesson was about teaching an app to 'see'. If you could build an app that could recognize anything in the world, what would you want it to identify first?" This sparks creativity and connects their new skills to their own interests.