> ## Documentation Index
> Fetch the complete documentation index at: https://docs.lumi.new/llms.txt
> Use this file to discover all available pages before exploring further.

# مسرد المصطلحات

> افهم المصطلحات الرئيسية للتنقل والبناء بفعالية باستخدام Lumi.

## المفاهيم الأساسية

* AI (الذكاء الاصطناعي): تقنية تمكّن الآلات من محاكاة الذكاء البشري، مما يسمح لها بالتعلم والاستنتاج وحل المشكلات.
* Prompt: أمر نصي يستخدم لتوجيه نموذج ذكاء اصطناعي. داخل Lumi، الأوامر (prompts) هي الأداة الأساسية التي ستستخدمها لإنشاء وتعديل كل مكون في تطبيقك.

## مصطلحات خاصة بـ Lumi

* **Discuss Mode:** أكثر من مجرد مولد أكواد، يعمل Lumi كشريك تطوير تفاعلي. يرشدك خلال التخطيط وتصحيح الأخطاء والشحن، مما يساعدك على البناء بثقة.
* **Edit Mode:** البيئة المخصصة لإجراء تغييرات مباشرة على كود ومحتوى تطبيقك.
* **Edit:** أداة مدعومة بالذكاء الاصطناعي مع عناصر تحكم مرئية أصلية من Tailwind لتحسين دقيق وبديهي.
* **Remix:** انسخ أي مشروع لاستخدامه كنقطة انطلاق جديدة. يتيح لك "الريمكس" تجربة التغييرات واستكشاف الأفكار مع الحفاظ على الإصدار الأصلي.
* **Preview:** عرض حي وتفاعلي لاختبار الميزات والمحتوى قبل نشر تغييراتك.

## المنتج والتطوير

### **إدارة المنتجات والاستراتيجية**

* **MVP (المنتج الأدنى القابل للتطبيق):** أبسط نسخة من المنتج تحتوي على ميزات كافية فقط لجذب المستخدمين الأوائل والتحقق من صحة الفكرة الأساسية.
* **Roadmap:** خطة عالية المستوى تحدد رؤية المنتج وتوجهه والميزات القادمة بمرور الوقت.
* **Feature Request:** اقتراح من المستخدمين أو أصحاب المصلحة لإضافة قدرة جديدة أو تحسين.
* **User Story:** وصف موجز وبسيط لميزة من منظور المستخدم النهائي.
* **User Journey:** المسار الذي يسلكه المستخدم لتحقيق هدف داخل منتجك.
* **Persona:** ملف شخصي خيالي ومفصل لمستخدم مستهدف، يتم إنشاؤه من البحث لتوجيه قرارات التصميم والتطوير.

### **مفاهيم هندسية**

* **PRD (وثيقة متطلبات المنتج):** وثيقة تفصّل غرض المنتج وميزاته ومواصفاته الفنية لتوجيه فريق التطوير.
* **API (واجهة برمجة التطبيقات):** مجموعة من القواعد التي تسمح لتطبيقات البرامج المختلفة بالاتصال وتبادل البيانات. تشمل الأنواع الشائعة واجهات برمجة تطبيقات REST و GraphQL APIs.
* **Refactor:** عملية إعادة هيكلة الكود لتحسين جودته وقابليته للصيانة دون تغيير وظائفه.
* **GitHub:** منصة شائعة للتحكم في الإصدارات وتطوير البرامج بشكل تعاوني.

### **البيانات والتحليلات**

* **A/B Testing:** مقارنة نسختين من صفحة ويب أو ميزة لمعرفة أيهما يحقق أداءً أفضل.
* **Conversion Rate:** النسبة المئوية للمستخدمين الذين يكملون هدفًا محددًا، مثل التسجيل أو إجراء عملية شراء.
* **Churn Rate:** النسبة المئوية للمستخدمين الذين يتوقفون عن استخدام منتجك خلال فترة محددة.
* **Retention Rate:** النسبة المئوية للمستخدمين الذين يستمرون في استخدام منتجك بمرور الوقت.
* **Event Tracking:** مراقبة إجراءات مستخدم محددة (مثل النقرات أو إرسال النماذج) لفهم التفاعل.

## **واجهة المستخدم/تجربة المستخدم وتطوير الواجهة الأمامية**

### **تطوير الواجهة الأمامية**

* **Frontend:** الجزء من التطبيق الذي يراه المستخدمون ويتفاعلون معه، بما في ذلك واجهة المستخدم والتجربة العامة.
* **React:** مكتبة JavaScript شائعة لبناء واجهات مستخدم ديناميكية، خاصة للتطبيقات أحادية الصفحة.
* **Gradient:** تدرج سلس بين لونين أو أكثر.
* **Tailwind CSS:** إطار عمل CSS يعتمد على الأدوات المساعدة (utility-first) لبناء تصميمات مخصصة بسرعة مباشرة في HTML الخاص بك.
* **Design System:** مجموعة موحدة من المكونات القابلة لإعادة الاستخدام والإرشادات التي تضمن اتساق التصميم عبر المنتج.

### **مفاهيم تصميم واجهة المستخدم/تجربة المستخدم**

* **Accent Color:** لون متباين يستخدم لإبراز العناصر الرئيسية مثل الأزرار أو الروابط.
* **Theme:** المظهر العام للتطبيق، والذي يتم تحديده من خلال نظام الألوان والطباعة والتخطيط.
* **Responsive Design:** نهج يضمن أن يبدو تطبيقك ويعمل بشكل رائع على أي جهاز، من أجهزة الكمبيوتر المكتبية إلى الهواتف المحمولة.
* **Above the Fold:** المحتوى المرئي على صفحة الويب دون الحاجة إلى التمرير. إنها مساحة رئيسية للمعلومات الهامة.
* **CTA (دعوة لاتخاذ إجراء):** دعوة، مثل زر أو رابط، تشجع المستخدمين على اتخاذ إجراء معين (على سبيل المثال، "تسجيل"، "شراء الآن").

### **هيكل الصفحة والتنقل**

* **Headings:** العناوين (H1، H2، إلخ) التي تنظم المحتوى وتنشئ تسلسلاً هرميًا مرئيًا واضحًا.
* **Footer:** القسم الموجود في أسفل صفحة الويب، ويحتوي عادةً على روابط ومعلومات الاتصال والإشعارات القانونية.
* **Breadcrumb:** مسار تنقل يوضح الموقع الحالي للمستخدم على الموقع (على سبيل المثال، الرئيسية > المنتجات > أجهزة الكمبيوتر المحمولة).
* **Favicon:** الأيقونة الصغيرة التي تمثل موقع الويب الخاص بك في علامة تبويب المتصفح أو الإشارات المرجعية.
* **Meta Title:** عنوان الصفحة الذي يظهر في نتائج محركات البحث وعلامات تبويب المتصفح، وهو أمر حاسم لتحسين محركات البحث (SEO).
* **Meta Description:** الملخص القصير لصفحة الويب الذي يظهر في نتائج البحث لجذب النقرات.
* **Canonical URL:** علامة تخبر محركات البحث بالنسخة المفضلة من الصفحة لتجنب مشاكل المحتوى المكرر.
* **URL Slug:** الجزء سهل الاستخدام من عنوان URL الذي يحدد صفحة معينة (على سبيل المثال، `/about-us`).
* **Sitemap:** ملف يسرد جميع الصفحات على موقع الويب الخاص بك لمساعدة محركات البحث على فهرستها بفعالية.
* **Navigation Bar (Nav Bar):** القائمة الرئيسية التي توفر روابط للأقسام الرئيسية في موقع الويب الخاص بك.
* **Skip Links:** روابط إمكانية الوصول التي تسمح للمستخدمين بتجاوز التنقل والقفز مباشرة إلى المحتوى الرئيسي.
* **Pagination:** نظام لتقسيم قوائم المحتوى الطويلة إلى صفحات منفصلة.
* **Anchor Link:** رابط يقوم بتمرير المستخدم إلى قسم معين في نفس الصفحة.
* **404 Page:** صفحة خطأ مخصصة تظهر عندما يحاول المستخدم الوصول إلى عنوان URL غير موجود.

### **الإشعارات والتعليقات**

* **Toast:** إشعار صغير ومؤقت يقدم ملاحظات موجزة حول إجراء ما.
* **Snackbar:** مشابه للـ toast، ولكنه يظهر غالبًا في أسفل الشاشة وقد يتضمن زر إجراء (على سبيل المثال، "تراجع").
* **Tooltip:** مربع منبثق يحتوي على معلومات إضافية يظهر عند التمرير فوق عنصر ما.
* **Badge:** علامة مرئية صغيرة على أيقونة أو زر للإشارة إلى عدد أو حالة أو إشعار.
* **Loading Spinner:** أيقونة متحركة تشير إلى أن عملية ما قيد التشغيل في الخلفية.
* **Progress Bar:** شريط مرئي يوضح تقدم إنجاز مهمة ما.
* **Skeleton Loader:** واجهة مستخدم مؤقتة تحاكي تخطيط المحتوى النهائي، مما يحسن من إدراك سرعة التحميل.

### **الطبقات المنبثقة والنوافذ المنبثقة**

* **Popover:** طبقة منبثقة توفر سياقًا إضافيًا أو خيارات تتعلق بعنصر معين.
* **Dialog (Modal):** نافذة تظهر فوق المحتوى الرئيسي، وتتطلب تفاعل المستخدم لإغلاقها.
* **Drawer (Sidebar Panel):** لوحة تنزلق من الجانب، وتحتوي عادةً على عناصر التنقل أو الإعدادات.
* **Lightbox:** نافذة منبثقة تعرض الوسائط مثل الصور في عرض مركّز ومكبر.
* **Alert Box:** رسالة نظام تُعلم المستخدمين بالمعلومات الهامة أو الأخطاء أو التحذيرات.

### **التنقل والاختيار**

* **Button:** عنصر قابل للنقر يؤدي إلى تشغيل إجراء ما.
* **Switch (Toggle):** عنصر تحكم يتيح للمستخدمين التبديل بين حالتين، مثل التشغيل والإيقاف.
* **Tabs:** مكون ينظم المحتوى في عروض مختلفة يمكن للمستخدم التبديل بينها.
* **Stepper (Wizard):** عملية موجهة متعددة الخطوات تُظهر للمستخدمين تقدمهم.
* **Accordion:** سلسلة من اللوحات القابلة للطي تستخدم لتنظيم المحتوى وإظهاره.
* **Dropdown Menu:** قائمة خيارات تظهر عندما يتفاعل المستخدم مع زر أو حقل.

### **النماذج والإدخال**

* **Form:** مجموعة من الحقول لجمع بيانات المستخدم، مثل نموذج التسجيل أو الاتصال.
* **Radio Group:** مجموعة من الخيارات حيث يمكن للمستخدم تحديد خيار واحد فقط.
* **Checkbox:** عنصر تحكم يسمح للمستخدمين بتحديد خيار واحد أو أكثر من قائمة.
* **Text Field:** مربع إدخال قياسي لإدخال نص من سطر واحد.
* **Text Area:** مربع إدخال أكبر للنص متعدد الأسطر، مثل التعليقات أو الرسائل.
* **Select (Dropdown Select Box):** قائمة منسدلة لاختيار خيار واحد من مجموعة محددة مسبقًا.
* **Date Picker:** واجهة تقويم تسمح للمستخدمين بتحديد تاريخ بسهولة.
* **Slider:** عنصر تحكم لاختيار قيمة من نطاق مستمر.
* **File Upload:** مكون يسمح للمستخدمين بتحميل الملفات من أجهزتهم.
* **Autocomplete:** حقل إدخال يقترح نتائج أثناء كتابة المستخدم.

### **أنماط واتجاهات التصميم**

استخدم هذه المصطلحات في أوامرك (prompts) لتحديد الجمالية التي تريد تحقيقها.

* **Neobrutalism:** أسلوب تصميم خام وعالي التباين مع طباعة جريئة وعناصر غير مصقولة.
* **Retro:** تصميم يثير الحنين إلى الماضي باستخدام أنماط من العقود الماضية.
* **Hacker:** جمالية مستوحاة من واجهات الطرفية (terminal)، تتميز بخلفيات داكنة وخطوط أحادية المسافة.
* **Glassmorphism:** أسلوب يستخدم طبقات شفافة تشبه الزجاج المصنفر لإنشاء عمق.
* **Nudy:** نهج بسيط يستخدم لوحات ألوان ناعمة ومحايدة لمظهر بسيط وغير متكلف.

## **تطوير الواجهة الخلفية وقواعد البيانات**

### **أساسيات الواجهة الخلفية**

* **Backend:** الجانب الخادم من التطبيق الذي يتعامل مع البيانات والمنطق والعمليات الأساسية.
* **Webhooks:** رسائل آلية تُرسل من التطبيقات عند حدوث شيء ما، مما يسمح بتبادل البيانات في الوقت الفعلي.

### **إدارة قواعد البيانات**

* **CRUD (إنشاء، قراءة، تحديث، حذف):** العمليات الأساسية الأربع لإدارة البيانات.
* **SQL (لغة الاستعلامات الهيكلية):** اللغة القياسية لإدارة البيانات والاستعلام عنها في قواعد البيانات العلائقية.
* **PostgreSQL:** قاعدة بيانات علائقية قوية ومفتوحة المصدر تشتهر بموثوقيتها وميزاتها المتقدمة.

### **الأمان والمصادقة**

* **OAuth:** معيار مصادقة يسمح للمستخدمين بتسجيل الدخول باستخدام حسابات جهات خارجية مثل Google أو GitHub.
* **Two-Factor Authentication (2FA):** طبقة أمان تتطلب من المستخدمين تقديم شكلين من أشكال التعريف لتسجيل الدخول.
* **CORS (مشاركة الموارد عبر المصادر):** آلية أمان تتحكم في كيفية الوصول إلى الموارد الموجودة على الخادم الخاص بك من نطاقات أخرى.