السلام عليكم جميعًا
بعد التوكل على الله قررت البدء بسلسلة بعنوان " ما الفرق؟ "
في هذه السلسلة سأقوم بشرح الفروق بين بعض الخيارات المتاحة في مختلف المجالات، وذلك لتوسيع مداركنا وزيادة فهمنا للعالم التقني من حولنا .
اليوم سأبدأ بأول فرق وسيكون بين البرمجة الأمامية (Frontend) والبرمجة الخلفية (Backend).
بداية لفهم معنى كل منهما بشكل بسيط اريد منك صديقي أن تتخيل معي أنك في متجر:
كل ما تراه في المتجر من واجهة المتجر أو رفوف عرض السلع ،أسعار المنتجات أو سلة التسوق كل هذا يتم العمل علية ليكون جذابًا لك كمشتري وسهل الاستخدام وهذا تمامًا ما يفعلة مطور Frontend
أما ما يحدث خلف الكواليس من مخزن المنتجات، نظام إدارة المخزون، عملية الدفع، كل هذا يعمل بشكل غير مرئي لك كمستخدم ولكنه ضروري لعمل المتجر بسلاسة وهذا تمامًا ما يفعلة مطور Backend
اعتقد بأنه الآن أصبح لدينا تصور مبدئي عن مفهوم كل من النوعين .
بعد التوكل على الله قررت البدء بسلسلة بعنوان " ما الفرق؟ "
في هذه السلسلة سأقوم بشرح الفروق بين بعض الخيارات المتاحة في مختلف المجالات، وذلك لتوسيع مداركنا وزيادة فهمنا للعالم التقني من حولنا .
اليوم سأبدأ بأول فرق وسيكون بين البرمجة الأمامية (Frontend) والبرمجة الخلفية (Backend).
بداية لفهم معنى كل منهما بشكل بسيط اريد منك صديقي أن تتخيل معي أنك في متجر:
كل ما تراه في المتجر من واجهة المتجر أو رفوف عرض السلع ،أسعار المنتجات أو سلة التسوق كل هذا يتم العمل علية ليكون جذابًا لك كمشتري وسهل الاستخدام وهذا تمامًا ما يفعلة مطور Frontend
أما ما يحدث خلف الكواليس من مخزن المنتجات، نظام إدارة المخزون، عملية الدفع، كل هذا يعمل بشكل غير مرئي لك كمستخدم ولكنه ضروري لعمل المتجر بسلاسة وهذا تمامًا ما يفعلة مطور Backend
اعتقد بأنه الآن أصبح لدينا تصور مبدئي عن مفهوم كل من النوعين .
لذا سنقوم بتعريف كل منهما تعريف علمي بسيط :
- البرمجة الأمامية (Frontend): هي الجزء المرئي من التطبيق أو الموقع الإلكتروني الذي يتفاعل معه المستخدم بشكل مباشر ويشمل كل ما يراه المستخدم من تصميم، ألوان، خطوط، صور، أزرار، قوائم، وغيرها من العناصر التي تجعل التطبيق جذابًا وسهل الاستخدام.
- البرمجة الخلفية (Backend): هي الجزء غير المرئي من التطبيق أو الموقع الإلكتروني الذي يعمل خلف الكواليس. يتعامل مع منطق العمل، إدارة البيانات، والتفاعل مع قواعد البيانات والخوادم.
للبرمجة الأمامية (Frontend) عدة استخدامات منها : 1. تصميم وتطوير واجهة المستخدم (UI) بحيث تكون جذابة وسهلة الاستخدام.
2. بناء التفاعلات بين المستخدم والواجهة، مثل النقر على الأزرار، ملء الحقول، وتصفح الصفحات.
3. التأكد من أن التطبيق يعمل بشكل صحيح على مختلف الأجهزة وأحجام الشاشات.
4. تحسين أداء التطبيق لضمان تحميل الصفحات بسرعة وتجربة مستخدم سلسة.
للبرمجة الخلفية (Backend) عدة استخدامات أيضاً منها :1. تخزين البيانات في قواعد البيانات.
2. معالجة الطلبات التي تأتي من الواجهة الأمامية.
3. تنفيذ العمليات الحسابية والمنطقية.
4. إدارة المستخدمين والتحقق من صلاحياتهم.
5. تأمين البيانات وحماية التطبيق من الاختراقات.
في البرمجة الأمامية (Frontend) ستعمل على :1. تصميم صفحة تسجيل الدخول.
2. إنشاء قائمة منسدلة لعرض الخيارات.
3. إضافة تأثيرات متحركة على العناصر.
في البرمجة الخلفية (Backend) ستعمل على :1. تسجيل الدخول للمستخدم والتحقق من صحة البيانات.
2. حفظ بيانات المستخدم في قاعدة البيانات.
3. معالجة طلب شراء منتج وإرسال فاتورة.
4. إدارة عمليات الدفع.
في البرمجة الأمامية (Frontend) يجب أن تتعلم لغات برمجة مثل : HTML, CSS, JavaScript, وايضًا يجب أن تتعلم عن أطر الواجهة الأمامية في البرمجة الخلفية (Backend) يجب أن تتعلم لغات برمجة مثل : Python, Java, Ruby, PHP، وقواعد بيانات مثل MySQL, PostgreSQLأطر الواجهة الأمامية :هي أداة تستخدم في تطوير الويب لتبسيط عملية إنشاء مواقع الويب حيث توفر مكونات وأنماط وأساليب قابلة لإعادة الاستخدام تساعدك على إنشاء مواقع ويب أكثر كفاءة وسهولة في الاستخدام
لا تقلق يا صديقي سأساعدك في ذلك :
إذا كنت مهتمًا بالتصميم والجماليات، وترغب في إنشاء تجارب مستخدم ممتعة فأنا انصحك بالبرمجة الأمامية (Frontend).أما إذا كنت تحب حل المشكلات المعقدة، والعمل مع البيانات، وبناء أنظمة قوية وموثوقة فالبرمجة الخلفية (Backend) هي خيار مناسب لك.
بدايةً لنعلم أن كلاهما ضروريان لإنشاء تطبيق ويب كامل الوظائف, حيث أنهما تعملان معًا بشكل متكامل, فمثلاً عندما تقوم بتنفيذ إجراء ما على الواجهة الأمامية (مثل النقر على زر)، فإن هذه العملية ترسل طلبًا إلى الخادم الذي يقوم بمعالجته وإرجاع النتيجة إلى الواجهة الأمامية لعرضها للمستخدم.
أما بالنسبة لطرق التواصل هناك عدة طرق لنتعرف على طريقتين منهم :1. واجهات برمجة التطبيقات (APIs) : هي الوسيلة التي تتواصل بها الواجهة الأمامية مع الخلفية. ترسل الواجهة الأمامية طلبات إلى الخلفية عبر هذه الواجهات، وتتلقى الخلفية هذه الطلبات وتعيد النتائج.
JSON (JavaScript Object Notation) .2 : هي صيغة شائعة لتبادل البيانات بين الواجهة الأمامية والخلفية. يتم تمثيل البيانات في شكل أزواج من المفتاح والقيمة، مما يسهل قراءتها ومعالجتها.
- البرمجة الأمامية (Frontend): تصميم صفحة تسجيل الدخول مع حقول لإدخال اسم المستخدم وكلمة المرور، إضافة زر لتسجيل الدخول، وتوفير رسائل خطأ في حالة إدخال بيانات غير صحيحة.
- البرمجة الخلفية (Backend): التحقق من صحة البيانات المدخلة، مقارنة كلمة المرور المخزنة في قاعدة البيانات، إنشاء جلسة للمستخدم المسجل، وتوجيه المستخدم إلى الصفحة الرئيسية.
الميزة | البرمجة الأمامية (Frontend) | البرمجة الخلفية (Backend) |
الهدف | توفير تجربة مستخدم ممتعة وجذابة | إدارة البيانات والمنطق وراء التطبيق |
التكنولوجيا المستخدمة | HTML, CSS, JavaScript | لغات برمجة مثل Python, Java, Ruby, PHP، وقواعد بيانات مثل MySQL, PostgreSQL |
مكان العمل | متصفح المستخدم | الخادم (Server) |
الأدوات | محررات نصوص، أدوات تصميم واجهات المستخدم، أدوات فحص الأكواد | بيئات التطوير المتكاملة (IDE)، أدوات إدارة قواعد البيانات، أدوات التحكم في الإصدار |
المسؤوليات | تصميم وتطوير واجهة المستخدم، التأكد من أن الموقع يعمل بشكل صحيح على مختلف الأجهزة والأحجام، إضافة تأثيرات تفاعلية | إدارة البيانات، تنفيذ منطق الأعمال، تأمين البيانات، التعامل مع طلبات المستخدمين، إدارة الخادم |
المهارات المطلوبة | فهم جيد لـ HTML, CSS, JavaScript، مهارات تصميم، معرفة بأطر عمل الجافاسكريبت، فهم أسس UX/UI | فهم لغات البرمجة، قواعد البيانات، خوارزميات، هياكل البيانات، مهارات حل المشكلات، معرفة بأسس الشبكات |
من كان لديه أي اضافة على هذا الموضوع ارجو منكم وضعها في التعليقات لإفادة الغير ونيل الأجر والثواب إن شاء الله
وهكذا نكون قد أنهينا درسنا لهذا اليوم
أن أصبت ففضل من الله ومِنه, وإن أخطأت فمن نفسي والشيطان .
والسلام عليكم ورحمة الله وبركاته
أن أصبت ففضل من الله ومِنه, وإن أخطأت فمن نفسي والشيطان .
والسلام عليكم ورحمة الله وبركاته
التعديل الأخير:
