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!

#Concepts

• Database I/O
• Sequential Task
• ListView
• String Manipulation

Let's Get Started

User Interface Designer

First, let's set up our Invisible Components!

FirebaseDB under Experimental:

• QRCodeDB: https://ignitepgo.firebaseio.com/QRCode
• PictureDB: https://ignitepgo.firebaseio.com/Pictures
• CapturedDB: https://ignitepgo.firebaseio.com/Captured/[YOUR_TEAM_NAME]

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. QRCode Scanner

We want the app to scan the QRCode when we press the Scan Button.

    if (Scan Button Pressed) {
        doScan();
    }

Then when the scan is finished, we want to use the results to query the QRCodeDB when:

    if (in list already) { //already have this Code in the list
        showMessage("You already caught this!");
    } else if (result is not empty) { //if the user didnt cancel
        queryDB();
    } else {
        //do nothing.
    }

2. DataBases

After we get results from QRCodeDB, we will:

• Show the name of the Pokemon
• Using the name, query the image of the Pokemon from PictureDB
• Enable the capture Button

After we get results from PictureDB:

1. Decode the URL
2. Go to the page using PictureViewer

    encoded URL from DB: goo.gl|[******]
    correct URL: https://goo.gl/******

3. Capture Button

Now we can click on the capture Button! When it's clicked:

• we add the Pokemon to the list of captured Pokemon!
• we add the QRCode to the list of QRCode so we don't catch it again.
• we store our score
• we update the list on the screen
• we reset the picture, the name and the button.

    if (capture button clicked) {
        capturedList.add(pokemonName);
        QRCodeList.add(QRcode);
        storeScore();
        updateListView();
        reset();
    }

4. When we pick something from the ListView:

We want to show the picture and the name again

    if(an item is selected in the list) {
        showPicture();
        showName();
    }