كيف يعمل الويب: مقدمة للمبتدئين في تطوير الويب.

إذا كنت تبدأ في مجال تطوير الويب، فمن المحتمل أنك تعتقد أنك تعرف كيفية عمل الويب، على الأقل على مستوى أساسي.

ولكن عندما تحاول شرح كيفية عمل موقع ويب بسيط، قد تجد نفسك في حيرة من أمرك.

ماذا يعني عنوان IP مرة أخرى؟ وكيف يعمل نموذج “Clint-Server” بالضبط؟

تعد أطر تطوير الويب {Development frameworks}قوية جدًا هذه الأيام، لدرجة أنه من السهل أن يفقد المبتدئون المفاهيم الأساسية لكيفية عمل الويب.

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

• الجزء الأول: كيف يعمل الويب
• الجزء الثاني: هيكل تطبيق الويب
• الجزء الثالث: HTTP وREST
• الجزء الرابع: أمثلة برمجية لتفاعلات العميل-الخادم

البحث على الويب: مثال بسيط

لنبدأ بمكان مألوف للجميع: كتابة “www.google.com” في شريط العناوين في المتصفح ومشاهدة الصفحة تحمل.

رغم أن هذه العملية تبدو بسيطة، إلا أن هناك الكثير من السحر يحدث خلف الكواليس.

دعونا نستعرض ما يحدث خطوة بخطوة.

 تعريف أجزاء الويب

قد يكون فهم الويب أمرًا معقدًا بسبب وجود الكثير من المصطلحات.

لسوء الحظ، بعض هذه المصطلحات ضرورية لفهم كيفية عمل الويب.

فيما يلي أهم المصطلحات التي يجب معرفتها لفهم أسرار الويب:

العميل (Client: تطبيق مثل Chrome أو Firefox {broser} يعمل على جهاز الكمبيوتر ويتصل بالإنترنت.

دوره الأساسي هو أخذ تفاعلات المستخدم وترجمتها إلى طلبات إلى جهاز آخر يسمى الخادم (Server).

يمكن اعتبار جهاز الكمبيوتر بالكامل كجزء “العميل” في نموذج العميل-الخادم.

 الخادم (Server): جهاز متصل بالإنترنت وله عنوان IP خاص به. ينتظر الخادم الطلبات من أجهزة أخرى (مثل العميل) ويستجيب لها. الخادم يحتوي على برامج خاصة تستجيب للطلبات الواردة من المتصفح.

عنوان IP: هو معرف رقمي للجهاز (الكمبيوتر، الخادم، الطابعة، إلخ) على شبكة TCP/IP.

كل جهاز على الإنترنت له عنوان IP يتيح له التواصل مع الأجهزة الأخرى.

– مزود خدمة الإنترنت (ISP): هو الوسيط بين العميل والخوادم.

عندما يطلب متصفحك الانتقال إلى www.google.com، يقوم مزود الخدمة بتنفيذ استعلام DNS لمعرفة عنوان IP الخاص بالموقع الذي تحاول زيارته.

– نظام أسماء النطاقات (DNS): هو قاعدة بيانات موزعة تحتفظ بأسماء النطاقات وعناوين IP الخاصة بها على الإنترنت.

يتيح DNS للمستخدمين إدخال أسماء النطاقات بدلاً من عناوين IP للوصول إلى المواقع.

– اسم النطاق (Domain Name): يُستخدم لتحديد عنوان IP واحد أو أكثر. يتم استخدام اسم النطاق للوصول إلى موقع على الإنترنت.

– TCP/IP:هو البروتوكول الأكثر استخدامًا لنقل البيانات عبر الشبكات.

– رقم المنفذ (Port Number): هو معرف 16 بت يحدد منفذًا معينًا على الخادم ويستخدم لتحديد عملية معينة على الخادم يمكن توجيه الطلبات إليها.

-المضيف (Host): هو جهاز متصل بالشبكة – يمكن أن يكون عميلًا، خادمًا أو أي جهاز آخر.

– HTTP: بروتوكول نقل النص الفائق. هو البروتوكول الذي يستخدمه المتصفح والخادم للتواصل مع بعضهما البعض عبر الإنترنت.

– URL: محدد الموارد الموحد. URLs تُستخدم لتحديد موقع معين على الويب.

رحلة من الكود إلى صفحة الويب

الآن بعد أن عرفنا التعريفات الأساسية، دعونا نستعرض كيفية تحويل البحث على Google إلى صفحة ويب فعلية:

1. تكتب URL في المتصفح.
2. يحلل المتصفح المعلومات الواردة في URL، بما في ذلك البروتوكول (https)، واسم النطاق (google.com)، والمورد (“/”).
3. يتواصل المتصفح مع مزود الخدمة (ISP) لتنفيذ استعلام DNS والحصول على عنوان IP للخادم الذي يستضيف www.google.com
4. بعد حصول مزود الخدمة على عنوان IP، يرسله إلى متصفحك.
5. يستخدم المتصفح عنوان IP ورقم المنفذ الموجود في URL لفتح اتصال TCP مع الخادم.
6. يرسل متصفحك طلب HTTP إلى الخادم لصفحة HTML الرئيسية لموقع www.google.com.
7. يستجيب الخادم بإرسال الصفحة المطلوبة، أو برسالة خطأ HTTP 404 إذا كانت الصفحة غير موجودة.
8. يقوم متصفحك بتحميل وتحليل صفحة HTML، ويقوم بتحميل جميع الموارد الإضافية المدرجة (مثل الصور، ملفات CSS، وملفات JavaScript).
9. بعد تحميل جميع الموارد، يتم عرض الصفحة في نافذة المتصفح ويتم إغلاق الاتصال.

 عبور الهوة عبر الإنترنت // Crossing the Internet abyss

عند طلب معلومات، يتم تقسيم المعلومات إلى حزم صغيرة تُسمى الحزم (packets).

كل حزمة تحتوي على رؤوس TCP وIP التي تُحدد مسارها إلى الوجهة.

يتم إرسال الحزم عبر الشبكة إلى أن تصل إلى الوجهة النهائية حيث يتم إعادة تجميعها.

رسم الصورة النهائية

بعد أن يتلقى المتصفح الموارد التي تُكوّن الموقع، يبدأ في تنفيذ عدة خطوات لعرض المحتوى على شكل صفحة ويب مقروءة.

يحتوي المتصفح على محرك عرض مسؤول عن عرض المحتوى.

يقوم محرك العرض بتحليل ملفات HTML، وينشئ بنية شجرية لعناصر DOM، والتي يمكن التلاعب بها باستخدام لغات البرمجة مثل JavaScript.

مقالات ذات صلة:
– أهمية بروتوكول HTTP و HTTPS
– كيفية عمل محركات البحث
– دليل أساسي لتطوير الويب

مهتم بتعلم المزيد عن تطوير الويب؟ أكاديمية كود كامب لاستكشاف المزيد من المقالات التعليمية والدورات المتخصصة!

بمجرد بناء شجرة DOM

بعد أن يتم بناء شجرة DOM، يتم تحليل ملفات CSS لفهم كيفية تنسيق كل عنصر (Node).

باستخدام هذه المعلومات، يقوم المتصفح بتصفح عناصر DOM ويحسب خصائص CSS، مثل التنسيق، الموضع، والإحداثيات لكل عنصر.

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

الويب معقد، لكنك أنهيت الجزء الصعب

مقالات ذات صلة:
– أهمية تحليل DOM في المتصفح
– كيفية عمل محركات العرض في المتصفحات
– مقدمة في CSS وتنسيق صفحات الويب

مهتم بتعلم المزيد عن تطوير الويب؟ أكاديمية كود كامب لاستكشاف المزيد من المقالات التعليمية والدورات المتخصصة!

فهم كيفية تكوين تطبيقات الويب الأساسية

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

 نموذج العميل-الخادم

نموذج العميل-الخادم هو الطريقة التي يتواصل بها العميل والخادم عبر الشبكة. هذا النموذج هو ما يجعل من الممكن عرض المواقع الإلكترونية (مثل هذا الموقع) والتفاعل مع تطبيقات الويب (مثل Gmail).

نموذج العميل-الخادم هو ببساطة طريقة لوصف العلاقة بين العميل والخادم في تطبيق الويب.

كما هو الحال مع العلاقات الشخصية، يمكننا وصف العلاقة بين العميل والخادم بأنها علاقة “أخذ وعطاء”.

لكن التفاصيل حول كيفية انتقال المعلومات من طرف إلى آخر هي ما يجعل الأمور معقدة.

تكوين تطبيق ويب أساسي

توجد مئات الطرق لتكوين تطبيق ويب، لكن معظمها يتبع نفس البنية الأساسية: عميل، خادم، وقاعدة بيانات.

– العميل: العميل هو ما يتفاعل المستخدم معه. وبالتالي، فإن الكود الذي يعمل على جانب العميل هو المسؤول عن معظم ما يراه المستخدم فعليًا، بما في ذلك:

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

البنية: يتم تعريف تخطيط ومحتوى صفحة الويب باستخدام HTML (HyperText Markup Language)، وهو لغة تتيح لك وصف البنية الأساسية للمستند باستخدام وسوم HTML.

الشكل والمظهر: يتم تحديد الشكل والمظهر لصفحة الويب باستخدام CSS (Cascading Style Sheets)، وهي لغة تتيح لك وصف كيفية تصميم العناصر المحددة في HTML.

تفاعلات المستخدم: يتم التعامل مع تفاعلات المستخدم باستخدام JavaScript، وهو ما يسمح بالتفاعل الديناميكي مع صفحة الويب دون الحاجة إلى إرسال الطلبات إلى الخادم في كل مرة.

– الخادم: الخادم في تطبيق الويب هو الذي يستمع إلى الطلبات القادمة من العميل.

عندما تقوم بإعداد خادم HTTP، تقوم بإعداده للاستماع إلى رقم منفذ معين.

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

-قاعدة البيانات: قاعدة البيانات هي المكان الذي يتم فيه تخزين المعلومات بحيث يمكن الوصول إليها وإدارتها وتحديثها بسهولة.

في حالة بناء موقع للتواصل الاجتماعي، قد تستخدم قاعدة بيانات لتخزين معلومات المستخدمين والمنشورات والتعليقات.

 كيفية توسيع تطبيق ويب بسيط

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

لحل هذه المشكلة، يمكن توزيع حركة المرور الواردة عبر مجموعة من الخوادم الخلفية اي يعني السيرفرات او hosting. يُطلق على الجهاز الذي يقوم بتوزيع الطلبات بين الخوادم اسم “موازن التحميل” (Load Balancer).

موازن التحميل يعمل على توزيع حركة المرور بين الخوادم المتاحة بأكثر الطرق فعالية وكفاءة.

 شبكات توصيل المحتوى (CDNs)

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

لحل هذه المشكلة، يمكن استخدام شبكة توصيل المحتوى (CDN)، وهي نظام موزع بشكل كبير من الخوادم “الوكيلة” المنتشرة في مراكز بيانات متعددة حول العالم.

تعمل الخوادم الوكيلة كوسيط بين العميل والخادم، مما يتيح تقديم المحتوى بشكل أسرع للمستخدمين عن طريق تقليل المسافة التي يتعين على المحتوى السفر عبرها.

اذا كنت تريد التعرف على CDN انقر هنا

على سبيل المثال، إذا كنت تستخدم شبكة CDN مثل www.cloudflare.com ، يمكن تخزين نسخ من العناصر الشائعة (مثل HTML، وCSS، وتنزيلات البرامج، والوسائط) على خوادم  cloudflare  المنتشرة جغرافيًا، مما يقلل من زمن الاستجابة ويحسن من أوقات التحميل.

في النهاية

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

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