تعلم Svelte: دورة برمجة
تعلم Svelte: دورة برمجة — تعلّم Svelte وSvelteKit باستخدام محرّر مباشر مع عرض المخرجات المُجمَّعة بجانبه
تعلم Svelte: دورة برمجة هو تطبيق مجاني لنظامَي iOS وAndroid يتيح لك تعلّم Svelte وSvelteKit على هاتفك. اكتب المكوّنات في محرّر مباشر مع معاينة، وشاهد JavaScript الذي يحوّلها إليه المصرّف، وتقدّم عبر 41 دورة، بدءًا من أول قيمة تفاعلية لك وصولًا إلى تطبيق كامل المكدس منشور، مع AI Mentor إلى جانبك.
- السعر
- مجاني، مع ترقية Pro
- المنصات
- iOS وAndroid
- اللغات
- 22
- التصنيف العمري
- 4+
- يتطلب
- iOS 15.1 أو أحدث
لا شيء مما يظهر على تلك الشاشة يشغّل Svelte. إنها تشغّل ما كتبه Svelte.
يعرض الدرس الأول في التطبيق مكوّنًا من تسعة أسطر بجوار JavaScript الذي أنشأه المصرّف له. اضغط على +1، وستضيء الأسطر التي تُنفَّذ: إبطال واحد، وقيمة واحدة أُعيد حسابها، وعقدتا نص تغيّرتا، من دون المساس بأي شيء آخر. هذه هي الفكرة الأساسية وراء الإطار، معروضة قبل شرحها.
ما هو
تعلم Svelte: دورة برمجة هو تطبيق مجاني لنظامَي iOS وAndroid يعلّم Svelte وSvelteKit من خلال 41 دورة و163 درسًا، مصنّفة من المبتدئ إلى المتقدم. يبدأ بعرض توضيحي يضع مكوّنًا بجوار JavaScript المُجمَّع الخاص به، ثم يتناول التفاعلية، وprops، وstores، والانتقالات، وSvelte 5 runes، وتوجيه SvelteKit، وتحميل البيانات، وإجراءات النماذج، والنشر. ويضم محرّرًا مباشرًا مع معاينة وAI Mentor.
داخل التطبيق
كيف يبدو
الدورة
ما الذي تغطيه دورة Svelte
41 دورة و163 درسًا من قائمة دورات التطبيق الخاصة، بمستويات من A1 إلى C1، وتنتهي بمشروع SvelteKit متكامل من الواجهة إلى الخادم.
المكوّنات الأولى
ما هي Svelte ولماذا تتبع نهجًا مختلفًا، وإعداد مشروع، وكتابة أول مكوّن لك باستخدام متغيرات تفاعلية.
Props والقوالب والأحداث والربط
تمرير Props، والعبارات الشرطية وحلقات each في الترميز، وأحداث DOM والأحداث المخصّصة، والربط ثنائي الاتجاه باستخدام توجيهات bind:.
دورة الحياة وStores وContext
onMount وonDestroy، وwritable وreadable وderived وStores مخصّصة، وslots وcomposition، وContext API.
الانتقالات والرسوم المتحركة وActions
توجيهات الانتقال، وتوجيه animate، وActions لسلوك DOM القابل لإعادة الاستخدام، والانتقالات المخصّصة، وStores الحركة spring وtweened.
أساسيات SvelteKit
التوجيه والصفحات المعتمدة على الملفات، ودوال load، والتخطيطات المتقدمة، وإجراءات النماذج، ومسارات API، وserver hooks، وصفحات الأخطاء.
Runes في Svelte 5
مقدمة إلى runes وProps وsnippets، وrunes متقدمة، ونظرة أعمق على طريقة عمل التفاعلية في Svelte.
SvelteKit في بيئة الإنتاج
SSR وprerendering، والبث، والأداء، وSEO ووسوم meta، والأمان، وأنماط auth، وadapters، والنشر.
الاختبار والتطوير المتكامل
اختبارات الوحدة باستخدام Vitest، واختبارات من البداية إلى النهاية باستخدام Playwright، والمكتبات التابعة لجهات خارجية، وإدارة الحالة على نطاق واسع، وتطبيق SvelteKit متكامل من الواجهة إلى الخادم.
كيف يعمل
كيف تسير الجلسة
ينظّم التطبيق مسارًا يبدأ من قيمة تفاعلية واحدة وينتهي بتطبيق قابل للنشر، ويمزج كل توقّف فيه بين القراءة وتجربة شيء عملي.
شاهد مخرجات المصرّف أولًا
يضع العرض التوضيحي الافتتاحي مكوّنًا صغيرًا بجوار JavaScript الذي يُجمَّع إليه. وقد أُنشئ الجزء المُجمَّع مسبقًا ومضمّن داخل التطبيق، لذلك يعمل العرض التوضيحي من دون اتصال.
عدّل مكوّنًا وعاينه
تفتح الدروس محرّرًا يضم علامات تبويب لـ HTML وCSS وJavaScript، وزر تشغيل يعرض المكوّن في معاينة. وتحمّل المعاينة مصرّف Svelte عبر الشبكة، لذا تحتاج إلى اتصال.
تحقّق من ترسّخ ما تعلّمته
يأتي بعد كل موضوع اختبار وتحديات برمجية، ويمكن لـ AI Mentor شرح مفهوم أو اقتراح مسار تعلّم أو اختبارك في إحدى الدورات. ويضيف Weekly Code Challenge جولة تنافسية.
ماذا يتضمن
ما يقدّمه التطبيق
41
دورات، من A1 إلى C1
163 درسًا موزعة على 41 دورة، بدءًا من إعداد Svelte وأول مكوّن لك، وصولًا إلى stores والانتقالات وتوجيه SvelteKit وhooks وSvelte 5 runes والاختبار ومشروع التخرّج الكامل المكدس.
مُجمَّع
مكوّن بجوار شيفرته المُجمَّعة
يعرض العرض التوضيحي عند التشغيل الأول المصدر وJavaScript المُنشأ معًا، ويحصي عقد النص التي جرى تحديثها مقابل العناصر التي أُعيد إنشاؤها، لتصبح كلفة التحديث شيئًا يمكنك قراءته مباشرة على الشاشة.
المعاينة
محرّر مباشر مع معاينة
اكتب الترميز والأنماط والبرنامج النصي في علامات تبويب منفصلة، واعرض المكوّن على الهاتف. تستخدم المعاينة مصرّف Svelte 4.2.19، لذلك قد لا تظهر المعاينة للشيفرة المكتوبة باستخدام Svelte 5 runes، ومن الأفضل قراءتها ومتابعتها.
AI
AI Mentor
اطلب من علامة تبويب الدردشة المفاهيم الأساسية لدورة، أو نصائح للتعلّم بشكل أسرع، أو اختبارًا، أو مسارًا شخصيًا، أو اسأل عن خطأ لا يمكنك فهمه.
أسبوعي
Weekly Code Challenge
جولة تحدٍّ دورية للتنافس بالتوازي مع الدروس، مع سلاسل إنجاز، وتتبع للتقدّم، وتذكيرات للحفاظ على روتين مستمر.
الاختبار
شهادة إتمام
اجتز الاختبار النهائي، وستحمل الشهادة اسمك، وهي دليل على العمل المنجز وليست مؤهلًا معتمدًا.
الخلفية
ما هو Svelte، وكيف يختلف عن الطرق الأخرى لبناء واجهة ويب؟
Svelte هو إطار لبناء واجهات المستخدم تُجمَّع فيه المكوّنات مسبقًا إلى JavaScript عادي يحدّث الصفحة مباشرة، بدلًا من إرسال بيئة تشغيل كبيرة تحدد التغييرات داخل المتصفح. المكوّن ملف واحد يضم الترميز والأنماط والبرنامج النصي، ويكفي إسناد مثل count += 1 لتحديث الشاشة. أما SvelteKit فهو إطار التطبيقات المبني فوقه، ويضيف التوجيه القائم على الملفات، وتحميل البيانات من جهة الخادم، ومعالجة النماذج، ومحوّلات للنشر. والنتيجة العملية للمتعلّم هي قدر أقل من التعليمات البرمجية المتكررة، ومسافة أقصر بين الشيفرة وما يظهر على الصفحة.
التفاعلية وقت الترجمةالإسناد هو الحالة
في Svelte، يعيد المصرّف كتابة الإسناد العادي إلى الشيفرة التي تحدّث الأجزاء المتأثرة من الصفحة. وتعيد عبارة معنونة تبدأ بـ $: حساب قيمة كلما تغيّرت القيم التي تقرؤها، لذلك لا تحتاج البيانات المشتقة إلى دوال مساعدة.
Storesحالة مشتركة بين المكوّنات
يحتفظ writable store بقيمة يمكن للعديد من المكوّنات الاشتراك فيها، وتؤدي إضافة $ إلى بداية اسمه إلى اشتراك تلقائي. وتبني derived stores وcustom stores على ذلك عندما تحتاج الحالة إلى حسابها أو تغليفها.
Runesصياغة Svelte 5
يستبدل Svelte 5 جزءًا كبيرًا من سحر المصرّف السابق بدوال صريحة مثل $state و$derived و$props، إلى جانب snippets للترميز القابل لإعادة الاستخدام. ويُستخدم كلا الأسلوبين في مشاريع حقيقية، ولذلك يعلّم التطبيق النموذج الأصلي ونموذج runes في دورتين منفصلتين.
SvelteKitالتوجيه والبيانات والنشر
يصبح ملف مثل +page.svelte مسارًا، وتجلب دالة load البيانات قبل عرض الصفحة، وتتولى form actions معالجة عمليات الإرسال على الخادم، بينما يجهّز adapter النتيجة لاستضافتها على مضيف ثابت أو خادم Node أو منصة serverless.
الملاءمة
لمن يناسب — ولمن لا يناسب
يناسبك إذا كنت
- هل تريد تعلّم Svelte أو SvelteKit في جلسات قصيرة بدلًا من دورات الفيديو الطويلة؟
- هل تعرف بعض HTML وJavaScript وتريد معرفة ما الذي يتغير عند استخدام إطار عمل يعتمد على المصرّف أولًا؟
- هل يثير فضولك أن تعرف كيف تعمل التحديثات التفاعلية، وتفضّل قراءة الكود المُولّد بدلًا من قبول الأمر كما هو؟
- هل تريد مسارًا يصل إلى التوجيه وتحميل البيانات وauth والنشر، وليس المكوّنات فقط؟
- هل تحب أن تسأل مرشد الذكاء الاصطناعي عن سبب تصرّف جزء من الكود بالطريقة التي يتصرّف بها؟
ليس الأداة المناسبة لك إذا كنت
- هل تريد تشغيل كود runes في Svelte 5 ضمن المعاينة، التي تستخدم المصرّف Svelte 4.2.19؟
- هل تحتاج إلى إنشاء مشروع SvelteKit كامل ونشره من الهاتف، مع أن ذلك لا يزال يتطلب حاسوبًا محمولًا؟
- هل تتوقع أن يكون كل شيء مجانيًا؟ الدورة الأولى مجانية، وPro تفتح بقية الدورات
- هل لم يسبق لك رؤية HTML أو JavaScript وتريد دورة برمجة عامة قبل تعلّم إطار عمل؟
الأسئلة
الأسئلة الشائعة
كيف يمكنني تعلّم Svelte على الهاتف؟
اختر مسارًا يمزج بين القراءة وتشغيل الكود، لأن Svelte أسهل في الفهم عندما تغيّر قيمة وتراقب استجابة الصفحة. تبدأ تعلم Svelte: دورة برمجة بعرض توضيحي للمخرجات المصرّفة، ثم تمنحك دروسًا مع محرّر HTML وCSS وJavaScript، ومعاينة ومرشد ذكاء اصطناعي. ويمكنك البدء مجانًا على iOS وAndroid.
هل يصعب تعلّم Svelte على المبتدئ؟
غالبًا ما تُعد Svelte سهلة نسبيًا، لأن المكوّنات تبدو مثل HTML وCSS وJavaScript العادية، ولأن إسنادًا واحدًا يحدّث الشاشة. وتظهر الأجزاء الصعبة لاحقًا، مع Stores ودورة الحياة، وتقسيم SvelteKit بين الخادم والعميل، والانتقال إلى runes في Svelte 5. تصنّف تعلم Svelte: دورة برمجة دوراتها الـ41 من A1 إلى C1، بحيث تأتي هذه الموضوعات بالترتيب.
ما هي SvelteKit، وهل يعلّمها التطبيق؟
SvelteKit هي إطار التطبيقات الخاص بـSvelte، وتضيف التوجيه المعتمد على الملفات، وتحميل البيانات على الخادم، وإجراءات النماذج، وhooks، وadapters للنشر. تتضمن تعلم Svelte: دورة برمجة دورات مخصّصة لتوجيه وصفحات SvelteKit، وتحميل البيانات، وإجراءات النماذج، ومسارات API، وhooks، ومعالجة الأخطاء، وSSR وprerendering، والبث، والأمان، وadapters.
هل يغطي التطبيق runes في Svelte 5؟
نعم. تتضمن تعلم Svelte: دورة برمجة دورات عن مقدمة إلى runes، وProps وsnippets، وrunes المتقدمة. وتُصرّف المعاينة في المحرّر حاليًا باستخدام Svelte 4.2.19، لذلك قد لا تعرض كود runes، ومن الأفضل متابعته في نص الدرس.
هل يمكنني تشغيل كود Svelte على هاتفي؟
يمكنك كتابة مكوّن في المحرّر وعرضه في المعاينة. تحمّل معاينة تعلم Svelte: دورة برمجة مصمّم Svelte لإنشاء المكوّن، ولذلك تحتاج إلى اتصال. أما العرض التوضيحي الافتتاحي للمخرجات المصرّفة فهو مختلف: إذ يأتي الكود المصرّف مضمّنًا داخل التطبيق ويعمل من دون شبكة.
هل تعلم Svelte: دورة برمجة مجانية؟
التطبيق مجاني للتنزيل. الدورة الأولى مجانية، مع حصة يومية من مرشد الذكاء الاصطناعي، بينما تفتح Pro جميع الدورات، وتزيل الإعلانات، وتمنحك استخدامًا غير محدود لمرشد الذكاء الاصطناعي. يمكنك إكمال دروس حقيقية قبل أن تقرر الترقية.
هل أحتاج إلى معرفة JavaScript أولًا؟
ستجعل بعض المعرفة بـHTML وJavaScript الدورات المبكرة أسهل، لأن مكوّن Svelte ليس سوى هاتين اللغتين في ملف واحد. تبدأ تعلم Svelte: دورة برمجة بشرح ماهية Svelte وطريقة إعدادها، وتشرح كل مفهوم بلغة واضحة، لكنها دورة عن إطار عمل وليست دورة برمجة أولى.
ما المنصات واللغات التي يدعمها؟
تعمل تعلم Svelte: دورة برمجة على iOS عبر App Store، وعلى Android عبر Google Play، كما تتوفر الواجهة بـ22 لغة. وتصنيفها 4+، لذلك لا توجد أي قيود عمرية على محتواها.
ابدأ الآن
أنشئ أول مكوّن لك اليوم
ابدأ مجانًا على iOS وAndroid، وبـ22 لغة.
المزيد من CoddyKit
متاح على iOS و Android.