عارض التطبيقات
عاين تطبيقك وعدّله في الوقت الفعلي.
ما هو عارض التطبيقات؟
عندما تُكمل AI Agents مهمة ما، يظهر عارض التطبيقات في أعلى الصفحة. يتيح لك معاينة تطبيقك المباشر وإجراء تعديلات مرئية مباشرةً — دون الحاجة إلى البرمجة.
قبل أن تبدأ
- قد تستغرق معالجة Agent بعض الوقت — يُرجى الانتظار بصبر.
- تحقّق من لوحة Terminal على اليمين للاطلاع على التقدم التفصيلي. تعرض لوحة Terminal سجلات فورية لما يفعله AI Agent، بما في ذلك إنشاء الملفات، وتوليد التعليمات البرمجية، وأي أخطاء تمت مواجهتها أثناء عملية البناء.
- انقر على أيقونة Refresh في أي وقت لإعادة تحميل المعاينة.
كيفية استخدام عارض التطبيقات
الخطوة 1: انتظر حتى يتم تحميل المعاينة
بعد أن تنتهي Agents، يقوم عارض التطبيقات بتحميل المعاينة في نافذة المعاينة الرئيسية.
⏱️ يستغرق ذلك عادةً من بضع ثوانٍ إلى دقيقة.
إذا استغرق الأمر أكثر من دقيقتين: انقر على أيقونة Refresh في شريط أدوات عارض التطبيقات. إذا استمرت المشكلة، فتحقّق من لوحة Terminal بحثًا عن الأخطاء (راجع الخطوة 3 أدناه).
الخطوة 2: عاين تطبيقك
بمجرد التحميل، يمكنك رؤية تطبيقك المباشر في نافذة المعاينة.
- Desktop / Tablet / Mobile — استخدم شريط أدوات الأجهزة أعلى نافذة المعاينة للتبديل بين طرق العرض واختبار الاستجابة. يعرض شريط الأدوات ثلاث أيقونات تمثل أجهزة سطح المكتب والأجهزة اللوحية والهواتف المحمولة. انقر على كل أيقونة لترى كيف يبدو تطبيقك على أحجام شاشات مختلفة دون مغادرة الصفحة.
- Open in new tab— انقر على أيقونة السهم في الزاوية العلوية اليمنى من نافذة المعاينة لفتح المعاينة في علامة تبويب منفصلة في المتصفح. يكون هذا مفيدًا بشكل خاص إذا كانت المعاينة المضمنة متوقفة أو لا تستجيب.
الخطوة 3: تحقّق من الأخطاء (إذا بدا شيء غير صحيح)
إذا لم يتم تحميل تطبيقك أو بدا معطّلًا، فتحقّق من لوحة Console بحثًا عن رسائل الخطأ.
تقع لوحة Console على الجانب الأيمن من الشاشة، أسفل علامة تبويب Terminal. وهي تعرض سجلات النظام ورسائل الخطأ التي تم إنشاؤها أثناء عملية البناء.
إذا رأيت رسائل خطأ حمراء، فإنها تتضمن عادةً ما يلي:
- وصفًا لما حدث بشكل خاطئ
- الملف ورقم السطر الذي حدث فيه الخطأ
- تتبّع مكدس للمساعدة في تحديد السبب الجذري
لإصلاح الأخطاء: (لمزيد من التفاصيل، يُرجى الرجوع إلى: الإبلاغ عن مشكلة)
- انقر على "Resolve" — سيقوم الذكاء الاصطناعي بتحليل جميع الأخطاء المحددة وإصلاحها تلقائيًا.
- ستُعاد تحميل المعاينة بمجرد تطبيق الإصلاحات. يمكنك متابعة التقدم في الوقت الفعلي عبر لوحة Terminal.
لا يوجد زر "Resolve"؟
انقر على "..." (المزيد من الخيارات) بجانب أحدث رسالة من Agent، ثم حدّد "Feedback" للإبلاغ عن المشكلة إلى فريق الدعم لدينا. يُرجى تضمين Chat Link ولقطة شاشة للخطأ.
الخطوة 4: عدّل تطبيقك
الطريقة 1: انقر للتعديل (مُوصى بها للتغييرات المرئية)
انقر على أي عنصر مباشرةً في نافذة المعاينة. سيظهر محرر مرئي على الجانب الأيسر من الشاشة، مما يتيح لك ضبط ما يلي:
- الألوان — غيّر لون النص أو لون الخلفية أو لون الحدود باستخدام منتقي الألوان
- التباعد — اضبط الحشو والهوامش والفجوات بين العناصر
- الطباعة — عدّل حجم الخط وسمكه ونوعه
- التخطيط — غيّر المحاذاة أو إعدادات flexbox أو خصائص الشبكة
- محتوى النص — حرّر النص مباشرةً داخل المحرر
بمجرد إجراء تغيير، يتم تحديث المعاينة فورًا حتى تتمكن من رؤية النتيجة في الوقت الفعلي.
يتضمن المحرر المرئي أيضًا علامة تبويب Library حيث يمكنك تصفح وإضافة أصول مُعدة مسبقًا مثل الأيقونات والصور ومكونات واجهة المستخدم إلى مشروعك.
الطريقة 2: صف ما تريد في الدردشة
أخبر AI Agent بما تريد تغييره باستخدام اللغة الطبيعية. على سبيل المثال:
- "اجعل لون الخلفية أغمق"
- "قلّل الحشو حول الترويسة"
- "غيّر لون الزر إلى الأزرق"
سيفهم الذكاء الاصطناعي طلبك ويطبّق التغييرات على تطبيقك.
مرجع سريع
- تحديث المعاينة – انقر على أيقونة Refresh في شريط أدوات عارض التطبيقات لإعادة تحميل نافذة المعاينة.
- تبديل عرض الجهاز – استخدم أيقونات Desktop أو Tablet أو Mobile في شريط أدوات المعاينة لاختبار كيف يبدو تطبيقك على أحجام شاشات مختلفة.
- الفتح في علامة تبويب جديدة – انقر على أيقونة السهم في الزاوية العلوية اليمنى من نافذة المعاينة لفتح المعاينة في علامة تبويب منفصلة في المتصفح.
- عرض سجلات الأخطاء – تحقّق من لوحة Console على الجانب الأيمن من الشاشة للاطلاع على رسائل الخطأ وسجلات النظام.
- إصلاح الأخطاء تلقائيًا – انقر على زر "Resolve" في إشعار الإبلاغ عن مشكلة للسماح للذكاء الاصطناعي بإصلاح جميع الأخطاء المحددة.
- تحرير العناصر المرئية – انقر على أي عنصر في نافذة المعاينة لفتح المحرر المرئي على الجانب الأيسر.
- الإبلاغ عن مشكلة – انقر على "..." → "Feedback" في أي رسالة من Agent للإبلاغ عن المشكلات إلى فريق الدعم.
الأسئلة الشائعة
لماذا يعرض عارض التطبيقات شاشة تحميل؟
يعني عرض التحميل أن الموقع الإلكتروني قيد التحميل. يعمل عارض التطبيقات بشكل طبيعي. انتظر قليلًا حتى يتم تحميل المعاينة بشكل صحيح. إذا استغرق الأمر أكثر من دقيقتين، فجرّب النقر على أيقونة Refresh أو التحقق من لوحة Console بحثًا عن الأخطاء.
لماذا يعرض عارض التطبيقات رسائل خطأ حمراء؟
قد تواجه Agents مشكلات أثناء عملية البناء، مما قد يتسبب أحيانًا في حدوث أخطاء في صفحة الويب. انقر على "Resolve"، وستقوم Agents بإصلاح الخطأ نيابةً عنك. بمجرد الإصلاح، سيعمل عارض التطبيقات على المعاينة بشكل طبيعي، لذلك لا داعي للقلق بشأن ظهور رسائل الخطأ الحمراء.
لماذا لا يمكنني إزالة شارة Atoms من صفحتي المنشورة؟
تتطلب إزالة الشارة باقة Pro أو أعلى. يمكنك الترقية في أي وقت من Settings → Plans & Billing. بعد الترقية، ستتم إزالة الشارة تلقائيًا من صفحاتك المنشورة.
للترقية، انقر على صورتك الرمزية في الزاوية العلوية اليمنى، وحدد Settings، ثم انتقل إلى Plans & Billing. اختر باقة Pro أو باقة Max وأكمل عملية الترقية. بعد الترقية، لن تظهر شارة Atoms على صفحاتك المنشورة بعد الآن.
