Your Phone's Superpowers! ✨
What if your phone had eyes, ears, and could even feel which way it's moving? It does! They're called sensors, and today we're going to learn how to use their magic to make our apps come alive.
Think of it like this: your nose is a 'smell sensor' and your ears are 'sound sensors.' Your phone has tiny digital sensors to feel motion (the accelerometer), see the world (the camera), and know where it is (the GPS!).
👀 See The Magic Inside!
Watch how the tiny parts inside your phone let it know when you tilt, turn, and tap!
🕵️♀️ Sensor Spy Challenge
Match the phone's superpower to the right sensor!
Which sensor helps a racing game know when you TILT your phone to steer?
Which sensor helps a map app show you where you are?
Badge Unlocked! 🏅
You're a certified Sensor Spy! 🕵️♀️
🎨 Design Your First App Icon
Before we write code, let's be designers! A real app needs a name and an icon to live on a phone's home screen. Let's make one right now. This is the first step to creating a **Progressive Web App (PWA)** — a website that acts just like a real app.
👨👩👧 Parent Corner
This little design activity is a great conversation starter! Talk about the apps you both use. Why are their icons certain colors? What makes a name catchy? This is the core of "User Experience" (UX) design. A PWA is also a fantastic way for your child to share their creations without needing a complicated app store—just a simple link!
🚀 Deep Dive: Waking Up the Motion Sensor
Okay, let's give our app real superpowers. We can use JavaScript to listen to the phone's motion sensor. Instead of just showing you the code, let's feel it work first!
Some sensors, like GPS (Location) and the Camera, can access private information. That's why your phone will always ask for your permission before a website can use them. As a builder, only ask for permissions you absolutely need. As a user, always think twice before granting them!
(Or click and drag me on a computer!)
Whoa! How did that work? 🧙♂️
You just triggered a sensor! Here is the exact JavaScript code that was listening for the shake. This is what you'll use to build apps that react to the real world.
// Listen for the 'devicemotion' event, which happens whenever the phone moves.
window.addEventListener('devicemotion', function(event) {
const accel = event.accelerationIncludingGravity;
// How 'hard' a shake we're looking for.
// Try a bigger number like 30 in your own code to see what happens!
const shakeThreshold = 15;
// Check if the acceleration on any axis (x, y, or z) is past our threshold.
if (Math.abs(accel.x) > shakeThreshold ||
Math.abs(accel.y) > shakeThreshold ||
Math.abs(accel.z) > shakeThreshold) {
console.log('SHAKE DETECTED!');
document.body.style.backgroundColor = 'tomato'; // Change background on shake!
}
// --- 🚀 PRO-TIP for explorers! ---
// The 'event' object is full of cool data.
// Uncomment these lines in a tool like Glitch to see the raw rotation data!
// console.log('Rotation Beta:', event.rotationRate.beta);
// console.log('Rotation Gamma:', event.rotationRate.gamma);
});
Build a Magic 8-Ball App
Use the shake-detector code as your starting point. Your mission is to build an app that shows a random answer every time you shake the phone. You're combining two superpowers: a PWA to make it look like an app, and the sensor to make it interactive!
📋 Your Mission Briefing:
- Start with the shake detector code in a fresh project.
- Create a JavaScript list (it's called an `array`) of 5-6 possible answers (like "Yes!", "Nope!", "Maybe...").
- When a shake is detected, pick a random answer from your list. (Hint: Search for `Math.random()` to learn how!)
- Display the chosen answer on the screen for the user to see.
Build a Digital Spirit Level
Ready for a real test? Instead of motion, let's measure tilt! Use the `deviceorientation` event, which gives you the phone's precise angle. Your mission is to display the `beta` (front-to-back tilt) and `gamma` (side-to-side tilt) values on the screen in real-time. Can you make a visual element, like a dot, that moves around as the phone tilts? You'll need to read the official docs for this one!
📚 Level Up: Read the Official Schematics
The pros don't guess; they read the docs. Open the MDN link for `DeviceMotionEvent` and see if you can find the name of the property that measures the time between sensor readings. This is how you build truly professional apps.
- MDN Docs: DeviceMotionEvent - The official guide for the motion sensor.
- MDN Docs: DeviceOrientationEvent - The official guide for the orientation (tilt) sensor.
- Google's Guide to PWAs - Learn how the pros build web apps that feel like native apps.