การเริ่มต้นใช้งาน JavaScript อย่างรวดเร็ว

คู่มือเริ่มต้นฉบับย่อนี้อธิบายวิธีตั้งค่าหน้าเว็บอย่างง่ายที่ส่งคำขอไปยัง YouTube Data API โดยคู่มือเริ่มต้นฉบับย่อนี้จะอธิบายวิธีส่งคำขอ API 2 รายการ

1. คุณจะใช้คีย์ API ซึ่งระบุแอปพลิเคชันของคุณเพื่อดึงข้อมูลเกี่ยวกับช่อง GoogleDevelopers ใน YouTube
2. คุณจะใช้รหัสไคลเอ็นต์ OAuth 2.0 เพื่อส่งคำขอ ที่ได้รับอนุญาต ซึ่งดึงข้อมูลเกี่ยวกับช่อง YouTube ของคุณเอง

หมายเหตุ: โดยทั่วไป คุณสามารถทำตามวิธีการในตัวอย่างแรก สำหรับ Use Case ที่ใช้คีย์ API หรือทำตามวิธีการในตัวอย่างที่ 2 สำหรับ Use Case ที่ต้องมีการให้สิทธิ์โดยใช้ OAuth 2.0 ดูตัวอย่างเพิ่มเติมได้ที่เครื่องมือ Use Case และตัวอย่างโค้ดสำหรับ เพิ่มเติม

ข้อกำหนดเบื้องต้น

หากต้องการเรียกใช้คู่มือเริ่มต้นฉบับย่อนี้ คุณจะต้องมีสิ่งต่อไปนี้

• Node.js และ npm (เพื่อเรียกใช้เว็บเซิร์ฟเวอร์ภายใน)
• การเข้าถึงอินเทอร์เน็ตและเว็บเบราว์เซอร์
• บัญชี Google

ขั้นตอนที่ 1: ตั้งค่าโปรเจ็กต์และข้อมูลเข้าสู่ระบบ

สร้างหรือเลือกโปรเจ็กต์ในคอนโซล Cloud ทำตามงานต่อไปนี้ในคอนโซล Cloud สำหรับโปรเจ็กต์

1. ในแผงไลบรารี ให้ ค้นหา YouTube Data API v3 คลิกรายการสำหรับ API นั้น แล้วตรวจสอบว่าได้เปิดใช้ API สำหรับโปรเจ็กต์แล้ว

2. ในแผงข้อมูลเข้าสู่ระบบ ให้สร้างข้อมูลเข้าสู่ระบบ 2 รายการ

   1. สร้างคีย์ API คุณจะใช้คีย์ API เพื่อส่งคำขอ API ที่ไม่ต้องมีการให้สิทธิ์จากผู้ใช้ เช่น คุณไม่จำเป็นต้องมีการให้สิทธิ์จากผู้ใช้เพื่อดึงข้อมูลเกี่ยวกับช่อง YouTube สาธารณะ

   2. สร้างรหัสไคลเอ็นต์ OAuth 2.0 ตั้งค่าประเภทแอปพลิเคชันเป็น เว็บแอปพลิเคชัน คุณต้องใช้ข้อมูลเข้าสู่ระบบ OAuth 2.0 สำหรับคำขอที่ต้องมีการให้สิทธิ์จากผู้ใช้ เช่น คุณต้องมีการให้สิทธิ์จากผู้ใช้เพื่อดึงข้อมูลเกี่ยวกับช่อง YouTube ของผู้ใช้ที่ตรวจสอบสิทธิ์แล้วในปัจจุบัน

      ในช่องต้นทาง JavaScript ที่ได้รับอนุญาต ให้ป้อน URL http://localhost:8000 คุณสามารถเว้นช่อง URI เปลี่ยนเส้นทางที่ได้รับอนุญาต ว่างไว้ได้

ขั้นตอนที่ 2: ตั้งค่าและเรียกใช้ตัวอย่าง

ใช้วิดเจ็ตโปรแกรมสำรวจ API ในแผงด้านข้างเพื่อรับโค้ดตัวอย่างสำหรับการดึงข้อมูลเกี่ยวกับช่อง YouTube ของ GoogleDevelopers คำขอนี้ใช้คีย์ API เพื่อระบุแอปพลิเคชันของคุณ และไม่จำเป็นต้องมีการให้สิทธิ์จากผู้ใช้หรือสิทธิ์พิเศษใดๆ จากผู้ใช้ที่เรียกใช้ตัวอย่าง

1. เปิดเอกสารประกอบสำหรับเมธอด channels.list ของ API

2. ในหน้านั้น ส่วน "Use Case ที่พบบ่อย" จะมีตารางที่อธิบายวิธีที่พบบ่อยหลายวิธีในการใช้เมธอด รายการแรกในตารางคือการแสดงผลลัพธ์ตามรหัสช่อง

   คลิกสัญลักษณ์โค้ดสำหรับรายการแรกเพื่อเปิดและป้อนข้อมูลในโปรแกรมสำรวจ API แบบเต็มหน้าจอ

   

3. ด้านซ้ายของโปรแกรมสำรวจ API แบบเต็มหน้าจอจะแสดงสิ่งต่อไปนี้

   1. ใต้ส่วนหัวพารามิเตอร์คำขอ จะมีรายการพารามิเตอร์ที่เมธอดรองรับ คุณควรตั้งค่าพารามิเตอร์ part และ id ค่าพารามิเตอร์ id ซึ่งก็คือ UC_x5XG1OV2P6uZZ5FSM9Ttw เป็นรหัสสำหรับช่อง GoogleDevelopers ใน YouTube

   2. ใต้พารามิเตอร์จะมีส่วนที่ชื่อว่าข้อมูลเข้าสู่ระบบ เมนูแบบเลื่อนลงในส่วนนั้นควรแสดงค่าคีย์ API โดยค่าเริ่มต้น โปรแกรมสำรวจ API จะใช้ข้อมูลเข้าสู่ระบบตัวอย่างเพื่อให้เริ่มต้นใช้งานได้ง่ายขึ้น แต่คุณจะใช้คีย์ API ของคุณเองเพื่อเรียกใช้ตัวอย่างในเครื่อง

      

4. ด้านขวาของโปรแกรมสำรวจ API แบบเต็มหน้าจอจะแสดงแท็บที่มีตัวอย่างโค้ดในภาษาต่างๆ เลือกแท็บ JavaScript

5. คัดลอกตัวอย่างโค้ดแล้วบันทึกไว้ในไฟล์ชื่อ example.html

6. ในตัวอย่างที่คุณดาวน์โหลด ให้ค้นหาสตริง YOUR_API_KEY แล้วแทนที่ด้วยคีย์ API ที่คุณสร้างขึ้นในขั้นตอนที่ 1 ของคู่มือเริ่มต้นฉบับย่อนี้

7. เริ่มเว็บเซิร์ฟเวอร์โดยใช้คำสั่งต่อไปนี้จากไดเรกทอรีที่ทำงานอยู่

   npx http-server -p 8000
   

8. เปิดไฟล์ example.html ในเบราว์เซอร์ นอกจากนี้ ให้เปิดเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ของเบราว์เซอร์ เช่น "เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์" ในเบราว์เซอร์ Chrome

   1. คลิกปุ่ม load ในหน้าเว็บเพื่อโหลด Google APIs Client Library for JavaScript หลังจากคลิกปุ่มแล้ว คอนโซลสำหรับนักพัฒนาซอฟต์แวร์ควรแสดงหมายเหตุที่ระบุว่าไคลเอ็นต์ GAPI โหลดแล้ว

   2. คลิกปุ่ม execute เพื่อส่งคำขอ API จากนั้นคอนโซลสำหรับนักพัฒนาซอฟต์แวร์ควรแสดงการตอบกลับจาก API

ขั้นตอนที่ 3: เรียกใช้คำขอที่ได้รับอนุญาต

ในขั้นตอนนี้ คุณจะแก้ไขตัวอย่างโค้ดเพื่อให้ดึงข้อมูลเกี่ยวกับช่อง YouTube ของคุณ แทนที่จะดึงข้อมูลเกี่ยวกับช่อง GoogleDevelopers ใน YouTube คำขอนี้ต้องมีการให้สิทธิ์จากผู้ใช้

1. กลับไปที่เอกสารประกอบสำหรับเมธอด channels.list ของ API

2. ในส่วน "Use Case ที่พบบ่อย" ให้คลิกสัญลักษณ์โค้ดสำหรับรายการที่ 3 ในตาราง Use Case นั้นคือการเรียกใช้เมธอด list สำหรับ "ช่องของฉัน"

3. อีกครั้งที่ด้านซ้ายของโปรแกรมสำรวจ API แบบเต็มหน้าจอ คุณจะเห็นรายการพารามิเตอร์ตามด้วยส่วนข้อมูลเข้าสู่ระบบ อย่างไรก็ตาม จะมีการเปลี่ยนแปลง 2 รายการจากตัวอย่างที่คุณดึงข้อมูลเกี่ยวกับช่อง GoogleDevelopers

   1. ในส่วนพารามิเตอร์ ค่าพารามิเตอร์ mine ควรตั้งค่าเป็น true แทนที่จะตั้งค่าพารามิเตอร์ id ซึ่งจะสั่งให้เซิร์ฟเวอร์ API ดึงข้อมูลเกี่ยวกับช่องของผู้ใช้ที่ตรวจสอบสิทธิ์แล้วในปัจจุบัน

   2. ในส่วนข้อมูลเข้าสู่ระบบ เมนูแบบเลื่อนลงควรเลือกตัวเลือกสำหรับ Google OAuth 2.0

      นอกจากนี้ หากคุณคลิกลิงก์แสดงขอบเขต ขอบเขต https://www.googleapis.com/auth/youtube.readonly ควรเลือกไว้

      

4. เช่นเดียวกับตัวอย่างก่อนหน้า ให้เลือกแท็บ JavaScript คัดลอกตัวอย่างโค้ด แล้วบันทึกไว้ใน example.html

   ในโค้ด ให้ค้นหาสตริง YOUR_CLIENT_ID แล้วแทนที่ด้วยรหัสไคลเอ็นต์ที่คุณสร้างขึ้นในขั้นตอนที่ 1 ของคู่มือเริ่มต้นฉบับย่อนี้

5. เริ่มเว็บเซิร์ฟเวอร์โดยใช้คำสั่งต่อไปนี้จากไดเรกทอรีที่ทำงานอยู่

   npx http-server -p 8000
   

6. ไปที่ไฟล์ http://localhost:8000/example.html ในเบราว์เซอร์ เปิดเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ของเบราว์เซอร์ เช่น "เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์" ในเบราว์เซอร์ Chrome

7. คลิกปุ่มให้สิทธิ์และโหลด ในหน้าเว็บเพื่อโหลด Google APIs Client Library for JavaScript และเริ่มขั้นตอนการให้สิทธิ์ ระบบควรแจ้งให้คุณให้สิทธิ์แอปพลิเคชันในการอ่านข้อมูลจากบัญชี YouTube

   หากคุณให้สิทธิ์ คอนโซลสำหรับนักพัฒนาซอฟต์แวร์ควรแสดงข้อความที่ระบุว่าการลงชื่อเข้าใช้สำเร็จและไคลเอ็นต์ API โหลดแล้ว

8. คลิกปุ่ม execute เพื่อส่งคำขอ API จากนั้นคอนโซลสำหรับนักพัฒนาซอฟต์แวร์ควรแสดงการตอบกลับจาก API

อ่านเพิ่มเติม

• เอกสารประกอบความช่วยเหลือของ Google Developers Console
• เอกสารประกอบ Google APIs Client Library for JavaScript
• เอกสารอ้างอิง YouTube Data API