Introuduction
DIFFICULTY: 
☆☆☆☆ (6/10)
Date: 2022-02-01T06:55:00Z
In this tutorial, we will go through how to get video, channel or playlist data from Google Developers without extensions or a WebViewer. If you are a beginner, I suggest you to learn basics of App Inventor and how to get an API first. You will need:
-
A brand new Google Doc to put your data in,
-
A Google account that has Google Developers console,
-
An App Inventor project.
There is a similar tutorial, [HOWTO] Get Google's Search Results Without Extension! by me, which is harder but a little bit similar.
DISCLAIMER: The API key is only used in this tutorial and will not be used elsewheere. Please create your own API key.
Step 1. Get an API key.
- 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.
- Click on the drop-down menu on the top-left corner. This opens a dialog box with all of your Google projects.
- 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.
- Name this project 'YoutubeApi' and click 'CREATE'.
- Your project will take some time to load. Make sure the loading icon will be a check mark after loading. After loading, select 'YoutubeApi' on the title bar if you haven't and navigate to the Library tab.
- You will see a library of APIs for you to choose. However, we only need one in this tutorial. Type "youtube data" in the search bar and press Enter on your keyboard.
- Click on 'YouTube Data V3' among the search results.
- Click 'Enable'. It will take 30 seconds to 2 minutes to load.
- After loading, you should see the screen below. Navigate to the Credentials tab.
- Click on 'Create Credentials' and select' API key'.
- In the new popup, copy the API key, paste it into your Google Doc, and click 'Close' in the popup.
Step 2. Designing our API URL.
To get started, read this: Search: list | YouTube Data API | Google Developers.
From the documentation, we understand that the start of the get request is:
https://www.googleapis.com/youtube/v3/search
MrBeast is a popular YouTuber. In this tutorial, we will find his videos from the API.
Although the documentation didn't state that, you will need an API key in this get request. The following are the parameters we will need.
-
part. We will set this parameter tosnippet. -
key. This is the API key that we just pasted into Google Docs. -
type. This specifies what particular data,channel,playlistorvideo, is going to be searched. You can, of course, choose one of those 3 options, but in this tutorial, we will be doing MrBeast's channel. -
q. This specifies what we will search. In this tutorial, it is going to beMrBeast.
The API I use (please don't use it, create your own) is AIzaSyBl7vLh6ID9FlbNmDFqPC9nl7_3e0MtOOk. So, the key parameter will be AIzaSyBl7vLh6ID9FlbNmDFqPC9nl7_3e0MtOOk for me (for you, it is the API you just created), which is highlighted in blue. The part parameter is going to be snippet, which is highlighted in red. The type parameter is channel, highlighted in green and the q parameter is MrBeast, which is highlighted in orange.
Step 3. Testing Our API.
-
Try to go to the URL you created just now. You will see a whole screen of JSON text.
-
Below, I parsed the JSON for you. As you can see, we want the data under
items.
Step 4. App Inventor Blocks
You will need:
-
A button to confirm the search,
-
A label to show the output,
-
An Image to show the channel logo,
-
Two Web components to get the data and parse the JSON.
-
One TextToSpeech to read out the result.
The variable global url is the API get request URL we designed in Step 2. The blocks are as follows (click the image to zoom in and drag).
Do you know how to indicate if the API did not find any relevant responses? Well, if it happens, the JSON given will be something like below, but I will leave it to you guys to think about how to parse it.
{
"kind": "youtube#searchListResponse",
"etag": "L-9mtsH6SIfmTEAPQ-G15UY-yPI",
"regionCode": "HK",
"pageInfo": {
"totalResults": 0,
"resultsPerPage": 0
},
"items": []
}
Downloads
AIA: YoutubeApi.aia (3.8 KB)
@StarredStare's sample application:
YoutubeSearch.aia (4.6 KB)
Tests
Tested successfully on the AI Companion on Xiaomi 5G 11 NE Lite and the App Inventor aiStarter emulator.
Rate my tutorial! 
- Good tutorial!
- Bad tutorial.
0 voters
Kindly 
PM me if you have any questions! Also, if you like my tutorial, please 
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
Message
Website
E-mail