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

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

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

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

คุณต้องมีสิ่งต่อไปนี้จึงจะเรียกใช้การเริ่มต้นอย่างรวดเร็วนี้ได้

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

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

สร้างหรือเลือกโปรเจ็กต์ใน Cloud Console ทํางานต่อไปนี้ใน Cloud Console สําหรับโปรเจ็กต์ของคุณให้เสร็จสมบูรณ์

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. ในหน้านั้น ส่วน "กรณีการใช้งานทั่วไป" จะมีตารางที่อธิบาย วิธีทั่วไปหลายวิธีในการใช้เมธอด ข้อมูลแรกในตาราง คือผลการแสดงข้อมูลตามรหัสช่อง

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

   

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

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

   2. ส่วนข้อมูลเข้าสู่ระบบจะอยู่ใต้พารามิเตอร์ เมนูแบบเลื่อนลงในส่วนนั้นควรแสดงค่า API key โปรแกรมสำรวจ 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. คลิกปุ่มโหลดในหน้าเว็บเพื่อโหลด Google APIs Client Library สำหรับ JavaScript หลังจากคลิกปุ่มแล้ว คอนโซลนักพัฒนาแอป ควรแสดงหมายเหตุที่ระบุว่าไคลเอ็นต์ GAPI โหลดแล้ว

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

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

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

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

2. ในส่วน "กรณีการใช้งานทั่วไป" ให้คลิกสัญลักษณ์โค้ดสำหรับรายการที่ 3 ในตาราง กรณีการใช้งานดังกล่าวคือการเรียกใช้เมธอด 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 สำหรับ JavaScript และเริ่มขั้นตอนการให้สิทธิ์ ระบบจะแจ้งให้คุณให้สิทธิ์แอปพลิเคชันในการอ่านข้อมูล จากบัญชี YouTube

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

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

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

• เอกสารประกอบความช่วยเหลือของ Google Developers Console
• เอกสารประกอบเกี่ยวกับคลังไคลเอ็นต์ Google APIs สำหรับ JavaScript
• เอกสารอ้างอิงของ YouTube Data API