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

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

ה-codelab הזה ילמד אותך איך להוסיף את מכשיר לניפוי באגים להעברה (cast) אל האפליקציה הקיימת של מקלט האינטרנט בהתאמה אישית.

מה זה Google Cast?

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

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

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

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

אפשר לקרוא פרטים נוספים במדריך לניפוי באגים בהעברה (cast).

מה תלמדו

• איך להגדיר את הסביבה לפיתוח של Web Acceptr.
• איך לשלב את יומן ניפוי הבאגים במקלט שממנו רוצים להפעיל Cast.

מה נדרש

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

ניסיון

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

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

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

file_downloadלהורדת המקור

ופורקים את קובץ ה-ZIP שהורדתם.

3. פריסה מקומית של המקבל

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

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

הפעלת השרת

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

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

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

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

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

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

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

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

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

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

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

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

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

1. בדפדפן, פותחים את כלי Command and Control (CaC).

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

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

5. שינוי לחצן הבחירה של סוג הבקשה לLOAD.
6. כדי להפעיל סרטון לדוגמה, לוחצים על הלחצן SEND REQUEST.
7. הסרטון יתחיל לפעול במכשיר שתומך ב-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 הזה מכיל את כל ממשק המשתמש של אפליקציית המקבל.

receiver.js

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

שאלות נפוצות

• מה זה Google Cast?
• איך הופכים למפתחים של Google Cast?

7. שילוב עם CastDebugLogger API

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

אפשר לקרוא פרטים נוספים במדריך לניפוי באגים בהעברה (cast).

אתחול

כוללים את הסקריפט הבא בתג <head> באפליקציית המקבל מיד אחרי הסקריפט WebReceiver 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 ומפעילים את היומן ב-event listener של 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 ניתן לרשום בקלות אירועי נגנים שהופעלו על ידי ה-SDK של מקלט אינטרנטי Cast, ולהשתמש ברמות שונות של יומן כדי לתעד את נתוני האירועים. ההגדרה של loggerLevelByEvents מתייחסת ל-cast.framework.events.EventType ול-cast.framework.events.category כדי לציין את האירועים לתיעוד ביומן.

צריך להוסיף את המקטע הבא מתחת ל-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
};

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

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

• 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. שימוש בשכבת-העל של ניפוי באגים

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

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

הצטרפות להפעלת Cast קיימת:

1. קבלת מזהה ההפעלה של הפעלת Cast באמצעות ה-SDK של המקבל או של ה-SDK של השולח. בצד של המקבל, מזינים את הקוד הבא כדי לקבל את מזהה הסשן במסוף כלי לניפוי באגים מרחוק של Chrome:

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

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

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

2. יש להזין את מזהה הסשן ב-CaC Tool וללחוץ על הלחצן RESUME.
3. לחצן הפעלת Cast אמור להיות מחובר ולהתחיל להציג הודעות יומן בכלי.

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

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

1. פותחים את הכלי CaC.

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

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

5. שינוי לחצן הבחירה של סוג הבקשה לLOAD.
6. כדי להפעיל סרטון לדוגמה, לוחצים על הלחצן SEND REQUEST.

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

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

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

10. מזל טוב

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

פרטים נוספים זמינים במדריכים למפתחים: כלי לניפוי באגים בהעברה (cast) וכלי Command and Control (CaC).