[HOWTO] Get Google's Search Results Without Extension!

:computer: Introuduction

:computer: DIFFICULTY: :star::star::star::star::star::star::star::star: ☆ ☆ (8/10)

In this tutorial, we will go through how to get search results from Google without a WebViewer. We will need an API key and some more complicated stuff. If you are a beginner, I do not suggest you to read this - this is very complicated.

I made this tutorial according to this post posted by me. That is in all text, so in this tutorial, we will do it according to that.

:warning: DISCLAIMER: The API key is only used in this tutorial and will not be used elsewheere. Please create your own API key.

:computer: Step 1. Get an API key.

  1. Go to console.developers.google.com. If you are an advanced app developer, you will play around with this a lot, so be sure to be familiar before we get started.

  2. Click on the drop-down menu on the top-left corner. This opens a dialog box with all of your Google projects.

  1. Click on 'New Project' for in the dialog. Unlike App Inventor projects, it is not necessary to create one project for each app, so we will create a project for ALL of our apps that use Google Search API.

  1. Name this project 'Google Search Project' and click 'CREATE'.

image

  1. Your project will take some time to load. Make sure the loading icon will be a check mark after loading.

  1. Close the tab and open Custom Search JSON API  |  Programmable Search Engine  |  Google Developers.

  2. Scroll down until you see the 'Get a Key' button. Click it.

  1. You will see a new dialog. Select 'Google Search Project' in the drop down and click 'Next'.

  2. After loading, you will see a new dialog with a new API key. Click on 'Copy' and open docs.new on a new tab.

image

  1. Paste your API key onto the new Google Document. Do not close either the API key tab or the Google Docs tab.

  2. Click the 'Done' button.

image

  1. Go to the Programmable Search Engine Dashboard.

  2. Click on 'Add'.

  1. You will see a control screen. Edit the properties as follows.

  1. Complete the reCaptcha (I'm not a robot) task and click Create.

image

  1. Your search engine is now created. Click on the 'Copy' icon and paste the text into the Google Document that we just created.

image

:computer: Step 2. Designing our API request URL.

  1. Quick check, your Google Doc's text should look something like this.

image

Let me highlight some text for you so that you won't go into any trouble.

image

  1. From the code above, the key parameter is highlighted in red and the cx parameter is highlighted in blue. The q parameter is the text people will search, which will be highlighted in orange as follows. I use the Great Wall of China as an example.

image

The start of the URL is

https://www.googleapis.com/customsearch/v1/siterestrict

So our get request URL is:

image

:computer: Step 3. Testing and analyzing our URL.

  1. Try to go the the URL on Google. You will see a WHOLE SCREEN of JSON code.

As you can see, the JSON is a dictionary of dictionaries. We want the results under the key item. I changed the URL to MrBeast instead of the Great Wall of China because that is too long.

:computer: Step 4. Trying out our URL in MIT App Inventor!

We will need:

  • Two Web components to get and return the API, and also to analyze the JSON,

  • A Label to show the result,

  • A TextToSpeech to speak the result.

Use these blocks.

Do you know how to know if no search results are found? If no results are returned, formattedTotalResults under searchInformation in the JSON will be 0, but I will leave it to you guys to think about it.

image

:inbox_tray: Downloads

AIA: API.aia (3.4 KB)

:heavy_check_mark: Tests

Tested successfully on the AI Companion on Xiaomi 5G 11 NE Lite.

:+1: Rate my tutorial! :-1:

  • Good tutorial!
  • Bad tutorial.

0 voters

Kindly :email: PM me if you have any questions! Also, if you like my tutorial, please :heart: like it! It takes some effort for me to make it...

Votes and likes tell me the general user feedback of my tutorial. If you read this tutorial, please take 20 seconds to drop by and give a vote / like!

If you have any features that you want to add to this tutorial, PM me.


Gordon Lu

:speech_balloon: Message :earth_africa: Website :e-mail: E-mail

16 Likes

Nice tutorial @gordonlu310!

1 Like

Thank you!

I removed the vote, I will add it back after two hours.

1 Like

'''Ok sure'''

The poll is broken. You may want to fix it.

Removed because of error again. As I posted, please poll after 2 hours.

Now fixed again.

I always think tutorials or extensions don't need polls. Users can just like the post. It just doesn't look professional.

5 Likes

Thanks, but I see that some users poll instead of like, or vice versa. I want to get user feedback from all of them, so I added the poll.

#Off Topic

How you have made this thing
Means this block in which url is present

You mean, whether the request URL is in the file? Yes it is.

I gave a like, polls are not necessary for a tutorial/guide...

2 Likes

No no I mean that how that block is created in the post
Means that border kind of thing around the text of the file

I used the HTML tag kbd.

Do note that if the index socket in select list item overceeds the length of the list, you will receive a runtime error!

off-topic

using <kbd> and </kbd>, like This is <kbd>This</kbd>

1 Like

@gordonlu310 can u publish this on your website?

Ok, I will. It will take time, please patiently wait.

Thank you @StarredStare

1 Like

fun fact: the site is set to www.google.com because gordon wants to search keywords on google. if you want to search keywords on bing, use www.bing.com.

3 Likes

And of you want to search your own site, for example AICODE, use sites.google.com/view/appinventor-aicode/home without https or http.

There is a similar YouTube API which search content on YouTube as well. I can do a tutorial about that too.

2 Likes

@gordonlu310 it is really good, nice keep it up.

1 Like