מדריך למתחילים של JavaScript

במדריך למתחילים הזה מוסבר איך להגדיר דף פשוט ששולח בקשות ל-YouTube Data API. במדריך למתחילים הזה מוסבר איך לבצע שתי בקשות API:

  1. כדי לאחזר מידע על ערוץ YouTube של GoogleDevelopers, תשתמשו במפתח API שמזהה את האפליקציה שלכם.
  2. תשתמשו במזהה לקוח ב-OAuth 2.0 כדי לשלוח בקשה מורשית לאחזור מידע על ערוץ YouTube שלכם.

דרישות מוקדמות

כדי להפעיל את המדריך למתחילים הזה, אתם צריכים:

  • ‫Node.js ו-npm (להפעלת שרת אינטרנט מקומי)
  • גישה לאינטרנט ולדפדפן אינטרנט.
  • חשבון Google.

שלב 1: מגדירים את הפרויקט ופרטי הכניסה

יוצרים פרויקט במסוף Cloud או בוחרים פרויקט קיים. מבצעים את המשימות הבאות במסוף Cloud בפרויקט:

  1. בחלונית הספרייה, מחפשים את YouTube Data API v3. לוחצים על הרישום של ה-API ומוודאים שהוא מופעל בפרויקט.

  2. בחלונית credentials, יוצרים שני פרטי כניסה:

    1. יצירת מפתח API תשתמשו במפתח ה-API כדי לשלוח בקשות API שלא דורשות הרשאת משתמש. לדוגמה, לא צריך הרשאת משתמש כדי לאחזר מידע על ערוץ YouTube ציבורי.

    2. יוצרים מזהה לקוח ב-OAuth 2.0 מגדירים את סוג האפליקציה כאפליקציית אינטרנט. אתם צריכים להשתמש בפרטי כניסה של OAuth 2.0 לבקשות שדורשות הרשאת משתמש. לדוגמה, צריך הרשאת משתמש כדי לאחזר מידע על ערוץ YouTube של המשתמש המאומת הנוכחי.

      בשדה מקורות מורשים של JavaScript, מזינים את כתובת ה-URL http://localhost:8000. אפשר להשאיר את השדה Authorized redirect URIs (כתובות URI מורשות להפניה אוטומטית) ריק.

שלב 2: הגדרה והרצה של הדוגמה

אפשר להשתמש בווידג'ט APIs Explorer בחלונית הצדדית כדי לקבל קוד לדוגמה לאחזור מידע על ערוץ YouTube של GoogleDevelopers. הבקשה הזו משתמשת במפתח API כדי לזהות את האפליקציה, והיא לא דורשת הרשאת משתמש או הרשאות מיוחדות מהמשתמש שמריץ את הדוגמה.

  1. פותחים את מאמרי העזרה של ה-API בנושא השיטה channels.list.

  2. בקטע "תרחישים נפוצים לדוגמה" בדף הזה יש טבלה שמסבירה כמה דרכים נפוצות לשימוש בשיטה. הרישום הראשון בטבלה הוא של תוצאות הרישום לפי מזהה הערוץ.

    לוחצים על סמל הקוד של הרשומה הראשונה כדי לפתוח את APIs Explorer במסך מלא ולמלא אותו.

    תמונה שמזהה את המיקום של הקישור לסמל הקוד בטבלה שמפרטת את תרחישי השימוש במסמכי התיעוד של channels.list. הטקסט החלופי של התמונה הזו מזהה אותה כסמל קוד ומציין את תרחיש השימוש שמשויך לקישור הזה.

  3. בצד ימין של API Explorer במסך מלא מוצגים הדברים הבאים:

    1. מתחת לכותרת Request parameters מופיעה רשימה של הפרמטרים שה-method תומכת בהם. צריך להגדיר את ערכי הפרמטרים part ו-id. ערך הפרמטר id, UC_x5XG1OV2P6uZZ5FSM9Ttw, הוא המזהה של ערוץ GoogleDevelopers ב-YouTube.

    2. מתחת לפרמטרים, יש קטע בשם Credentials. בתפריט הנפתח שבקטע הזה צריך להופיע הערך מפתח API. כדי שיהיה קל יותר להתחיל, כברירת מחדל, ב-APIs Explorer נעשה שימוש בפרטי כניסה לדמו. אבל תצטרכו להשתמש במפתח API משלכם כדי להריץ את הדוגמה באופן מקומי.

      תמונה שבה מוצג הקטע Credentials ב-APIs Explorer במסך מלא, והתפריט הנפתח שבו נבחרה האפשרות API key.

  4. בצד שמאל של APIs Explorer במסך מלא מוצגות כרטיסיות עם דוגמאות קוד בשפות שונות. לוחצים על הכרטיסייה JavaScript.

  5. מעתיקים את הקוד לדוגמה ושומרים אותו בקובץ בשם example.html.

  6. בדוגמה שהורדתם, מחפשים את המחרוזת YOUR_API_KEY ומחליפים אותה במפתח ה-API שיצרתם בשלב 1 של המדריך למתחילים.

  7. מפעילים את שרת האינטרנט באמצעות הפקודה הבאה מתיקיית העבודה:

    npx http-server -p 8000

  8. פותחים את הקובץ example.html בדפדפן. פותחים גם את הכלים למפתחים בדפדפן, כמו "כלים למפתחים" בדפדפן Chrome.

    1. לוחצים על הלחצן load בדף כדי לטעון את ספריית הלקוח של Google APIs ל-JavaScript. אחרי שלוחצים על הלחצן, אמורה להופיע בהודעה במסוף המפתחים שהלקוח של GAPI נטען.

    2. לוחצים על הכפתור execute כדי לשלוח את בקשת ה-API. התגובה מה-API אמורה להופיע במסוף המפתחים.

שלב 3: מריצים בקשה מורשית

בשלב הזה תשנו את דוגמת הקוד כך שבמקום לאחזר מידע על ערוץ YouTube של GoogleDevelopers, היא תאחזר מידע על ערוץ YouTube שלכם. הבקשה הזו דורשת הרשאת משתמש.

  1. חוזרים למאמרי העזרה של ה-method‏ channels.list של ה-API.

  2. בקטע "Common use cases", לוחצים על סמל הקוד של הרשומה השלישית בטבלה. תרחיש לדוגמה כזה הוא קריאה ל-method‏ list עבור "הערוץ שלי".

  3. בצד שמאל של APIs Explorer במסך מלא, תופיע רשימה של פרמטרים ואחריה הקטע Credentials. עם זאת, יש שני שינויים מהדוגמה שבה אחזרתם מידע על הערוץ GoogleDevelopers:

    1. בקטע הפרמטרים, במקום להגדיר את ערך הפרמטר id, צריך להגדיר את ערך הפרמטר mine ל-true. הפרמטר הזה מורה לשרת ה-API לאחזר מידע על הערוץ של המשתמש המאומת הנוכחי.

    2. בקטע Credentials (פרטי כניסה), בתפריט הנפתח, בוחרים באפשרות Google OAuth 2.0.

      בנוסף, אם לוחצים על הקישור הצגת היקפי הרשאות, היקף ההרשאות https://www.googleapis.com/auth/youtube.readonly אמור להיות מסומן.

      תמונה שבה מוצגים היקפי ההרשאות בכלי APIs Explorer במסך מלא, והאפשרות להשתמש בפרטי הכניסה של Google OAuth 2.0 מסומנת.

  4. כמו בדוגמה הקודמת, בוחרים בכרטיסייה JavaScript, מעתיקים את דוגמת הקוד ושומרים אותה בקובץ example.html.

    בקוד, מחפשים את המחרוזת YOUR_CLIENT_ID ומחליפים אותה במזהה הלקוח שיצרתם בשלב 1 של המדריך למתחילים הזה.

  5. מפעילים את שרת האינטרנט באמצעות הפקודה הבאה מתיקיית העבודה:

    npx http-server -p 8000

  6. עוברים לקובץ http://localhost:8000/example.html בדפדפן. פותחים את הכלים למפתחים בדפדפן, כמו "כלים למפתחים" בדפדפן Chrome.

  7. לוחצים על הלחצן authorize and load בדף כדי לטעון את ספריית הלקוח של Google APIs ל-JavaScript ולהתחיל את תהליך ההרשאה. תתבקשו לתת לאפליקציה הרשאה לקרוא נתונים מחשבון YouTube שלכם.

    אם תעניקו את ההרשאה, במסוף המפתחים יוצגו הודעות שמציינות שהכניסה בוצעה בהצלחה ושלקוח ה-API נטען.

  8. לוחצים על הכפתור execute כדי לשלוח את בקשת ה-API. התגובה מה-API אמורה להופיע במסוף המפתחים.

קריאה נוספת