YouTube検索APIへのあなたの最初のGET要請をすること

APIS(Application Programming Interface)に初めて導入されたとき、私は感動しました.どのように素晴らしい我々は自分の中で1つまたは他の多くのアプリケーションの力を活用することができます!それから、最初のリクエストをしようとしました.ちょうど私が次の数時間を費やしたと言いましょう.では、どうやって実際にAPIを取得するのですか?この記事では、JavaScriptの使用とJQueryのビットに対する簡単なGETリクエストを行うことによってあなたを歩き回ります.それを始めましょう!

環境設定

新しいペンを開けるCodePen

jqueryを追加する.html ファイル.JQueryを使用してリクエストを作成し、Shortyを追加する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コードの1つに対応します.移動するgoogle developers console . あなたがアカウントを持っていない場合は、1つ(それは無料です)を設定する瞬間を取る!ログインすると、次のようになります.

新しいプロジェクトの作成

データを有効にする

資格情報を作成する

APIキーのコピー

このチュートリアルでは、どうやってキーを手に入れたいのかを見てみましょう.

GETリクエストの作成

HTMLテンプレートを持っているので、APIキーを持っています.jQueryに組み込まれた機能を使ってAJAXを使用します.Aを作る機能を書きましょうGET YouTube APIへのリクエスト.この要求において、私たちは彼らに私たちがビデオに関するいくつかの情報を私たちに送って欲しいと彼らに話しているいくつかの情報をYouTubeに伝えています.その情報で、我々は首尾よく我々のページでビデオを埋め込むことができます!

リクエスト関数:

次の場所にあなたの.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 YouTubeのデータAPIへの文字列.

次に、data プロパティとYouTubeが必要なすべての必要なパラメータを含むオブジェクトを作成します.エーkey and part プロパティはAPIによって要求されます.あなたの新しく作成されたAPIキー(引用符)でペーストし、指定してください"snippet" あなたのpart . これは、我々が我々のビデオを埋め込むのに必要なすべての情報でオブジェクトを受けるのを確実とします.私は戻って実行可能なデータを取得するいくつかの追加プロパティを追加しました.ちょうど1つのビデオを取り戻すために、私はセットしましたmaxResults to 1 . type and videoEmbeddable 私が実際にサイトに埋め込まれることができるビデオのためにデータを取り戻すことを確認してください.あなたがデータオブジェクトに置くことができるすべてのオプションを見るためにチェックアウトに気軽に.

success 私たちが戻ってきたデータを持つ関数を呼び出しますGET リクエスト.the ajax メソッドは、関数を呼び出す前にデータを受信するのを不思議に待ちます.ちょっとの間、我々は書きますembedVideo 機能は、ので、ちょうどハングハング!

最後に、我々はerror を返します.

リクエストから受信したデータを使用する

我々が何かを得ているかどうか見る時間!成功したリクエストを処理し、DOMにデータをレンダリングするには、次のコードを追加します.
以下を加える.js ファイル

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

data 私たちに返されますajax 配列としてのメッセージ.関数の最初の行ではjquery 選ぶiframe 要素と更新src 属性.ビデオを埋め込むには'https://www.youtube.com/embed/' + ユニークなvideoId リクエストからデータ配列内でアクセスできます.我々は1つだけのビデオを受信しているので、我々はdata.items[0] その後、アクセスid プロパティと最後にvideoId プロパティ.ほとんどのAPIで動作するとき、かなりの掘削が、しかし、これを期待しています.次の2行は、ビデオのタイトルと説明を取得するには、データ配列に同様のドリルダウンを使用してh3 and p DOM上のテキスト.

仕上げ！

ダブルキーを押してAPIキーに貼り付けますgetVideo 機能!
お願いしましょう!我々は、我々を呼びなければなりませんgetVideo 関数.下に次の関数呼び出しを追加します.js ファイル

getVideo();

ここで、あなたのアプリは次のようになります.

変更するq あなたのajax リクエストし、新しいビデオにアプリの更新を見る!かなりクール、右?あなたが一緒にコードのすべてを参照したい場合はcodepen上のアプリをチェックしてください.私はYouTubeのデータAPIのキーを取り出したので、実際にいくつかのデータを表示することができますので、あなたのペーストを確認してください!
あなたがこれまでそれを作ったならば、うまくいけば、あなたはapisへの要請をすることを少しより少なく感じます.次回まで!
畏敬の念
Link to my CodePen for this post if you want to fork it