Student starter code (30% baseline)
index.html- Main HTML pagescript.js- JavaScript logicstyles.css- Styling and layoutpackage.json- Dependenciessetup.sh- Setup scriptREADME.md- Instructions (below)💡 Download the ZIP, extract it, and follow the instructions below to get started!
Explore a Working Barcode Scanner - Then Unlock Its Full Potential!
By completing this activity, you will:
Total Time: 90-120 minutes Difficulty: Intermediate Concept: Concept 15 - Barcode and QR Code Scanning
# 1. Navigate to template folder
cd activity-15-barcode-buddy
# 2. Install dependencies
npm install --legacy-peer-deps
# 3. Start Expo development server
npx expo start
# 4. Open on your device with Expo Go app
# Scan the QR code that appears in your terminal
⚠️ Important: Barcode scanning requires a physical device with a camera. The iOS Simulator and Android Emulator cannot scan barcodes.
This template is 65% complete - explore what's built, then make it functional!
Learning Goal: Understand how to automatically request permissions when app loads
File to Edit: App.js (line ~51)
What to Implement:
useEffect(() => {
const getPermission = async () => {
const { status } = await BarCodeScanner.requestPermissionsAsync();
setHasPermission(status === 'granted');
};
getPermission();
}, []);
Key Concepts:
useEffect with empty dependency array [] runs once on mount{ status: 'granted' | 'denied' | 'undetermined' }Success Criteria:
Learning Goal: Process different types of scanned barcode data
File to Edit: App.js (line ~98)
What to Implement:
const handleBarCodeScanned = ({ type, data }) => {
setScanned(true);
setScanData({ type, data });
// Detect URLs (QR codes often contain links)
if (data.startsWith('http://') || data.startsWith('https://')) {
Alert.alert(
'URL Detected',
`Open this link?\n\n${data}`,
[
{ text: 'Cancel', style: 'cancel' },
{
text: 'Open',
onPress: () => Linking.openURL(data),
style: 'default'
}
]
);
} else {
// Product barcode or other data
Alert.alert(
'Barcode Scanned',
`Type: ${type}\n\nData: ${data}`,
[{ text: 'OK' }]
);
}
};
Key Concepts:
{ type, data } objecttype contains barcode format (e.g., 'org.iso.QRCode', 'org.gs1.EAN-13')data contains the actual content (URL, product code, etc.)Barcode Types You'll Encounter:
org.iso.QRCode - Often contain URLs, text, or contact infoorg.gs1.UPC-A - 12-digit product codes (North America)org.gs1.EAN-13 - 13-digit product codes (International)org.iso.Code128 - High-density alphanumeric codesSuccess Criteria:
Core Functionality:
QR Code Handling:
Product Barcode Handling:
Edge Cases:
After completing all TODOs, push your skills further with these challenges:
Hints for Extensions:
https://world.openfoodfacts.org/api/v0/product/${barcode}.json)expo-clipboard packagereact-native-qrcode-svg libraryOfficial Documentation:
Barcode Standards:
Real-World Examples:
// ❌ WRONG - Scanner keeps firing events
const handleBarCodeScanned = ({ type, data }) => {
Alert.alert('Scanned', data);
// Scanner continues scanning in background!
};
// ✅ CORRECT - Disable scanner after scan
const handleBarCodeScanned = ({ type, data }) => {
setScanned(true); // Prevents multiple scans
setScanData({ type, data });
Alert.alert('Scanned', data);
};
// ❌ WRONG - Opens non-URLs as links
const handleBarCodeScanned = ({ type, data }) => {
Linking.openURL(data); // Crashes if not a URL!
};
// ✅ CORRECT - Validate before opening
const handleBarCodeScanned = ({ type, data }) => {
if (data.startsWith('http://') || data.startsWith('https://')) {
Linking.openURL(data);
} else {
Alert.alert('Barcode', data);
}
};
// ❌ WRONG - Camera won't work without permission
<BarCodeScanner
onBarCodeScanned={handleBarCodeScanned}
style={styles.scanner}
/>
// ✅ CORRECT - Check permission first
{hasPermission === true ? (
<BarCodeScanner
onBarCodeScanned={handleBarCodeScanned}
style={styles.scanner}
/>
) : (
<Text>No camera access</Text>
)}
Your activity is complete when:
✅ Permission Handling: App requests camera permission on launch and handles denial gracefully
✅ Barcode Scanning: Successfully detects and scans QR codes and product barcodes
✅ Data Processing: Differentiates between URLs and product codes, with appropriate actions
✅ User Experience: Clear feedback, scan results display, and ability to scan again
Final Check:
# Run this to ensure everything works:
npx expo start --clear
# Test on physical device (camera required for scanning)
# If QR codes open links and barcodes show data - you're done! 🎉
This activity teaches skills you'll use in your final projects:
Project 1 (Creative Studio): QR code sharing for artworks, quick profile access
Project 2 (Learn & Play): Scan codes to unlock lessons or achievements
Project 3 (Community Connector): Event check-in with QR codes, profile linking
Project 4 (Portfolio App): Quick contact card sharing, project links via QR
Related Activities:
For intermediate extensions, here's how to fetch product data:
// Fetch product info from Open Food Facts
const fetchProductInfo = async (barcode) => {
try {
const response = await fetch(
`https://world.openfoodfacts.org/api/v0/product/${barcode}.json`
);
const json = await response.json();
if (json.status === 1) {
// Product found
const product = json.product;
Alert.alert(
product.product_name || 'Unknown Product',
`Brand: ${product.brands || 'N/A'}\n` +
`Category: ${product.categories || 'N/A'}\n` +
`Barcode: ${barcode}`
);
} else {
// Product not found
Alert.alert('Product Not Found', `Barcode: ${barcode}`);
}
} catch (error) {
Alert.alert('Error', 'Failed to fetch product info');
}
};
// Use in handleBarCodeScanned
if (!data.startsWith('http')) {
// Looks like a product barcode
fetchProductInfo(data);
}
activity-15-barcode-buddy/
├── App.js # Main app with 2 TODOs (65% complete)
├── package.json # Dependencies (includes expo-barcode-scanner)
└── README.md # This file
Ready to Build? Start with TODO #1 in App.js and follow the instructions! 🚀
Activity 15 | M1: Mobile Foundations | React Native & Expo SDK 54