تطوير المواقع الإلكترونية MEAN-Stack from A to Z مقدمة: صناعة المواقع الإلكترونية Level1

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

لغة البرمجة: عبارة عن مجموعة القواعد التي تحدد طريقة كتابة أوامر بنمط معين ينفذها جهاز الكمبيوتر لتنفيذ مهمة محددة.

كيف بدأت المواقع الإلكترونية؟

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

و في عام1990 تم إنشاء اول موقع إلكتروني و كان عبارة عن مجموعة من النصوص بدون واجهة مستخدم و في عام 1992 بدأت تحتوي المواقع علي الصور و في عام 1993 ظهر أول متصفخ و كان يسمي Mosaic و كان يدعم النصوص و الصور , و في عام 1994 كانت الثورة الحقيقية عندما ظهر أول متصفح بالمعني الحديث و كان يسمي نتسكيب Netscape و الذي كان يدعم النصوص و الصور و الصور المتحركة GIFs و في عام 1995 ظهرت لغة الترميز الخاصة بالمواقع HTML و ظهرت أيضا لغة الـ JavaScript التي يتم إختصارها لـ JS و هذه اللغة تحديدا هي بطلة قصتنا و في عام 1996 ظهرت لغة التنسيق الخاصة بالويب CSS لتتحول المواقع الإلكترونية للشكل الذي نعرفه الأن.

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

ما هي أجزاء و مكونات المواقع الإلكترونية؟

• الـ Back-end

  و يتكون من 3 أجزاءفي العادة (يمكن أن يتكون من أجزاء أخري أو أجزاء أقل تبعا للغرض منه و لكن غالبا ما يتكون من تلك الأجزاء)

  1. التطبيق الذي يقوم بإجراء العمليات المختلفة علي البيانات الواردة من المستخدم تبعا لطبيعة التطبيق و المطلوب منه و يقوم بتسجيل المعلومات و البيانات داخل قاعدة البيانات أو البحث و إستجلاب البيانات من قاعدة البيانات و إجراء العمليات المختلفة عليها و تزويد المستخدم بها أو التعديل عليها , أيضا يمكن لذلك التطبيق العمل منفردا دون قاعدة بيانات حيث يقوم بأدوار اخري مثل حفظ الملفات التي يقوم المستخدم برفعها و إجارء العلميات الحسابية و المنطقية اللازمة لتحقيق الهدف من صناعته
  2. قاعدة البيانات التي تقوم بحفظ البيانات و تنظيمها لعرضها علي المستخدم عند الحاجة (بعض المشروعات البسيطة ليست في حاجة لوجود قاعدة بيانات)
  3. الـ APIs (application programming interface) و هو الجزء البرمجي الذي يقوم بربط التطبيق مع ال front-end حيث يقوم ال front-end بإستدعائها و طلب منها البيانات لعرضها علي المستخدم أو استدعائها و تحميلها ببيانات من المستخدم لإجراء عليها المهام المطلوبة و إعادتها او تسجيلها في قاعدة البيانات او في ملفات السيرفر أو في أغلب الحالات تحميلها ببيانات معينة لتأتي ببيانات جديدة تبعا للبيانات المقدمة مثل بحث عن مستخدم بتاريخ ميلاد معين.

  تتكون كل API من أجزاء تسمي Endpoints تقوم كل واحدة منها بوظيفة في حالة البحث عن مستخدم بتاريخ ميلاد معين يتم استدعاء ال endpoint المختصة بتلك العملية و تمرير تاريخ الميلاد لها و استقبال المستخدم او المستخدمين المتوافق تاريخ ميلادهم مع تاريخ الميلاد محل البحث و يعتبر هذا المثال نموذج صغير لما يمكن لل APIs القيام به , الـ APIs هي عصب التكنولوجيا الحديثة فهي البرمجيات المسؤولة بربط التطبيقات التي يتعامل معها المستخدم علي اي وسط أو جهاز بالخوادم و ما تحتويه من برمجيات و قواعد بيانات حيث تقوم بربط الخوادم مع المواقع و تطبيقات الهواتف الذكية و تطبيقات الـ IOT (إنترنت الأشياء) و تطبيقات الروبوتات و المسيرات وإلي أخره من أجهزة و تطبيقات منتشرة في كل مكان حولنا , يمكن أن تكون ال API مشروعا منفصلا عن التطبيق الذي يحتوي علي الكود البرمجي اللازم للقيام بالعمليات المطلوبة في حالة التطبيقات كبيرة الحجم أو قد يكون تطبيق واحد يحتوي ال API مع التطبيق البرمجي في حالة المشروعات الصغيرة

• واجهة المستخدم الـ Front-end

  و هو ذلك الجزء المرئي من الموقع الإلكتروني الذي يتعامل معه المستخدم يتبادل المعلومات عن طريقه و يحتوي علي صفحات ويب مثل صفحة تسجيل الدخول أو صفحة من نحن أو صفحة إتصل بنا و غيرها من الصفحات مهما كانت بسيطة و شائعة في كل المواقع مثل الصفحات المذكورة أو كانت شديدة التعقيد في مواقع مثل الصفحات الخاصة بالرسم أونلاين أو تحويل الأموال أو صفحات مواقع التواصل الإجتماعي بمختلف استخدامتها

  الـ front-end ممكن أن يكون الموقع الإلكتروني عبارة عن front-end فقط بدون أي اجزاء أخري في حالة كان الموقع صغيرا و محتواه غير متغير

أجزاء الموقع الإلكتروني

الـ Domain-name و الـ Hosting أيضا من أجزاء الموقع الإلكتروني غير البرمجية و لكن يجب علي كل مطور مواقع أن يعرفها هو الـ Domainname و هم عنوان الموقع الذي يكتبه المستخدم لفتح الموقع علي المتصفح مثل www.google.com أو www.facebook.com و غيرها و هو اسم لا يتكرر يتم شراءه من شركات متخصصة ببيع النطاقات فما هي أهميته و كيف يعمل؟ كل موقع يتم بناءه يتكون من ملفات يجب أن تحفظ تلك الملفات علي سيرفر Server و يحتوي كل سيرفر علي عدد من المواقع و كل جهاز سيرفر له عنوان تعريف IP معين يكون علي هذه الصورة 172.217.6.196 بالطبع استحالة ان يقوم شخص بحفظ تلك الأرقام و كتابتها في كل مرة يحتاج فيها تصفح موقع لذلك ظهرت الحاجة لوجود أسماء بسيطة سهلة التذكر تكتب بلغة بشرية عادية لإستخدامها في الوصول للمواقع و بذلك يحمل كل موقع اسم يشير إلى عنوان تعريفه و تقوم قواعد بيانات بربط تلك الأسماء بعنواينها تسمي DNS فحينما يقوم المستخدم بكتابة اسم الموقع في المتصفح يقوم المتصفح بطلب عنوان الموقع من ال DNS لتوصيل الزائر بالموقع المطلوب

لماذا يقسم الموقع لتلك الأقسام و لماذا يتم بناءه علي أكثر من جزء برمجي؟

للإجابة علي ذلك السؤال يجب علينا أن نجيب علي السؤال التالي فكيف يظهر الموقع للمستخدم و ماهي ألية عمله؟

عندما يكتب المستخدم عنوان الموقع في المتصفح يقوم المتصفح بالإتصال بالسيرفر و طلب الموقع و يقوم الـ server بإرسال الصفحة المطلوبة للموقع بصيغة html فمثلا لو طلب المستخدم صفحة about us يقوم السيرفر بإرسال صفحة about-us.html للمتصفح , قديما لبناء موقع معقد يتعامل مع قواعد البيانات و يحتوي علي تطبيقات تقوم بمهام علي البيانات و الملفات كان يحتوي السيرفر علي compiler و يقوم مطور المواقع بإنشاء الموقع بأحد اللغات البرمجية الخاصة بالويب مثل لغة ASP.NET بملفات تحمل امتداد .aspx أو PHP بإمتداد .php و كان السيرفر يحتوي علي ال compiler و مهمته هو القيام بالترجمة ما بين لغة البرمجة و بين السيرفر ليحول الملفات مثل .php أو .aspx إلي ملفات بإمتداد .html لترسل إلي المتصفح ليستطيع قرأتها فمثلا لو فرضنا أن صفحة ويب ما تقوم بعمل عملية جمع لرقمين يقوم المستخدم بإدخالهم في مربعي كتابة و من بعد يقوم بالضغط علي زر للقيام بعملية الجمع , في البداية يطلب المتصفح الصفحة فيقوم الـ compiler بتحول كود الـ php او الـ asp.net إلى رموز html عادية ليتمكن المتصفح من قرأتها و عرضها للمستخدم يقوم المستخدم بإدخال الأرقام المراد جمعها و الضغط على زر الجمع فيقوم المتصفح بإرسال الصفحة للسيرفر لإجراء العملية و من بعد يقوم الـ compiler بترجمة لغة البرمجة و إجراء العملية و إعادة إرسال الصفحة كاملة بعد ان يضيف لها الإجمالي, كانت تلك الطريقة لعمل المواقع التي تحتوي علي عمليات برمجية و بالطبع كان أداء المواقع سيء حيث يتم إعادة تحميل صفحة الموقع في كل مرة يتم فيها التفاعل بين الموقع و المستخدم لطلب بيانات او ادخال بيانات (لازالت تلك التقنيات تستخدم و العديد من المواقع تعمل بنفس الطريقة) , كانت لغة البرمجة ال JavaScript ظهرت في منتصف التسعينيات و كانت في البداية تستخدم لعمل بعض التأثيرات البصرية كأن يتم تحريك صورة في الخلفية أو تكبير صورة عند النقر عليها او المرور عليها بالمؤشر و الميزة الكبرى لتلك اللغة هي أنها تعمل علي مستوي المتصفح و لا تحتاج لتنفيذ اوامرها العودة للسيرفر مرة أخري فظهرت فكرة تطوير تلك الللغة للإستفادة من تلك الميزة فعند الإحتياج لعمل عمليات بسيطة لا تتعلق بالسيرفر يمكن إجرائها عن طريق ال JavaScript (JS) فمثلا في المثال السابق عندما يريد المستخدم جمع رقمين و هي عملية بسيطة و غير معقدة يمكن اجراءها بالـ JS و بذلك لن تحتاج الصفحة لإعادة التحميل مرة أخري (أيضا وقتها كانت سرعات الإنترنت ضعيفة جدا و إمكانيات الأجهزة سواء السيرفرات أو اجهزة المستخدمين متواضعة للغاية و كانت الصفحات يعاد تحميلها في وقت طويل) بذلك قامت الـ JS بحل جزء من المشكلة و لكن لايزال هناك مشكلة فمثلا اذا كانت العملية المراد تنفيذها تتعلق بقواعد البيانات او الملفات المسجلة في السيرفر فستظل الصفحات يعاد تحميلها و هنا قامت شركة جوجل بتطوير تقنية لإستخدامها في منتجاتها و قامت بعرضها لإستخدام المطورين تسمي AJAX و ببساطة تقوم علي الطلب من السيرفر تنفيذ مهمة ما من صفحة ما بدون ان يتم ارسال الصفحة كاملة الي السيرفر و اعادة تحميلها مرة اخري علي المتصفح و استخدمت تلك التقنية عن طريق لغة البرمجة ال JS و هو ما عزز استخدام تلك اللغة و جعل لها مستقبل للتطوير لتقوم بما هو اكثر من مجرد اعطاء شكل متحرك لصفحات المواقع و بعدها ظهرت الحاجة للفصل بين اجزاء الموقع المختلفة كما ذكرت من قبل.

إذا من يقوم بصناعة الموقع الإلكتروني؟

في المشروعات الكبيرة يقوم فرد أو مجموعة من الأفراد بالقيام بالمهام التالية:

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

كما رأينا فإن المهام الخاصة بتطوير الموقع و قاعدة بياناته و تشغيله علي سيرفر الإستضافة و تأمينه قد يقوم بها شخص واحد و تسمي وظيفته full-stack developer و في أحوال كثيرة يقوم نفس الشخص أيضا بتصميم الموقع في حالة عدم توافر مصمم UI/UX أو كان المشروع ضغيرا و لا يحتمل دفع ثمن التصميم في الحقيقة فإن الذي يقوم بتلك الوظيفة يجب عليه أن يكون علي دراية كبيرة بالمهام التي ذكرتها و كيفية تنفيذها و بالطبع في أغلب الأحيان ليس المطلوب منه أن يكون محترفا في كل الوظائف و بنفس القدر و لكن أن يكون ملم بما يكفي لإنشاء المشروعات الصغيرة أو المتوسطة فبالطبع لن يستطيع شخص واحد القيام بكل تلك المهام بنفس القدر من الكفائة و التركيز و قد يكون متميز في بعض الجوانب أكثر من الجوانب الأخري.