- بواسطة x32x01 ||
إذا كنت قد بدأت تعلم تطوير الويب فغالبا ستكون سمعت الكثير من الكلام عن تطوير الـ Front-end و Back-end ولكن ماذا تعني بالضبط هذه الكلمات؟ وما الفرق بينهما بالضبط؟ وهذا ما سنعرفة هي هذا الدرس.
Front-end Development
إن الـ Front-end الخاص بالموقع هو ما تراه وتتفاعل معه في المتصفح ، فهي تمثل واجهة المستخدم من نصوص أو ألوان أو أزرار أو صور ، لو أردت مثلا أن تطور موقعا خاصا بمطعم فستضع المعلومات الخاصة بالمطعم سواء كان عنوان المطعم أو صورا للأطباق التي يقدمونها حتى يجذب الموقع العملاء ، كل هذا يتم باستخدام تقنيات الـ Front-end وللـ Front-end ثلاث لغات اساسية هي:
ما وراء الكواليس
بعد عدة أشهر من بناء الموقع الخاص بالمطعم وبعدما نجح الموقع بشكل جيد ، الآن يريد العملاء أن يأكلوا من الأطباق المقدمة في المطعم ويتساءلون لو كان طلب الطعام أونلاين متاحا وربما يريد البعض أن يحجز طاولة ليتناول طعام العشاء مع أصدقائه لذا تقرر أنك ستضيف تلك المميزات لموقعك وهذا يعني أن الموقع سيتعامل مع بيانات المنتج مثل الشراء وحسابات العملاء ، كيف ستدير تلك البيانات وتنظمها في موقعك؟ وهنا يأتي دور تطوير الـ Back-end.
Back-end Development
حتى الآن ما لديك هو مثال لـ الموقع الثابت Static Website الذي لا يتغير محتواه كثيرا ، هذا النوع من المواقع جيد لعرض أشياء كـ أعمال أو مطاعم أو معارض أعمال ، لكن إذا أردت أن تجعل موقعك يمكن التفاعل معه من قبل العملاء ستحتاج إلى أن تعرف أكثر عن ما يدور وراء الكواليس في الموقع ، الـ Back-end هو الجزء الذي لا تراه في الموقع فهو مسئول عن تخزين وتنظيم البينات والتأكد من أن كل شئ في واجهة الموقع يعمل بشكل جيد ويقوم الـ Back-end بالتواصل مع واجهة الموقع فيقوم بإرسال واستقبال المعلومات ثم يعرضها في الموقع كلما ملأت استمارة إتصال كتبت عنوان موقع أو قمت بالشراء يقوم المتصفح بإرسال طلب إلى الخادم Server الذي يقوم بإرجاع المعلومات المكتوبة في الاستمارة ليتمكن من التعامل معها.
يحتاج موقعك لقاعدة بيانات لإدارة كل المعلومات الخاصة بالمنتجات والعملاء ، تقوم قاعدة البيانات بتخزين المحتوى في هيكل يجعل من السهل استرجاعها وتنظيمها وتعديلها وحفظ البيانات التي يتم تشغيلها في حاسوب خارجي يسمى بالخادم Server وهناك العديد من قواعد البيانات المستخدمة على نطاق واسع مثل MySQL, SQL Server, PostgresSQL, MongoDB, Oracle.
الآن يجب بناء موقعك بلغة برمجة تستطيع قاعدة البيانات أن تتعرف عليها ، بعض لغات الـ Back-end المعروفة هي Ruby, Java, PHP, Python, ASP.Net and Node.js ، هذه اللغات غالبا يتم تشغيلها في أطر عمل Framework تسهل التعامل معاها وتعلمها مثل Django فهذا إطار عمل لـ لغة البرمجة بايثون وهو اطار العمل المستعمل في هذا الموقع ، بالتعاون مع كل هذه الأجزاء بشكل صحيح يستطيع العميل أن يزور الموقع ويبحث عن نوع معين من الأطباق لكي يطلبه للشراء ,عندما يكتبون في حقل البحث (في الـ Front-end) يقوم الموقع بالبحث في كل المنتجات المخزونة في قاعدة البيانات (في الـ Back-end) وييسترجع المعلومات الملائمة في شكل كود Front-end فيظهر في المتصفح الطلب الخاص بالعميل ويقوم بعملية الشراء أو الحجز.
Front-end Development
إن الـ Front-end الخاص بالموقع هو ما تراه وتتفاعل معه في المتصفح ، فهي تمثل واجهة المستخدم من نصوص أو ألوان أو أزرار أو صور ، لو أردت مثلا أن تطور موقعا خاصا بمطعم فستضع المعلومات الخاصة بالمطعم سواء كان عنوان المطعم أو صورا للأطباق التي يقدمونها حتى يجذب الموقع العملاء ، كل هذا يتم باستخدام تقنيات الـ Front-end وللـ Front-end ثلاث لغات اساسية هي:
- HTML: هي لغة بناء هيكل الموقع الذي سيتم عرضه في المتصفح.
- CSS: تأتي مع لغة HTML ومنها تقوم بتحديد تنسيق الموقع من ألوان و تصميم وخطوط.
- Javascript: هي لغة برمجة تستخدم أكثر في العناصر التفاعلية في الصفحة كالقوائم المنسدلة واستمارت الاتصال.
ما وراء الكواليس
بعد عدة أشهر من بناء الموقع الخاص بالمطعم وبعدما نجح الموقع بشكل جيد ، الآن يريد العملاء أن يأكلوا من الأطباق المقدمة في المطعم ويتساءلون لو كان طلب الطعام أونلاين متاحا وربما يريد البعض أن يحجز طاولة ليتناول طعام العشاء مع أصدقائه لذا تقرر أنك ستضيف تلك المميزات لموقعك وهذا يعني أن الموقع سيتعامل مع بيانات المنتج مثل الشراء وحسابات العملاء ، كيف ستدير تلك البيانات وتنظمها في موقعك؟ وهنا يأتي دور تطوير الـ Back-end.
Back-end Development
حتى الآن ما لديك هو مثال لـ الموقع الثابت Static Website الذي لا يتغير محتواه كثيرا ، هذا النوع من المواقع جيد لعرض أشياء كـ أعمال أو مطاعم أو معارض أعمال ، لكن إذا أردت أن تجعل موقعك يمكن التفاعل معه من قبل العملاء ستحتاج إلى أن تعرف أكثر عن ما يدور وراء الكواليس في الموقع ، الـ Back-end هو الجزء الذي لا تراه في الموقع فهو مسئول عن تخزين وتنظيم البينات والتأكد من أن كل شئ في واجهة الموقع يعمل بشكل جيد ويقوم الـ Back-end بالتواصل مع واجهة الموقع فيقوم بإرسال واستقبال المعلومات ثم يعرضها في الموقع كلما ملأت استمارة إتصال كتبت عنوان موقع أو قمت بالشراء يقوم المتصفح بإرسال طلب إلى الخادم Server الذي يقوم بإرجاع المعلومات المكتوبة في الاستمارة ليتمكن من التعامل معها.
يحتاج موقعك لقاعدة بيانات لإدارة كل المعلومات الخاصة بالمنتجات والعملاء ، تقوم قاعدة البيانات بتخزين المحتوى في هيكل يجعل من السهل استرجاعها وتنظيمها وتعديلها وحفظ البيانات التي يتم تشغيلها في حاسوب خارجي يسمى بالخادم Server وهناك العديد من قواعد البيانات المستخدمة على نطاق واسع مثل MySQL, SQL Server, PostgresSQL, MongoDB, Oracle.
الآن يجب بناء موقعك بلغة برمجة تستطيع قاعدة البيانات أن تتعرف عليها ، بعض لغات الـ Back-end المعروفة هي Ruby, Java, PHP, Python, ASP.Net and Node.js ، هذه اللغات غالبا يتم تشغيلها في أطر عمل Framework تسهل التعامل معاها وتعلمها مثل Django فهذا إطار عمل لـ لغة البرمجة بايثون وهو اطار العمل المستعمل في هذا الموقع ، بالتعاون مع كل هذه الأجزاء بشكل صحيح يستطيع العميل أن يزور الموقع ويبحث عن نوع معين من الأطباق لكي يطلبه للشراء ,عندما يكتبون في حقل البحث (في الـ Front-end) يقوم الموقع بالبحث في كل المنتجات المخزونة في قاعدة البيانات (في الـ Back-end) وييسترجع المعلومات الملائمة في شكل كود Front-end فيظهر في المتصفح الطلب الخاص بالعميل ويقوم بعملية الشراء أو الحجز.