Lightweight Pokédex

Overview

In this lesson, we will create a simple Pokédex using firebase, a web viewer, and some UI elements. We will scan some secret hidden codes around the campus and fill up our Pokédex!

Let's Get Started

User Interface Designer

First, lets set up our Invisible Components!

FirebaseDB under Experimental:

• QRCodeDB
• PictureDB
• CapturedDB

Barcode Scanner under Sensors:

• QRCodeScanner

Next, we set the properties of the screen to be:

• AlignHorizontal: Center
• Sizing: Responsive

Now, insert a Button from User Interface with:

• Text: Scan
• FontSize: 18
• Width: fill parent

Next, we insert Vertical Arrangement with Height: 30% from Layout.

Then we put a Label with FontSize: 18 and ListView inside from User Interface.

Now, we put another Button with:

• Width: fill parent
• Enabled: false
• FontSize: 16
• Text: Capture!

Now we put another Label from User Interface with:

• Width: fill parent
• FontSize: 18
• Text: [blank]

Finally we put a Web Viewer from User Interface with:

• height: 250px
• width: 250px
• homeURL: about:blank

Block Logic Editor

First, we will have 5 Global Variables:

• QRCodeList: List
• capturedList: List
• QRCode: String
• groupName: [YOUR GROUP NAME HERE]
• pokemonName: String

1. Scanner