مجال تطوير الويب او web development اصبح من اكثر المجالات طلبا في 2024. هذا لان كل الشركات والمؤسسات اليوم تبحث عن الطرق التي تريد ان تظهر بها لعملائها المحتملون ولذلك امتلاك موقع على شبكة الانترنت يعد ضرورياً جداً لاي علامة تجارية تحتاج للترويج لمنتجاتها.
حتى ان هناك علامات تجارية وشركات ظهورها الوحيد هو عبر الانترنت مثل جوجل ومايكروسوفت. تحتاج هذه الشركات الاعتناء بظهورها عبر المواقع الالكترونية وتطبيقات الويب التي تقدمها للمستخدمين.
مجال web development يندرج تحت اقسام برمجة الحاسوب والبرمجة هي مجال اكبر واوسع يضم العديد من المجالات الاخرى من ضمنها تطوير الويب وبناء وتصميم المواقع الالكترونية. وكذلك هذا المجال ملئ بالمعلومات والخطوات التي تحتاجها لكي تصبح مطور ويب.
قد يخلط الناس بين كلا المجالين تطوير الويب web development و تصميم الويب web design لكن في الحقيقة هما مجالان مختلفان وكل منهما له دوره ومسؤلياته ولقد كتبنا مقالا نشر فيه الفرق بين المجالين بعنوان: ما الفرق بين مصمم الويب ومطور الويب (الدليل الشامل والمبسط)
في هذا المقال وضعت شرحاً مكثفاً لادخلك في عمق هذا المجال الشيق وشرح للتفاصيل الدقيقة له.
البرمجه وتطوير الويب (Web Development vs Programming)
تطوير الويب هو بشكل مبسط استخدام لغات برمجة الكمبيوتر لصالح الانترنت لانشاء مواقع الكترونية تساعد المؤسسات بشكل كبير وقد حظى تطوير المواقع مكانة كبيرة لدى المبرمجين وذلك لان الشركات والمؤسسات اليوم تشهد تحول رقمي والاعتماد على الانترنت في كثير من المجالات وكل يوم تزداد نسبة مستخدمي الانترنت والتحول الرقمي وفكرة انشاء المشاريع عبر الانترنت.
تطوير المواقع او تخصص تطوير الويب مجال واسع مثل البحر, ملئ بالمعلومات والكثير من التحديات. من شئ بسيط مثل بناء صفحة html ثابتة بنصوص وفقرات عادية الى ان تصل لتطوير وبرمجة التطبيقات المعقدة.
بدأ ظهور تطوير وبناء الويب منذ ظهور شبكة الانترنت ووقت ذاك كانت صفحات الويب مجرد صفحة ثابتة بلغة الترميز html لا يمكن اضافة جديد على محتواها او التفاعل معها من قبل المستخدم فقط تقوم بالتنقل بين صفحات الموقع عبر الروابط وتظهر محتويات الصفحة عند التحميل ثم لا يحدث شئ اخر.
امثلة على كيفية تفاعل المستخدم مع الموقع كأن يقوم بانشاء حساب له على المنصة او يقوم بالتعليق على احد المنشورات ومن احدى اكبر المواقع التفاعلية هي منصة فيسبوك التي تمكنك من التواصل التفاعلي مع الاصدقاء والعائلة.
لكن بعد فترة تطور الانترنت واصبح هناك امكانية اضافة لمسة تفاعلية عن طريق لغات برمجة قوية مثل جافاسكريبت Javascript و بي اتش بي PHP و بايثون python واصبح هناك تفاعل من كلتا الناحيتين السيرفر(python) والمتصفح (javascript) وقد استمتع المستخدمون من هذا التطور.
وفي الوقت الراهن زاد التطور وابتكرت تقنيات ومكتبات جديدة كليا تسهل على مطور الويب عملية برمجة وتصميم الموقع وتضيف ميزات جديدة لم تكن موجودة في اللغات المستخدمة في بناء المواقع وبرمجته من امثلة هذه التقنيات هي typescript و react وهناك الكثير لا تحصر.
كيف تعمل مواقع الويب بشكل مبسط؟
الامر ببساطة هو عندما يقوم المستخدم بفتح متصفحه والاتصال بشبكة الانترنت ويدخل على احد الروابط يقوم الكمبيوتر (المتمثل في المتصفح browser) من جانب client بارسال طلب للسيرفر باحضارالصفحة من هذا الرابط فيستجيب السيرفر ويقوم بارسال المعلومات ان وجدت الصفحة التي يريدها المستخدم.
بهذه الطريقة تعمل مواقع الويب كلها بنفس الفكرة وتعتمد على جانبين المتصفح والسيرفر والجدير بالذكر ان لكل جانب له طريقة خاصة للعمل ومميزات ولغات برمجة وتقنيات خاصة به ويختلف التعامل مع كل من هما ومن هذه النقطة ساشرح لك بالتفصيل كلا الجانبين
ما هو عنوان بروتوكول الانترنت ( IP Address )
لكل جهاز كمبيوتر معرف IP فريد يساعد ذالك العنوان الاجهزة الاخرى على تحديد موقع الجهاز وارسال البيانات له عبر معرف IP Address الخاص به بسهولة، وهذا فقط يتم عندما يكون الجهازين متصلين بنفس الشبكة او عن طريق الانترنت، فكل موقع الكتروني على الانترنت له عنوان IP خاص بالجهاز المخزن عليه بيانات ذلك الموقع.
قبل ظهور DNS وهو ما سنقوم بتعريفه لاحقا كان على المستخدم كتابة رقم IP في متصفحه حتى يتمكن من الوصول الى مواقع الانترنت، وكان هذه صعبا حداَ لان ارقام IP كانت:
- مجموعة ارقام رباعية
- كل مجموعة بها رقم من 0 الى 255
- كل مجموعة تفصل بنقطة (.)
- مثال: 192.134.1.6
أساسيات تطوير الويب
انواع وتخصصات الــ Web Development
ركز جيدا عند اختيار تخصص مطور الويب في هذا المجال بعناية حيث ان تطوير وبناء المواقع يندرج تحته 3 تخصصات ولكل نوع من هذه التحصصات له مهام وطريقة تفكير مختلفة عن الاخر حسنا ليس كثيرا حيث ان التخصص كـ Full-Stack Developer يجمع بين التخصصين الاخرين معاَ وستكون المهام كثيرة عليك وستصبح مسؤلا عن بناء الموقع كاملا وتسليمه:
- Front-End development: تطوير الواجهة الامامية
- Back-End development: تطوير الواجهة الخلفية
- Full-Stack Development:
الفرق بين الـ front-end & back-end
لكل شئ له تخصصاته ودواعيه وهذين المجالين ايضاً كذلك فمجال back-end يركز على بيانات التي تخص الموقع والزوار وكيفية التعامل معها ويعمل ايضاً على حماية تلك البيانات من خلال بعض الممارسات المقررة عليه اثناء عمله.
والوجه الاخر الذي يخص المستخدم وهو مجال front-end والذي يهدف الى توفير تصميم للموقع وتكويد التصميم الخاص بمصمم الويب وذلك ما يدعى بالواجهة الامامية ويركز على شكل الموقع الذي يظهر للزوار وتسهيل التنقل فيه واليك الان شرحاً اشمل لكل مجال منهم.
ما هو Front-end development؟
تطوير واجهة المستخدم هو المختص بتصميم الواجهة الامامية التي تظهر للمستخدمين ويستطيع المستخدم التفاعل معها مثل صفحة المقالة التي تقرءها الان ك ما تراه من نصوص وازرار وروابط يمثل الواجهة الامامية.
ما هو عمل Front End Developer؟
يكون عمل مطور الواجهة الامامية معتمدا على client side او المتصفح الذي يستخدمه الزائر. يعمل هذا القسم ويركز على الشكل الخارجي ويعتبر الجز الذي يجب التركيز والاهتمام به كثيراً لان العميل اذا لم يشعر بالراحة عند زيارة الموقع او لم يعجبه التصميم فاكيد سينفر من العلامة التجارية او الشركة صاحبة الموقع.
برمجة الزرار ومربع البحث وطريقة عرض المنتجات في المتاجر الالكترونية اجل الشكل الذي تراه عبارة عن صورة المنتج واسمه وسعره ايضا وتجد كل المنتجات مصطفة بجانب بعضها بطريقة منسقة كل هذا مسؤل عنه مصمم الواجهة الامامية.
ما هي لغات ال Front End؟
توجد لغات اساسية لاي مطور واجهة امامية من المهم ان يتقنها وهي HTML و CSS و JavaScript مواقع الانترنت بشكل عام لا تخلو من اكواد تلك اللغات وبالجدير بالذكر سنقوم ان شاء الله بعمل مقالات وادلة كاملة اشرح فيها لكم تلك اللغات وعندما اجهز منها باضع الروابط في هذا المكان.
لكن اليك تعريف بسيط عنها حتى الان.
- HTML لغة هيكلية تشكل جسم الموقع وهي اختصار لـ Hyper Text Markup Language وتعني لغة ترميز النص الفائق ولوحدها تنشئ لك صفحة ويب ثابتة غير ديناميكية.
- CSS تنسيق الموقع والالوان والخطوط التي تستخدمها وحجها
- JS (JavaScript) تعطي للموقع الحيوية مع المستخدمين ويستخدمها المطورين مع CSS لينشئو تصاميم جميلة.
فهمنا لما مجال الفرونت اند مهم. فلذا تعين الشركات مسؤلين عن الواجهة هذه لما لها من اهمية.
ما هو Back-End development؟
هو المقابل لمجال الفرونت اند وهو الجزء المسؤل عن الذي يحصل للموقع خلف الكواليس من جانب السيرفر server side ولا يستطيع المستخدم معرفة ما يحدث هناك.
ما هو عمل Back End Developer؟
يقوم الباك اند ببرمجة الواجهة الخلفية باستخدام لغات برمجة امثلتها PHP للتعامل مع الصفحة نفسها ولغة SQL للتعامل مع قواعد البيانات الخاصة بالموقع وايضا انشاء API الذي يستخدم للربط بين الفرونت اند والباك اند. يقوم بتخزين وترتيب البيانات.
مثلا يقوم بتعديل احد بيانات العملاء من خلال قاعدة البيانات مباشرة.
هو الجزء من البرنامج الذي لا يتواصل مباشرة مع المستخدمين. تتضمن الأنشطة، مثل كتابة واجهات برمجة التطبيقات (APIs)، وإنشاء مكتبات، والعمل مع مكونات النظام بدون واجهات مستخدم أو حتى أنظمة البرمجة العلمية، في الواجهة الخلفية أيضًا.
يقوم الباك اند بتصميم موقع خلفي اخر يسمى Dashboard تمكن المدير وباقي اعضاء الفريق العمل على الموقع واجراء تعديلات عليه عن طريق واجهة سهلة مثلا عندما يريد المدير انشاء مقالة جديدة على مدونة الموقع يذهب للوحة التحكم dashboard وينشئ واحدة.
ايهما افضل Back-end ام Front-end؟
كلا المجالين مهمين ولهما دواعيهما ومكملان لبعضهما لو كنت تريد انشاء موقع احترافي وبه الكثير من الميزات فلن تستطيع الاستغناء عن اي فرع منهما لكن اذا كنت تريد صفحة عادية لا تفاعل بها ولا اظن ان احداً يريد ذلك فان لغات البرمجة المستخدمة في Frond-end ستكفيك لبناء هذا النوع من المواقع.
يعمل ويتعاون المطور الامامي والخلفي معاً لكي ينشئوا ويبسايت بداً من موقع صغير لاعقد تطبيقات الويب. من المهم جداً ان تفهم ان المطور الواجهة الخلفية يوفر البيانات للواجهة الامامية. وان مطور الواجهة الامامية يبرز شكل البيانات التي يحصل عليها في تصميم جميل
يمكن خلط Front-end و back-end معاً لينتج مسمى جديد وهو full-stack development وهذا المجال يضم كل المهام.
والجدير بالذكر انه يمكن لاي شخص ان يتعلم كلا المجالين ويصبح حينئذ Full-stack developer ويبني مواقع احترافية وهذا الخيار مناسب جداً للشركات التي لا تملك راس مال كافي لتوظف لكن في معظم الشركات الكبيرة تجد متخصصين لكل شئ صغير.
الامر يشبه المطعم فانت عندما تذهب لتناول وجبة تطلب من النادل وجبة ما لكي تاكلها ويقوم النادل باخذ طلبك وسرعان ما قام الطباخون بتحضيرها قام النادل باحضارها وتقديمها لك. في هذا المثال طكل الطعم والطاولة اللبي تجلس عليها تمثل الواحه الامامية اما الواجهة الخلفية فهي مثل طريقة اعداد الطبخة فانت لم تدخل للشيف ورايته وهو يعد الطعام.
كان هذا مثالاً مبسطاً لكي تفهم اكثر معنى فرونت اند وباك اند وتطوير المواقع بشكل عام.
