คู่มือเริ่มใช้งาน JavaScript ฉบับย่อ

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

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

สิ่งที่ต้องดำเนินการก่อน

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

  • Python 2.4 ขึ้นไป (เพื่อให้บริการเว็บเซิร์ฟเวอร์)
  • การเข้าถึงอินเทอร์เน็ตและเว็บเบราว์เซอร์
  • บัญชี Google

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

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

  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 Explorer ในแผงด้านข้างเพื่อรับโค้ดสําหรับดึงข้อมูลเกี่ยวกับช่อง YouTube ของ Google Developers คําขอนี้ใช้คีย์ API เพื่อระบุแอปพลิเคชันของคุณ โดยจะไม่จําเป็นต้องมีการให้สิทธิ์ผู้ใช้หรือสิทธิ์พิเศษจากผู้ใช้ที่เรียกใช้ตัวอย่าง

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

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

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

    รูปภาพที่ระบุตําแหน่งลิงก์สัญลักษณ์โค้ดในตารางที่แสดงกรณีการใช้งานสําหรับเอกสารประกอบของ channel.list ข้อความแสดงแทนสําหรับรูปภาพจะระบุรูปภาพเป็นสัญลักษณ์ของโค้ด และระบุกรณีการใช้งานที่เชื่อมโยงกับลิงก์นั้น

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

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

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

      รูปภาพที่แสดง "ข้อมูลเข้าสู่ระบบ" ในโปรแกรมสํารวจ API แบบเต็มหน้าจอ และเมนูแบบเลื่อนลงที่มีตัวเลือก "คีย์ API" ที่เลือกไว้

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

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

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

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

    Python 2.x

    python -m SimpleHTTPServer 8000

    Python 3.x

    python -m http.server 8000

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

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

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

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

ในขั้นตอนนี้ คุณจะแก้ไขตัวอย่างโค้ดเพื่อให้ดึงข้อมูลเกี่ยวกับช่อง YouTube ของ Google Developers แทนการดึงข้อมูลเกี่ยวกับช่อง YouTube ของคุณ คําขอนี้ต้องได้รับอนุญาตจากผู้ใช้

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

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

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

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

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

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

      ภาพที่แสดงขอบเขตในโปรแกรมสํารวจ API แบบเต็มหน้าจอและเลือกให้ใช้ข้อมูลเข้าสู่ระบบ "Google OAuth 2.0"

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

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

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

    Python 2.x

    python -m SimpleHTTPServer 8000

    Python 3.x

    python -m http.server 8000

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

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

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

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

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