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

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

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

הלוגו של Google Cast

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

מה זה Google Cast?

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

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

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

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

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

מה תלמדו

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

  • דפדפן Google Chrome העדכני ביותר.
  • node.js, npm, המודול http-server ו-ngrok
  • מכשיר Google Cast כמו Chromecast או Android TV שהוגדר עם גישה לאינטרנט.
  • טלוויזיה או צג עם קלט HDMI.

ניסיון

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

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

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

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

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

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

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

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

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

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

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

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

אם אין לך שרת זמין, אל דאגה. תוכלו להתקין את node.js, את מודול הצומת http-server ו-ngrok או לארח את הפרויקט שלכם באמצעות שירות כגון אירוח ב-Firebase.

npm install -g http-server
npm install -g ngrok

הרצת השרת

אם משתמשים ב-http-server, צריך להיכנס למסוף ולבצע את הפעולות הבאות:

cd app-done
http-server

אמור להופיע משהו כזה:

Starting up http-server, serving ./
Available on:
  http://127.0.0.1:8080
  http://172.19.17.192:8080
Hit CTRL-C to stop the server

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

ngrok http 8080

פעולה זו תגדיר מנהרה ngrok בשרת ה-HTTP המקומי שלכם ותקצה לכם נקודת קצה מאובטחת מסוג HTTPS שניתן להשתמש בה בשלב הבא (https://116ec943.eu.ngrok.io):

ngrok by @inconshreveable                                                                                                                                                                                                                                     (Ctrl+C to quit)

Session Status         online
Version                2.2.4
Web Interface          http://127.0.0.1:8080
Forwarding             http://116ec943.eu.ngrok.io -> localhost:8080
Forwarding             https://116ec943.eu.ngrok.io -> localhost:8080

צריך להפעיל גם את ngrok וגם את http-server למשך תקופת ה-Codelab. כל שינוי שיבוצע באופן מקומי יהיה זמין מיד.

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

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

תמונה של מסוף מפתח הפיתוח עם הדגשה של הלחצן 'Add New Application'

לחץ על "Add new app"

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

בחירת"מקבל ו&מותאם אישית; זה מה שאנחנו בונים.

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

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

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

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

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

תמונה של תיבת הדו-שיח 'Add Cast Receiver'

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

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

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

הלוגו של Google Chrome

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

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

תמונה של הכרטיסייה 'Cast Connect & Logger Controls' בכלי Command ו-Control (CaC)

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

תמונה של 'Cast Connect & Logger Controls' הכרטיסייה של Command ו-Control (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

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

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

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

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

index.html

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

geter.js

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

שאלות נפוצות

7. שילוב עם CastDebugLogger API

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

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

אתחול

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

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

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

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

צריך להוסיף את הערכים הבאים מתחת למאזינים של האירוע 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. שימוש בכלי פקודות ובקרה (CaC)

סקירה כללית

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

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

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

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

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

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

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

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

תמונה של הכרטיסייה &#39;Cast Connect & Logger Controls&#39; בכלי Command ו-Control (CaC) כדי להמשיך את הסשן

  1. יש להזין את מזהה הסשן בכלי CC וללחוץ על הלחצן RESUME.
  2. יש לחבר את לחצן ההעברה ולהתחיל להציג הודעות יומן בכלי.

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

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

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

תמונה של הכרטיסייה &#39;Cast Connect & Logger Controls&#39; בכלי Command ו-Control (CaC)

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

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

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

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

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

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

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

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

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

10. מזל טוב

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

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