כדאי להוסיף לאתר שלכם לחצן 'פתיחה ב-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'
});
