معاينة تطبيقك

Firebase Studio يوفّر عدة طرق لمعاينة تطبيقك واختباره أثناء عملية التطوير. ويشمل ذلك استخدام App Prototyping agent والاستفادة من عارض المعاينة المضمّن على الويب، وعارضي المعاينة على الويب وAndroid المتوفّرَين ضمن مساحات عمل Firebase Studio.

تفعيل بيئة المعاينة وإعدادها

إذا كنت تستخدم نموذجًا أو تنشئ تطبيقك باستخدام App Prototyping agent، غالبًا ما تكون المعاينات معدّة لك مسبقًا. إذا لم يتم إعداد المعاينات في نموذجك، يمكنك إعدادها في ملف إعدادات Nix للمشروع.

1. من مساحة العمل، افتح الملف ‎.idx/dev.nix.

   Firebase Studio ينشئ هذا الملف تلقائيًا عند إنشاء مساحة عمل جديدة، ويتضمّن أي بيئات معاينة سارية استنادًا إلى النموذج الذي تختاره. إذا لم يكن الملف في مستودع Firebase Studio الرمز، أنشِئه ثم اضبط السمة idx.previews على true. بعد ذلك، أضِف سمات الإعدادات، كما هو موضّح في المثال التالي:

   { pkgs, ... }: {
   
     # NOTE: This is an excerpt of a complete Nix configuration example.
     # For more information about the dev.nix file in Firebase Studio, see
     # https://firebase.google.com/docs/studio/customize-workspace
   
     # Enable previews and customize configuration
     idx.previews = {
       enable = true;
       previews = {
         # The following object sets web previews
         web = {
           command = [
             "npm"
             "run"
             "start"
             "--"
             "--port"
             "$PORT"
             "--host"
             "0.0.0.0"
             "--disable-host-check"
           ];
           manager = "web";
           # Optionally, specify a directory that contains your web app
           # cwd = "app/client";
         };
         # The following object sets Android previews
         # Note that this is supported only on Flutter workspaces
         android = {
           manager = "flutter";
         };
       };
     };
   }
   

   للاطّلاع على قائمة كاملة بسمات Nix في Firebase Studio، يُرجى مراجعة مقالة Nix + Firebase Studio.

2. أعِد إنشاء بيئتك:

   • من لوحة الأوامر (Cmd+Shift+P/Ctrl+Shift+P)، شغِّل الأمر Firebase Studio: إعادة التشغيل الكامل.
   • من الإشعار تم تعديل إعدادات البيئة ، انقر على إعادة إنشاء البيئة.

   عند إعادة إنشاء البيئة بعد تعديل ملف dev.nix، تظهر لوحة المعاينة في مساحة العمل، وتعرض علامة التبويب Android أو الويب أو كلتيهما، استنادًا إلى ما فعّلته.

استخدام معاينات التطبيق

Firebase Studio يوفّر معاينات على الويب على Chrome ومحاكيات Android في مساحات عمل Flutter التي تثبِّت تطبيقك في بيئة المعاينة. يتيح لك ذلك اختبار تطبيقك بالكامل، من البداية إلى النهاية، مباشرةً من مساحة العمل.

إعادة تحميل معاينات الويب وAndroid

Firebase Studio يربط وظائف إعادة التحميل السريع للأُطر الأساسية (مثل npm run start وflutter hot-reload) ليمنحك حلقة تطوير داخلية مبسطة. Firebase Studio يوفّر الأنواع التالية من عمليات إعادة التحميل:

• إعادة التحميل السريع التلقائية: يتم إجراء عمليات إعادة التحميل السريع تلقائيًا عند حفظ ملف. تُعرف أحيانًا باسم استبدال الوحدة السريع (أو HMR)، وتعدِّل عملية إعادة التحميل السريع تطبيقك بدون إعادة تحميل الصفحة (بالنسبة إلى تطبيقات الويب) أو بدون إعادة تشغيل التطبيق أو إعادة تثبيته (بالنسبة إلى المحاكيات). يفيد هذا النهج في الحفاظ على حالة تطبيقك المباشرة، ولكن قد لا يعمل دائمًا على النحو المطلوب.

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

• إعادة التشغيل الكاملة اليدوية: ينفّذ هذا الخيار إعادة تشغيل كاملة لنظام المعاينة في Firebase Studio'، ويشمل ذلك إيقاف خادم الويب الخاص بتطبيقك وإعادة تشغيله.

تتوفّر جميع خيارات إعادة التحميل باستخدام شريط أدوات المعاينة أو لوحة الأوامر (Cmd+Shift+P على أجهزة Mac أو Ctrl+Shift+P على أجهزة ChromeOS أو Windows أو Linux)، ضمن فئة Firebase Studio.

لاستخدام شريط أدوات المعاينة، اتّبِع الخطوات التالية:

1. انقر على رمز إعادة التحميل لإعادة تحميل الصفحة. يؤدي ذلك إلى فرض إعادة تحميل كاملة. للحصول على نوع مختلف من إعادة التحميل، انقر على السهم بجانب رمز إعادة التحميل لتوسيع القائمة.

2. اختَر خيار إعادة التحميل الذي تريده من القائمة: إعادة التحميل السريع أو إعادة التحميل الكاملة أو إعادة التشغيل الكاملة.

مشاركة معاينة الويب مع مستخدمين آخرين

يمكنك مشاركة معاينة الويب لتطبيقك مع مستخدمين آخرين للحصول على ملاحظات من خلال تفعيل إمكانية الوصول ثم مشاركة الرابط المباشر إلى المعاينة:

1. في شريط أدوات معاينة الويب، انقر على رمز مشاركة رابط المعاينة على يسار شريط العناوين لفتح قائمة المشاركة.

2. اسمح للمستخدمين الآخرين بالوصول إلى مساحة العمل باستخدام أحد الخيارَين التاليَين:

   • إتاحة المعاينة للجميع: يمكنك إتاحة معاينة مساحة العمل للجميع. يتيح ذلك لأي مستخدم على الإنترنت الوصول إلى خادم المعاينة الذي يتم تشغيله على مساحة العمل أثناء نشاط مساحة العمل، وإلى أن توقف إمكانية الوصول للجميع.

   • إدارة إمكانية الوصول إلى مساحة العمل : يمكنك مشاركة مساحة العمل مع المستخدمين الذين تريد منحهم إمكانية الوصول فقط.

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

ضبط ميزتَي "الحفظ التلقائي" و"إعادة التحميل السريع"

يحفظ Firebase Studio عملك تلقائيًا بعد ثانية واحدة من التوقف عن الكتابة، ما يؤدي إلى عمليات إعادة تحميل سريع تلقائية. إذا كنت تريد Firebase Studio أن يحفظ عملك في فاصل زمني مختلف، غيِّر إعداد "الحفظ التلقائي". يمكنك أيضًا إيقاف ميزة "الحفظ التلقائي".

تم قطع الاتصال بالخادم الخلفي للمعاينة

يمكنك تجاهل الرسالة "تم قطع الاتصال بالخادم الخلفي للمعاينة".

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

• النشر باستخدام Firebase.
• مراقبة تطبيقك.