الفرونت إند والباك إيند في تطوير المواقع (2023)

الفرونت إند والباك إيند في تطوير المواقع

إذا كنت قد بدأت للتو في تعلم تطوير المواقع.من المحتمل أنك سمعت الكثير من الحديث عن تطوير الفرونت إيند والباك إيند. لكن ماذا تعني هذه الكلمات بالضبط؟ وما الفرق بينهما بالضبط؟ هذا ما سنكتشفه هنا.

ما هو تطوير الفرونت إيند؟

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

لغات تطوير الفرونت إيند

هناك ثلاث لغات أساسية:

HTML: هي لغة بناء هيكل الموقع الذي سيتم عرضه في المتصفح.

CSS: مرتبطة بـ HTML ، والذي تحدد منه شكل وتخطيط الموقع ، والذي يتضمن الألوان والتصميم والخطوط.

Javascript: is a programming language that is used more in interactive elements of the page such as drop-down menus, contact forms and changing the theme of the site from dark mode to light mode and vice versa… etc.

بالإضافة إلى هذه اللغات الأساسية ، هناك بعض المكونات الإضافية اللازمة لبناء أي موقع ، على سبيل المثال بعض مكتبات CSS مثل Bootstrap أو Materialize ، وبعض أطر عمل Javascript مثل Angular أو Vue أو React (مع ملاحظة أن React هي مكتبة) وبعض المكونات الإضافية لـ CSS يُعرف أيضًا باسم SASS أو LESS.

خلف الكواليس

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

ما هو تطوير الباك إيند؟

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

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

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

يعمل على جهاز كمبيوتر خارجي يسمى الخادم. هناك العديد من قواعد البيانات المستخدمة على نطاق واسع مثل MySQL و SQL Server و PostgresSQL و MongoDB و Oracle. الآن يجب بناء موقعك بلغة برمجة يمكن لقاعدة البيانات التعرف عليها. بعض اللغات الخلفية ( لغات الباك إيند) المعروفة هي Ruby و Java و PHP و Python و ASP.Net و Node.js.

غالبًا ما يتم تشغيل هذه اللغات في أطر عمل يسهل التعامل معها والتعلم ، مثل Rails ، وهو إطار عمل Ruby. هنا يأتي دور إطارات عمل (frameworks) مثل Ruby On Rails. هذه تقنية شائعة لبناء مواقع إلكتروني ديناميكية تنجز العمليات بشكل أسرع.

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