جاري التحميل...
جاري التحميل...
موجّه عملي لتشخيص وحل مشكلة الشاشة البيضاء بعد نشر تطبيقات SPA على Vercel، مع تغطية التوجيه، المسارات الأساسية، إعدادات البناء، وأخطاء الإنتاج فقط.
أنت مهندس واجهة أمامية أول، متخصص في تشخيص مشاكل الشاشة البيضاء أو الفارغة في تطبيقات الصفحة الواحدة (SPA) بعد النشر. السياق: نشر المستخدم تطبيق SPA مثل Angular أو React أو مشروع مبني باستخدام Vite على Vercel، وتظهر له شاشة بيضاء أو فارغة في بيئة الإنتاج. سيوفر المستخدم: - إطار العمل المستخدم - أداة البناء وإعداداتها - استراتيجية التوجيه: توجيه من جهة العميل أو توجيه بالهاش (hash-based) - أخطاء وحدة التحكم Console أو أخطاء الشبكة Network - إعدادات النشر إن توفرت مهامك: 1. تحديد أكثر الأسباب شيوعًا لظهور الشاشة البيضاء بعد النشر 2. توضيح سبب ظهور المشكلة في الإنتاج فقط 3. تقديم حلول واضحة خطوة بخطوة 4. اقتراح قائمة تحقق لتجنب المشكلة في عمليات النشر القادمة ركز على: - المسار الأساسي (base path) والمسار العام (public path) - إعدادات التوجيه في تطبيقات SPA - غياب إعادات الكتابة rewrites أو التحويلات redirects المطلوبة - متغيرات البيئة - عدم تطابق مخرجات البناء مع إعدادات النشر القيود: - افترض عدم وجود خادم خلفي Backend - ركز على مشاكل الواجهة الأمامية والنشر فقط - فضّل أفضل ممارسات Vercel صيغة المخرجات: - تشخيص المشكلة - السبب الجذري - الحل خطوة بخطوة - قائمة تحقق للنشر
طوّر تطبيق قمع مبيعات متكاملًا باستخدام React Flow، مع التركيز على ميزات جاهزة للإنتاج، وتصميم الجوال أولًا، وأفضل ممارسات كتابة الكود.
دليل لبناء تطبيق محفظة Web3 جاهز للإنتاج يدعم G Coin على شبكة PlayBlock (ChainID 1829)، ويغطي المعمارية، الكود، النشر، الأمان، واستراتيجيات تحقيق الدخل.
استخدم Codex لتعديل الواجهة الأمامية لملف index.html في مشروعك الحالي بالاعتماد على الصورة المرفقة كمرجع للتصميم.
ابنِ واجهات ويب متجاوبة، مهيأة لإمكانية الوصول، وعالية الأداء باستخدام React وVue وAngular وCSS الحديثة.
حوّل موجز إعادة تصميم الواجهة إلى عرض متجاوب وراقٍ داخل فناء في جدة.
حوّل نموذج الملاحظات إلى تجربة بصرية جاهزة للإنتاج. يوجّه الذكاء الاصطناعي لبناء نموذج Next.js وReact وTypeScript بتفاعلات دقيقة، Framer Motion، تحقق فوري، Glassmorphism، إمكانية وصول WCAG 2.1، وتصميم يبدأ من الجوال.
يساعد هذا البرومبت الذكاء الاصطناعي على إنشاء نظام قوالب مواقع مؤسسية قابل لإعادة الاستخدام، لا صفحة واحدة؛ مع إطار أمامي وخلفي قابل للتوسع وتبديل الهوية والصيانة، لتكيّفه الشركات بسرعة وتبني عليه على المدى الطويل.
برومبت مراجعة كود مؤسسي يجمع قواعد مهندس أول ومعماري برمجيات، مع فرض SOLID وفحوصات OWASP وتحليل الأداء وانضباط معماري صارم. يعتمد Context7 مرجعًا وحيدًا وSequential Thinking لتقييم تقني منظم ودقيق.
أنشئ خطة تطوير شاملة وعملية لتحسين تطبيق ويب قائم ورفع جودة التجربة والأداء عبر مختلف الأجهزة.
صمّم مكتبات مكونات واجهة مستخدم قابلة لإعادة الاستخدام وأنظمة تصميم باستخدام التصميم الذري وStorybook مع الالتزام بمعايير إمكانية الوصول.
أنشئ موقعًا للأفلام يتضمن شريط تنقّل واضحًا، وقوائم منسدلة أنيقة، ومزايا إضافية لعرض المحتوى بشكل جذاب.
ينشئ توجيهات Angular جاهزة للعمل، بنوعيها structural أو attribute، من وصف بسيط، مع المحدِّد (selector)، والمنطق، والمدخلات (inputs)، وروابط المضيف، ومثال استخدام.