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