ניפוי באגים באפליקציות מקלט העברה

1. סקירה כללית

הלוגו של Google Cast

ב-Codelab הזה תלמדו איך להוסיף את הכלי Cast Debug Logger לאפליקציית Custom Web Receiver הקיימת.

מה זה Google Cast?

ערכת Google Cast SDK מאפשרת לאפליקציה להפעיל תוכן ולשלוט בהפעלה במכשירים שתומכים ב-Google Cast. הכלי מספק לכם את רכיבי ממשק המשתמש הנדרשים על סמך רשימת התיוג של עיצוב Google Cast.

הכנו רשימת משימות לעיצוב Google Cast כדי שחוויית המשתמש תהיה פשוטה וצפויה בכל הפלטפורמות הנתמכות.

מה אנחנו הולכים לבנות?

אחרי שתסיימו את ה-codelab הזה, יהיה לכם Custom Web Receiver שמשולב עם Cast Debug Logger.

פרטים נוספים זמינים במדריך ל-Cast Debug Logger.

מה תלמדו

איך מגדירים את הסביבה לפיתוח Web Receiver.
איך משלבים את Debug Logger במקלט Cast.

הדרישות

הגרסה האחרונה של דפדפן Google Chrome.
שירות אירוח HTTPS כמו אירוח ב-Firebase או ngrok.
מכשיר Cast, כמו Chromecast או Android TV, שמחובר לאינטרנט.
טלוויזיה או צג עם כניסת HDMI.

חוויה

צריך ניסיון קודם ב-Cast והבנה של אופן הפעולה של Cast Web Receiver.
צריך ידע קודם בפיתוח אתרים.
תצטרכו גם ידע קודם בצפייה בטלוויזיה :)

איך תשתמשו במדריך הזה?

רק לקרוא

לקרוא ולבצע את התרגילים

מה מידת שביעות הרצון שלך מחוויית בניית אפליקציות אינטרנט?

מתחילים

ביניים

מומחים

איך היית מדרג את חוויית הצפייה בטלוויזיה?

מתחילים

ביניים

מומחים

2. קבלת קוד לדוגמה

אפשר להוריד את כל קוד הדוגמה למחשב...

ומחלצים את קובץ ה-ZIP שהורד.

3. פריסת המקלט באופן מקומי

כדי להשתמש במקלט האינטרנט עם מכשיר Cast, צריך לארח אותו במקום שמכשיר Cast יכול להגיע אליו. אם כבר יש לכם שרת שתומך ב-HTTPS, דלגו על ההוראות הבאות ורשמו את כתובת ה-URL, כי תצטרכו אותה בסעיף הבא.

אם אין לכם שרת זמין לשימוש, אתם יכולים להשתמש באירוח ב-Firebase או ב-ngrok.

הפעלת השרת

אחרי שמגדירים את השירות הרצוי, עוברים אל app-start ומפעילים את השרת.

רושמים את כתובת ה-URL של הנמען המתארח. תשתמשו בו בקטע הבא.

4. רישום אפליקציה ב-Cast Developer Console

כדי להפעיל במכשירי Chromecast מקלט אינטרנט מותאם אישית, כמו זה שנוצר ב-codelab הזה, צריך לרשום את האפליקציה. אחרי שרושמים את האפליקציה, מקבלים מזהה אפליקציה שצריך להשתמש בו באפליקציית השולח כדי לבצע קריאות ל-API, למשל כדי להפעיל אפליקציית מקלט.

תמונה של Cast Developer Console עם הלחצן 'הוספת אפליקציה חדשה' מודגש

לוחצים על 'הוספת אפליקציה חדשה'.

תמונה של המסך 'New Receiver Application' (אפליקציית מקלט חדשה) עם הדגשה של האפשרות 'Custom Receiver' (מקלט בהתאמה אישית)

בוחרים באפשרות 'מקלט בהתאמה אישית' – זה מה שאנחנו יוצרים.

תמונה של השדה 'כתובת ה-URL של אפליקציית המקלט' בתיבת הדו-שיח 'מקלט חדש בהתאמה אישית' בזמן מילוי

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

בנוסף, צריך לרשום את מכשיר Cast כדי שיוכל לגשת לאפליקציית המקלט לפני שמפרסמים אותה. אחרי שמפרסמים את אפליקציית המקלט, היא זמינה לכל מכשירי Google Cast. לצורך ה-codelab הזה, מומלץ לעבוד עם אפליקציית מקלט לא גלויה.

תמונה של Google Cast SDK Developer Console עם הלחצן 'הוספת מכשיר חדש' מודגש

לוחצים על 'הוספת מכשיר חדש'.

תמונה של תיבת הדו-שיח 'הוספת מכשיר Cast לקליטה'

מזינים את המספר הסידורי שמודפס על גב מכשיר ה-Cast ונותנים לו שם תיאורי. אפשר גם למצוא את המספר הסידורי על ידי הפעלת Cast למסך ב-Chrome כשניגשים אל Google Cast SDK Developer Console

יחלפו 5 עד 15 דקות עד שהמקלט והמכשיר יהיו מוכנים לבדיקה. אחרי שמחכים 5-15 דקות, צריך להפעיל מחדש את מכשיר ה-Cast.

5. הרצת האפליקציה לדוגמה

הלוגו של Google Chrome

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

פותחים את הכלי לניהול פקודות ושליטה (CaC) בדפדפן.

תמונה של הכרטיסייה Cast Connect & Logger Controls (שליטה ב-Cast Connect וברישום ביומן) בכלי Command and Control (פקודה ושליטה, CaC)

משתמשים במזהה ברירת המחדל של המקבל CC1AD845 ולוחצים על הלחצן SET APP ID.
לוחצים על הכפתור להפעלת Cast בפינה הימנית העליונה ובוחרים את המכשיר שתומך ב-Google Cast.

תמונה של הכרטיסייה 'Cast Connect & Logger Controls' בכלי Command and Control (CaC) שמראה שהיא מחוברת לאפליקציית מקלט

עוברים לכרטיסייה LOAD MEDIA בחלק העליון.

תמונה של הכרטיסייה 'טעינת מדיה' בכלי Command and Control (CaC)

משנים את כפתור הבחירה של סוג הבקשה ל-LOAD.
כדי להפעיל סרטון לאימון המודל, לוחצים על הלחצן SEND REQUEST.
הסרטון יתחיל לפעול במכשיר שתומך ב-Google Cast כדי להראות איך נראית פונקציונליות בסיסית של מקלט באמצעות מקלט ברירת המחדל.

6. הכנת פרויקט ההתחלה

אנחנו צריכים להוסיף תמיכה ב-Google Cast לאפליקציית ההפעלה שהורדת. הנה כמה מונחים שקשורים ל-Google Cast שבהם נשתמש ב-codelab הזה:

אפליקציית השולח פועלת במכשיר נייד או במחשב נייד,
אפליקציית מקלט פועלת במכשיר Google Cast או Android TV.

עכשיו אפשר להשתמש בפרויקט המתחיל כבסיס ולבנות עליו באמצעות כלי לעריכת טקסט המועדף:

בוחרים את ספריית app-start מתוך קובץ קוד לדוגמה שהורדתם.
פתיחה של js/receiver.js ושל index.html

הערה: במהלך העבודה עם ה-codelab הזה, המערכת http-server אמורה לזהות את השינויים שתבצעו. אם לא, נסו לעצור ולהפעיל מחדש את http-server.

עיצוב אפליקציות

אפליקציית המקלט מאתחלת את סשן Cast וממתינה עד שתגיע בקשת LOAD (כמו הפקודה להפעלה של קובץ מדיה) מהשולח.

האפליקציה מורכבת מתצוגה ראשית אחת, שמוגדרת בקובץ index.html, ומקובץ JavaScript אחד בשם js/receiver.js שמכיל את כל הלוגיקה שדרושה כדי שהמקלט יעבוד.

index.html

קובץ ה-HTML הזה מכיל את כל ממשק המשתמש של אפליקציית המקלט.

receiver.js

הסקריפט הזה מנהל את כל הלוגיקה של אפליקציית המקלט שלנו.

שאלות נפוצות

7. שילוב עם CastDebugLogger API

ערכת Cast Receiver SDK מספקת למפתחים אפשרות נוספת לניפוי באגים באפליקציית המקלט בקלות באמצעות CastDebugLogger API.

פרטים נוספים זמינים במדריך ל-Cast Debug Logger.

אתחול

צריך להוסיף את הסקריפט הבא לתג <head> של אפליקציית המקלט, מיד אחרי הסקריפט של Web Receiver SDK, ב-index.html:

<head>
  ...
  <script src="//www.gstatic.com/cast/sdk/libs/caf_receiver/v3/cast_receiver_framework.js"></script>
  <!-- Cast Debug Logger -->
  <script src="//www.gstatic.com/cast/sdk/libs/devtools/debug_layer/caf_receiver_logger.js"></script>
</head>

ב-js/receiver.js בחלק העליון של הקובץ ומתחת ל-playerManager, מקבלים את מופע CastDebugLogger ומפעילים את כלי הרישום במאזין אירועים READY:

const context = cast.framework.CastReceiverContext.getInstance();
const playerManager = context.getPlayerManager();

// Debug Logger
const castDebugLogger = cast.debug.CastDebugLogger.getInstance();
const LOG_TAG = 'MyAPP.LOG';

// Enable debug logger and show a 'DEBUG MODE' overlay at top left corner.
context.addEventListener(cast.framework.system.EventType.READY, () => {
  if (!castDebugLogger.debugOverlayElement_) {
      castDebugLogger.setEnabled(true);
  }
});

כשהאפשרות 'יומן רישום לניפוי באגים' מופעלת, שכבת-על של DEBUG MODE מוצגת במכשיר המקבל.

תמונה של סרטון שמופעל עם ההודעה 'מצב ניפוי באגים' שמופיעה על רקע אדום בפינה הימנית העליונה של הפריים

רישום אירועים ביומן של נגן

באמצעות CastDebugLogger אפשר בקלות לרשום ביומן אירועים של נגן שמופעלים על ידי Cast Web Receiver SDK ולהשתמש ברמות שונות של רישום ביומן כדי לרשום את נתוני האירועים. הפקודה loggerLevelByEvents config מקבלת את הערכים cast.framework.events.EventType ו-cast.framework.events.category כדי לציין את האירועים שיירשמו ביומן.

מוסיפים את הקוד הבא מתחת ל-READY event listener כדי לרשום ביומן מתי מופעלים אירועים של נגן CORE או מתי משודר שינוי mediaStatus:

...

// Set verbosity level for Core events.
castDebugLogger.loggerLevelByEvents = {
  'cast.framework.events.category.CORE': cast.framework.LoggerLevel.INFO,
  'cast.framework.events.EventType.MEDIA_STATUS': cast.framework.LoggerLevel.DEBUG
};

הודעות יומן ותגים מותאמים אישית

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

castDebugLogger.error(custom_tag, message);
castDebugLogger.warn(custom_tag, message);
castDebugLogger.info(custom_tag, message);
castDebugLogger.debug(custom_tag, message);

בכל שיטה של יומן, הפרמטר הראשון צריך להיות תג מותאם אישית והפרמטר השני הוא הודעת היומן. התג יכול להיות כל מחרוזת שתעזור לכם.

כדי לראות את היומנים בפעולה, מוסיפים אותם ל-interceptor של LOAD.

playerManager.setMessageInterceptor(cast.framework.messages.MessageType.LOAD,
      loadRequestData => {
    // Listed in order from highest to lowest priority.
    castDebugLogger.error(LOG_TAG, 'Test error log');

    castDebugLogger.warn(LOG_TAG, 'Test warn log');

    castDebugLogger.info(LOG_TAG, 'Intercepting LOAD request', loadRequestData);

    castDebugLogger.debug(LOG_TAG, 'Test debug log');

    return loadRequestData;
  }
);

אתם יכולים לקבוע אילו הודעות יופיעו בשכבת העל של ניפוי הבאגים על ידי הגדרת רמת היומן ב-loggerLevelByTags לכל תג בהתאמה אישית. לדוגמה, אם מפעילים תג בהתאמה אישית עם רמת יומן cast.framework.LoggerLevel.DEBUG, יוצגו כל ההודעות שנוספו עם הודעות יומן מסוג error, ‏ warn, ‏ info ו-debug. דוגמה נוספת: הפעלת תג בהתאמה אישית ברמה WARNING תציג רק הודעות שגיאה ואזהרה ביומן.

ההגדרה loggerLevelByTags היא אופציונלית. אם לא מוגדר תג מותאם אישית לרמת היומן שלו, כל הודעות היומן יוצגו בשכבת העל של ניפוי הבאגים.

מוסיפים את הטקסט הבא מתחת לקריאה loggerLevelByEvents:

...

// Set verbosity level for custom tags.
castDebugLogger.loggerLevelByTags = {
    LOG_TAG: cast.framework.LoggerLevel.DEBUG, // display all levels
};

...

8. שימוש בשכבת-העל של ניפוי באגים

הכלי Cast Debug Logger מספק שכבת-על לניפוי באגים במקלט כדי להציג את הודעות היומן המותאמות אישית. משתמשים ב-showDebugLogs כדי להחליף את מצב שכבת-העל של ניפוי הבאגים, וב-clearDebugLogs כדי לנקות את הודעות היומן בשכבת-העל.

כדי לראות תצוגה מקדימה של שכבת העל לניפוי באגים במקלט, מוסיפים את הקוד הבא ל-event listener‏ READY:

// Enable debug logger and show a 'DEBUG MODE' overlay at top left corner.
context.addEventListener(cast.framework.system.EventType.READY, () => {
  if (!castDebugLogger.debugOverlayElement_) {
      castDebugLogger.setEnabled(true);

      // Show debug overlay.
      castDebugLogger.showDebugLogs(true);

      // Clear log messages on debug overlay.
      castDebugLogger.clearDebugLogs();
  }
});

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

9. שימוש בכלי Command and Control (CaC)

סקירה כללית

הכלי Command and Control (CaC) מתעד את היומנים שלכם ושולט בשכבת העל של ניפוי הבאגים.

יש שתי דרכים לחבר את הממיר לכלי CaC:

מתחילים חיבור חדש ל-Cast:

פותחים את כלי CaC, מגדירים את מזהה האפליקציה של המקלט ולוחצים על הכפתור להפעלת Cast כדי להפעיל Cast למקלט.
הפעלת Cast של אפליקציית שולח נפרדת לאותו מכשיר עם אותו מזהה אפליקציית מקלט.
הכלי יציג את ההודעות ביומן ואת המדיה שנטענה מאפליקציית השולח.

כדי להצטרף להפעלה קיימת של Cast:

אפשר לקבל את מזהה סשן Cast שפועל באמצעות receiver SDK או sender SDK. בצד המקבל, מזינים את הפקודה הבאה כדי לקבל את מזהה הסשן במסוף של Chrome Remote Debugger:

cast.framework.CastReceiverContext.getInstance().getApplicationData().sessionId;

אפשר גם לקבל את מזהה הסשן משולח אינטרנט מחובר, באמצעות השיטה הבאה:

cast.framework.CastContext.getInstance().getCurrentSession().getSessionId();

תמונה של הכרטיסייה 'Cast Connect & Logger Controls' (שליטה ב-Cast Connect וברישום ביומן) בכלי Command and Control (CaC) (פקודה ושליטה) להמשך ההפעלה

מזינים את מזהה הפעילות בכלי CaC ולוחצים על הלחצן RESUME.
הכפתור להפעלת Cast צריך להיות מחובר ולהתחיל להציג הודעות יומן בכלי.

דברים שכדאי לנסות

בשלב הבא נשתמש בכלי CaC כדי לראות יומנים בדוגמה של המקלט.

פותחים את הכלי לניהול גישה לחשבון.