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

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

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

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

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

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

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

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

  1. בחלונית הספרייה, מחפשים את YouTube Data API גרסה 3. לוחצים על הרישום של ה-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 (פרמטרים של בקשה), מופיעה רשימה של פרמטרים שהשיטה תומכת בהם. צריך להגדיר את ערכי הפרמטרים part ו-id. ערך הפרמטר id, UC_x5XG1OV2P6uZZ5FSM9Ttw, הוא המזהה של ערוץ YouTube של GoogleDevelopers.

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

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

  4. בצד שמאל של API 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. חוזרים למאמרי העזרה של ה-API של השיטה channels.list.

  2. בקטע 'תרחישי שימוש נפוצים', לוחצים על סמל הקוד של הרישום השלישי בטבלה. תרחיש השימוש הזה הוא קריאה לשיטה list עבור 'my channel'.

  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 תוצג במסוף של המפתח.

קריאה נוספת