Panduan Memulai JavaScript

Panduan memulai cepat ini menjelaskan cara menyiapkan halaman sederhana yang membuat permintaan ke YouTube Data API. Panduan memulai cepat 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 client ID OAuth 2.0 untuk mengirimkan permintaan yang diotorisasi yang mengambil informasi tentang channel YouTube Anda sendiri.

Catatan: Secara umum, Anda dapat mengikuti petunjuk untuk contoh pertama untuk kasus penggunaan apa pun yang menggunakan kunci API atau petunjuk untuk contoh kedua untuk kasus penggunaan apa pun yang memerlukan otorisasi menggunakan OAuth 2.0. Lihat alat kasus penggunaan dan contoh kode untuk contoh lainnya.

Prasyarat

Untuk menjalankan panduan memulai cepat ini, Anda memerlukan:

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

Langkah 1: Menyiapkan project dan kredensial

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 listing 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: Menyiapkan dan menjalankan 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 contoh.

1. Buka dokumentasi untuk metode channels.list API.

2. Di halaman tersebut, bagian "Common use cases" berisi tabel yang menjelaskan beberapa cara umum penggunaan metode ini. Listing pertama dalam tabel adalah untuk mencantumkan hasil berdasarkan ID channel.

   Klik simbol kode untuk listing pertama guna membuka dan mengisi APIs Explorer layar penuh.

   

3. Sisi kiri APIs Explorer layar penuh menampilkan hal berikut:

   1. Di bawah header Request parameters, 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 Credentials. Menu tarik-turun di bagian tersebut harus menampilkan nilai kunci API. Secara default, APIs Explorer menggunakan kredensial demo untuk memudahkan Anda memulai. Namun, Anda akan menggunakan kunci API Anda sendiri untuk menjalankan contoh secara lokal.

      

4. Sisi kanan APIs Explorer 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 panduan memulai cepat 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 Library Klien Google API untuk 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: Menjalankan permintaan yang diotorisasi

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 "Common use cases", klik simbol kode untuk listing ketiga dalam tabel. Kasus penggunaan tersebut adalah memanggil metode list untuk "channel saya".

3. Sekali lagi, di sisi kiri APIs Explorer layar penuh, Anda akan melihat daftar parameter yang diikuti oleh bagian Credentials. Namun, ada dua perubahan dari contoh saat 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 tarik-turun 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.

      

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

   Dalam kode, temukan string YOUR_CLIENT_ID dan ganti dengan client ID yang Anda buat di langkah 1 panduan memulai cepat 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 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 proses login berhasil dan klien API dimuat.

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

Bacaan lebih lanjut

• Dokumentasi bantuan Konsol Google Developer
• Dokumentasi Library Klien Google API untuk JavaScript
• Dokumentasi referensi YouTube Data API