תצוגה מקדימה של האפליקציה

Project IDX מאפשר לכם לראות תצוגה מקדימה של העבודה שלכם על ידי רינדור תצוגה בזמן אמת של האפליקציה לצד עורך הקוד. תצוגות מקדימות באינטרנט ל-IDX מעבדות מסגרת מוטבעת (iFrame) של שרת האינטרנט של האפליקציה ואמולטור Android מבוסס-ענן.

הפעלה והגדרה של סביבת התצוגה המקדימה

כדי להציג תצוגה מקדימה של האפליקציה בסביבת העבודה, צריך להגדיר את סביבת התצוגה המקדימה.

  1. יש להפעיל תצוגות מקדימות בקובץ התצורה של .idx/dev.nix. IDX יוצר את הקובץ הזה באופן אוטומטי כשיוצרים סביבת עבודה חדשה, וכולל את כל סביבות התצוגה המקדימה הרלוונטיות בהתאם לתבנית שבחרתם. אם הקובץ לא נמצא במאגר של קודי IDX, יוצרים אותו. מגדירים את המאפיין idx.previews ל-true ומוסיפים מאפייני תצורה, כפי שניתן לראות בדוגמה הבאה:

    { pkgs, ... }: {

# NOTE: This is an excerpt of a complete Nix configuration example.
# For more information about the dev.nix file in IDX, see
# https://developers.google.com/idx/guides/customize-idx-env

# Enable previews and customize configuration
idx.previews = {
  enable = true;
  previews = {
    # The following object sets web previews
    web = {
      command = [
        "npm"
        "run"
        "start"
        "--"
        "--port"
        "$PORT"
        "--host"
        "0.0.0.0"
        "--disable-host-check"
      ];
      manager = "web";
    };
    # The following object sets Android previews
    # Note that this is supported only on FLutter workspaces

    android = {
      manager = "flutter";
    };
  };
};

    לרשימה המלאה של מאפייני Nix ב-IDX ראו Nix + IDX.

  2. בנה מחדש את הסביבה שלך:

    • מריצים את הפקודה Project IDX: קשיח מחדש מלוח הפקודות (Cmd+Shift+P/Ctrl+Shift+P).
    • בהודעה על התצורה המעודכנת של הסביבה, לוחצים על יצירת סביבה מחדש.

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

שימוש בתצוגות מקדימות של אפליקציות

IDX מספק תצוגות מקדימות באינטרנט באמולטורים של Chrome ו-Android (בסביבות עבודה של Flutter) שמתקינים את האפליקציה בסביבת התצוגה המקדימה, כך שתוכלו לבדוק אותה במלואה, מקצה לקצה, ישירות מסביבת העבודה שלכם.

רענון תצוגות מקדימות באינטרנט וב-Android

ה-IDX מתחבר לפונקציונליות הטעינה מחדש החמה של ה-frameworks הבסיסיות (כמו npm run start ו-flutter hot-reload) כדי ליצור לולאת פיתוח פנימית הדוקה. בקטע הזה נסביר על הסוגים השונים של טעינות מחדש כדי לעזור בפתרון הבעיה, אם התנהגות ברירת המחדל ב-IDX לא מתאימה לצרכים שלכם.

  • Automatic Hot Reload: טעינות מחדש חמים מתבצעות באופן אוטומטי כששומרים קובץ. לפעמים, התכונה Hot Module Replacement (או HMR), מעדכנת את האפליקציה בזמן טעינה מחדש מבלי לטעון מחדש את הדף (באפליקציות אינטרנט), או בלי להפעיל מחדש או להתקין מחדש את האפליקציה (לאמולטורים). הגישה הזו מצוינת לשמירה על המצב הפעיל של האפליקציה, אבל לפעמים היא לא פועלת באופן מכוון.

  • Manual Full Reload: האפשרות הזו זהה לרענון הדף (באפליקציות אינטרנט) או להפעלה מחדש של אפליקציה (באמולטורים). מומלץ להשתמש בטעינה מלאה מחדש כדי לתעד שינויים משמעותיים בקוד המקור, למשל במהלך ארגון מחדש של קטעי קוד גדולים.

  • הפעלה ידנית מחדש של המכשיר עצמו: אפשרות זו מבצעת הפעלה מחדש מלאה של מערכת התצוגה המקדימה של IDX, כולל עצירה והפעלה מחדש של שרת האינטרנט של האפליקציה.

כל האפשרויות של הטעינה מחדש זמינות דרך סרגל הכלים של התצוגה המקדימה או באמצעות חלונית הפקודות (Cmd+Shift+P ב-Mac או Ctrl+Shift+P ב-ChromeOS, ב-Windows או ב-Linux), בקטגוריה IDX.

כדי להשתמש בסרגל הכלים של התצוגה המקדימה, בצע את הצעדים הבאים:

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

  2. בתפריט, בוחרים את אפשרות הרענון הרצויה: Hot Reload, Full Reload או Hard Restore.

    סרגל הכלים של התצוגה המקדימה נמצא בחלק העליון של חלונית התצוגה המקדימה

הגדרת שמירה אוטומטית וטעינה מחדש חמה

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

הגדרת השמירה האוטומטית

  1. פותחים את Project IDX.
  2. לוחצים על הסמל הגדרות. מופיע החלון 'הגדרות'.
  3. מחפשים את Files: שמירה אוטומטית ומוודאים שבשדה מוגדר 'afterDelay'.
  4. מחפשים את קבצים: עיכוב בשמירה אוטומטית. השדה 'עיכוב בשמירה אוטומטית' יופיע.
  5. צריך להזין מרווח השהיה חדש לשמירה אוטומטית, המבוטא באלפיות השנייה. השינויים בעבודה נשמרים אוטומטית בהתאם להגדרה החדשה 'עיכוב של שמירה אוטומטית'.

השבתת השמירה האוטומטית

  1. פותחים את Project IDX.
  2. לוחצים על הסמל הגדרות. מופיע החלון 'הגדרות'.
  3. מחפשים את קבצים: שמירה אוטומטית.
  4. לוחצים על התפריט הנפתח ובוחרים באפשרות השבתה. השמירה האוטומטית מושבתת עכשיו.