A Web Search App (Difficulty: 3)

CreatiCode

Introduction

The world wide web contains a huge amount of information, and you can almost find anything you would like to learn about if you know how to search the web. In this tutorial, we will build a small web search app, where the user can run a web search on a few keywords, then open any of the websites in the search result.

Note that this project only takes about 15 blocks for all the tasks above, and it demonstrates how to use widgets, tables, and variables in a very efficient way.

Step 1 - Add a Dark Background

Create a new project, remove the dog sprite, then switch to the stage. You can search or create a dark background image from the AI image library so that it is not very distracting. For example, if you search for “dark”, you can find a background like this one:

Step 2 - Add Input Textbox and Search Button

When the green flag is clicked, we will add 2 widgets onto the stage. The textbox allows the user to input a query, and the button will trigger a search:

You can add these 2 widgets like this:

Step 3 - Handle the Search Button Click

After the user input some query, and then click the “Search” button, we can run a web search. As an example, we will ask for the top 5 most relevant websites, and store their information in a table named “result_table”:

To review the search results, you can temporarily enable the “result_table” display, and you will see that the table is populated with 5 rows of search results, and each row has 3 columns: title, link and snippet.

Step 4 - Display the First Result as a Button

Next, we need to display all 5 results. However, to start simple, let’s try to only display the first result as a new button like this:

To do that, we need to read the content of row 1 and column “title” from the result_table. We will also simply name this button as “1”, which will be useful in the next few steps:

Step 5 - Display All Results Using a For-Loop

Now we can modify our code so it iterates through all the rows in the result_table.

First, we can use a for-loop to go through all rows in the table like this:

Next, we will use the “row” variable to specify which row to read, and the name of the new buttons will be 1 to 5:

Lastly, the y position of the buttons need to be different. Suppose we want them to be 50 units apart, so the y position will be: 80, 30, -20, -70, -120. This sequence can be expressed using the “row” variable like this: y position = 130 - (50 * row).

The result of this step is like this:

Step 6 - Click the First Result

Lastly, we need to allow the user to click any button to open the corresponding website. To start simple, let’s ONLY handle the first button, which is named “1”.

When the “1” button is clicked, we can read its URL from the table, at row 1 and column “link”. Then we can open a new browser tab using that URL:

You can try to click the first result button:

Step 7 - Handle the Other 4 Buttons

It should be fairly easy to duplicate the above code 4 times, and make them handle the other 4 buttons:

Step 8 - A More Elegant Solution

Although the code above works, it is regarded “ugly”, because it repeat the same code. Imagine we want to change the program to show 10 results, then we have to add more of such blocks.

A more elegant but also advanced solution is like this: we can use a variable “button index” to represent which button is clicked, and then use that variable to determine which link to read out from the table:

Essentailly these 2 rows of blocks will serve the same function as the blocks from step 6 and 7.

Challenges

Here are some suggestions on how you can further improve this program:

Display snippets: instead of only showing the title of each website in the search result, we can also display the “snippet”, which is a preview of that website’s content.
Use AI to summarize the results: Instead of displaying the results one by one, you can feed the snippets from all of them into chatGPT, which can summarize them or generate an answer for the user based on these snippets.