# YouTube API

## Challenge:

Summary

* Create a [Google Developer account](https://developers.google.com/youtube/v3/getting-started),  then retrieve and activate your API key.
* Use the [Sample Request Tool](https://developers.google.com/youtube/v3/docs/search/list?apix_params=%7B%22part%22%3A%22snippet%22%2C%22maxResults%22%3A50%2C%22q%22%3A%22surfing%22%7D) to practice using the search-list API.
* Create a new angular project and begin making request to the API as practiced above.
* Build a UI that resembles the YouTube landing page, but iterating over your response objects.

## Create account, Google Developer project and retrieve API Key

Follow the instructions located here: <https://developers.google.com/youtube/v3/getting-started>

You can stop after step 3.

![Follow these instructions to create your api key](https://3729111192-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LJF8uz6T7DhCLClK6jV%2F-Lv7KUBVD8ilaewPTYaO%2F-Lv7P-fCnihCicXwkNw2%2Fyoutube%20api%20registration.PNG?alt=media\&token=b5676e62-b713-4992-b835-5bd3b220468c)

Review the [documentation ](https://developers.google.com/youtube/v3/docs/search/list?apix_params=%7B%22part%22%3A%22snippet%22%2C%22maxResults%22%3A50%2C%22q%22%3A%22surfing%22%7D)and practice with with try API tool.

![Required and optional parameters are on the left, The APITester is on the right.](https://3729111192-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LJF8uz6T7DhCLClK6jV%2F-Lv7KUBVD8ilaewPTYaO%2F-Lv7Q0H6az3Dju6m_0gp%2Fyoutube%20api%20docs.PNG?alt=media\&token=a138a15f-9ab5-4233-b4fc-c3fc793d327b)

A successful response will look like the following:

![Note the 200 status code and the shape of the response](https://3729111192-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LJF8uz6T7DhCLClK6jV%2F-Lv7KUBVD8ilaewPTYaO%2F-Lv7SVpqsk58-pGp5vu1%2Fyoutube%20api%20response.png?alt=media\&token=7b264764-3d62-422e-9f38-9e906eb17e79)

Pressing the show code button circled above will allow you to inspect the URL that was used to make the request.  Use it as a model for your own requests.

## Making the App

Project setup:  Use the[ Angular Cheat Sheet ](https://softstack-factory.gitbook.io/mean-stack/angular/angular-cheat-sheet)as a reference

* Navigate to your project directory and start a new project. Use the [Angular Cheat Sheet](https://app.gitbook.com/@softstack-factory/s/mean-stack/~/drafts/-Lv6yvonQ52NQuUVkAwC/angular-cheat-sheet) for reference.
* Navigate into the newly created directory.
* Create a Github repo.
* Follow the instructions on Github to link your project with the new repo.
* Create a service to handle your requests to the api.

## **Installing HTTP Module**

Following the same process as the SWAPI project add the HTTP Module to your project.  Use the below walk through or the SWAPI project as a guide.

{% embed url="<https://docs.google.com/document/d/1DA4MutHclRznKyuxvDBmApXJlaK-1eTZHs2lFWBdOfQ/edit?usp=sharing>" %}

{% embed url="<https://docs.google.com/document/d/1DA4MutHclRznKyuxvDBmApXJlaK-1eTZHs2lFWBdOfQ/edit#heading=h.kk1966kbedef>" %}

## Key Concepts

* Making Http requests using an api key.
* Using Angular's HttpClient.
* Subscribing to Observables.
* using a third party API.