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

يوفّر Firebase Studio أداة معاينة تعرض عرضًا مباشرًا لتطبيقك بجانب محرِّر الرموز البرمجية.

تفعيل بيئة المعاينة وضبطها

إذا كنت تستخدم نموذجًا، يتم في أغلب الأحيان إعداد المعاينات تلقائيًا نيابةً عنك. إذا لم تكن المعاينات قد تم إعدادها في النموذج، يمكنك ضبطها في ملف إعدادات 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
• مراقبة تطبيقك: