Panduan Memulai JavaScript

Panduan memulai ini menjelaskan cara menyiapkan halaman sederhana yang membuat permintaan ke YouTube Data API. Panduan memulai ini sebenarnya menjelaskan cara membuat dua permintaan API:

  1. Anda akan menggunakan kunci API, yang mengidentifikasi aplikasi Anda, untuk mengambil informasi tentang saluran YouTube GoogleDevelopers.
  2. Anda akan menggunakan client ID OAuth 2.0 untuk mengirimkan permintaan yang diotorisasi yang mengambil informasi tentang channel YouTube Anda sendiri.

Prasyarat

Untuk menjalankan panduan memulai ini, Anda memerlukan:

  • Python 2.4 atau yang lebih baru (untuk menyediakan server web)
  • Akses ke internet dan browser web.
  • Akun Google.

Langkah 1: Siapkan project dan kredensial Anda

Buat atau pilih project di Konsol API. Selesaikan tugas berikut di Konsol API untuk project Anda:

  1. Di panel library, telusuri YouTube Data API v3. Klik listingan untuk API tersebut dan pastikan API tersebut diaktifkan untuk project Anda.

  2. Di panel kredensial, buat dua kredensial:

    1. Buat kunci API Anda akan menggunakan kunci API untuk membuat permintaan API yang tidak memerlukan otorisasi pengguna. Misalnya, Anda tidak memerlukan otorisasi pengguna untuk mengambil informasi tentang saluran YouTube publik.

    2. Buat client ID OAuth 2.0 Tetapkan jenis aplikasi ke Aplikasi web. Anda perlu menggunakan kredensial OAuth 2.0 untuk permintaan yang memerlukan otorisasi pengguna. Misalnya, Anda memerlukan otorisasi pengguna untuk mengambil informasi tentang channel YouTube pengguna yang saat ini diautentikasi.

      Di kolom Asal JavaScript yang sah, masukkan URL http://localhost:8000. Anda dapat mengosongkan kolom Authorized redirect URI.

Langkah 2: Siapkan dan jalankan contoh

Gunakan widget APIs Explorer di panel samping untuk mendapatkan kode contoh guna mengambil informasi tentang channel YouTube GoogleDevelopers. Permintaan ini menggunakan kunci API untuk mengidentifikasi aplikasi Anda, dan tidak memerlukan otorisasi pengguna atau izin khusus apa pun dari pengguna yang menjalankan sampel.

  1. Buka dokumentasi untuk metode channels.list API.

  2. Di halaman tersebut, bagian "Kasus penggunaan umum" berisi tabel yang menjelaskan beberapa cara umum metode tersebut digunakan. Listingan pertama dalam tabel adalah untuk listingan hasil berdasarkan ID saluran.

    Klik simbol kode untuk listingan pertama yang membuka dan mengisi Penjelajah API layar penuh.

    Gambar yang mengidentifikasi lokasi link simbol kode dalam tabel yang mencantumkan kasus penggunaan untuk dokumentasi channels.list. Teks alternatif untuk gambar tersebut mengidentifikasi gambar sebagai simbol kode dan menentukan kasus penggunaan yang terkait dengan link tersebut.

  3. Sisi kiri Penjelajah API layar penuh menunjukkan hal berikut:

    1. Di bawah header Parameter permintaan, terdapat daftar parameter yang didukung oleh metode tersebut. Parameter value part dan id harus ditetapkan. Parameter value id, UC_x5XG1OV2P6uZZ5FSM9Ttw, adalah ID untuk channel YouTube GoogleDevelopers.

    2. Di bawah parameter, terdapat bagian bernama Credentials. Menu pulldown di bagian tersebut akan menampilkan nilai API key. API Explorer menggunakan kredensial demo secara default untuk memudahkan Anda memulai. Namun, Anda akan menggunakan kunci API Anda sendiri untuk menjalankan contoh secara lokal.

      Gambar yang menampilkan 'Kredensial' di Penjelajah API layar penuh dan menu pull-down dengan opsi 'Kunci API' yang dipilih.

  4. Sisi kanan Penjelajah API layar penuh menampilkan tab dengan contoh kode dalam berbagai bahasa. Pilih tab JavaScript.

  5. Salin contoh kode dan simpan dalam file bernama example.html.

  6. Dalam contoh yang Anda download, temukan string YOUR_API_KEY dan ganti dengan kunci API yang Anda buat di langkah 1 di panduan memulai ini.

  7. Mulai server web menggunakan perintah berikut dari direktori kerja Anda:

    Python 2.x

    python -m SimpleHTTPServer 8000

    Python 3.x

    python -m http.server 8000

  8. Buka file example.html di browser. Buka juga alat developer browser, seperti "Developer Tools" di browser Chrome.

    1. Klik tombol muat di halaman untuk memuat Library Klien Google API untuk JavaScript. Setelah Anda mengklik tombol, konsol developer akan menampilkan catatan yang menunjukkan bahwa klien GAPI dimuat.

    2. Klik tombol eksekusi untuk mengirim permintaan API. Selanjutnya, konsol developer akan menampilkan respons API.

Langkah 3: Jalankan permintaan yang sah

Pada langkah ini, Anda akan memodifikasi contoh kode sehingga dapat mengambil informasi tentang channel YouTube Anda, dan bukan mengambil informasi tentang channel YouTube GoogleDevelopers. Permintaan ini memerlukan otorisasi pengguna.

  1. Kembali ke dokumentasi untuk metode channels.list API.

  2. Di bagian "Kasus penggunaan umum", klik simbol kode untuk listingan ketiga di tabel. Kasus penggunaan tersebut adalah memanggil metode list untuk "channel saya".

  3. Sekali lagi, di sisi kiri Penjelajah API layar penuh, Anda akan melihat daftar parameter diikuti dengan bagian Kredensial. Namun, ada dua perubahan dari contoh tempat Anda mengambil informasi tentang saluran GoogleDevelopers:

    1. Di bagian parameter, parameter value mine harus ditetapkan ke true, bukan nilai parameter id yang ditetapkan. Tindakan ini akan menginstruksikan server API untuk mengambil informasi tentang saluran pengguna yang saat ini diautentikasi.

    2. Di bagian Credentials, menu pull-down harus memilih opsi untuk Google OAuth 2.0.

      Selain itu, jika Anda mengklik link Show scopes, cakupan https://www.googleapis.com/auth/youtube.readonly harus diperiksa.

      Gambar yang menunjukkan cakupan di Penjelajah API layar penuh dan opsi untuk menggunakan kredensial 'Google OAuth 2.0' yang dipilih.

  4. Seperti contoh sebelumnya, pilih tab JavaScript, salin contoh kode, lalu simpan ke example.html.

    Dalam kode, temukan string YOUR_CLIENT_ID dan ganti dengan client ID yang Anda buat di langkah 1 di panduan memulai ini.

  5. Mulai server web menggunakan perintah berikut dari direktori kerja Anda:

    Python 2.x

    python -m SimpleHTTPServer 8000

    Python 3.x

    python -m http.server 8000

  6. Buka file http://localhost:8000/example.html di browser Anda. Buka alat developer browser, seperti "Developer Tools" di browser Chrome.

  7. Klik tombol otorisasi dan muat di halaman untuk memuat Library Klien Google API untuk JavaScript dan memulai alur otorisasi. Anda akan diminta untuk memberikan izin aplikasi untuk membaca data dari akun YouTube Anda.

    Jika Anda memberikan izin, konsol developer akan menampilkan pesan yang menunjukkan bahwa login berhasil dan klien API dimuat.

  8. Klik tombol eksekusi untuk mengirim permintaan API. Selanjutnya, konsol developer akan menampilkan respons API.

Bacaan lebih lanjut