البدء

في الجزء 0 من هذا المقرر، تتبّعنا تاريخ تطبيقات الويب من العرض التقليدي من جهة الخادم إلى تطبيقات الصفحة الواحدة (SPAs). وركّز ما تبقّى من المقرر على نموذج SPA: واجهة أمامية بـReact تعمل في المتصفح وتتواصل مع واجهة خلفية منفصلة بـExpress عبر REST أو GraphQL API.

هذه البنية تعمل جيداً، لكن لها بعض العيوب. يستقبل المستخدم صفحة HTML شبه فارغة وعليه انتظار تحميل حزمة JavaScript واكتمال طلبات API قبل أن يرى أي محتوى. وقد تجد محركات البحث صعوبة في فهرسة صفحات تُعرض بالكامل في المتصفح. كما أن صيانة قاعدتي شيفرة منفصلتين، واحدة للواجهة الأمامية وأخرى للواجهة الخلفية، تضيف عبئاً.

عاد العرض من جهة الخادم إلى الواجهة كحل لهذه المشكلات. فأنتج الخادم HTML جاهزاً يمكن للمتصفح عرضه فوراً، ما يحسّن الأداء المُدرَك ويجعل فهرسة الصفحات أسهل. والجديد أن هذا لم يعد الأسلوب القديم المتمثل في إرجاع HTML كامل من معالج مسار Express. فالصيغة الحديثة مبنية على مكوّنات React من جهة الخادم (React Server Components)، وهو نموذج جديد يتيح لمكوّنات React العمل على الخادم وبثّ HTML إلى المتصفح، مع إتاحة تفاعلية غنية من جهة العميل حيث تلزم.

Next.js هو الإطار الرائد لبناء تطبيقات React بالعرض من جهة الخادم. فهو يوفّر بيئة متكاملة بإحكام تعيش فيها الواجهة الأمامية والواجهة الخلفية في قاعدة الشيفرة نفسها. ويتولى الإطار توجيه المسارات وجلب البيانات ومعالجة النماذج والمصادقة والنشر، كما تدير React نفسها الحدّ الفاصل بين شيفرة الخادم وشيفرة العميل بدلاً من طبقة API منفصلة.

في هذا الجزء، نبني تطبيق full stack بـNext.js من الصفر. نبدأ بالتوجيه ومكوّنات الخادم، ثم ننتقل إلى قواعد البيانات والمصادقة، وننتهي بالتنسيق ومعالجة الأخطاء. وعلى الطريق، سنرى كيف تنتقل أنماط كثيرة من الأجزاء السابقة من المقرر، مثل الخدمات والتحقق من النماذج، إلى عالم Next.js.

المتطلبات المسبقة

الأجزاء 1-5 و9 من Full Stack Open، وإلمام أساسي بـSQL كما هو مشروح في Full Stack Open: قواعد البيانات العلائقية.

المساعدة في التمارين أو الأمور العملية للمقرر

للمقرر مجموعة Discord نناقش فيها كل ما يتعلق بالمقرر. والدعم متاح على مدار الساعة تقريباً، والنقاش باللغتين الإنجليزية والفنلندية.

انضم إلى قناة Full stack open على Discord: https://study.cs.helsinki.fi/discord/join/fullstack,

جميع التعليقات غير اللائقة أو المهينة أو التمييزية على القناة محظورة وستؤدي إلى اتخاذ إجراء ضد صاحب التعليق.

تسليم التمارين

يحتوي هذا الجزء من المقرر على 26 تمريناً، ويجب إكمالها جميعاً للحصول على درجة.

بالنسبة للتمارين، ينبغي أن تنشئ مستودع GitHub. إذا كنت تستخدم مستودعاً خاصاً، أضف مستخدم GitHub mluukkai كمساهم.

في نهاية الفصل 4، هناك تمرين يُفترض أن تشغّل فيه اختبارات آلية تتحقق من صحة حلولك.

تُراجع تمارينك بعد تسليم التمرين الأخير، وإذا كان كل شيء مقبولاً إلى حد ما، ستُقيَّم وستتاح لك الشهادة والنقاط الجامعية.

تذكّر ألا تغش في التمارين! إذا سلّم عدة طلاب، مثلاً، الشيفرة نفسها، تُعالج المسألة وفقاً لـسياسة الانتحال في جامعة هلسنكي.

قفل الفصل

بعد إكمال جميع تمارين الفصل، يجب عليك قفل الفصل قبل الانتقال إلى الفصل التالي. وتذكّر أنه بعد قفل الفصل لن تتمكن من تسليم أي تمارين أخرى له، لذا لا تقفله إلا عندما ينتهي كل شيء.

الحصول على نقاط ECTS والشهادة

بعد إكمال التمارين وتقييمها، يمكنك الحصول على نقاط ECTS كما يلي

طلاب الدرجات في جامعة هلسنكي وطلاب التبادل

1. سجّل مباشرة عبر حسابك في Sisu (Sisu: هيكل الدراسات).
2. أكمل جميع التمارين المطلوبة.

آخرون

1. أكمل جميع التمارين المطلوبة.
2. انتقل إلى الصفحة الرئيسية للمقرر.
3. مرّر للأسفل حتى ترى عنصراً يقول تهانينا!
4. اضغط زر تسجيل .
5. املأ نموذج التسجيل في الجامعة المفتوحة (جامعة هلسنكي). استخدم عنوان البريد الإلكتروني نفسه الذي استخدمته لإكمال المقرر.
6. عادةً ما تُسجَّل النقاط في سجل الدراسة بجامعة هلسنكي خلال يومين من التسجيل.

عادةً ما يستغرق تسجيل النقاط يومين.

شهادة المقرر متاحة أيضاً في الصفحة الرئيسية للمقرر.

التحسينات والملاحظات على مادة المقرر

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

في حالة الأخطاء المطبعية مثلاً، يُفضَّل اختيار تحسين المادة الذي يجعل المادة "قابلة للتحرير"، ويمكنك إرسال اقتراحات التحسين للموافقة عليها.

استخدام LLM:s

أصبحت نماذج اللغة الكبيرة أدوات قوية في تطوير البرمجيات، ووكيلات البرمجة (coding agents) تدفع هذه القدرات إلى أبعد من ذلك. يمكنها أن تجعل مقرراً كهذا يبدو بلا جهد تقريباً — لكن الاعتماد عليها بإفراط له ثمن. ولاستخدام الذكاء الاصطناعي بفعالية، لا تزال بحاجة إلى إلمام راسخ بالأساسيات. لهذا أوصي باستخدام الوكلاء باعتدال، لا سيما في الشروح وتصحيح الأخطاء، حتى تبني فهماً حقيقياً بدلاً من أن توكل التعلّم.

نهج عملي يضع التعلّم أولاً لاستخدام الذكاء الاصطناعي في هذا المقرر:

قبل استخدام الذكاء الاصطناعي

• جرّب بنفسك أولاً: اكتب حلاً أو على الأقل ارسم مقاربتك.
• حدّد المشكلة بدقة: تعرّف على رسالة الخطأ بالتحديد أو المفهوم غير الواضح أو المقايضة التصميمية التي علقت عندها.

كيف تستخدم الذكاء الاصطناعي بحكمة

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

ما يجب تجنبه

• نسخ الحلول الكاملة دون فهمها.
• الطلبات الواسعة جداً ("اكتب الواجب كاملاً") التي تختصر تعلّمك.
• الاعتماد على إجابة واحدة دون تحقق أو اختبارات.

الخلاصة: اجعل الذكاء الاصطناعي شارحك ومراجعك وشريكك في تصحيح الأخطاء، لا بديلاً عن التفكير والتدرّب.

عن المادة

طُوّرت مادة هذا الجزء على يد Matti Luukkainen.

هذه المادة مرخّصة بموجب ترخيص Creative Commons BY-NC-SA 3.0، لذا يمكنك استخدام المادة وتوزيعها بحرية، ما دمت تذكر المنشئين الأصليين. وإذا أجريت تغييرات على المادة وأردت توزيع النسخة المعدّلة، فيجب ترخيصها بالترخيص نفسه. ويُحظر استخدام المادة لأغراض تجارية دون إذن.