כדאי להוסיף לאתר לחצן 'פתיחה ב-Firebase Studio' כדי לאפשר למשתמשים לייבא קוד מהאתר ישירות לסביבת העבודה של Firebase Studio בצורה חלקה, וכך הם יוכלו להמשיך לעבוד בסביבת פיתוח מבוססת-ענן עם סוכנים.
התכונה הזו מיועדת ל:
סביבות ארגז חול לקוד, שבהן המשתמשים יכולים לעבור מעורך בסיסי לסביבת פיתוח מלאה.
כלים ליצירת אב טיפוס של אפליקציות, שבהם האתר יוצר את הקוד ואת האב טיפוס החזותי, והמשתמש מבצע איטרציות על האב טיפוס ב-Firebase Studio.
שימוש ב-SDK של 'פתיחה ב-Firebase Studio'
הלחצן 'פתיחה ב-Firebase Studio' מופעל על ידי ערכת ה-SDK Firebase Studio Open in, שהיא ספריית JavaScript שיוצרת את הקישורים המתאימים ליצירה של סביבת עבודה חדשה ולאכלוס שלה. הוא מספק כמה אפשרויות לייבוא הקוד.
שיטות ייבוא
אפשר להגדיר את הכפתור לייבוא קוד באמצעות השיטות הבאות:
ממאגר Git או מתבנית: קישור למאגר Git או לתבנית Firebase Studio. האפשרות הזו מצוינת לפרויקטים שלמים או לתבניות מוגדרות מראש. מידע נוסף על תרחישי השימוש האלה זמין במאמר יצירת קיצור דרך לסביבת עבודה מוגדרת מראש ב-Firebase Studio.
מתוך קבוצת קבצים של פרויקט: יצירת סביבת עבודה באופן דינמי מתוך קבוצת קבצים וקטעי קוד ישירות מאפליקציית האינטרנט. זו האפשרות הכי חזקה לשימוש ב-code playgrounds וליצירת אבות טיפוס של אפליקציות, כי היא מייצאת את העבודה הנוכחית של המשתמש, גם אם היא לא נשמרה במקום אחר.
הוספת הלחצן 'פתיחה ב-Firebase Studio' לאתר
Open in Firebase Studio SDK: מספק את כל מה שצריך, כולל פונקציות עזר ליצירת תמונות של לחצנים, ליצירת קישורי עומק ולשליחת תוכן של קבצים כדי ליצור סביבות עבודה של Firebase Studio.
כדי להוסיף את הלחצן 'פתיחה ב-Firebase Studio' לאתר:
מתקינים את החבילה בספריית הפרויקט:
npm install @firebase-studio/open-sdkמוסיפים את השורה הבאה לקוד כדי לייבא את הספרייה:
import * as FirebaseStudio from '@firebase-studio/open-sdk';
הוראות מפורטות, דוגמאות קוד ומידע מלא על ה-API זמינים במסמכי ה-SDK הרשמיים.
הסבר על סביבות עבודה
כשמשתמש יוצר סביבת עבודה מהאתר שלכם, Firebase Studio מגדיר עבורו את סביבת הפיתוח. רמת האוטומציה תלויה בסוג הפרויקט.
סביבה שעברה אופטימיזציה
בפרויקטים של React, Angular ו-HTML פשוט, Firebase Studio מספק סביבה מותאמת ומוגדרת מראש, בתנאי שהגורם הקורא מגדיר נכון את המאפיין baselineEnvironment באובייקט settings. כלומר, כשמשתמש פותח את הקישור ב-Firebase Studio, המרחב נוצר ב-Firebase Studio באופן אוטומטי:
- מתקין את כל הרכיבים התלויים שנדרשים.
- מגדיר ומפעיל את שרת הפיתוח הנכון.
- הכלי יוצר את הסביבה עם כלי הפיתוח והתוספים הנכונים.
הפעולה הזו פותחת סביבה שבה המשתמשים יכולים לראות תצוגה מקדימה של האפליקציה ולבצע אינטראקציה ישירה עם הקוד.
סביבה גנרית
בכל שאר סוגי הפרויקטים, Firebase Studio משתמש בכלי ייבוא כללי. הקבצים מועלים לסביבת העבודה, אבל המשתמש צריך לבצע את ההגדרה הראשונית באופן ידני. יכול להיות שהם יצטרכו:
- מתקינים את סביבות זמן הריצה של השפות ואת יחסי התלות.
- מגדירים את הקובץ
dev.nix.
בפרויקטים האלה, Firebase Studio יוצר סביבה לא מותאמת אישית, ומעניק למשתמש שליטה מלאה בתהליך ההגדרה.
חוויית משתמש
בשני סוגי סביבות העבודה, אחרי שהמשתמש לוחץ על הלחצן 'פתיחה ב-Firebase Studio', הוא מתבקש לתת שם לסביבת העבודה ולבדוק את רשימת הקבצים לייבוא.
כשהמשתמש לוחץ על ייבוא, נפתח מרחב עבודה חדש של Firebase Studio. היא מכילה את קובצי הפרויקט, תצוגה מקדימה של האפליקציה וקובץ README עם השלבים הבאים.
עיצוב לחצן 'פתיחה ב-Firebase Studio'
אפשר לעצב את הלחצן באמצעות Open in Firebase Studio SDK או להשתמש בכלי הבא כדי ליצור את ה-HTML של לחצן Firebase Studio:
אם אתם משתמשים ב-SDK, אתם יכולים לכלול מאפייני הגדרה אופציונליים ללחצן:
-
label: מגדיר את תווית הטקסט שמוצגת על הלחצן.- הערכים המותרים:
open,try,exportאוcontinue.
- הערכים המותרים:
-
color: מגדיר את ערכת הצבעים של הכפתור.- הערכים המותרים:
dark,light,blueאוbright.
- הערכים המותרים:
-
size: מציין את גובה הלחצן בפיקסלים.- הערכים המותרים:
20או32.
- הערכים המותרים:
-
imageFormat: קובעת את פורמט הקובץ של התמונה שנוצרה.- הערכים המותרים:
svgאוpng.
- הערכים המותרים:
לדוגמה:
img.src = FirebaseStudio.getButtonImageUrl({
label: 'export',
color: 'dark',
size: 32,
imageFormat: 'svg'
});
