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

Firebase Studio מספק תצוגה מקדימה שמרינדרת תצוגה פעילה של האפליקציה לצד עורך הקוד.

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

אם אתם משתמשים בתבנית, לרוב התצוגות המקדימות כבר מוגדרות. אם התצוגות המקדימות עדיין לא מוגדרות בתבנית, תוכלו להגדיר אותן בקובץ התצורה של הפרויקט ב-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. יוצרים מחדש את הסביבה:

   • בלוח הפקודות (Cmd+Shift+P/Ctrl+Shift+P), מריצים את הפקודה Firebase Studio: Hard restart.
   • בהתראה 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. בסרגל הכלים של התצוגה המקדימה באינטרנט, לוחצים על הסמל Share Preview Link (שיתוף הקישור לתצוגה המקדימה) שמשמאל לסרגל הכתובות כדי לפתוח את תפריט השיתוף.

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

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

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

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

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

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

השלבים הבאים

• פרסום באמצעות Firebase.
• מעקב אחרי האפליקציה.