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

ב-Firebase Studio יש כמה דרכים להציג בתצוגה מקדימה ולבדוק את האפליקציה במהלך הפיתוח. זה כולל שימוש ב-App Prototyping agent, ניצול התצוגה המקדימה המובנית לאינטרנט והתצוגות המקדימות לאינטרנט ול-Android שזמינות בסביבות העבודה של 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 אוטומטי: פעולות Hot Reload מתבצעות אוטומטית כששומרים קובץ. הפעולה הזו נקראת לפעמים החלפה של מודול פעיל (או HMR). טעינה מחדש של אפליקציה פעילה מעדכנת את האפליקציה בלי לטעון מחדש את הדף (באפליקציות אינטרנט) או בלי להפעיל מחדש או להתקין מחדש את האפליקציה (באמולטורים). הגישה הזו שימושית לשמירה על המצב הפעיל של האפליקציה, אבל יכול להיות שהיא לא תמיד תפעל כמו שרוצים.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

השלבים הבאים

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