A Web Search App (Difficulty: 3)

[info-creaticode]

Introduction

 

The World Wide Web is like the biggest library ever! You can find almost anything you want if you know how to search. In this tutorial, we’ll create a cool web search app. You’ll type some words, and the app will find websites related to those words. It will also show a short summary of the results. Plus, you can click on any result to open the website!

 
You’ll be surprised how simple this is—it only takes about 20 blocks! This tutorial will show you how to use widgets, tables, and variables easily and quickly.

 
 

Step 1 - Add a Dark Background

 

Start a new project, remove the dog sprite, and switch to the stage. Choose or create a dark background from the AI image library. A dark background helps your widgets stand out without being distracting.

For example, searching for “dark” can give you something like this:

 
 

Step 2 - Add Input Textbox and Search Button

 

When you click the green flag, add two widgets to your stage. One is an input textbox for typing your search, and the other is a button to click and start the search.

 
Here’s how to add these widgets. Note that you can use the Widget Positioning tool to configure the widgets manually.

 
 

Step 3 - Handle Clicking the Search Button

 

Once someone types in a search query and clicks “Search,” your app will fetch results from the web. Let’s grab the top 5 websites and put their info in a table called “result_table”:

 
If you turn on the table display, you’ll see it filled with 5 websites. Each has a title, a link, and a snippet (a short description).

 
 

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 name this button as “1”, which will be useful in the next few steps:

 
 

Step 5 - Display All Results with a For-Loop

 

We’ll now show all five results. Use a “for-loop” to go through every row in the table:

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

 
Suppose we want the buttons to be 50 units apart vertically, so their y positions 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

 

We need to allow the user to click any button to open the corresponding website. To start simple, let’s 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 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 repeats 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 solution is like this: we can use a variable “button index” to represent which button is clicked (which can be 1 to 5), and then use that variable to specify which link to read out from the table:

 
Essentially, these 2 rows of blocks will serve the same function as the blocks from steps 6 and 7.

 
 

Step 9 - Make Space for a Summary Textbox

 

It would be nice to add one more feature: to summarize the information we got.

To do that, we first need to move all 5 buttons lower, so we can make some space above them. This can be done easily by changing the formula used to calculate the y positions to “40 - 40 * row”:

 
Now the buttons look like this:

 
 

Step 10 - Add a Rich Textbox

 

Next, we can add a new rich text box above the 5 buttons, which will be used to display the summary. We can call it the “summarybox”:

 
Note that it should be read only since the user will not change the summary.

It will look like this:

 
 

Step 11 - Prepare a ChatGPT Request

 

Now we need to compose a request using the user query and the search results, which will contain the following 4 parts:

1. Text: Here is a user question:

2. Block: The value of the textbox1

3. Text: Answer the question based on the table below:

4. Block: The value of the table variable “result_table”

These 4 parts can be joined with a new line symbol “\n” like this:

 
Note that the “result_table” reporter block will return all information contained in the table. Its content is not easy to read by humans, but it will be no problem for ChatGPT to understand it:

 
 

Step 12 - Showing ChatGPT’s Response

 

For the last step, we just need to send the request, and show the response value in the “summarybox”:

 
For the ChatGPT request, use a “waiting” mode and a session type of “new”.

This is the final demo:

 
 

Additional Challenges

 

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

• Web Content Preview: 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.

• Rephrase the User Queries: Currently, we simply run the “web search” block on whatever the user inputs. It might be helpful to convert the user input to a more effective search query using ChatGPT. For example, if the user says, “I need to prepare a birthday gift”, it might be better to use ChatGPT to transform it into a query like “top birthday gift ideas”.