Mobile App Guidelines QR Code Scanner

:video_game: Activity Time!

Time needed: 30-35 minutes

What you'll do:

Get ready to build your very own QR Code Scanner app! Just like the apps on your phone that scan QR codes at restaurants or stores, you'll create a powerful scanner that can read both barcodes and QR codes. You'll even make it smart enough to know when it finds a website link!

Please watch this video to see how this app works.

Before You Start:

• Open MIT App Inventor
• Create a new project called "QRCodeScanner"
• Have your phone ready for testing
• Watch the demo video above

Sample UI and Components

The sample UI of the app and components that you will be using to make the app:

Sample UI	Components
	Layout: • Vertical Arrangement Visible Components: • Label • Button Non-visible Components: • Barcode Scanner • Activity Starter • Notifier

Let's Build Your Scanner!

In this app, you will need to program 2 different buttons. Program what happens when the users interact with each button.

Step One: Set Up Your Properties

BEFORE you code this app, please check whether or not you have set the properties in correctly. You will need to change the default settings of some components respectively in order to run this app smoothly.

Component	Property Setting	Reason
	Untick "Enabled"	To make sure the Show Result Again button is not clickable before the users scan any barcode.
	Untick "Use external scanner"	To use MIT App Inventor default build-in scanner instead of installing another external scanner on your phone to activate the barcode scanner.
	Write android.intent.action.VIEW under "Action" box	To enable users to open a browser to a specific web page. You will need to specify what is the DataUri in as well, or else your app won't know which web page your users want to go to.

:bulb: "Stuck?"

Remember to change these settings BEFORE you start coding! Each setting has a special purpose to make your app work correctly.

Step 2: Program the Scan Button

When users click on the Scan button, the BarcodeScanner will start to scan the barcode or QR Code. [Hint: Only 2 blocks.]

Step 3: Handle the Scan Results

After you scan the barcode or QR code:

1. Enable the Show Result Again button.

2. Check what type of result you got:

   • If the result from the barcode scanner is a URL (contains http), display the notifier as below (with the "Go to website" button).

   

   Notifier with "Go to website" button for URL results

   • Else (the result from the barcode scanner is not a URL), display the notifier as below (without the "Go to website" button).

   

   Notifier without "Go to website" button for non-URL results

:bulb: "Stuck?"

Use the "contains text" block to check if your result has "http" in it. This tells you if it's a website link!

Step 4: Open Websites

If the user chooses "Go to website", program ActivityStarter to open the link. [Hint: 8 blocks in total.]

1. Set the DataUri of the ActivityStarter to the BarcodeScanner's result.
2. Program ActivityStarter to start the activity.

Step 5: Program the Show Result Again Button

When users click on the Show Result Again button, they can view the previous result again.

[Hint: The exact same codes as in step 3. You may use a procedure to make your codes shorter and more efficient.]

:bulb: "Stuck?"

A procedure is like a recipe - you write the code once and can use it many times! This saves you from typing the same blocks over and over.

Testing Your App

Now comes the fun part - testing your scanner!

• To generate free QR Codes, go to: https://www.the-qrcode-generator.com
• To test the functions of your QR Code Scanner, scan the following QR codes after you have completed your QR Code Scanner:

Test QR codes for scanning practice

:trophy: Challenge Yourself!

Ready to make your scanner even cooler? Try these challenges:

1. Sound Effects: Add a beep sound when the scanner successfully reads a code
2. History Feature: Keep a list of the last 5 scanned codes
3. Color Coding: Change the background color based on whether it's a URL or regular text
4. Share Button: Add a button to share the scanned result with friends

Knowledge Assessment Quiz

After completing your QR Code Scanner app, test your understanding of barcodes and QR codes by completing this knowledge assessment quiz.

Instructions:

1. Complete the quiz: Click on the link below to access the Google Form quiz
2. Fill in your details: Enter your name and select your class day and time
3. Answer all questions: Read each question carefully and select the best answer
4. Submit your responses: Click "Submit" when you have completed all questions

Quiz Link: Barcode & QR Code Knowledge Assessment

Quiz Topics:

• Differences between 1D barcodes and QR codes
• Characteristics of 1D barcodes
• Information storage capacity of QR codes
• MIT App Inventor Barcode Scanner functionality
• Device features used for barcode scanning

Note: This quiz will help reinforce your understanding of the concepts covered in this lesson. Make sure to complete it after finishing your app development!