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

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

הלוגו של Google Cast

בשיעור Lab זה תלמדו איך להוסיף את יומן הרישום של ניפוי הבאגים לאפליקציה הקיימת של מקלט האינטרנט המותאם אישית.

מה זה Google Cast?

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

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

מה בכוונתנו לבנות?

לאחר השלמת ה-Codelab הזה, יהיה לך מקלט אינטרנט מותאם אישית המשולב עם יומן ניפוי הבאגים של Cast.

פרטים נוספים ומידע נוסף ניתן למצוא במדריך של ניפוי באגים ב-Cast.

מה תלמדו

  • איך להגדיר את הסביבה לפיתוח מקלטי אינטרנט.
  • איך משלבים את הכלי לניפוי באגים במקלט ההעברה.

מה הדרישות כדי להצטרף לתוכנית?

ניסיון

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

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

לקריאה בלבד לקריאה והשלמת התרגילים

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

מתחילים ביניים בקיאים

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

מתחילים בינוניים בקיאים

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

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

ולפורס את קובץ ה-ZIP שהורדת.

3. פריסת המקלט המקומי מתבצעת

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

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

הרצת השרת

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

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

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

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

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

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

תמונה של המסך 'יישום מקלט חדש' עם הדגשה של האפשרות 'מקלט מותאם אישית'

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

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

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

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

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

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

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

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

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

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

הלוגו של Google Chrome

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

  1. בדפדפן, פותחים את כלי הפקודה והבקרה (CaC).

תמונה של הכרטיסייה 'בקרות העברה והתחברות' של כלי הפקודה והבקרה (CAC)

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

תמונה של הכרטיסייה 'העברה (cast) ובקרות רישום (Loger Controls)' בכלי פקודות ובקרה (CAC) שמצוין בה שהיא מחוברת לאפליקציה של המקבל

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

תמונה של הכרטיסייה 'טעינת מדיה' בכלי הפקודות והבקרה (CAC)

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

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

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

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

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

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

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

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

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

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

index.html

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

geter.js

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

שאלות נפוצות

7. שילוב עם CastDebugLogger API

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

פרטים נוספים ומידע נוסף ניתן למצוא במדריך של ניפוי באגים ב-Cast.

אתחול

יש לכלול את הסקריפט הבא בתג <head> באפליקציית המקלט, מיד לאחר הסקריפט של ה-WebView של מקלט ה-Web : 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.

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

רישום אירועי שחקן

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

צריך להוסיף את הדבר הבא מתחת ל-event listener של READY כדי לתעד מתי מופעלים אירועי 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
};

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

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

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

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

כדי להציג יומנים בפעולה, יש להוסיף יומנים ליירוט של 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, יוצגו כל ההודעות שנוספו עם הודעות שגיאה, אזהרה, מידע והודעות יומן ניפוי באגים. דוגמה נוספת: הפעלה של תג מותאם אישית ברמת WARNING תציג רק הודעות שגיאה ותזהיר את הודעות היומן.

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

צריך להוסיף את הטקסט הבא מתחת לשיחה loggerLevelByEvents:

...

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

...

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

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

יש להוסיף את הקוד הבא למאזינים של האירוע 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)

סקירה כללית

כלי הבקרה והבקרה (CaC) יתעד את היומנים ויקבע את שכבת-העל של ניפוי הבאגים.

יש שתי דרכים לחבר את המקלט לכלי CAC:

יצירת חיבור Cast חדש:

  1. פותחים את הכלי CaC, מגדירים את מזהה האפליקציה של המקבל ולוחצים על לחצן ההעברה כדי להעביר (cast) למקלט.
  2. להעביר אפליקציית שולח נפרדת לאותו מכשיר עם אותו מזהה אפליקציה של המקבל.
  3. טעינת מדיה מאפליקציית השולח והודעות יומן יוצגו בכלי.

הצטרפות לסשן העברה קיים:

  1. אפשר לקבל את המזהה של סשן ההפעלה של Cast באמצעות ה-SDK של המקלט או ה-SDK של השולח. בצד של המקבל, מזינים את הפרטים הבאים כדי לקבל את מזהה הסשן במסוף ניפוי באגים מרחוק ב-Chrome:
cast.framework.CastReceiverContext.getInstance().getApplicationData().sessionId;

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

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

תמונה של הכרטיסייה &#39;בקרות העברה והתחברות&#39; של כלי הפקודה והבקרה (CaC) כדי להמשיך את הסשן

  1. מזינים את מזהה הסשן בכלי CAC ולוחצים על הלחצן RESUME.
  2. לחצן הפעלת Cast אמור להיות מחובר ולהתחיל להציג הודעות ביומן בכלי.

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

לאחר מכן נשתמש בכלי CAC כדי לראות יומנים במקלט לדוגמה שלך.

  1. פותחים את CaC Tool.

תמונה של הכרטיסייה &#39;בקרות העברה והתחברות&#39; של כלי הפקודה והבקרה (CAC)

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

תמונה של הכרטיסייה &#39;העברה (cast) ובקרות רישום (Loger Controls)&#39; בכלי פקודות ובקרה (CAC) שמצוין בה שהיא מחוברת לאפליקציה של המקבל

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

תמונה של הכרטיסייה &#39;טעינת מדיה&#39; בכלי הפקודות והבקרה (CAC)

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

תמונה של הכרטיסייה &#39;Cast Connect ו-Loger Controls&#39; של כלי הפקודה והבקרה (CaC), כשהודעות יומן ממלאות את החלונית התחתונה

  1. סרטון לדוגמה אמור להיות מופעל עכשיו במכשיר שלך. תתחילו לראות את היומנים מהשלבים הקודמים בכרטיסיית 'יומני הודעות' שבתחתית הכלי.

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

  • לוחצים על הכרטיסייה MEDIA INFO או MEDIA STATUS כדי לראות את פרטי המדיה ואת סטטוס המדיה.
  • יש ללחוץ על הלחצן SHOW OVERLAY כדי לראות שכבת-על של ניפוי באגים במקלט.
  • עליך להשתמש בלחצן CLEAR CACHE AND STOP כדי לטעון מחדש את האפליקציה של המקבל ולשדר שוב.

10. מזל טוב

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

לפרטים נוספים, עיינו במדריכים למפתחים בנושא Cast Debug Loger ובכלי Command and Control (CaC).