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 channel YouTube GoogleDevelopers.
  2. Anda akan menggunakan ID klien OAuth 2.0 untuk mengirimkan permintaan yang sah yang mengambil informasi tentang channel YouTube Anda sendiri.

Prasyarat

Untuk menjalankan quickstart ini, Anda memerlukan:

  • Node.js dan npm (untuk menjalankan server web lokal)
  • Akses ke internet dan browser web.
  • Akun Google.

Langkah 1: Siapkan project dan kredensial Anda

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

  1. Di panel library, telusuri YouTube Data API v3. Klik listingan untuk API tersebut dan pastikan API 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 channel YouTube publik.

    2. Buat client ID OAuth 2.0 Tetapkan jenis aplikasi ke Aplikasi web. Anda harus 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 Authorized JavaScript origins, masukkan URL http://localhost:8000. Anda dapat mengosongkan kolom Authorized redirect URIs.

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 penggunaan metode ini. Listingan pertama dalam tabel adalah untuk mencantumkan hasil menurut ID channel.

    Klik simbol kode untuk listingan pertama guna membuka dan mengisi API Explorer 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 APIs Explorer layar penuh menampilkan hal berikut:

    1. Di bawah header Parameter permintaan, ada daftar parameter yang didukung metode ini. Nilai parameter part dan id harus ditetapkan. Nilai parameter id, UC_x5XG1OV2P6uZZ5FSM9Ttw, adalah ID untuk channel YouTube GoogleDevelopers.

    2. Di bawah parameter, ada bagian bernama Kredensial. Menu pull-down di bagian tersebut akan menampilkan nilai API key. APIs Explorer menggunakan kredensial demo secara default untuk mempermudah Anda memulai. Namun, Anda akan menggunakan kunci API Anda sendiri untuk menjalankan sampel secara lokal.

      Gambar yang menampilkan 'Credentials' di fullscreen APIs Explorer dan menu pull-down dengan opsi 'API key' yang dipilih.

  4. Sisi kanan fullscreen APIs Explorer 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 panduan memulai ini.

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

    npx http-server -p 8000

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

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

    2. Klik tombol execute untuk mengirim permintaan API. Konsol developer kemudian akan menampilkan respons API.

Langkah 3: Jalankan permintaan yang sah

Pada langkah ini, Anda akan mengubah contoh kode sehingga alih-alih mengambil informasi tentang channel YouTube GoogleDevelopers, kode tersebut mengambil informasi tentang channel YouTube Anda. 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 dalam tabel. Kasus penggunaan tersebut adalah memanggil metode list untuk "my channel".

  3. Sekali lagi, di sisi kiri APIs Explorer layar penuh, Anda akan melihat daftar parameter yang diikuti dengan bagian Credentials. Namun, ada dua perubahan dari contoh tempat Anda mengambil informasi tentang channel GoogleDevelopers:

    1. Di bagian parameter, bukan nilai parameter id yang ditetapkan, nilai parameter mine harus ditetapkan ke true. Hal ini menginstruksikan server API untuk mengambil informasi tentang channel 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 dicentang.

      Gambar yang menunjukkan cakupan di APIs Explorer 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 ID klien yang Anda buat di langkah 1 panduan memulai ini.

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

    npx http-server -p 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 authorize and load di halaman untuk memuat Google APIs Client Library for JavaScript dan memulai alur otorisasi. Anda akan diminta untuk memberi aplikasi izin 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 execute untuk mengirim permintaan API. Konsol developer kemudian akan menampilkan respons API.

Bacaan lebih lanjut