ابنِ Dashboard ثلاثي الأبعاد لبيزنسك باستخدام Claude

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

القاعدة الأهم: لا تخلي الـ 3D مجرد شكل جميل. كل عنصر لازم يجاوب على سؤال حقيقي: كم بعت؟ كم بقي؟ وش يحتاج انتباهك الآن؟

الخطوة 1: اربط البيانات مع Claude

• Stripe: للإيرادات والمدفوعات والاشتراكات والعملاء.
• Square: للكافيهات والمطاعم ونقاط البيع (الطلبات والمخزون والكتالوج).
• Shopify / CRM / Database: عبر Connector أو MCP أو Backend بسيط.
• ما عندك API؟ ابدأ بملف CSV، وبدّله لاحقًا ببيانات live.

مهم جدًا: لا تحط API keys داخل كود الواجهة. خزّنها في environment variables أو في الـ backend. المتصفح يشوف البيانات فقط.

I want to build a live 3D business dashboard. First inspect the connected business data source and list the metrics we can safely read. Group them into: revenue, customers, products, inventory, orders, and alerts. Do not build the UI yet. Return a clean data map with field names, update frequency, and any permission/security concerns.

خريطة البيانات قبل التصميم

الخطوة 2: صمّم البزنس كعالم 3D

أعطِ Claude صورة أو Sketch أو وصفًا، واطلب منه Scene Map و Data Map قبل أي كود. ابدأ بـ 5 إلى 7 عناصر فقط.

Design my business as an interactive 3D world. Map every important business metric to a visible object in the scene. Clicking an object should open a clean analytics panel with the related KPIs. Keep it useful, not decorative.
Before coding, return: 1. Scene map 2. Data-to-object map 3. Interaction map 4. Camera behavior 5. Alert behavior 6. Mobile fallback plan

الخطوة 3: البناء بـ Three.js

البنية المقترحة: مصدر البيانات ← Backend/API ← JSON موحّد ← مشهد Three.js ← لوحة تحليلات قابلة للضغط. افصل البيانات عن التصميم، واعرض التفاصيل في لوحة HTML فوق المشهد بدل حشر النص داخل الـ 3D.

أمثلة في الدليل

• متجر إلكتروني: الفئات رفوف، المرتجعات منطقة تحذير، التسويق برج يتغيّر ارتفاعه.
• كوفي شوب: كل فرع متجر مستقل، المخزن للمخزون، و Time Slider يعيد يوم العمل من 8:00 إلى 22:00.
• لوجستكس: سيارات للمسارات ومستودعات للحجم ومناطق ملوّنة للتأخير.

لا تبالغ في الواقعية: إذا ما عندك GPS لحظي، لا تخترع مواقع دقيقة. اعرض آخر حالة بوضوح.

الملف فيه برومبت البناء الكامل، وتفاصيل التفاعلات، وقائمة التسليم (README و .env.example وبيانات تجريبية).