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

‫Firebase Studio מציע כמה דרכים לצפות בתצוגה מקדימה של האפליקציה ולבדוק אותה במהלך הפיתוח. זה כולל שימוש ב-App Prototyping agent ובתצוגה המקדימה המובנית לאינטרנט, ובתצוגות המקדימות לאינטרנט ולאנדרואיד שזמינות בסביבות העבודה של Firebase Studio.

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

אם אתם משתמשים בתבנית או יוצרים את האפליקציה באמצעות App Prototyping agent, לרוב התצוגות המקדימות כבר מוגדרות בשבילכם. אם התצוגות המקדימות עדיין לא הוגדרו בתבנית, אפשר להגדיר אותן בקובץ ההגדרות של Nix בפרויקט.

  1. בסביבת העבודה, פותחים את .idx/dev.nix.

    ‫Firebase Studio יוצר אוטומטית את הקובץ הזה כשיוצרים סביבת עבודה חדשה, והוא כולל את כל סביבות התצוגה המקדימה הרלוונטיות על סמך התבנית שנבחרה. אם הקובץ לא נמצא במאגר הקודים Firebase Studio, צריך ליצור אותו ואז להגדיר את מאפיין idx.previews לערך true. לאחר מכן מוסיפים מאפייני הגדרה, כמו בדוגמה הבאה:

    { pkgs, ... }: {

  # NOTE: This is an excerpt of a complete Nix configuration example.
  # For more information about the dev.nix file in Firebase Studio, see
  # https://firebase.google.com/docs/studio/customize-workspace

  # 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 ב-Firebase Studio זמינה במאמר Nix + Firebase Studio.

  2. בונים מחדש את הסביבה:

    • מריצים את הפקודה Firebase Studio: הפעלה מחדש מלאה מלוח הפקודות (Cmd+Shift+P/Ctrl+Shift+P).
    • בהתראה Environment config updated, לוחצים על Rebuild environment.

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

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

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

רענון התצוגות המקדימות לאתרים ולאפליקציות ל-Android

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

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

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

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

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

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

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

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

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

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

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

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

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

    • ניהול הגישה ל-Workspace משתפים את סביבת העבודה רק עם האנשים שרוצים לתת להם גישה.

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

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

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

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

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

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

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

התצוגה המקדימה של ה-backend מנותקת

אפשר להתעלם מההודעה 'התצוגה המקדימה של ה-backend נותקה'.

השלבים הבאים