یک دکمه «باز کردن در Firebase Studio » را به وب‌سایت خود اضافه کنید تا راهی یکپارچه برای کاربران فراهم کند تا کد را مستقیماً از سایت شما به فضای کاری Firebase Studio وارد کنند و به آنها اجازه دهید در یک محیط توسعه مبتنی بر ابر عامل به کار خود ادامه دهند.
این ویژگی برای:
زمین های بازی کد، که در آن کاربران شما می توانند از یک ویرایشگر اولیه به یک محیط توسعه کامل حرکت کنند.
ابزارهای نمونه سازی برنامه، جایی که سایت شما کد و نمونه اولیه بصری را تولید می کند و کاربر سپس آن را در Firebase Studio تکرار می کند.
از Open in Firebase Studio SDK استفاده کنید
دکمه "Open in Firebase Studio " توسط Open in Firebase Studio SDK ، یک کتابخانه جاوا اسکریپت که پیوندهای مناسب را برای ایجاد و پر کردن یک فضای کاری جدید ایجاد می کند، تامین می شود. چندین گزینه برای نحوه وارد کردن کد ارائه می دهد.
روش های واردات
با استفاده از روش های زیر می توانید دکمه را برای وارد کردن کد پیکربندی کنید:
از یک مخزن یا قالب Git : پیوند به یک مخزن Git یا الگوی Firebase Studio . این برای پروژه های کامل یا قالب های از پیش تعریف شده عالی است. برای اطلاعات بیشتر در مورد این موارد استفاده، به ایجاد میانبر به یک فضای کاری از پیش تعریف شده در Firebase Studio مراجعه کنید.
از مجموعه ای از فایل های پروژه : به صورت پویا یک فضای کاری از مجموعه ای از فایل ها و قطعه کد مستقیماً از برنامه وب خود ایجاد کنید. این قدرتمندترین گزینه برای زمین های بازی کد و نمونه های اولیه برنامه است، زیرا کار فعلی کاربر را صادر می کند، حتی اگر در جای دیگری ذخیره نشده باشد.
دکمه "Open in Firebase Studio" را به سایت خود اضافه کنید
Open in Firebase Studio SDK : هر آنچه را که نیاز دارید، از جمله توابع کمکی برای تولید تصاویر دکمه، ایجاد پیوندهای عمیق، و ارسال محتوای فایل برای ایجاد فضاهای کاری Firebase Studio را فراهم می کند.
برای افزودن دکمه "Open in 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 » کلیک کرد، از او خواسته می‌شود که فضای کاری خود را نام‌گذاری کند و فهرست فایل‌هایی را برای وارد کردن بررسی کند.
وقتی کاربر روی Import کلیک می کند، یک فضای کاری Firebase Studio جدید باز می شود. این شامل فایل های پروژه شما، یک پیش نمایش برنامه، و یک فایل README با مراحل بعدی است.
یک دکمه "Open in 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'
});
