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

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";
        # Optionally, specify a directory that contains your web app
        # cwd = "app/client";
      };
      # 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).
    • לוחצים על Rebuild conditions מתוך ההתראה Environment config updated.

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

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

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

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

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

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

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

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

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

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

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

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

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

שיתוף התצוגה המקדימה של האתר עם אחרים

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

  1. בסרגל הכלים של התצוגה המקדימה באינטרנט, לוחצים על הסמל תמונה של סמל קישור Share Preview Link (קישור לתצוגה המקדימה לשיתוף) שמשמאל לסרגל הכתובות כדי לפתוח את תפריט השיתוף.

    תצוגה מקדימה של תפריט השיתוף

  2. מאפשרים לאחרים לגשת לסביבת העבודה באמצעות אחת מהאפשרויות הבאות:

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

    • אפשרות ב'. כדי לשתף את סביבת העבודה רק עם האנשים שאתם רוצים לתת להם גישה, בוחרים באפשרות Manage Workspace Access.

  3. בוחרים באפשרות Copy Preview URL כדי להעתיק קישור ישיר לתצוגה המקדימה של סביבת העבודה, ואז לשלוח את הקישור למשתמשים שרוצים לקבל מהם משוב.

הגדרת שמירה אוטומטית וטעינה מחדש מתוך הזיכרון

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

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

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

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

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