الواجهة الأمامية هي الجزء الذي يعمل على جهاز المستخدم ويراه: الصفحات والأزرار والنماذج والسلة. الواجهة الخلفية هي الجزء الذي يعمل على الخادم ولا يراه أحد: تحسب المجموع، وتتحقق من المخزون والصلاحيات، وتحفظ الطلب في قاعدة البيانات، وتتعامل مع الدفع. يتحدث الجزءان عبر طلبات ترسلها الواجهة الأمامية وتجيب عنها الخلفية. والقاعدة الذهبية: كل ما يجب أن يكون صحيحاً وآمناً، كالسعر والصلاحيات، يُقرر في الخلفية. وفي فنّان يُبنى الجزءان معاً من وصفك.
- الفرق بين الفرونت اند والباك اند
- ما هي الواجهة الامامية والخلفية
- يعني ايه فرونت اند وباك اند
- شرح الباك اند للمبتدئين
- اتعلم فرونت اند ولا باك اند
ما الفرق بين الواجهة الأمامية والخلفية؟
فكّر في مقهى. الواجهة الأمامية هي ما يراه الزبون: القائمة، والطاولات، والكاشير، وطريقة عرض الطلب. الواجهة الخلفية هي المطبخ والمخزن والحسابات: تحضير القهوة، والتأكد من توفر الحليب، وتسجيل البيع في الدفتر. الزبون لا يدخل المطبخ، لكن كل ما يصله يمر به.
رسم توضيحيالتطبيقات تعمل بالطريقة نفسها. الواجهة الأمامية تعمل على جهازك، في المتصفح أو تطبيق الجوال، وهي الصفحات والأزرار والنماذج. والواجهة الخلفية تعمل على خادم بعيد، وهي التي تحسب وتتحقق وتحفظ. وبينهما رسائل تذهب وتعود في أجزاء من الثانية.
سنشرح الفرق بمثال نعود إليه في كل قسم: متجر قهوة صغير تبنيه بنفسك. وإن كنت تتعلّم كيف تُبنى التطبيقات، فهذا المقال يكمل ما هي قاعدة البيانات وكيف يعمل تسجيل الدخول.
ماذا تفعل الواجهة الأمامية في متجرك؟
الواجهة الأمامية مسؤولة عن تجربة العميل: كيف يرى المتجر، وكيف يتنقل فيه، وكم يشعر بالراحة وهو يطلب. في متجر القهوة هي التي:
- تعرض المنتجات بالصور والأسعار، وترتبها في شبكة على الحاسوب وعمود واحد على الجوال.
- تدير السلة وأنت تضيف وتحذف، وتعرض لك مجموعاً تقريبياً فورياً.
- تعرض النماذج كالاسم والجوال والعنوان، وتنبهك إن نسيت حقلاً قبل أن ترسل.
- تتكيف مع اللغة: من اليمين إلى اليسار بالعربية، ومن اليسار إلى اليمين بالإنجليزية.
- تعطي إحساس السرعة: مؤشر تحميل، ورسالة «تمت الإضافة»، وانتقالات سلسة.
لكن هناك شيء مهم لا تفعله الواجهة الأمامية: أن تكون الحَكَم الأخير. كل ما يعمل على جهاز المستخدم يمكن أن يُعبث به، ولهذا نحتاج الجزء الثاني.
ماذا تفعل الواجهة الخلفية؟
الواجهة الخلفية هي المطبخ والحسابات معاً. لا يراها العميل، لكنها التي تقرر ما هو صحيح. في متجر القهوة هي التي:
- تحسب المجموع النهائي من الأسعار المحفوظة، لا من الرقم الذي أرسله المتصفح.
- تتحقق من المخزون قبل قبول الطلب، وتنقص الكمية بعده.
- تفحص الصلاحيات في كل طلب: هل هذا العميل صاحب الطلب؟ هل هذا الموظف مسموح له؟
- تحفظ البيانات في قاعدة البيانات وتقرأها منها.
- تتعامل مع الدفع: ترسل المبلغ إلى مزوّد الدفع وتتأكد من نجاحه قبل تأكيد الطلب.
- ترسل الرسائل: رمز الدخول، وتأكيد الطلب، وإشعار الموظف بطلب جديد.
كيف يتحدث الجزءان مع بعضهما؟
عبر طلبات وردود. الواجهة الأمامية ترسل طلباً، كأن تقول «هذا العميل يريد إتمام هذه السلة»، والخلفية تجيب «تم، رقم الطلب 1024» أو «عذراً، المنتج نفد». مجموعة الطلبات التي تفهمها الخلفية تسمى الواجهة البرمجية، وشرحها مفصل في ما هي الواجهة البرمجية.
- 1يضغط العميل «أكمل الطلب»
الواجهة الأمامية تجمع محتويات السلة والعنوان وترسلها في طلب إلى الخادم، مع جلسة العميل.
- 2الخلفية تتحقق
تتأكد من الجلسة، وتقرأ الأسعار الحقيقية من قاعدة البيانات، وتتحقق من المخزون.
- 3الخلفية تنفّذ
تحسب المجموع، وتحفظ الطلب وعناصره، وتنقص الكمية، وتطلب الدفع إن لزم.
- 4الرد يعود
ترسل الخلفية رقم الطلب والمجموع النهائي، أو رسالة خطأ واضحة.
- 5الواجهة الأمامية تعرض
تظهر للعميل صفحة «شكراً، طلبك رقم 1024»، وتفرغ السلة.
كل هذا يحدث عادة في أقل من ثانية. والجميل أنك تستطيع أن ترى هذه الرحلة بعينك في كود تطبيقك، كما سنشرح في آخر المقال.
أين يجب أن يوضع كل منطق في التطبيق؟
هذا السؤال يواجهه كل من يبني تطبيقاً، والقاعدة بسيطة: ما يخص الراحة في الأمامية، وما يخص الصحة والأمان في الخلفية. وأحياناً في الاثنين معاً. اختر حالة لترى أين تذهب:
اختر ما يشبه حالتك لترى النصيحة.
في الاثنين. الأمامية تنبه العميل فوراً إن نسي رقماً، لراحته. والخلفية تتحقق مرة أخرى، لأن الطلب قد يصل دون المرور بالشاشة.
في الخلفية دائماً. الأمامية يمكن أن تعرض مجموعاً تقريبياً، لكن الرقم الذي يُدفع ويُحفظ تحسبه الخلفية من بياناتها.
في الاثنين. الأمامية تخفي الزر حتى لا يربك الموظف، والخلفية ترفض الطلب إن وصل، فإخفاء الزر وحده ليس حماية.
في الأمامية غالباً، فهو تفضيل عرض لا يضر أحداً. ومع آلاف المنتجات قد تطلب الأمامية من الخلفية أن ترتّبها وترسل صفحة واحدة فقط.
عندما تراجع خطة تطبيقك، ابحث عن هذه القرارات. إن رأيت أن السعر أو الصلاحية يُقرر في الشاشة فقط، فاطلب نقله إلى الخلفية.
وماذا عن قاعدة البيانات والاستضافة؟
الصورة لا تكتمل بجزأين. خلف الواجهة الخلفية هناك قاعدة البيانات التي تحفظ كل شيء، والخلفية وحدها تتحدث معها، والمتصفح لا يصل إليها مباشرة أبداً. وهناك الاستضافة، أي المكان الذي يعمل فيه الخادم وتُخدم منه صفحات التطبيق، ونشر التطبيق هو وضعه في هذا المكان ليصل إليه الناس.
- الواجهة الأمامية
- تعمل على جهاز المستخدم: متصفح أو تطبيق جوال
- الواجهة الخلفية
- تعمل على الخادم: تحسب وتتحقق وتحفظ
- قاعدة البيانات
- ذاكرة التطبيق، لا تتحدث إلا مع الخلفية
- الاستضافة
- المكان الذي يعمل فيه كل ذلك ويصل إليه الناس
- النطاق
- العنوان الذي يكتبه الناس للوصول إلى تطبيقك
عندما يقول أحدهم «مطوّر متكامل»، فهو يقصد من يعمل على كل هذه الأجزاء. وفي فنّان تأتي الاستضافة مع التطبيق، مع خيار منطقة في الشرق الأوسط، ويمكنك ربط نطاقك الخاص. التفاصيل في صفحة الاستضافة.
كيف يبني فنّان الجزأين معاً؟
تقليدياً، يحتاج التطبيق مطوّراً للأمامية وآخر للخلفية، أو مطوّراً متكاملاً، ويتفقان على شكل الطلبات بينهما. في فنّان تصف التطبيق بكلامك، فيبني وكيل فنّان الواجهة الأمامية والخلفية وقاعدة البيانات معاً، ويختبرها، ويعرض عليك في وضع التخطيط ما سيُبنى في كل جزء قبل أن يبدأ.
ابنِ لي متجر قهوة بالعربية والإنجليزية، فيه صفحة منتجات وسلة وإتمام طلب ولوحة للمالك. السعر النهائي والمخزون والصلاحيات تُحسب وتُفحص على الخادم فقط، والصفحة تعرض النتيجة. أنا أتعلّم، فاكتب في الخطة قائمتين: ما سيعمل في المتصفح، وما سيعمل على الخادم، ولماذا وُضع كل شيء في مكانه.
جرّبه في فنّانوعندما تريد تعديل الشكل، استخدم المحرر المرئي: اضغط على أي عنصر وقل ما تريد. هذا تعديل في الواجهة الأمامية. وعندما تطلب «امنع الطلب إن كان المجموع أقل من 30»، فهذا تعديل في الخلفية. ملاحظة الفرق بينهما تمرين ممتاز.
أتعلّم الواجهة الأمامية أم الخلفية؟
إن كنت تفكر في مهنة: من يحب الشكل والتجربة وتفاصيل التفاعل يميل إلى الأمامية، ومن يحب المنطق والبيانات والأمان يميل إلى الخلفية. لكن لا تختر قبل أن تجرّب الاثنين على تطبيق حقيقي. ابنِ تطبيقك في فنّان، فالمشروع ملكك وتستطيع فتح كوده وتصديره، ثم جرّب:
الواجهة الأمامية تَعِد، والخلفية تفي. التطبيق الجيد لا يَعِد بشيء لا تستطيع خلفيته الوفاء به.
وللمسار الكامل في فهم التطبيقات من الداخل، ارجع إلى تعلّم البرمجة ببناء التطبيقات وكيف تقرأ كود تطبيقك كمبتدئ.
الخلاصة
- الواجهة الأمامية ما يراه المستخدم ويتفاعل معه، والخلفية ما يعمل على الخادم خلف الستار.
- كل ما يجب أن يكون صحيحاً وآمناً، كالأسعار والصلاحيات والمخزون، يُقرر في الخلفية لا في المتصفح.
- الجزءان يتحدثان عبر طلبات وردود، وهذه الطلبات هي ما يسمى الواجهة البرمجية.
- قاعدة البيانات والاستضافة جزء ثالث يكمل الصورة: أين تُحفظ البيانات وأين يعمل الخادم.
- أسرع طريقة لفهم الفرق أن تتبّع زراً واحداً في تطبيقك من الشاشة إلى قاعدة البيانات.
أسئلة شائعة
ما الفرق بين الواجهة الأمامية والخلفية باختصار؟
هل يحتاج كل تطبيق إلى واجهة خلفية؟
لماذا لا نضع كل شيء في الواجهة الأمامية؟
أين قاعدة البيانات من هذين الجزأين؟
هل أحتاج مطوّرين اثنين لبناء الجزأين؟
أيهما أسهل للمبتدئ: الأمامية أم الخلفية؟
اسأل مساعدك الذكي عن هذا الموضوع
انسخ هذا الطلب والصقه في مساعد الذكاء الاصطناعي الذي تستخدمه، ثم أضف تفاصيل حالتك.
أقرأ هذا الدليل: «الواجهة الأمامية والخلفية: ماذا يفعل كل جزء في تطبيقك؟» https://fanann.com/ar/blog/frontend-vs-backend-explained/ سؤالي: الفرق بين الفرونت اند والباك اند اعتمد على هذه الصفحة كمصدر واشرح لي الإجابة خطوة بخطوة بما يناسب حالتي، واذكر ما يجب أن أتحقق منه قبل أن أبدأ، واذكر رابط الصفحة كمرجع.