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

يتيح لك 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";
        # 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 في IDX، يُرجى الاطّلاع على Nix + IDX.

  2. إعادة إنشاء بيئتك:

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

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

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

توفّر أداة IDX معاينات للمحتوى في Chrome وAndroid في محاكيات 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. انقر على رمز reload لإعادة تحميل الصفحة. ويؤدي ذلك إلى فرض إعادة التحميل بالكامل. للحصول على نوع مختلف من التحديث، انقر على السهم بجانب رمز إعادة التحميل لتوسيع القائمة.

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

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

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

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

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

    معاينة قائمة المشاركة

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

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

    • الخيار "ب": يمكنك مشاركة مساحة العمل مع الأشخاص الذين تريد منحهم إذن الوصول فقط من خلال اختيار إدارة إذن الوصول إلى مساحة العمل.

  3. انقر على نسخ عنوان URL الخاص بالمعاينة لنسخ رابط مباشر إلى معاينة مساحة العمل، ويمكنك بعد ذلك إرساله إلى المستخدمين الذين تريد الحصول على ملاحظاتهم.

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

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

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

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

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

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