Youtube 검색 API에 첫 번째 Get 요청 보내기

API(응용 프로그램 프로그래밍 인터페이스)에 처음 소개되었을 때 나는 매우 흥분했다.우리는 자신의 응용 프로그램에서 한 개 또는 여러 개의 다른 응용 프로그램을 이용할 수 있는 능력이 얼마나 놀랍습니까!?그리고 첫 번째 부탁을 하려고 했는데...예를 들어 나는 다음 몇 시간 동안 400A의 실수를 배웠다.그러면 우리는 실제로 어떻게 API를 얻어 대화를 잘 진행할 수 있습니까?이 글은 자바스크립트와 일부 JQuery를 사용하여 간단한 GET 요청을 할 수 있도록 안내합니다.시작합시다!

환경 설정:

CodePen에서 새 만년필 한 자루를 열다

.html 파일에 Jquery 를 추가합니다.요청을 하려면 Jquery가 필요하고 HTML 요소를 업데이트해야 합니다.

<script src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>

CodePen에 이의가 있으면 로컬 시스템에서 파일을 만들고 가장 좋아하는 텍스트 편집기에서 편집할 수 있습니다.

Youtube API에서 반환할 데이터를 표시하려면 HTML 요소가 필요합니다..html 파일에 다음 내용을 추가합니다.

 <iframe src=""></iframe>
 <h3>Video Title</h3>
 <p class="description">Video Description<p>

페이지는 다음과 같이 표시됩니다.

API 키를 가져옵니다.이것은 Youtube 데이터 API에 요청을 보내는 데 필요한 것입니다.이 열쇠가 없는 요청은 이 400개의 싫은 코드 중 하나로 응답할 것이다.으로 이동google developers console.만약 당신이 계좌가 없다면, 시간을 좀 써서 하나를 만드세요.로그인하면 다음이 필요합니다.

새 프로젝트 만들기

Youtube 데이터 API 사용

자격 증명 작성

API 키 복사

이 강좌의 키를 어떻게 얻었는지 알고 싶으면 다음 동영상을 보십시오.

GET 요청 보내기

HTML 템플릿이 있고 API 키가 있습니다. 자바스크립트를 작성해 보겠습니다.우리는 우리의 요청을 하기 위해 JQuery에 내장된 Ajax를 사용할 것이다.함수를 작성하여 유튜브 APIGET에 요청합니다.이 요청에서 우리는 유튜브에 정보를 전달하고 그들이 우리에게 동영상에 관한 정보를 보내길 바란다고 알려줄 것이다.이러한 정보가 있으면 우리는 동영상을 우리의 페이지에 성공적으로 삽입할 수 있을 것이다.

우리의 요청 기능:

.js 파일에 다음을 넣습니다.

    function getVideo() {
      $.ajax({
        type: 'GET',
        url: 'https://www.googleapis.com/youtube/v3/search',
        data: {
            key: 'PASTE YOUR API KEY HERE',
            q: "cats",
            part: 'snippet',
            maxResults: 1,
            type: 'video',
            videoEmbeddable: true,
        },
        success: function(data){
            embedVideo(data)
        },
        error: function(response){
            console.log("Request Failed");
        }
      });
    }

우리의 getVideo() 함수는 jquery 방법ajax을 호출합니다.이 메시지는 우리가 데이터를 요청하고 처리하는 데 도움을 주기 위해 특수한 속성을 가진 대상을 가져옵니다.이 ajax 호출 중의 속성을 분해합시다.

우리의 첫 번째 속성은 우리가 제기하고 있는 GET 요청을 지정합니다.

그리고 path 를 문자열 형식의 유튜브 데이터 API로 설정합니다.

다음에 우리는 data 속성을 정의하고 유튜브에 필요한 모든 매개 변수를 포함하는 대상을 만듭니다.API에는 key 및 part 속성이 필요합니다.새로 만든 API 키(따옴표)를 붙여넣고 "snippet" 를 part 로 지정해야 합니다.이것은 우리가 비디오에 삽입하는 데 필요한 모든 정보를 포함하는 대상을 받을 수 있도록 보장할 것이다.나는 우리가 실행 가능한 데이터를 얻을 수 있도록 추가 속성을 추가했다.비디오를 하나만 되돌리기 위해 maxResults 를 1 로 설정합니다.type과videoEmbeddable는 내가 영상의 데이터를 확보하는데 이 영상은 실제로 사이트에 삽입될 수 있다.데이터 객체에 넣을 수 있는 모든 옵션을 보려면 임의로 체크 아웃하십시오.

success에서 요청한 데이터 호출 함수를 사용합니다.GET 방법은 우리가 함수를 호출하기 전에 데이터를 수신하기를 신기하게 기다릴 것이다.잠시 후, 우리는 안에 있는 ajax 함수를 쓸 것이니, 서둘러라!

마지막으로, 우리는 embedVideo 함수에 분배할 것입니다. 만약 성공하지 못한다면, 이 함수는 서버 응답을 기록할 것입니다.

우리의 요청에서 받은 데이터를 사용하다

우리가 무슨 보답이 있는지 볼 때가 됐어!다음 코드를 추가하여 성공적인 요청을 처리하고 일부 데이터를 DOM에 표시합니다.error 파일에 다음 내용을 추가합니다.

function embedVideo(data) {
    $('iframe').attr('src', 'https://www.youtube.com/embed/' + data.items[0].id.videoId)
    $('h3').text(data.items[0].snippet.title)
    $('.description').text(data.items[0].snippet.description)
}

.js data 메시지를 통해 수조로 우리에게 되돌아온다.함수의 첫 줄에서 ajax 요소를 선택하고 jquery 속성을 업데이트합니다.비디오를 포함하려면 요청된 데이터 어레이에 액세스할 수 있는 유일한 iframe + 를 제공해야 합니다.비디오를 하나만 수신하기 때문에 src 0 인덱스에 접근한 다음 'https://www.youtube.com/embed/' 속성에 접근한 다음 videoId 속성에 접근합니다.완전히 드릴링이지만 대부분의 API를 사용할 때 이런 상황이 발생합니다. 다음 두 줄은 유사한 드릴링 데이터 그룹을 사용하여 영상의 제목과 설명을 검색하고 DOM의 data.items[0] 및 id 텍스트를 업데이트합니다.

끝났어!

API 키를 videoId 함수에 붙여넣었는지 확인합니다!!
요구 사항을 제기합시다!우리는 h3 함수를 호출해야 한다.p 파일의 하단에 다음 함수 호출을 추가합니다.

getVideo();

이제 응용 프로그램은 다음과 같습니다.
getVideo 요청의 getVideo 문자열을 변경하고 프로그램이 새 동영상으로 업데이트되는 것을 보십시오!멋있죠?모든 코드를 동시에 보려면 CodePen의 응용 프로그램을 보십시오.유튜브 데이터 API 키를 꺼냈습니다. 따라서 표시된 데이터를 실제로 볼 수 있도록 API 키를 붙여넣으십시오.
만약 당신이 이 점을 해냈다면, API에 대한 요구가 조금도 막연하지 않기를 바랍니다.다음까지!
에페리아
Link to my CodePen for this post if you want to fork it