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

توفّر 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 حفظ عملك على فترات زمنية مختلفة، غيِّر إعداد الحفظ التلقائي. يمكنك أيضًا إيقاف ميزة الحفظ التلقائي.

ضبط الحفظ التلقائي

  1. افتح Firebase Studio.
  2. انقر على رمز الإعدادات.
  3. ابحث عن الملفات: الحفظ التلقائي وتأكَّد من أنّ الحقل مضبوط على `afterDelay`.
  4. ابحث عن الملفات: تأخير الحفظ التلقائي.
  5. أدخِل فاصل تأخير جديدًا للحفظ التلقائي، معبّرًا عنه بالملي ثانية. يتم الآن حفظ التغييرات التي تجريها على عملك تلقائيًا استنادًا إلى إعداد التأخير الجديد للحفظ التلقائي.

إيقاف ميزة "الحفظ التلقائي"

  1. افتح Firebase Studio.
  2. انقر على رمز الإعدادات.
  3. ابحث عن الملفات: الحفظ التلقائي.
  4. انقر على القائمة المنسدلة واختَر إيقاف.

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

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

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