CODE CHALLENGE 3

SEARCH A DATABASE

Description

Create an app that allows the user to search a database of information and view their results. The database should contain names and descriptions of famous people, places, movies, music, events or anything else you want. Make sure you have at least three entries in your database.

See our example app here: 

Try to figure out how to complete the challenge on your own before looking at the instructions. The instructions show just one way of how this challenge can be solved. Happy coding!

Overview

We decided to tackle this coding challenge by storing names and descriptions of women scientists in a TinyDB. We used the scientist's name as the tag name to store the description of her work. After that we made two lists, one with the person’s name, and one with the descriptions of her work. The user will enter text and the app will search each item in both lists for a match. If there is a match, the woman’s name will appear in a listview. The user can then select which scientist they want to learn more about and a new screen will open with the description of her work. For this app, we had to use a TinyDB to store the data so that we could use it on separate screens.

Designing the Screen

Our users need to enter text to search, so we are going to add a textbox for the user to enter their search and a button for them to click once they are done.  We know we are going to store our data in a database, so we dragged a TinyDB onto the screen. We also know that we’ll be using lists so we added a listview to the screen.

Adding Data to the Database

We decided to add the scientist’s name as the tag and the description of her work as the value to the database. We added the information to the database like this:

We added this information to the database when the screen initializes so it is the first thing our app does. We need to use a database in order to share information between screens. In App Inventor, the only two ways to pass data between screens is by using a database or the startValue block. You will see how both of those methods work in these instructions. You can read more about this here.

Creating lists of tag names and database values

We created a list to store the tag names in. First we created an empty list called “TagNames”. Next we added blocks to add every one of our tag names to this list. We made sure that the tag names being added to the list matched exactly the tag names in the database, including all capital letters.

Now that we have a full list with all of our tag names, we need to create another list containing all of the values in the database. It's important that they are in the same order as the tag names. First, we created an empty list to hold all the values from the database called “databaseValues”. Next, we added each value to the list in the same order as the tag that corresponds to it by using a for loop. For each item in the “tagNames” list, we added the value from the database to the “databaseValues” list. We then added this for loop to the when Screen1.Initialize event handler.

Check point #1

At this point you should have all your data in your database as well as one list with your tag names and one list with your database values. Make sure that each of your lists contains the values you want! Since your app doesn’t do anything yet, you can check your work by displaying your lists in your ListView and making sure everything is there. Add this block to your code underneath your for loop in your when Screen1.Initialize event handler to check that your “tagNames” list is accurate.

Add this block to your code underneath your for loop inside your when Screen1.Initialize event handler to check that your “databaseVales” list is accurate.

After you’ve made sure your lists are accurate, makes sure to delete these blocks!

Programming the search button

We want our user to be able to search our database by entering text in the textbox and pressing the “search” button. To do this, we are going to put an event handler on the search button that will look through each item in both the “tagName” list and the “databaseValues” list for strings that match what the user entered in the textbox. If there is a match, we’ll add the scientist’s name to the list view. Here’s how we did it.

First, we created an empty list called “searchResults”.

Next we added an event handler to the search button. Inside of it, we added a block to set the search results back to being an empty list. This is because each time the user hits “search” we want to clear out any items that may have been added to “searchResults” in the last search.

Next, we set up a for loop that searches each item in the “tagName” list and in the “databaseValue” list. We didn’t use the for each loop because we are searching through two lists and wanted to use the counting variable in the for loop to do this. We started the for loop at "1" and ended it at the number of items in the tagNames list. We changed the name of the variable to index since it will be used as an index with each of the lists. 

Here’s the block we used to compare the text that the user searched for in the textbox to list items in “tagNames”. The variable “index” increases by 1 each time the loop repeats so it will eventually compare the textbox text to every item in the list “tagNames”. We choose to make everything downcase so the search is not case sensitive. The “contains text” block returns true if the piece appears in the text and false if it does not.

To compare the user’s search to “databaseValues”, we used the same blocks except for changing the list name.

Note: index is the counter variable, so it is a local variable that can only be used inside the for loop. In order to get it to show up in the drop down menu of available variables, you will need to put the block some where inside the for loop. Don't worry where you put the blocks, you can always move them afterwards.

We want to show the user the women scientist whose name or description matches the user’s search. To do this used a conditional and a logic or operation.

Here is what or code looks like with the the or operation filled:

We want our code to add the name of the women scientist to the list “searchResults” if either her name or her description matches the user’s search terms. To do this, when there is a match, we added the name from tagNames using the loop variable “index”. We didn’t add an else to our conditional statement because if the name or description isn’t match we want our code to do nothing.  We then added the items in the list “searchResults” to the ListView. Because this block is outside of the for loop, our code only updates the ListView after for loop has ended.

Check Point #2

You just wrote a lot of code! Check your code to make sure you can search for something. Try searching for a name, like “Alice” or an occupation like “chemist”. Make sure you get the results you expected to get before moving on!

Displaying the search results on a new screen

We decided our app would be better if the user could select the women scientist that showed up in the search results to learn more about her. To do this, when the user picked something from the list, we opened a new screen with a startValue of the user’s selection. Remember, the only two ways to pass data between screens is by using a database or a startValue block!

We designed our second screen with two labels. One to display the scientist's name and one to display her description. We also added a back button to return to Screen1. Don’t forget that you also need to add a TinyDB to this screen!

Since the start value is the name of the scientist, we displayed the start value in Label1 and also used it to retrieve the scientist’s description from the database to display in Label2. You can find the get start value block in the control category.

Don’t forget to program your back button to bring you back to the first screen!

When the user goes back, Screen1 Initializes again and everything starts over.

Final Check Point

Make sure everything in your app is working! Does selecting an item in the ListView bring you to Screen2 and display the tag name and database value?

Still stuck? Download our source code. Here are instructions on how to download and use source codes.