كيف تعمل تطبيقات الويب

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

1. كيف تختلف تطبيقات الويب عن المواقع

بالنسبة لي ، يمثل الموقع في المقام الأول شيئًا مفيدًا وثابتًا: بطاقة عمل لشركة أو موقع وصفات أو بوابة مدينة أو ويكي. مجموعة من ملفات HTML المعدة مسبقًا والموجودة على خادم بعيد ويتم إعطاؤها للمتصفح عند الطلب.

تحتوي المواقع على احصائيات مختلفة ، مثل ملف HTML لا يتم إنشاؤه سريعًا. غالبًا ما تكون هذه الصور وملفات CSS ومخطوطات JS ، لكن يمكن أن يكون هناك أي ملفات أخرى: mp3 ، mov ، csv ، pdf.

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

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

2. ما هي تطبيقات الويب

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

1. تعمل الخلفية (الخلفية أو جانب الخادم من التطبيق) على كمبيوتر بعيد ، والذي يمكن أن يكون موجودا في أي مكان. يمكن كتابتها بلغات برمجة مختلفة: PHP و Python و Ruby و C # وغيرها. إذا قمت بإنشاء تطبيق باستخدام جانب الخادم فقط ، فنتيجة لأي انتقالات بين الأقسام وعمليات إرسال النماذج وتحديثات البيانات ، سيقوم الخادم بإنشاء ملف HTML جديد وسيتم إعادة تحميل الصفحة في المتصفح.
2. يعمل Frontend (الواجهة الأمامية أو جانب العميل من التطبيق) في متصفح المستخدم. هذا الجزء مكتوب بلغة البرمجة Javascript. يمكن أن يتكون التطبيق من جزء العميل فقط إذا لم يكن مطلوبًا لتخزين بيانات المستخدم لفترة أطول من جلسة واحدة. يمكن أن يكون ، على سبيل المثال ، محرري صور أو ألعاب بسيطة.
3. تطبيق صفحة واحدة (SPA أو تطبيق صفحة واحدة). خيار أكثر إثارة للاهتمام هو عندما يتم استخدام كل من الواجهة الخلفية والواجهة الأمامية. باستخدام تفاعلهم ، يمكنك إنشاء تطبيق يعمل بدون إعادة تحميل أي صفحة في المستعرض. أو في إصدار مبسط ، عندما تتسبب عمليات الانتقال بين الأقسام في إعادة تشغيل الكمبيوتر ، ولكن أي إجراءات في القسم تعمل بدونها.

3. Pyhon إطار جانغو ويعرف أيضا باسم الخلفية

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

تتمثل الخطوة الأولى في طلب مقدم من المستخدم إلى جهاز التوجيه (مرسل عنوان URL) ، والذي يقرر الوظيفة التي ستقوم بمعالجة طلب الاتصال. يتم اتخاذ القرار على أساس قائمة من القواعد التي تتألف من تعبير منتظم واسم الوظيفة: إذا كان مثل url ، فثم هذه الوظيفة.

تسمى الوظيفة التي يطلق عليها الموجه طريقة العرض. يمكن احتواء أي منطق تجاري في الداخل ، لكنه غالبًا أحد أمرين: إما أن تؤخذ البيانات من قاعدة البيانات ، ويتم إعدادها وإعادتها إلى المقدمة ؛ أو تم تقديم طلب مع بيانات من بعض النماذج ، يتم فحص هذه البيانات وتخزينها في قاعدة البيانات.

يتم تخزين بيانات التطبيق في قاعدة بيانات (DB). قواعد البيانات العلائقية الأكثر استخدامًا. يحدث هذا عندما تكون هناك جداول بها أعمدة محددة مسبقًا وتترابط هذه الجداول من خلال أحد الأعمدة.

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

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

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

4. أطر جافا سكريبت الملقب الواجهة

جزء العميل من التطبيق هو نصوص مكتوبة بلغة برمجة Javascript (JS) ويتم تنفيذها في متصفح المستخدم. في السابق ، كان كل منطق العميل يعتمد على استخدام مكتبة JQuery ، التي تتيح لك العمل مع DOM والرسوم المتحركة على الصفحة وتقديم طلبات AJAX.

DOM (نموذج كائن المستند) هو بنية صفحة HTML. العمل مع DOM يعني البحث عن علامات HTML وإضافتها وتعديلها ونقلها وحذفها.

AJAX (جافا سكريبت غير متزامن و XML) هو اسم شائع للتقنيات التي تسمح لك بتقديم طلبات غير متزامنة (بدون إعادة تحميل الصفحة) إلى الخادم وتبادل البيانات. نظرًا لأن أجزاء العميل والخادم من تطبيق الويب مكتوبة بلغات برمجة مختلفة ، لتبادل المعلومات ، فمن الضروري تحويل بنيات البيانات (على سبيل المثال ، القوائم والقواميس) التي يتم تخزينها في تنسيق JSON.

JSON (JavaScript Object Notation) هو تنسيق عالمي لتبادل البيانات بين العميل والخادم. إنها سلسلة بسيطة يمكن استخدامها في أي لغة برمجة.

التسلسل هو تحويل قائمة أو قاموس إلى سلسلة JSON. على سبيل المثال:

القاموس:

{ 'id': 1, 'email': 'mail@example.com' } 

سلسلة مسلسل:

  '{"id": 1, "email": "mail@example.com"}' 

إلغاء التسلسل هو التحويل العكسي لسلسلة إلى قائمة أو قاموس.

من خلال معالجة DOM ، يمكنك التحكم بشكل كامل في محتوى الصفحات. باستخدام AJAX ، يمكنك تبادل البيانات بين العميل والخادم. مع هذه التقنيات ، يمكنك بالفعل إنشاء SPA. ولكن عند إنشاء تطبيق معقد ، يصبح رمز الواجهة الأمامية المستندة إلى jQuery مربكًا ويصعب الحفاظ عليه.

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

قالب HTML عبارة عن صفحة HTML ذكية حيث يتم استخدام المتغيرات بدلاً من قيم محددة ومتاحون مختلفون: if ، for for ، and others. تسمى عملية الحصول على صفحة HTML من قالب عندما يتم استبدال المتغيرات ويتم تطبيق العوامل "تقديم القالب".

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

5. كيف يتواصل العميل والخادم مع بعضهم البعض

يتصل العميل مع الخادم عبر HTTP. أساس هذا البروتوكول هو الطلب المقدم من العميل إلى الخادم واستجابة الخادم للعميل.

بالنسبة للاستعلامات ، يستخدمون عادةً أساليب GET إذا كنا نريد الحصول على البيانات ، و POST إذا كنا نريد تغيير البيانات. يشير الطلب أيضًا إلى المضيف (مجال الموقع) ، ونص الطلب (إذا كان طلب POST) والكثير من المعلومات التقنية الإضافية.

تستخدم تطبيقات الويب الحديثة بروتوكول HTTPS ، وهو نسخة موسعة من HTTP مع دعم لتشفير SSL / TLS. أصبح استخدام قناة نقل بيانات مشفرة ، بغض النظر عن أهمية هذه البيانات ، شكلًا جيدًا على الإنترنت.

هناك طلب آخر يتم قبل HTTP. هذا استعلام DNS (نظام اسم المجال). هناك حاجة للحصول على عنوان IP الذي يرتبط به المجال المطلوب. يتم تخزين هذه المعلومات في المتصفح ولم نعد نقضي وقتًا في ذلك.

عندما يصل طلب من المستعرض إلى الخادم ، لن يصل إلى Django على الفور. أولاً ، تتم معالجتها بواسطة خادم الويب Nginx. إذا تم طلب ملف ثابت (على سبيل المثال ، صورة) ، فإن Nginx نفسه يرسله استجابةً للعميل. إذا لم يكن الطلب ثابتًا ، فيجب أن يقوم Nginx بالوكالة (نقل) إلى Django.

لسوء الحظ ، فهو لا يعرف كيف. لذلك ، يتم استخدام برنامج طبقة آخر - خادم التطبيق. على سبيل المثال ، بالنسبة لتطبيقات الثعبان ، يمكن أن تكون uWSGI أو Gunicorn. والآن يرسلون الطلب إلى جانغو.

بعد أن قام Django بمعالجة الطلب ، يقوم بإرجاع استجابة بصفحة أو بيانات HTML ، ورمز الاستجابة. إذا كان كل شيء على ما يرام ، فإن رمز الاستجابة هو 200 ؛ إذا لم يتم العثور على الصفحة ، ثم - 404 ؛ إذا حدث خطأ ولم يتمكن الخادم من معالجة الطلب ، فعندئذ - 500. هذه هي الرموز الأكثر شيوعًا.

6. التخزين المؤقت في تطبيقات الويب

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

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

• في جانغو ، جاء طلب لتلقي بيانات المخطط في التقرير. نحصل على البيانات من قاعدة البيانات ، ونعدها ونضعها في قاعدة البيانات مع وصول سريع ، على سبيل المثال ، memcached لمدة 1 ساعة. بناءً على الطلب التالي ، سوف نرسلهم فورًا من memcached ونرسلهم إلى الواجهة الأمامية. إذا اكتشفنا أن البيانات لم تعد ذات صلة ، فإننا سنبطلها (نحذفها من ذاكرة التخزين المؤقت).
• للتخزين المؤقت للملفات الثابتة ، يتم استخدام موفري CDN (شبكة توصيل المحتوى). هذه خوادم موجودة حول العالم ومُحسّنة لتوزيع الإحصائيات. في بعض الأحيان يكون وضع الصور ومقاطع الفيديو والبرامج النصية JS على CDN أكثر فعالية من الخادم الخاص بك.
• تعمل جميع المتصفحات على تمكين التخزين المؤقت للملفات الثابتة افتراضيًا. وبفضل هذا ، فإن فتح الموقع ليست المرة الأولى ، حيث يتم تحميل كل شيء بشكل أسرع. ناقص المطور هو أنه مع تشغيل ذاكرة التخزين المؤقت ، فإن التغييرات التي تم إجراؤها في الكود لا تكون دائمًا مرئية على الفور.