دورة تدريبية في Svelte

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

معاينة الشهادة Elevify للشركات

ماذا ستتعلم:

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

كيف تدرس بشكل عملي دورة تدريبية في Svelte

كيف تتدرب عملياً دورة تدريبية في Svelte

لك إذا كنت شركة وتريد تدريب فريقك

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

اضغط هنا

محتوى الدورة

6 فصول • 33 دروسمدة بين 4 و 360 ساعة (أنت تقرر)

الفصل 1عرض التفاصيل

إعداد مشروع سوفلت وهيكلته

الدرس 1 • الاختيار بين SvelteKit وVite + Svelte: التوازنات والقوالب الموصى بها
قارن بين SvelteKit وVite + Svelte لاختيار المكدس المناسب لمشروعك. راجع التوجيه والتصيير من جانب الخادم والمحولات وخيارات النشر، وتعلم أي قوالب رسمية تبدأ بها للتطبيقات أحادية الصفحة أو التطبيقات كاملة المكدس أو المواقع الثابتة.
الدرس 2 • أنماط التخطيط المتجاوب البسيطة واستراتيجيات CSS العامة مقابل المحدودة بالمكون
استكشف تقنيات التخطيط لبناء تطبيقات سوفلت متجاوبة بتعقيد أدنى. قارن بين CSS العام وأنماط المكون المحدود والطبقات الخدمية، وتعلم متى تستخدم كل منها للحفاظ على الأنماط متوقعة وقابلة لإعادة الاستخدام وسهلة الصيانة.
الدرس 3 • هيكل مجلد المشروع: src، routes (إذا SvelteKit)، components، stores، assets، styles، helpers
افهم كيفية ترتيب قاعدة كود سوفلت للوضوح والنمو. تعلم تخطيطات المجلدات الشائعة لـ src والطرق والمكونات والمتاجر والأصول والأنماط والمساعدات، وكيفية تكييفها لمشاريع SvelteKit أو Vite العادية.
الدرس 4 • ملفات التكوين التي يجب معرفتها (package.json، vite.config.js، svelte.config.js) وأوامر التطوير البسيطة
تعرف على الملفات الرئيسية للتكوين التي تتحكم في مشروع سوفلت. تعلم ما يوجد في package.json وvite.config.js وسvelte.config.js، ومارس تشغيل أوامر التطوير الأساسية والبناء والمعاينة والاختبار.
الدرس 5 • تنظيم المكونات حسب الميزة مقابل النوع واتفاقيات التسمية
تعلم استراتيجيات تنظيم مكونات سوفلت بحيث يمكن للفرق التنقل في قاعدة الكود وتوسيعها بسرعة. قارن الهياكل القائمة على الميزات والهياكل القائمة على الأنواع، حدد قواعد التسمية، واضبط الاتفاقيات للملفات والخصائص والأحداث.
الدرس 6 • إنشاء هيكل التطبيق: النقطة الرئيسية للدخول، مسؤوليات App.svelte، التركيب وسلوك التطبيق أحادي الصفحة
تعلم كيفية تشغيل تطبيق سوفلت، ما الذي ينتمي إلى main.js وApp.svelte، وكيفية عمل التركيب في المتصفح. افهم أساسيات التنقل في التطبيقات أحادية الصفحة حتى تتمكن من التفكير في التصيير والحالة وتدفقات المستخدم من السطر الأول من الكود.

الفصل 2عرض التفاصيل

مكونات سوفلت وأنماط المكونات

الدرس 1 • أنماط التواصل بين الأب والابن: تحويل الأحداث، الأحداث المخصصة وحمولات تفاصيل الأحداث
استكشف طرق منظمة للتواصل بين الآباء والأبناء في سوفلت. ستكونفغ أحداث مخصصة وتحول الأحداث عبر مكونات المغلف وتصمم حمولات أحداث واضحة لتدفق بيانات متوقع.
الدرس 2 • أنماط التركيب: فصل المغلف/العرضي، تركيب المكونات للقوائم والنماذج
تعلم أنماط التركيب التي تحافظ على مكونات سوفلت صغيرة ومركزة. ستفصل بين المغلفات والعرضية وتركب قطع قابلة لإعادة الاستخدام للقوائم والنماذج والتخطيط دون تكرار المنطق.
الدرس 3 • تصميم مكونات قابلة لإعادة الاستخدام: GoalItem، GoalList، AddGoalForm، FilterBar — الخصائص وواجهات برمجة الأحداث لكل
صمم مجموعة مكونات صغيرة قابلة لإعادة الاستخدام حول الأهداف. حدد الخصائص والأحداث لـ GoalItem وGoalList وAddGoalForm وFilterBar، مع ضمان عقود واضحة وسلوك متوقع عبر الواجهة.
الدرس 4 • أساسيات الوصولية للمكونات: عمليات لوحة المفاتيح، HTML الدلالي، ARIA للأزرار والنماذج
طبّق أفضل الممارسات للوصولية على مكونات سوفلت. تعلم بناء تفاعلات صديقة للوحة المفاتيح واستخدام HTML الدلالي وتطبيق سمات ARIA بشكل صحيح للأزرار والحوارات ووسائط الإدخال.
الدرس 5 • أساسيات المكون: الخصائص، الأحداث، الفتحات، وخطافات دورة الحياة (onMount، beforeUpdate، afterUpdate، onDestroy)
تعلم اللبنات الأساسية لمكونات سوفلت بما في ذلك الخصائص والأحداث والفتحات وخطافات دورة الحياة. افهم كيفية تفاعل هذه الميزات للتحكم في التصيير والتأثيرات الجانبية والتركيب في المشاريع الحقيقية.
الدرس 6 • إدارة حالة المكون المحلية وحالة الواجهة المشتقة بتصريحات تفاعلية
أتقن حالة المكون المحلية باستخدام تفاعلية سوفلت. ستدير البيانات الداخلية وتستخرج حالة الواجهة بتصريحات تفاعلية وتحافظ على المناظر المعقدة متسقة دون الإفراط في استخدام المتاجر العالمية أو التحديثات اليدوية.

الفصل 3عرض التفاصيل

إدارة الحالة بمتاجر سوفلت

الدرس 1 • تنفيذ متجر الأهداف: الشكل، الطرق (addGoal، toggleStatus، setFilter، getFiltered)، وأنماط التحريف
صمم متجر أهداف ملموساً بما في ذلك شكل البيانات وطرق المساعدة وأنماط التحريف. نفّذ إضافة وتبديل وتصفية السلوك مع الحفاظ على التحديثات غير قابلة للتحريف والمتوقعة وسهلة الاختبار في مشاريع سوفلت الحقيقية.
الدرس 2 • اختبار وتصحيح المتاجر: تسجيل التحديثات، استخدام أدوات التطوير ونهج اختبار الوحدة البسيط لمنطق المتجر
استكشف تقنيات عملية لاختبار وتصحيح متاجر سوفلت. استخدم التسجيل ومساعدي التصحيح المخصصة وأدوات تطوير المتصفح ثم أضف اختبارات وحدة خفيفة للتحقق من سلوك المتجر والحالات الحدية ومعالجة الأخطاء.
الدرس 3 • استخدام صيغة $ للاشتراك وتحديث المتاجر في المكونات
افهم كيفية عمل صيغة $ للاشتراك التلقائي والتحديثات في مكونات سوفلت. تعلم متى تعتمد على $store ومتى تستخدم subscribe يدوياً وكيفية تجنب الفخاخ الشائعة مع التفاعلية والأداء.
الدرس 4 • خيارات التصميم لحالة التطبيق الصغير: متجر واحد مقابل متاجر متعددة وأسباب مبنية على أبحاث أفضل الممارسات
قارن بين تصاميم المتجر الواحد والمتاجر المتعددة لتطبيقات سوفلت الصغيرة. قيّم التوازنات في التعقيد والأداء وقابلية الاختبار وتعلم أنماط تقسيم أو دمج المتاجر مع نمو التطبيق.
الدرس 5 • إنشاء وظائف مساعدة المتجر والتغليف: إرجاع طرق subscribe وupdate مقابل عرض إجراءات مساعدة
تعلم كيفية تغليف منطق المتجر خلف وظائف مساعدة وواجهات برمجة مخصصة. قرر متى تعرض subscribe وupdate مباشرة ومتى تغلفها وكيفية إخفاء التفاصيل الداخلية مع الحفاظ على بساطة المكونات.
الدرس 6 • أنواع المتاجر وواجهة برمجة التطبيقات: قابلة للكتابة، قابلة للقراءة، مشتقة — متى تستخدم كل
تعلم الاختلافات بين المتاجر القابلة للكتابة والقابلة للقراءة والمشتقة وكيفية عمل واجهات برمجة التطبيقات الخاصة بها ومتى يكون كل نوع مناسباً. افهم أنماط الاشتراك والتنظيف وكيفية تركيب المتاجر لإدارة حالة قابلة للتوسع.

الفصل 4عرض التفاصيل

التفاعلية والحالة المشتقة

الدرس 1 • أساسيات تفاعلية سوفلت: تصريحات $: التفاعلية، إعادة التعيين التفاعلية، والاشتراك التلقائي في المتاجر
تعلم كيفية عمل تفاعلية سوفلت تحت الغطاء بما في ذلك التصريحات التفاعلية وإعادة التعيين التفاعلية والاشتراكات التلقائية في المتاجر حتى تتمكن من التفكير في متى ولماذا يتم تحديث مكوناتك.
الدرس 2 • أنماط الواجهة التفاعلية: ربط مدخلات النموذج، الربط ذو الاتجاهين، والنماذج المتحكم فيها في سوفلت
استكشف أنماط الواجهة التفاعلية في سوفلت بما في ذلك ربط مدخلات النموذج واستخدام الربط ذو الاتجاهين بمسؤولية وبناء نماذج متحكم فيها تحافظ على التحقق والأخطاء ومنطق الإرسال متزامن مع حالة المكون.
الدرس 3 • حساب القيم المشتقة: عدد المفتوح/المنجز، القائمة المصفاة الحالية باستخدام المتاجر المشتقة أو التصريحات التفاعلية
اكتشف كيفية حساب وإدارة القيم المشتقة مثل العدد والمرشحات والملخصات باستخدام التصريحات التفاعلية والمتاجر المشتقة مع اختيار الأداة المناسبة لمنطق المكون المحلي أو حالة التطبيق المشتركة.
الدرس 4 • التحسين: تقليل إعادة الحساب غير الضرورية واستخدام المتاجر المشتقة للحسابات المكلفة
تعلم كيفية تحسين تطبيقات سوفلت بتقليل إعادة الحساب غير الضرورية وترتيب المتاجر المشتقة للحسابات المكلفة وتحليل مسارات الكود التفاعلية للحفاظ على الواجهات الكبيرة الثقيلة البيانات متجاوبة.
الدرس 5 • تجنب فخاخ التفاعلية الشائعة: التحريف مقابل إعادة التعيين، تحديثات الكائنات المتداخلة، وأنماط عدم التحريف
افهم فخاخ التفاعلية الدقيقة في سوفلت بما في ذلك تحريف الكائنات والمصفوفات دون إعادة تعيين والتحديثات المتداخلة وكيفية منع واجهات مستعارة وأخطاء صعبة التتبع بتبني أنماط عدم التحريف الخفيفة.

الفصل 5عرض التفاصيل

النماذج، التحقق، والتفاعلات مع المستخدم

الدرس 1 • واجهة التصفية: تنفيذ ضوابط كل/مفتوح/منجز والتزامن مع حالة المتجر
ابنِ واجهة تصفية متجاوبة لعرض كل/مفتوح/منجز واحتفظ بها متزامنة مع متاجر سوفلت. ستوصل الضوابط بالبيانات المشتقة وتدير حالة URL عند الحاجة وتجنب القوائم المصفاة غير المتسقة أو المستعارة.
الدرس 2 • خيارات الاستمرارية من جانب العميل (اختياري): تكامل localStorage مع المتاجر وأنماط الترطيب
اكتشف أنماط الاستمرارية من جانب العميل باستخدام localStorage مع متاجر سوفلت. نفّذ الترطيب عند التحميل والتسلسل الآمن واستراتيجيات الهجرة مع الحفاظ على الواجهة متجاوبة وتجنب البلوك أو البيانات المستعارة.
الدرس 3 • بناء AddGoalForm: مدخلات متحكم فيها، التحقق المحلي (العنوان مطلوب، طول الوصف)، وتدفق الإرسال
نفّذ AddGoalForm بمدخلات متحكم فيها والتحقق المحلي القوي. فرض العناوين المطلوبة وقواعد طول الوصف وتدفق إرسال واضح بما في ذلك عرض الأخطاء والتعطيل وسلوك إعادة الضبط عند النجاح.
الدرس 4 • اعتبارات UX لتبديل الحالة: تحديثات واجهة متفائلة وتعليقات بصرية
استكشف أنماط UX لتبديل حالة العنصر باحتكاك أدنى. نفّذ تحديثات واجهة متفائلة وتعامل مع الفشل بأناقة ووفر تعليقات بصرية واضحة عبر الرسوم المتحركة وحالة التحميل والرسائل الوصولية.
الدرس 5 • منع المعرفات المكررة: استراتيجيات إنشاء المعرف (UUID، الطابع الزمني، التزايدي) والاختبار المحدد
تعلم استراتيجيات موثوقة لإنشاء معرفات فريدة في تطبيقات سوفلت وتجنب التصادمات والاختبارات غير المستقرة. قارن بين UUID والطابع الزمني والتزايدي وصمم أدوات معرفات قابلة للاختبار محددة للسلوك المتوقع.

الفصل 6عرض التفاصيل

التصميم، الاستجابة، وتلميع المشروع

الدرس 1 • تنظيم CSS في سوفلت: تسمية الوحدات، الفئات الخدمية، وتجنب تكرار الأنماط
استكشف أنماط عملية لهيكلة CSS في مشاريع سوفلت. ستتعلم اتفاقيات التسمية والفئات الخدمية واستراتيجيات تجنب التكرار مع الحفاظ على الأنماط قابلة للاكتشاف وسهلة إعادة الهيكلة.
الدرس 2 • إعداد تسليمات الكود: اتفاقيات تسمية الملفات، ممارسات التعليق، وملاحظات README لهيكلية إدارة الحالة
تعلم كيفية تعبئة كود سوفلت للتسليم وإعادة الاستخدام. ستحدد اتفاقيات تسمية الملفات وتكتب تعليقات ذات معنى وتنشئ وثائق README تفسر الهيكلية وقرارات الحالة بوضوح.
الدرس 3 • تصميم بصري بسيط للحالة والمرشحات: اللون، الأيقونات، والتباين الوصولي
صمم إشارات بصرية بسيطة ووصولية لحالة والمرشحات في تطبيقات سوفلت. ستطبق الألوان والأيقونات والطباعة بتباين مناسب مع ضمان قابلية قراءة الحالات وقابلية الاستخدام مع أو بدون الرؤية الملونة.
الدرس 4 • أنماط المكون المحدودة مقابل ورقة الأنماط العامة: متى تستخدم كل وإدارة رموز التصميم المشتركة
افهم كيفية دمج أنماط المكون المحدودة مع أوراق الأنماط العامة. ستدير رموز التصميم المشتركة وتتحكم في التسلسل والخصوصية وتحافظ على السمات متسقة مع السماح بالتخصيص المحلي.
الدرس 5 • تقنيات التخطيط المتجاوب: تخطيط عمود/قائمة مرن، نقاط انهيار للهواتف وسطح المكتب
تعلم كيفية بناء تخطيطات سوفلت متجاوبة تتكيف بسلاسة من الهواتف إلى سطح المكتب. ستستخدم أعمدة مرنة وقوائم سائلة واستراتيجيات نقاط الانهيار مع اختبار السلوك عبر الأجهزة ومعالجة الحالات الحدية.

الشهادة

شهادتك الصالحة للتخرج

ماذا يقول طلابنا

آراء من درسوا معنا:

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