> https://learn.abdulosama.com/qamoos/frontend-backend

![رسم توضيحي يشرح Frontend & Backend (الواجهة الأمامية والخلفية): الواجهة الأمامية ما تراه على الشاشة، والخلفية ما يُنجز العمل خلفها.](https://learn.abdulosama.com/images/guide/frontend-backend.webp)

# Frontend & Backendالواجهة الأمامية والخلفية

## ما هو Frontend & Backend؟

الواجهة الأمامية ما تراه على الشاشة، والخلفية ما يُنجز العمل خلفها.

## ما معنى Frontend & Backend بالعربي؟

الاسم المعتمد الآن هو «**الواجهة الأمامية والخلفية** ». ولأن كثيرًا من المصطلحات لم يستقرّ لها اسم عربي واحد، يكتب هذا القاموس قرّاؤه: صوّت للاسم الذي تراه أوضح، أو اقترح اسمًا أفضل. نراجع الأصوات في كل جولة ونعتمد ما يختاره الناس.

1. الواجهة الأمامية والخلفية الاسم المعتمد اسم القاموس
2. الفرونت إند والباك إند تعريب صوتي شائع بين المطورين
3. واجهة المستخدم والخادم وصف مبسّط لغير المتخصصين

صوت واحد لكل قارئ في كل مصطلح، وتستطيع نقله إلى اسم آخر. حين يتجاوز اسمٌ الاسمَ المعتمد ويصل إلى 5 أصوات على الأقل، نعرضه للاعتماد في الجولة التالية.

اقترح اسمًا عربيًا أفضل هل الشرح غير واضح أو فيه خطأ؟

تخيّل مطعمًا في وسط القاهرة. صالة أنيقة فيها طاولات وإضاءة دافئة وقائمة طعام مصوّرة، ونادل يأخذ طلبك بابتسامة. وخلف باب متأرجح مطبخ لا تراه: مواقد، وثلاجات، وطاهٍ يعمل بلا توقف. أنت تجلس في الصالة، لكن طبقك يُطهى في المطبخ.

كل تطبيق أو موقع مبني بالطريقة نفسها.

الواجهة الأمامية (Frontend) هي الصالة: كل ما يظهر على شاشتك وتلمسه بإصبعك. الأزرار، وخانة البحث، وألوان الصفحة، والحركة الصغيرة حين تضغط «أضف إلى السلة». وظيفتها أن تعرض لك ما يمكنك طلبه، وأن تنقل طلبك إلى الداخل.

الواجهة الخلفية (Backend) هي المطبخ: الخادم ([Server](https://learn.abdulosama.com/qamoos/server)) وقاعدة البيانات والقواعد التي تحكم العمل. حين تضغط «ادفع الآن» لا يحدث شيء على طاولتك؛ يذهب الطلب إلى الخلف، فيتحقق النظام من رصيد بطاقتك، ويتأكد أن كود الخصم صالح، ويسجّل الطلب، ويرسل رسالة التأكيد. ثم يعود النادل بالنتيجة إلى الصالة. والنادل هنا هو الاتصال عبر الشبكة: الواجهة الأمامية ترسل الطلب، والخلفية تجيب، ولا يرى الزائر شيئًا مما بينهما.

الفرق الذي يفيدك عمليًا هو معرفة أين وقع العطل:

- زر لا يستجيب، أو نص فوق صورة، أو صفحة تبدو سليمة على الحاسوب ومبعثرة على الهاتف: هذه مشكلة صالة. مزعجة، لكنها غالبًا سريعة الإصلاح، والمطبخ يعمل.
- الطلب لا يُسجَّل، أو الدفع يفشل، أو الموقع كله لا يستجيب: هذه مشكلة مطبخ. أكبر وأخطر، وقد تكون خارج يدك أصلًا إن كان المطبخ خدمة سحابية يشاركها آلاف المواقع.

لحظة من حياتك: متجرك الإلكتروني يفتح بشكل طبيعي، والصور جميلة، لكن العملاء يشتكون أن الطلب يتوقف عند صفحة الدفع. الصالة سليمة، والمطبخ هو ما يحتاج إلى من يدخله.

## لماذا يهمك Frontend & Backend؟

حين تصف مشكلة لمطوّرك ستعرف أن تقول «العطل في الواجهة الأمامية» أو «في الخلفية»، فيبدأ من المكان الصحيح. وستفهم لماذا يكلّف تغيير لون زر ساعة، بينما يكلّف تغيير طريقة حساب الشحن أيامًا.

## متى ستسمع كلمة Frontend & Backend؟

يقول لك المطوّر: «التصميم جاهز، لكن الواجهة الخلفية لم تُربط بعد».

## كلمات قريبة

- [API · واجهة البرمجة](https://learn.abdulosama.com/qamoos/api)
- [Database · قاعدة البيانات](https://learn.abdulosama.com/qamoos/database)
- [Server · الخادم](https://learn.abdulosama.com/qamoos/server)
- [CORS · مشاركة الموارد بين المواقع](https://learn.abdulosama.com/qamoos/cors)

## حمّل القاموس كاملًا بصيغة PDF

قاموس التقنية بالعربي: 101 مصطلحًا في كتاب واحد مصوّر، تقرؤه على هاتفك أو تطبعه. اكتب اسمك ورقم واتساب، وتنضمّ إلى قائمة عبدول على واتساب، ويظهر لك رابط التحميل فورًا.

**تمّ.** انضممت إلى القائمة، وهذا رابط القاموس. يعمل الرابط سبعة أيام، فاحفظ الملف على جهازك.

تحميل القاموس (PDF)

لن نشارك رقمك مع أحد. يمكنك الخروج من القائمة في أي وقت.

## تريد إضافته إلى موقعك؟

أداة مجانية لموقعك أو مدونتك: يظهر خط منقّط تحت مصطلحات القاموس في مقالاتك، ومن يمرّ عليها يرى اسمها العربي ومعناها، ورابطًا للشرح الكامل في صفحة جديدة. لا تجمع أي بيانات عن زوّارك.

1. **الصق هذا السطر** قبل نهاية صفحات موقعك (قبل `</body>`):
`<script src="https://learn.abdulosama.com/qamoos/embed.js" defer></script>`
2. **أو اطلب ذلك من وكيل الذكاء الاصطناعي** الذي يبني موقعك (Claude Code أو Cursor أو غيرهما): انسخ هذه الجملة وأرسلها له.
`أضف أداة «قاموس التقنية بالعربي» إلى موقعي، واتبع التعليمات هنا: https://learn.abdulosama.com/qamoos/install.md`
3. **دليل التثبيت** لووردبريس وShopify وWebflow وNext.js وغيرها: [افتحه ↗](https://learn.abdulosama.com/qamoos/install.md)