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

يتيح لك مشروع 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: Hard rename من لوحة الأوامر (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. افتح رقم تعريف المشروع (IDX).
  2. انقر على رمز الإعدادات. ستظهر نافذة الإعدادات.
  3. ابحث عن Files: الحفظ التلقائي وتأكَّد من ضبط الحقل على "afterDelay".
  4. ابحث عن الملفات: تأخير الحفظ التلقائي. سيظهر الحقل "تأخير الحفظ التلقائي".
  5. أدخِل فاصلاً جديدًا لتأخير الحفظ التلقائي، معبرًا عنه بالمللي ثانية. يتم الآن حفظ التغييرات التي تطرأ على عملك تلقائيًا استنادًا إلى الإعداد الجديد لتأخير الحفظ التلقائي.

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

  1. افتح رقم تعريف المشروع (IDX).
  2. انقر على رمز الإعدادات. ستظهر نافذة الإعدادات.
  3. ابحث عن Files: الحفظ التلقائي.
  4. انقر على القائمة المنسدلة واختر إيقاف. تم إيقاف الحفظ التلقائي الآن.