Project 3: QR Code Scanner
Apply your knowledge to build something amazing!
Mobile App Guidelines QR Code Scanner
Please watch this video to see how this app works.
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 |
Programming Instructions
In this app, you will need to program 2 different buttons. Program what happens when the users interact with each button.
One. Property Settings
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. |
2. Scan Button Programming
When users click on the Scan button, the BarcodeScanner will start to scan the barcode or QR Code. [Hint: Only 2 blocks.]
3. After Scanning
After you scan the barcode or QR code:
-
Enable the Show Result Again button.
-
Check:
- If the result from the barcode scanner is a URL (contains http), display the notifier as below (with the "Go to website" button).
- Else (the result from the barcode scanner is not a URL), display the notifier as below (without the "Go to website" button).
4. Website Navigation
If the user chooses "Go to website", program ActivityStarter to open the link. [Hint: 8 blocks in total.]
- Set the DataUri of the ActivityStarter to the BarcodeScanner's result.
- Program ActivityStarter to start the activity.
5. 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(b). You may use a procedure to make your codes shorter and more efficient.]
Testing Your App
- 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:
