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?
⚡ Your First PWA: The Vibe Checker
Okay, let's build something real! We'll make a simple "Progressive Web App" (PWA). That's a fancy way of saying a website that you can "install" on your phone's home screen, just like a real app.
We're going to use a tool called Glitch to build this. Glitch lets you code right in your browser and see your changes live! Remix our starter project to get going:
Remix the Vibe Checker on Glitch ↗️🤔 How Does a Website Become an App?
The magic is in a special file called a manifest.json. Think of it like an ID card for your website. It tells the phone:
- The app's name ("Vibe Checker")
- What icon to use on the home screen
- What color the top bar should be
Your challenge in Glitch will be to find this file and change the name and colors to make it your own!
👨👩👧 Parent Corner
A Progressive Web App (PWA) is a fantastic way for your child to share their creations without needing a complicated app store. They can send a link to family and friends, who can add the project to their home screen with one tap. Ask your child to show you the manifest.json file and explain what each line does!
🚀 Deep Dive: Accessing Sensors with JavaScript
Ready to give your app real superpowers? We can use JavaScript to listen to the phone's sensors. Let's start with the accelerometer—the sensor that feels motion.
Some sensors, like GPS (Geolocation) and the Camera, are very powerful and can access private information. That's why your phone will always ask for permission before a website can use them. As a builder, only ask for permissions you absolutely need for your app to work. As a user, always think twice before granting them!
This JavaScript code listens for your phone to move. Paste this into your Glitch project's script file!
window.addEventListener('devicemotion', function(event) {
const accel = event.accelerationIncludingGravity;
const shakeThreshold = 15; // How hard the shake should be
// Check if the acceleration on any axis is high enough
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!
}
});
Build a Magic 8-Ball App
Use the shake-detector code as your starting point in your Glitch project. Your mission is to build an app that shows a random answer (like "Yes," "Definitely," or "Ask Again Later") every time you shake the phone. This is a real app you can show your friends!
Remix the 8-Ball Starter on Glitch ↗️📚 Go Pro: Real-World Docs
- MDN Docs: DeviceMotionEvent - The official guide for the motion sensor API.
- Google's Guide to PWAs - Learn how the pros build web apps that feel like native apps.