Navigation

    CreatiCode Scratch Forum

    • Register
    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • CreatiCode

    A Web Search App (Difficulty: 3)

    Tutorials
    1
    1
    416
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • info-creaticode
      CreatiCode last edited by 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!

      finaldemo.igf
       
      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:

      e7e923d9-7e12-45c8-acbc-70f9d40ce552-image.png

       
       

      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.

      4d284e30-46f9-4222-9d21-58c6e7735747-image.png

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

      fdcf4055-228c-4cd8-a638-de6212ee5eca-image.png

       
       

      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”:

      e89254df-e727-46a5-9ecb-92f59a071702-image.png

       
      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).

      disney.gif

       
       

      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:

      7519a125-abdb-4a8d-bc04-15742fd18c61-image.png
       

      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:

      c17bde54-0c25-42bc-b6ba-3b843370a6ce-image.png

       
       

      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:

      51fc8ec5-b249-46bc-b40c-79c2c6336cc9-image.png

      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:

      0fcf69b0-b64c-433d-a853-9aa1f099e267-image.png

       
      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).

      cd77ab0e-5cf5-444e-9ec2-39d9fc092f29-image.png

       
      The result of this step is like this:

      20df62ba-f024-4305-b50c-0c0ebcbd5ba8-image.png

       
       

      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:

      adc191b0-781d-4b32-97d4-78bcea4bf4a9-image.png

       
      You can try to click the first button:

      disney2.gif

       
       

      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:

      7ffed474-f851-4d43-ba1e-de8784082885-image.png

       
       

      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:

      1c19d08a-a4cf-4572-b210-2f98ba2c6d8b-image.png

       
      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”:

      b9b1a8f7-85e1-4de5-81b1-ed0fd347c959-image.png

       
      Now the buttons look like this:

      e0c97039-9394-4f35-9d2d-5adc5ab59709-image.png

       
       

      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”:

      1dd727d7-4769-4ab5-85b6-d5dbdebc926b-image.png

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

      It will look like this:

      13e23ce7-6ae8-424e-8e79-328ec251e6f3-image.png

       
       

      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:

      847116b3-e23e-4d6b-b72e-be41948fcac7-image.png

       
      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:

      056c90a7-46c6-4eda-b07c-62d4a95a76d1-image.png

       
       

      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”:

      e5ed1992-e4b3-49ca-b278-872597920f5b-image.png

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

      This is the final demo:

      finaldemo.igf

       
       

      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”.

      1 Reply Last reply Reply Quote 0
      • Pinned by  info-creaticode info-creaticode 
      • First post
        Last post