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 diizinkan yang mengambil informasi tentang channel YouTube Anda sendiri.

Prasyarat

Untuk menjalankan panduan memulai ini, Anda memerlukan:

  • Python 2.4 atau yang lebih tinggi (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, cari 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 contoh kode 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 contoh.

  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 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. Di 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:

    Python 2.x

    python -m SimpleHTTPServer 8000

    Python 3.x

    python -m http.server 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 APIs Client Library for JavaScript. Setelah Anda mengklik tombol, konsol developer akan menampilkan catatan yang menunjukkan bahwa klien GAPI dimuat.

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

Langkah 3: Jalankan permintaan yang diizinkan

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 fullscreen APIs Explorer, 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 Tampilkan cakupan, cakupan https://www.googleapis.com/auth/youtube.readonly harus dicentang.

      Gambar yang menampilkan cakupan di fullscreen APIs Explorer 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:

    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 "Alat Developer" 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 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