قبل أن نبدأ البرمجة ، سنتعرف على بعض مبادئ تطوير الويب من خلال فحص تطبيق نموذجي على https://studies.cs.helsinki.fi/exampleapp .
التطبيق موجود فقط لشرح بعض المفاهيم الأساسية للدورة ، وهو بأي حال من الأحوال أمثلة على كيفية إنشاء تطبيقات الويب. على العكس من ذلك ، فإنهم يعرضون بعض التقنيات القديمة لتطوير الويب ، والتي يمكن اعتبارها ممارسة سيئة في الوقت الحاضر.
يبدأ الترميز بالنمط الموصى به في الجزء 1 .
افتح التطبيق المثال على متصفحك. في بعض الأحيان يستغرق هذا بعض الوقت.
القاعدة الأولى لتطوير الويب : احتفظ دائمًا بـ Developer Console على متصفح الويب الخاص بك. على نظام macOS ، افتح وحدة التحكم بالضغط F12أو في option-cmd-iنفس الوقت. في نظام التشغيل Windows أو Linux ، افتح وحدة التحكم بالضغط F12أو في ctrl-shift-iنفس الوقت. يمكن أيضًا فتح وحدة التحكم عبر قائمة السياق .
تذكر دائمًا إبقاء Developer Console مفتوحًا عند تطوير تطبيقات الويب.
تبدو وحدة التحكم كما يلي:
تأكد من أن علامة التبويب الشبكة مفتوحة ، وتحقق من خيار تعطيل ذاكرة التخزين المؤقت كما هو موضح. يمكن أن يكون سجل الاحتفاظ مفيدًا أيضًا: فهو يحفظ السجلات المطبوعة بواسطة التطبيق عند إعادة تحميل الصفحة.
ملحوظة: أهم علامة تبويب هي وحدة التحكم . ومع ذلك ، في المقدمة ، سنستخدم علامة تبويب الشبكة قليلاً.
HTTP GET
يتواصل الخادم ومتصفح الويب مع بعضهما البعض باستخدام بروتوكول HTTP . تعرض علامة التبويب "الشبكة" كيفية اتصال المتصفح والخادم.
عند إعادة تحميل الصفحة (اضغط على المفتاح F5 أو الرمز في المستعرض الخاص بك) ، تُظهر وحدة التحكم وقوع حدثين:
- يقوم المستعرض بجلب محتويات الصفحة studies.cs.helsinki.fi/exampleapp من الخادم
- وتحميل الصورة kuva.png
على شاشة صغيرة ، قد تضطر إلى توسيع نافذة وحدة التحكم لرؤية هذه.
يؤدي النقر فوق الحدث الأول إلى الكشف عن مزيد من المعلومات حول ما يحدث:
يوضح الجزء العلوي ، عام ، أن المتصفح قدم طلبًا إلى العنوان https://studies.cs.helsinki.fi/exampleapp (على الرغم من أن العنوان قد تغير قليلاً منذ التقاط هذه الصورة) باستخدام طريقة GET ، وأن كان الطلب ناجحًا ، لأن استجابة الخادم لها رمز الحالة 200.
للطلب واستجابة الخادم عدة رؤوس :
على رؤوس الاستجابة على رأس تخبرنا مثلا حجم الاستجابة في بايت، والوقت المحدد للاستجابة. يخبرنا نوع محتوى رأس مهم أن الاستجابة عبارة عن ملف نصي بتنسيق utf-8 ، تم تنسيق محتوياته باستخدام HTML. بهذه الطريقة يعرف المتصفح الاستجابة على أنها صفحة HTML عادية ، ويعرضها على المتصفح "مثل صفحة الويب".
و ردا يظهر التبويب البيانات ردا على ذلك، العادية HTML الصفحات. في الجسم يحدد القسم بنية صفحة المقدمة إلى الشاشة:
تحتوي الصفحة على عنصر div ، والذي يحتوي بدوره على عنوان ، ورابط إلى ملاحظات الصفحة ، وعلامة img ، ويعرض عدد الملاحظات التي تم إنشاؤها.
بسبب علامة img ، يقوم المتصفح بطلب HTTP ثانيًا لجلب الصورة kuva.png من الخادم. تفاصيل الطلب كالتالي:
تم تقديم الطلب على العنوان https://studies.cs.helsinki.fi/exampleapp/kuva.png ونوعه هو HTTP GET. تخبرنا رؤوس الاستجابة أن حجم الاستجابة هو 89350 بايت ، ونوع المحتوى هو image / png ، لذا فهي صورة png. يستخدم المتصفح هذه المعلومات لعرض الصورة بشكل صحيح على الشاشة.
تشكل سلسلة الأحداث الناتجة عن فتح الصفحة https://studies.cs.helsinki.fi/exampleapp على المستعرض مخطط التسلسل التالي :
أولاً ، يقوم المستعرض بطلب HTTP GET للخادم لجلب كود HTML للصفحة. و IMG العلامة في HTML يطالب المتصفح لجلب صورة kuva.png . يعرض المتصفح صفحة HTML والصورة على الشاشة.
على الرغم من صعوبة ملاحظة ذلك ، تبدأ صفحة HTML في العرض قبل أن يتم جلب الصورة من الخادم.
تطبيقات الويب التقليدية
تعمل الصفحة الرئيسية لتطبيق المثال مثل تطبيق الويب التقليدي . عند الدخول إلى الصفحة ، يقوم المستعرض بجلب مستند HTML الذي يوضح بالتفصيل الهيكل والمحتوى النصي للصفحة من الخادم.
قام الخادم بتشكيل هذه الوثيقة بطريقة ما. يمكن أن يكون المستند عبارة عن ملف نصي ثابت محفوظ في دليل الخادم. يمكن للخادم أيضًا تشكيل مستندات HTML ديناميكيًا وفقًا لرمز التطبيق ، باستخدام ، على سبيل المثال ، بيانات من قاعدة بيانات. تم تكوين كود HTML للتطبيق النموذجي ديناميكيًا ، لأنه يحتوي على معلومات عن عدد الملاحظات التي تم إنشاؤها.
كود HTML للصفحة الرئيسية هو كما يلي:
const getFrontPageHtml = (noteCount) => {
return(`
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class='container'>
<h1>Full stack example app</h1>
<p>number of notes created ${noteCount}</p>
<a href='/notes'>notes</a>
<img src='kuva.png' width='200' />
</div>
</body>
</html>
`)
}
app.get('/', (req, res) => {
const page = getFrontPageHtml(notes.length)
res.send(page)
})ليس عليك فهم الكود الآن.
تم حفظ محتوى صفحة HTML كسلسلة نموذجية ، أو سلسلة تسمح بتقييم ، على سبيل المثال ، المتغيرات في وسطها. الجزء المتغير ديناميكيًا من الصفحة الرئيسية ، عدد الملاحظات المحفوظة (في رمز noteCount ) ، يتم استبداله بالعدد الحالي من الملاحظات (في ملاحظات التعليمات البرمجية الطول ) في سلسلة القالب.
إن كتابة HTML وسط الكود ليس أمرًا ذكيًا بالطبع ، ولكن بالنسبة لمبرمجي PHP في المدرسة القديمة ، كانت ممارسة عادية.
في تطبيقات الويب التقليدية يكون المتصفح "غبيًا". إنه يجلب بيانات HTML فقط من الخادم ، وكل منطق التطبيق موجود على الخادم. يمكن إنشاء خادم ، على سبيل المثال ، باستخدام Java Spring كما هو الحال في مقرر جامعة هلسنكي Web-palvelinohjelmointi أو Python Flask (مثل الدورة التدريبية tietokantasovellus ) أو مع Ruby on Rails .
يستخدم المثال Express من Node.js. ستستخدم هذه الدورة التدريبية Node.js و Express لإنشاء خوادم الويب.
تشغيل منطق التطبيق على المتصفح
اترك Developer Console مفتوحة. قم بإفراغ وحدة التحكم عن طريق النقر فوق الرمز 🚫 ، أو بكتابة clear () في وحدة التحكم. الآن عندما تذهب إلى صفحة الملاحظات ، يقوم المتصفح بتنفيذ 4 طلبات HTTP:
كل الطلبات لها أنواع مختلفة . نوع الطلب الأول هو المستند . هو كود HTML الخاص بالصفحة ، ويبدو كالتالي:
عندما نقارن الصفحة المعروضة على المتصفح ورمز HTML الذي يعرضه الخادم ، نلاحظ أن الكود لا يحتوي على قائمة الملاحظات. و رئيس -section من HTML يحتوي على البرنامج النصي -tag، الذي يتسبب في المتصفح لجلب ملف جافا سكريبت دعا main.js .
يبدو رمز JavaScript كما يلي:
var xhttp = new XMLHttpRequest()
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
const data = JSON.parse(this.responseText)
console.log(data)
var ul = document.createElement('ul')
ul.setAttribute('class', 'notes')
data.forEach(function(note) {
var li = document.createElement('li')
ul.appendChild(li)
li.appendChild(document.createTextNode(note.content))
})
document.getElementById('notes').appendChild(ul)
}
}
xhttp.open('GET', '/data.json', true)
xhttp.send()تفاصيل الكود ليست مهمة في الوقت الحالي ، ولكن تم تضمين بعض التعليمات البرمجية لإضفاء الإثارة على الصور والنص. سنبدأ الترميز بشكل صحيح في الجزء 1 . نموذج التعليمات البرمجية في هذا الجزء غير ذي صلة على الإطلاق بتقنيات الترميز لهذه الدورة.
قد يتساءل البعض عن سبب استخدام xhttp-object بدلاً من الجلب الحديث. هذا يرجع إلى عدم الرغبة في الدخول في الوعود على الإطلاق حتى الآن ، ولأن الكود له دور ثانوي في هذا الجزء. سنعود إلى الطرق الحديثة لتقديم الطلبات إلى الخادم في الجزء 2.
مباشرة بعد جلب علامة البرنامج النصي ، يبدأ المتصفح في تنفيذ التعليمات البرمجية.
يحدد آخر سطرين أن المتصفح يقوم بطلب HTTP GET لعنوان الخادم /data.json :
xhttp.open('GET', '/data.json', true)
xhttp.send()هذا هو الطلب السفلي الذي يظهر في علامة تبويب الشبكة.
يمكننا محاولة الانتقال إلى العنوان https://studies.cs.helsinki.fi/exampleapp/data.json مباشرة من المتصفح:
هناك نجد الملاحظات في JSON "البيانات الأولية". بشكل افتراضي ، المتصفحات القائمة على Chromium ليست جيدة جدًا في عرض بيانات JSON. يمكن استخدام الإضافات للتعامل مع التنسيق. قم بتثبيت ، على سبيل المثال ، JSONView على Chrome ، وإعادة تحميل الصفحة. تم الآن تنسيق البيانات بشكل جيد:
لذلك ، تقوم شفرة JavaScript لصفحة الملاحظات أعلاه بتنزيل بيانات JSON التي تحتوي على الملاحظات ، وتشكل قائمة نقطية من محتويات الملاحظة:
يتم ذلك عن طريق الكود التالي:
const data = JSON.parse(this.responseText)
console.log(data)
var ul = document.createElement('ul')
ul.setAttribute('class', 'notes')
data.forEach(function(note) {
var li = document.createElement('li')
ul.appendChild(li)
li.appendChild(document.createTextNode(note.content))
})
document.getElementById('notes').appendChild(ul)يقوم الكود أولاً بإنشاء قائمة غير مرتبة بعلامة ul ...
var ul = document.createElement('ul')
ul.setAttribute('class', 'notes')... ثم يضيف علامة li -tag واحدة لكل ملاحظة. فقط حقل المحتوى لكل ملاحظة يصبح محتويات علامة li-tag. لا تُستخدم الطوابع الزمنية الموجودة في البيانات الأولية لأي شيء هنا.
data.forEach(function(note) {
var li = document.createElement('li')
ul.appendChild(li)
li.appendChild(document.createTextNode(note.content))
})افتح الآن علامة التبويب Console -tab في Developer Console:
بالنقر فوق المثلث الصغير في بداية السطر ، يمكنك توسيع النص الموجود على وحدة التحكم.
ينتج هذا الإخراج على وحدة التحكم عن طريق الأمر console.log في الكود:
const data = JSON.parse(this.responseText)
console.log(data)لذلك ، بعد تلقي البيانات من الخادم ، يقوم الكود بطباعتها على وحدة التحكم.
و حدة التحكم التبويب و console.log وقيادة تصبح مألوفة جدا لك أثناء الدورة.
معالجات الأحداث ووظائف رد الاتصال
هيكل هذا الرمز غريب بعض الشيء:
var xhttp = new XMLHttpRequest()
xhttp.onreadystatechange = function() {
// code that takes care of the server response
}
xhttp.open('GET', '/data.json', true)
xhttp.send()يتم إرسال الطلب إلى الخادم في السطر الأخير ، ولكن يمكن العثور على الكود الخاص بمعالجة الاستجابة بشكل أكبر. ماذا يحدث هنا؟
xhttp.onreadystatechange = function () {على هذا الخط، وهو معالج الأحداث لهذا الحدث onreadystatechange يتم تعريف ل xhttp الكائن به الطلب. عندما تتغير حالة الكائن ، يستدعي المستعرض وظيفة معالج الحدث. يتحقق رمز الوظيفة من أن الحالة الجاهزة تساوي 4 (والتي توضح الموقف اكتملت العملية ) وأن رمز حالة HTTP للاستجابة هو 200.
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
// code that takes care of the server response
}
}آلية استدعاء معالجات الأحداث شائعة جدًا في JavaScript. تسمى وظائف معالج الأحداث وظائف رد الاتصال . لا تستدعي كود التطبيق الوظائف نفسها ، لكن بيئة وقت التشغيل - المتصفح ، تستدعي الوظيفة في الوقت المناسب ، عند وقوع الحدث .
نموذج كائن المستند أو DOM
يمكننا التفكير في صفحات HTML على أنها هياكل شجرية ضمنية.
لغة البرمجة رئيس حلقة الوصل النصي هيئة شعبة h1 شعبة ماي لي لي لي شكل إدخال إدخال
يمكن رؤية نفس الهيكل الشبيه بالشجرة في عناصر علامة تبويب وحدة التحكم .
يعتمد عمل المتصفح على فكرة تصوير عناصر HTML كشجرة.
نموذج كائن المستند ، أو DOM ، هو واجهة برمجة التطبيقات ( API ) التي تتيح التعديل البرمجي لأشجار العناصر المقابلة لصفحات الويب.
استخدمت شفرة JavaScript المقدمة في الفصل السابق واجهة برمجة تطبيقات DOM لإضافة قائمة بالملاحظات إلى الصفحة.
يُنشئ الكود التالي عقدة جديدة للمتغير ul ، ويضيف إليه بعض العقد الفرعية:
var ul = document.createElement('ul')
data.forEach(function(note) {
var li = document.createElement('li')
ul.appendChild(li)
li.appendChild(document.createTextNode(note.content))
})أخيرًا ، يرتبط فرع الشجرة لمتغير ul بمكانه الصحيح في شجرة HTML للصفحة بأكملها:
document.getElementById('notes').appendChild(ul)معالجة كائن المستند من وحدة التحكم
تسمى العقدة العليا لشجرة DOM لمستند HTML بكائن المستند . يمكننا إجراء عمليات مختلفة على صفحة الويب باستخدام DOM-API. يمكنك الوصول إلى كائن المستند عن طريق كتابة المستند في علامة تبويب وحدة التحكم:
دعنا نضيف ملاحظة جديدة إلى الصفحة من وحدة التحكم.
أولاً ، سنحصل على قائمة الملاحظات من الصفحة. القائمة موجودة في أول عنصر ul من الصفحة:
list = document.getElementsByTagName('ul')[0]ثم قم بإنشاء عنصر li جديد وأضف بعض المحتوى النصي إليه:
newElement = document.createElement('li')
newElement.textContent = 'Page manipulation from console is easy'وأضف عنصر li الجديد إلى القائمة:
list.appendChild(newElement)
على الرغم من تحديث الصفحة على متصفحك ، فإن التغييرات ليست دائمة. إذا تم إعادة تحميل الصفحة ، ستختفي الملاحظة الجديدة ، لأنه لم يتم دفع التغييرات إلى الخادم. ستعمل شفرة JavaScript التي يجلبها المتصفح دائمًا على إنشاء قائمة بالملاحظات بناءً على بيانات JSON من العنوان https://studies.cs.helsinki.fi/exampleapp/data.json .
CSS
يحتوي العنصر الرئيسي في كود HTML لصفحة الملاحظات على علامة ارتباط تحدد أن المستعرض يجب أن يجلب ورقة أنماط CSS من العنوان main.css .
Cascading Style Sheets ، أو CSS ، هي لغة ترميز تستخدم لتحديد مظهر صفحات الويب.
يبدو ملف CSS الذي تم جلبه كما يلي:
.container {
padding: 10px;
border: 1px solid;
}
.notes {
color: blue;
}يحدد الملف اثنين من محددات الفئة . تُستخدم لتحديد أجزاء معينة من الصفحة ولتحديد قواعد التصميم لتصميمها.
يبدأ تعريف محدد الفئة دائمًا بنقطة ، ويحتوي على اسم الفئة.
الفئات هي سمات يمكن إضافتها إلى عناصر HTML.
يمكن فحص سمات CSS في علامة تبويب العناصر في وحدة التحكم:
يحتوي عنصر div الأبعد على حاوية الفئة . على المجاهدين عنصر يحتوي على قائمة الملاحظات لديه الدرجة الملاحظات .
ويعرف حكم CSS أن العناصر مع الحاويات الطبقة سوف تكون الخطوط العريضة مع واسعة بكسل واحد الحدود . كما أنه يحدد حشوة 10 بكسل على العنصر. يؤدي ذلك إلى إضافة بعض المساحة الفارغة بين محتوى العنصر والحدود.
تقوم قاعدة CSS الثانية بتعيين لون نص الملاحظات باللون الأزرق.
يمكن أن تحتوي عناصر HTML أيضًا على سمات أخرى بصرف النظر عن الفئات. و شعبة عنصر يحتوي على الملاحظات لديه معرف السمة. يستخدم كود JavaScript المعرف للعثور على العنصر.
و عناصر علامة التبويب وحدة يمكن أن تستخدم لتغيير أنماط من العناصر.
لن تكون التغييرات التي تم إجراؤها على وحدة التحكم دائمة. إذا كنت تريد إجراء تغييرات دائمة ، فيجب حفظها في ورقة أنماط CSS على الخادم.
تحميل صفحة تحتوي على JavaScript - مراجعة
لنراجع ما يحدث عندما يتم فتح الصفحة https://studies.cs.helsinki.fi/exampleapp/notes في المتصفح.
- يقوم المستعرض بجلب كود HTML الذي يحدد المحتوى وهيكل الصفحة من الخادم باستخدام طلب HTTP GET.
- تؤدي الارتباطات الموجودة في كود HTML إلى قيام المتصفح أيضًا بجلب main.css لورقة أنماط CSS ...
- ... وملف شفرة JavaScript main.js
- يقوم المتصفح بتنفيذ كود JavaScript. يقوم الكود بإجراء طلب HTTP GET على العنوان https://studies.cs.helsinki.fi/exampleapp/data.json ، والذي يقوم بإرجاع الملاحظات على هيئة بيانات JSON.
- عندما يتم جلب البيانات ، ينفذ المتصفح معالج الأحداث ، والذي يعرض الملاحظات على الصفحة باستخدام DOM-API.
النماذج و HTTP POST
بعد ذلك ، دعنا نفحص كيفية إضافة ملاحظة جديدة.
تحتوي صفحة الملاحظات على عنصر نموذج .
عند النقر فوق الزر الموجود في النموذج ، سيرسل المتصفح إدخال المستخدم إلى الخادم. دعنا نفتح علامة تبويب الشبكة ونرى كيف يبدو إرسال النموذج:
والمثير للدهشة أن إرسال النموذج يتسبب في خمسة طلبات HTTP. الأول هو نموذج إرسال الحدث. دعنا نكبرها:
إنه طلب HTTP POST لعنوان الخادم new_note . ويستجيب الخادم مع رمز حالة HTTP 302. هذا هو إعادة توجيه URL ، والتي الخادم يطلب المتصفح للقيام HTTP GET طلب جديد إلى العنوان المحدد في رأس في الموقع - عنوان الملاحظات .
لذلك ، يقوم المستعرض بإعادة تحميل صفحة الملاحظات. يتسبب إعادة التحميل في ثلاثة طلبات HTTP أخرى: جلب ورقة الأنماط (main.css) ، ورمز JavaScript (main.js) ، والبيانات الأولية للملاحظات (data.json).
تعرض علامة تبويب الشبكة أيضًا البيانات المقدمة مع النموذج:
وقد سمات العلامة نموذج العمل و طريقة ، والتي تحدد أن اعتماد النموذج يتم كما طلب HTTP POST إلى عنوان new_note .
الكود الموجود على الخادم المسؤول عن طلب POST بسيط للغاية (ملاحظة: هذا الرمز موجود على الخادم ، وليس على كود JavaScript الذي جلبه المتصفح):
app.post('/new_note', (req, res) => {
notes.push({
content: req.body.note,
date: new Date(),
})
return res.redirect('/notes')
})يتم إرسال البيانات مثل الجسم للطلب POST.
الخادم يمكن الوصول إلى البيانات عن طريق الوصول إلى req.body مجال الكائن طلب مسا .
يقوم الخادم بإنشاء كائن ملاحظة جديد ، وإضافته إلى مصفوفة تسمى الملاحظات .
notes.push({
content: req.body.note,
date: new Date(),
})تحتوي كائنات الملاحظة على حقلين: المحتوى الذي يحتوي على المحتوى الفعلي للملاحظة ، والتاريخ الذي يحتوي على تاريخ ووقت إنشاء الملاحظة.
لا يقوم الخادم بحفظ الملاحظات الجديدة في قاعدة البيانات ، لذلك تختفي الملاحظات الجديدة عند إعادة تشغيل الخادم.
أجاكس
تتبع صفحة الملاحظات الخاصة بالتطبيق أسلوب تطوير الويب في أوائل التسعينيات و "يستخدم Ajax". على هذا النحو ، فهي على قمة موجة تكنولوجيا الويب في أوائل عام 2000.
AJAX (Asynchronous JavaScript and XML) هو مصطلح تم تقديمه في فبراير 2005 على خلفية التطورات في تقنية المستعرض لوصف نهج ثوري جديد مكّن من جلب المحتوى إلى صفحات الويب باستخدام JavaScript المضمنة في HTML ، دون الحاجة إلى إعادة عرض صفحة.
قبل عصر AJAX ، كانت جميع صفحات الويب تعمل مثل تطبيق الويب التقليدي الذي رأيناه سابقًا في هذا الفصل. تم جلب جميع البيانات المعروضة على الصفحة باستخدام رمز HTML الذي تم إنشاؤه بواسطة الخادم.
تستخدم صفحة الملاحظات AJAX لجلب بيانات الملاحظات. لا يزال تقديم النموذج يستخدم الآلية التقليدية لتقديم نماذج الويب.
تعكس عناوين URL الخاصة بالتطبيق الأوقات القديمة الخالية من الهموم. يتم جلب بيانات JSON من عنوان url https://studies.cs.helsinki.fi/exampleapp/data.json ويتم إرسال الملاحظات الجديدة إلى عنوان URL https://studies.cs.helsinki.fi/exampleapp/new_note .
في الوقت الحاضر ، لن يتم اعتبار عناوين URL مثل هذه مقبولة ، لأنها لا تتبع الاصطلاحات المعترف بها عمومًا لواجهات برمجة تطبيقات RESTful ، والتي سننظر فيها أكثر في الجزء 3
الشيء الذي يطلق عليه AJAX أصبح الآن شائعًا لدرجة أنه يعتبر أمرًا مفروغًا منه. لقد تلاشى المصطلح ، ولم يسمع به الجيل الجديد.
تطبيق صفحة واحدة
في تطبيقنا كمثال ، تعمل الصفحة الرئيسية مثل صفحة الويب التقليدية: كل المنطق موجود على الخادم ، والمستعرض يعرض HTML فقط حسب التعليمات.
صفحة الملاحظات تعطي بعض المسؤولية ، إنشاء كود HTML للملاحظات الموجودة ، إلى المستعرض. يعالج المتصفح هذه المهمة عن طريق تنفيذ كود JavaScript الذي جلبه من الخادم. يجلب الكود الملاحظات من الخادم كبيانات JSON ويضيف عناصر HTML لعرض الملاحظات على الصفحة باستخدام DOM-API .
في السنوات الأخيرة ، ظهر أسلوب التطبيق أحادي الصفحة (SPA) لإنشاء تطبيقات الويب. لا تجلب مواقع الويب ذات النمط SPA جميع صفحاتها بشكل منفصل عن الخادم كما يفعل نموذج التطبيق الخاص بنا ، ولكنها بدلاً من ذلك تشتمل على صفحة HTML واحدة يتم جلبها من الخادم ، ويتم التعامل مع محتوياتها باستخدام JavaScript يتم تنفيذه في المتصفح.
صفحة الملاحظات في تطبيقنا تحمل بعض التشابه مع تطبيقات نمط SPA ، لكنها ليست موجودة تمامًا بعد. على الرغم من تشغيل منطق تقديم الملاحظات على المتصفح ، لا تزال الصفحة تستخدم الطريقة التقليدية لإضافة ملاحظات جديدة. يتم إرسال البيانات إلى الخادم مع إرسال النموذج ، ويوجه الخادم المستعرض لإعادة تحميل صفحة Notes بإعادة توجيه .
يمكن العثور على إصدار تطبيق من صفحة واحدة من نموذج التطبيق الخاص بنا من https://studies.cs.helsinki.fi/exampleapp/spa . للوهلة الأولى ، يبدو التطبيق تمامًا مثل التطبيق السابق. رمز HTML متطابق تقريبًا ، لكن ملف JavaScript مختلف ( spa.js ) وهناك تغيير طفيف في كيفية تعريف علامة النموذج:
لا يحتوي النموذج على سمات إجراء أو أسلوب لتحديد كيفية ومكان إرسال بيانات الإدخال.
افتح علامة التبويب الشبكة وقم بإفراغها. عندما تقوم الآن بإنشاء ملاحظة جديدة ، ستلاحظ أن المتصفح يرسل طلبًا واحدًا فقط إلى الخادم.
يحتوي طلب POST على العنوان new_note_spa على الملاحظة الجديدة كبيانات JSON التي تحتوي على محتوى الملاحظة ( المحتوى ) والطابع الزمني ( التاريخ ):
{
content: "single page app does not reload the whole page",
date: "2019-05-25T15:15:59.905Z"
}و نوع المحتوى رأس طلب يحكي خادم البيانات الواردة تتمثل في تنسيق JSON.
بدون هذا العنوان ، لن يعرف الخادم كيفية تحليل البيانات بشكل صحيح.
يستجيب الخادم برمز الحالة 201 الذي تم إنشاؤه . هذه المرة لا يطلب الخادم إعادة التوجيه ، ويبقى المتصفح على نفس الصفحة ، ولا يرسل أي طلبات HTTP أخرى.
لا يرسل إصدار SPA من التطبيق بيانات النموذج بالطريقة التقليدية ، ولكنه يستخدم بدلاً من ذلك رمز JavaScript الذي جلبه من الخادم. سننظر في هذا الرمز قليلاً ، على الرغم من أن فهم كل تفاصيله ليس مهمًا حتى الآن.
var form = document.getElementById('notes_form')
form.onsubmit = function(e) {
e.preventDefault()
var note = {
content: e.target.elements[0].value,
date: new Date(),
}
notes.push(note)
e.target.elements[0].value = ''
redrawNotes()
sendToServer(note)
}يوجه الأمر document.getElementById ('notes_form') التعليمات البرمجية لجلب عنصر النموذج من الصفحة ، ولتسجيل معالج حدث للتعامل مع حدث إرسال النموذج. يستدعي معالج الحدث على الفور الطريقة e.preventDefault () لمنع المعالجة الافتراضية لإرسال النموذج. سترسل الطريقة الافتراضية البيانات إلى الخادم وتتسبب في طلب GET جديد ، وهو ما لا نريد أن يحدث.
ثم يقوم معالج الحدث بإنشاء ملاحظة جديدة ، وإضافتها إلى قائمة الملاحظات باستخدام الأمر notes.push (ملاحظة) ، وإعادة عرض قائمة الملاحظات على الصفحة وإرسال الملاحظة الجديدة إلى الخادم.
رمز إرسال الملاحظة إلى الخادم هو كما يلي:
var sendToServer = function(note) {
var xhttpForPost = new XMLHttpRequest()
// ...
xhttpForPost.open('POST', '/new_note_spa', true)
xhttpForPost.setRequestHeader(
'Content-type', 'application/json'
)
xhttpForPost.send(JSON.stringify(note))
}يحدد الرمز إرسال البيانات مع طلب HTTP POST ونوع البيانات هو JSON. يتم تحديد نوع البيانات برأس نوع المحتوى . ثم يتم إرسال البيانات كسلسلة JSON.
رمز التطبيق متاح على https://github.com/mluukkai/example_app . تجدر الإشارة إلى أن التطبيق يهدف فقط إلى توضيح مفاهيم الدورة. تتبع الكود أسلوبًا ضعيفًا للتطوير إلى حد ما ، ويجب عدم استخدامه كمثال عند إنشاء تطبيقاتك الخاصة. وينطبق الشيء نفسه على عناوين URL المستخدمة. عنوان URL new_note_spa ، الذي يتم إرسال الملاحظات الجديدة إليه ، لا يلتزم بأفضل الممارسات الحالية.
مكتبات جافا سكريبت
يتم تنفيذ نموذج التطبيق باستخدام ما يسمى بجافا سكريبت الفانيليا ، باستخدام DOM-API و JavaScript فقط لمعالجة بنية الصفحات.
بدلاً من استخدام JavaScript و DOM-API فقط ، غالبًا ما تُستخدم مكتبات مختلفة تحتوي على أدوات يسهل العمل معها مقارنةً بـ DOM-API لمعالجة الصفحات. واحدة من هذه المكتبات هي jQuery التي تحظى بشعبية كبيرة .
تم تطوير jQuery مرة أخرى عندما اتبعت تطبيقات الويب بشكل أساسي النمط التقليدي للخادم الذي ينشئ صفحات HTML ، والتي تم تحسين وظائفها على جانب المتصفح باستخدام JavaScript مكتوب باستخدام jQuery. أحد أسباب نجاح jQuery هو ما يسمى بالتوافق عبر المتصفحات. تعمل المكتبة بغض النظر عن المتصفح أو الشركة التي قامت بإنشائها ، لذلك لم تكن هناك حاجة إلى حلول خاصة بالمتصفح. في الوقت الحاضر ، لا يعد استخدام jQuery مبررًا نظرًا لتطور Vanilla JS ، وتدعم المتصفحات الأكثر شيوعًا الوظائف الأساسية بشكل جيد.
أدى ظهور تطبيق الصفحة الواحدة إلى ظهور العديد من الطرق "الحديثة" لتطوير الويب أكثر من استخدام jQuery. كان BackboneJS هو المفضل لدى الموجة الأولى من المطورين . بعد إطلاقه في عام 2012 ، سرعان ما أصبح AngularJS من Google المعيار الفعلي لتطوير الويب الحديث.
ومع ذلك ، تراجعت شعبية Angular في أكتوبر 2014 بعد أن أعلن فريق Angular أن دعم الإصدار 1 سينتهي ، وأن Angular 2 لن تكون متوافقة مع الإصدار الأول. Angular 2 والإصدارات الأحدث لم تكن موضع ترحيب كبير.
الأداة الأكثر شيوعًا حاليًا لتنفيذ منطق جانب المتصفح لتطبيقات الويب هي مكتبة React على Facebook . خلال هذه الدورة ، سنتعرف على React ومكتبة Redux ، والتي تُستخدم كثيرًا معًا.
تبدو حالة React قوية ، لكن عالم JavaScript يتغير باستمرار. على سبيل المثال ، في الآونة الأخيرة ، استحوذ الوافد الجديد - VueJS - على بعض الاهتمام.
تطوير الويب الكامل المكدس
ماذا يعني اسم الدورة ، تطوير الويب الكامل المكدس ؟ المكدس الكامل عبارة عن كلمة طنانة يتحدث عنها الجميع ، بينما لا أحد يعرف حقًا ما تعنيه. أو على الأقل ، لا يوجد تعريف متفق عليه للمصطلح.
عمليا ، تحتوي جميع تطبيقات الويب (على الأقل) على "طبقتين": المتصفح ، الذي يكون أقرب إلى المستخدم النهائي ، هو الطبقة العليا ، والخادم هو الطبقة السفلية. غالبًا ما توجد أيضًا طبقة قاعدة بيانات أسفل الخادم. لذلك يمكننا التفكير في بنية تطبيق الويب كنوع من مكدس الطبقات.
في كثير من الأحيان ، نتحدث أيضًا عن الواجهة الأمامية والخلفية . المتصفح هو الواجهة الأمامية ، وجافا سكريبت التي تعمل على المتصفح هي كود الواجهة الأمامية. الخادم من ناحية أخرى هو الخلفية.
في سياق هذه الدورة ، يعني تطوير الويب المكدس الكامل أننا نركز على جميع أجزاء التطبيق: الواجهة الأمامية والخلفية وقاعدة البيانات. في بعض الأحيان ، يُنظر إلى البرنامج الموجود على الخادم ونظام التشغيل الخاص به على أنهما أجزاء من المكدس ، لكننا لن ندخل في ذلك.
سنقوم بتشفير الواجهة الخلفية باستخدام JavaScript ، باستخدام بيئة تشغيل Node.js. إن استخدام نفس لغة البرمجة على طبقات متعددة من المكدس يمنح تطوير الويب المكدس بعدًا جديدًا بالكامل. ومع ذلك ، ليس من متطلبات تطوير الويب المكدس الكامل استخدام نفس لغة البرمجة (JavaScript) لجميع طبقات المكدس.
كان من المعتاد أن يتخصص المطورون في طبقة واحدة من المكدس ، على سبيل المثال الواجهة الخلفية. كانت التقنيات الموجودة في الواجهة الخلفية والواجهة مختلفة تمامًا. مع اتجاه المكدس الكامل ، أصبح من الشائع للمطورين أن يكونوا بارعين في جميع طبقات التطبيق وقاعدة البيانات. في كثير من الأحيان ، يجب أن يمتلك مطورو المكدس الكامل أيضًا ما يكفي من مهارات التكوين والإدارة لتشغيل تطبيقاتهم ، على سبيل المثال ، في السحابة.
تعب جافا سكريبت
تطوير الويب المكدس الكامل يمثل تحديًا من نواح كثيرة. تحدث الأشياء في العديد من الأماكن في وقت واحد ، وتصحيح الأخطاء أصعب قليلاً من تطبيقات سطح المكتب العادية. لا تعمل JavaScript دائمًا كما تتوقع (مقارنة بالعديد من اللغات الأخرى) ، والطريقة غير المتزامنة التي تعمل بها بيئات وقت التشغيل تسبب كل أنواع التحديات. يتطلب الاتصال عبر الويب معرفة بروتوكول HTTP. يجب على المرء أيضًا التعامل مع قواعد البيانات وإدارة الخادم والتكوين. سيكون من الجيد أيضًا معرفة ما يكفي من CSS لجعل التطبيقات على الأقل جيدة المظهر إلى حد ما.
يتطور عالم JavaScript سريعًا ، مما يجلب معه مجموعة من التحديات الخاصة به. الأدوات والمكتبات واللغة نفسها قيد التطوير المستمر. بدأ البعض يتعب من التغيير المستمر ، وصاغ مصطلحًا له: تعب جافا سكريبت . اطلع على كيفية إدارة إجهاد JavaScript عند المصادقة 0 أو إجهاد JavaScript على المتوسط .
ستعاني من إرهاق JavaScript بنفسك خلال هذه الدورة. لحسن الحظ بالنسبة لنا ، هناك عدة طرق لتسهيل منحنى التعلم ، ويمكننا البدء بالبرمجة بدلاً من التكوين. لا يمكننا تجنب التكوين تمامًا ، ولكن يمكننا المضي قدمًا بمرح في الأسابيع القليلة المقبلة مع تجنب أسوأ ما في جحيم التكوين.
تعليقات
إرسال تعليق