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

يتيح لك Project IDX معاينة عملك من خلال تقديم عرض مباشر تطبيقك إلى جانب أداة تعديل الرموز تعرض معاينات الويب IDX إطار مضمّن (iFrame) لخادم الويب الخاص بالتطبيق وجهاز Android مستند إلى السحابة الإلكترونية المحاكي.

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

لمعاينة تطبيقك في مساحة العمل، عليك ضبط المعاينة. محددة.

  1. تفعيل المعاينات في ملف إعداد .idx/dev.nix. IDX هذا الملف تلقائيًا عند إنشاء مساحة عمل جديدة يتضمن أي بيئات معاينة سارية بناءً على النموذج الذي التحديد. أنشئ الملف إذا لم يكن في مستودع رموز IDX. ضبط السمة idx.previews إلى true وإضافة سمات الإعداد، مثل يوضح المثال التالي:

    { pkgs, ... }: {

  # NOTE: This is an excerpt of a complete Nix configuration example.
  # For more information about the dev.nix file in IDX, see
  # https://developers.google.com/idx/guides/customize-idx-env

  # 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";
      };
      # The following object sets Android previews
      # Note that this is supported only on FLutter workspaces
      android = {
        manager = "flutter";
      };
    };
  };
}

    للحصول على قائمة كاملة بسمات Nix في IDX، يُرجى مراجعة Nix وIDX

  2. إعادة بناء البيئة:

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

    عند إعادة إنشاء البيئة بعد تعديل ملف dev.nix، سينتج عن تظهر لوحة المعاينة في مساحة العمل وتعرض Android والويب. علامات التبويب بناءً على ما قمت بتمكينه. ومع ذلك، قد تحتاج إلى الانتظار بعض الوقت حتى تتم إعادة بناء البيئة. تجربة إغلاق مساحة العمل ثم إعادة فتحها من لوحة بيانات IDX

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

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

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

نظام IDX يدمج وظائف إعادة التحميل السريع في أطر العمل الأساسية (مثل npm run start وflutter hot-reload) لتعزيز شعورك بالانتماء لتطوير البرامج. يتناول هذا القسم الأنواع المختلفة من عمليات إعادة التحميل لمساعدتك على إذا كان السلوك الافتراضي على IDX لا يتوافق بشكل جيد مع استخدامك، الحالة.

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

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

  • إعادة التشغيل اليدوية للجهاز: يؤدي هذا الخيار إلى إعادة تشغيل كاملة نظام معاينة IDX، والذي يتضمن إيقاف وإعادة تشغيل خادم الويب للتطبيق.

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

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

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

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

    يظهر شريط أدوات المعاينة أعلى لوحة المعاينة

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

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

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

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

إيقاف الحفظ التلقائي

  1. افتح Project IDX.
  2. انقر على رمز الإعدادات. ستظهر نافذة "الإعدادات".
  3. ابحث عن Files: الحفظ التلقائي.
  4. انقر على القائمة المنسدلة واختَر إيقاف. ميزة الحفظ التلقائي أصبحت متاحة الآن غير مفعّل.