ما هي الواجهة الأمامية؟

التعريف المختصر

الواجهة الأمامية هي طبقة العرض والتفاعل في أي تطبيق ويب، وتعمل على جهاز المستخدم داخل المتصفح. كل ما تستطيع رؤيته أو الضغط عليه في صفحة هو جزء منها.

شرح مبسط

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

تُبنى الواجهة الأمامية من ثلاث طبقات:

• HTML: هيكل الصفحة ومحتواها، العناوين والفقرات والصور والنماذج.
• CSS: الشكل، الألوان والخطوط والمسافات والتجاوب مع الجوال والاتجاه.
• JavaScript: السلوك، ماذا يحدث حين تضغط زرًا أو تكتب في حقل.

<button class="order" onclick="alert('تمت إضافة الطبق')">أضف للطلب</button>
<style>
  .order { background: #7a3e12; color: #fff; padding-inline: 20px; border-radius: 8px; }
</style>

في المشاريع الأكبر تُستخدم أطر مثل React و Vite لتنظيم الواجهة في مكونات صغيرة يعاد استخدامها. وموقع بسيط مثل صفحة تعريفية قد لا يحتاج أكثر من HTML و CSS، ولا يحتاج خادمًا أصلًا.

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

مثال من السوق السعودي

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

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

كيف يظهر في أوترا

في أوترا تطلب ما يناسب مشروعك، من مواقع HTML و CSS و JavaScript بسيطة إلى تطبيقات React و Vite. تشاهد الواجهة على رابط معاينة خاص يتحدث مع كل تعديل على الجوال والكمبيوتر. وتعدّلها بطريقتين: بالمحادثة للتغييرات الكبيرة، أو بالتعديل المرئي حيث تضغط أيقونة القلم ثم أي عنصر لتغيّر نصه أو لونه أو حجمه أو خطه وتحفظ التعديل مباشرة.

مصطلحات ذات صلة

• الواجهة الخلفية: المطبخ الذي يخدم الواجهة.
• API: الطريقة التي تطلب بها الواجهة البيانات من الخلفية.
• RTL: الاتجاه الذي يجب أن تُبنى به الواجهة العربية.
• الاستضافة: المكان الذي تُخدَّم منه ملفات الواجهة للزوار.