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

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: Hard start (הפעלה מחדש) בלוח הפקודות. (Cmd+Shift+P/Ctrl+Shift+P).
    • לוחצים על Rebuild profile (בניית סביבה מחדש) מתוך Environment config updated (הגדרת הסביבה עודכנה). התראה.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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