إنشاء زر لاستيراد الرمز إلى Firebase Studio

يمكنك إضافة زر "فتح في Firebase Studio" إلى موقعك الإلكتروني لتوفير طريقة سلسة للمستخدمين لاستيراد الرمز من موقعك الإلكتروني مباشرةً إلى مساحة عمل في Firebase Studio، ما يتيح لهم مواصلة العمل في بيئة تطوير سحابية مستندة إلى وكيل.

تم تصميم هذه الميزة من أجل:

  • ساحات تجربة الرموز، حيث يمكن للمستخدمين الانتقال من محرّر أساسي إلى بيئة تطوير كاملة

  • أدوات إنشاء نماذج التطبيقات، حيث ينشئ موقعك الإلكتروني الرمز والنموذج المرئي ، ثم يُجري المستخدم تحسينات عليه في Firebase Studio

استخدام حزمة Open in Firebase Studio SDK

يتم تشغيل زر "فتح في Firebase Studio" من خلال حزمة Open in Firebase Studio SDK، وهي مكتبة JavaScript تنشئ الروابط المناسبة لإنشاء مساحة عمل جديدة وتعبئتها. وتوفّر هذه الحزمة عدة خيارات لكيفية استيراد الرمز.

طُرق الاستيراد

يمكنك ضبط الزر لاستيراد الرمز باستخدام الطرق التالية:

  • من مستودع Git أو نموذج: يمكنك الربط بمستودع Git أو Firebase Studio نموذج. هذا الخيار رائع للمشاريع الكاملة أو النماذج المحدّدة مسبقًا. لمزيد من المعلومات حول حالات الاستخدام هذه، يُرجى الرجوع إلى مقالة إنشاء اختصار لمساحة عمل محدّدة مسبقًا في Firebase Studio.

  • من مجموعة ملفات مشروع: يمكنك إنشاء مساحة عمل ديناميكيًا من مجموعة ملفات ومقتطفات رمزية مباشرةً من تطبيق الويب. هذا هو الخيار الأقوى لساحات تجربة الرموز وأدوات إنشاء نماذج التطبيقات، لأنّه يصدّر عمل المستخدم الحالي، حتى إذا لم يتم حفظه في مكان آخر.

إضافة زر "فتح في Firebase Studio" إلى موقعك الإلكتروني

توفر حزمة Open in Firebase Studio SDK: كل ما تحتاج إليه، بما في ذلك الدوال المساعدة لـ إنشاء صور الأزرار وإنشاء روابط لموضع معيّن وإرسال محتوى الملف لإنشاء Firebase Studio مساحات عمل.

لإضافة زر "فتح في Firebase Studio" إلى موقعك الإلكتروني، اتّبِع الخطوات التالية:

  1. ثبِّت الحزمة في دليل مشروعك:

    npm install @firebase-studio/open-sdk

  2. أضِف ما يلي إلى الرمز لاستيراد المكتبة:

    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

عندما ينقر المستخدم على استيراد، يتم فتح مساحة عمل جديدة Firebase Studio. تحتوي مساحة العمل على ملفات مشروعك ومعاينة للتطبيق وملف تعليمات يتضمّن الخطوات التالية.

تصميم زر "فتح في 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'
});

مثال على زرّ "التصدير إلى Firebase Studio"

الخطوات التالية