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

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: Hard restart.
   • من الإشعار Environment config updated ، انقر على Rebuild environment.

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

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

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

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

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

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

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

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

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

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

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

2. اختَر خيار إعادة التحميل الذي تريده من القائمة: Hot Reload أو Full Reload أو Hard Restart.

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

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

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

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

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

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

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

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

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

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

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

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

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