أضِف زر "فتح في Firebase Studio" إلى موقعك الإلكتروني لتوفير طريقة سلسة للمستخدمين لاستيراد الرمز البرمجي من موقعك الإلكتروني مباشرةً إلى مساحة عمل Firebase Studio، ما يتيح لهم مواصلة العمل في بيئة تطوير مستندة إلى السحابة الإلكترونية.
تم تصميم هذه الميزة من أجل:
ساحات لعب الرموز البرمجية، حيث يمكن للمستخدمين الانتقال من محرّر أساسي إلى بيئة تطوير كاملة
أدوات تصميم نماذج أولية للتطبيقات، حيث ينشئ موقعك الإلكتروني الرمز والنموذج الأولي المرئي، ثم يكرّر المستخدم العملية في Firebase Studio
استخدام حزمة تطوير البرامج (SDK) "الفتح في Firebase Studio"
يتم تشغيل الزر "فتح في Firebase Studio" من خلال حزمة تطوير البرامج (SDK) الخاصة بـ "فتح في Firebase Studio"، وهي مكتبة JavaScript تنشئ الروابط المناسبة لإنشاء مساحة عمل جديدة وتعبئتها. ويوفّر عدة خيارات لطريقة استيراد الرمز.
طُرق الاستيراد
يمكنك ضبط الزر لاستيراد الرمز باستخدام الطرق التالية:
من مستودع Git أو نموذج: يمكنك الربط بمستودع Git أو نموذج Firebase Studio. وهي رائعة للمشاريع الكاملة أو النماذج المحدّدة مسبقًا. لمزيد من المعلومات حول حالات الاستخدام هذه، يُرجى الاطّلاع على مقالة إنشاء اختصار لمساحة عمل محدّدة مسبقًا في Firebase Studio.
من مجموعة ملفات مشروع: يمكنك إنشاء مساحة عمل بشكل ديناميكي من مجموعة ملفات ومقتطفات رموز مباشرةً من تطبيق الويب. هذا الخيار هو الأقوى بالنسبة إلى ساحات تجارب الترميز ومصمّمي نماذج التطبيقات، لأنّه يصدّر عمل المستخدم الحالي، حتى إذا لم يتم حفظه في مكان آخر.
إضافة الزر "فتح في Firebase Studio" إلى موقعك الإلكتروني
حزمة تطوير البرامج (SDK) الخاصة بميزة "فتح في Firebase Studio": توفّر لك كل ما تحتاج إليه، بما في ذلك وظائف مساعدة لإنشاء صور أزرار وإنشاء روابط لصفحات معيّنة في التطبيق وإرسال محتوى الملف لإنشاء مساحات عمل Firebase Studio.
لإضافة الزر "فتح في Firebase Studio" إلى موقعك الإلكتروني، اتّبِع الخطوات التالية:
ثبِّت الحزمة في دليل مشروعك:
npm install @firebase-studio/open-sdkأضِف ما يلي إلى الرمز البرمجي لاستيراد المكتبة:
import * as FirebaseStudio from '@firebase-studio/open-sdk';
للحصول على تعليمات تفصيلية وأمثلة على الرموز البرمجية ومرجع كامل لواجهة برمجة التطبيقات، يُرجى الرجوع إلى مستندات حزمة تطوير البرامج (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"
يمكنك تصميم الزر باستخدام حزمة تطوير البرامج (SDK) الخاصة بميزة "فتح في Firebase Studio" أو استخدام الأداة التالية لإنشاء رمز 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'
});
الخطوات التالية
- تثبيت حزمة تطوير البرامج (SDK) الخاصة بميزة "الفتح في Firebase Studio"
- كيفية تخصيص مساحة عمل Firebase Studio