تسلط به Svelte 5 و SvelteKit – ساخت و استقرار اپلیکیشنهای واقعی
✅ سرفصل و جزئیات آموزش
آنچه یاد خواهید گرفت:
- وب اپلیکیشنهای مدرن با Svelte 5 و SvelteKit بسازید و جدیدترین سینتکس، از جمله سینتکس Rune را در پروژههای واقعی اعمال کنید.
- سرویسهای شخص ثالث مانند Stripe ،Supabase و OpenAI را در وب اپلیکیشنها برای مدیریت پرداختها، احراز هویت و تشخیص تصویر یکپارچهسازی کنید.
- اپلیکیشنهای رندر شده در سمت سرور را توسعه داده و مستقر کنید که بسیار تعاملی، سبک و بهینهسازی شده برای عملکرد با SvelteKit هستند.
- یک اپلیکیشن CRUD کاملاً کاربردی با احراز هویت، مدیریت پایگاه داده و رابطهای کاربری ایجاد کنید که شامل آپلود و پردازش تصاویر از طریق هوش مصنوعی است.
- چگونه از تایپاسکریپت در Svelte و SvelteKit استفاده کنیم؟
پیشنیازهای دوره
دانش جاوا اسکریپت، بقیه موارد را میتوانید در طول دوره بیاموزید. به آشنایی با فریمورک خاصی نیازی نیست.
توضیحات دوره
Svelte 5 را از طریق پروژههای عملی و واقعی از ابتدا یاد بگیرید! چه توسعهدهنده جاوا اسکریپت باشید و بخواهید یک فریمورک جدید را بررسی کنید، چه به دنبال افزودن مهارتهای توسعه وب مدرن به مجموعه مهارتهای خود باشید، این دوره برای شما مناسب است.
آنچه یاد خواهید گرفت:
- تسلط به ویژگیهای جدید Svelte 5
- ساخت 3 پروژه کاملاً کاربردی: از یک صفحه فرود محصول با یکپارچهسازی Stripe تا وب اپلیکیشنهای احراز هویت شده
- یکپارچهسازی Stripe برای پرداختها، Sanity CMS برای مدیریت محتوا و Supabase برای احراز هویت
- خودکارسازی ایمیلها با SendGrid و اتصال اپلیکیشن به OpenAI برای تشخیص تصویر
- به کارگیری یادگیری پروژه محور برای حل مشکلات واقعی
- چگونه از تایپاسکریپت در یک اپلیکیشن Svelte و SvelteKit استفاده کنیم؟ (پروژه دوم و سوم از آن استفاده میکنند)
بررسی کلی دوره:
این دوره شما را به عمق Svelte 5، نسخه اصلی و بعدی فریمورک Svelte میبرد. شما 3 پروژه با پیچیدگیهای مختلف میسازید که طراحی شدهاند تا به شما کمک کنند تا با یادگیری عملی و دقیق پیشرفت کنید. پروژههای دوم و سوم به زبان تایپاسکریپت نوشته شدهاند، در حالی که پروژه اول از جاوا اسکریپت خالص استفاده میکند.
- صفحه فرود کتاب الکترونیکی با یکپارچهسازی Stripe: یک صفحه فرود زیبا برای فروش یک محصول آنلاین ایجاد کنید که بهطور کامل با Stripe برای پرداختها یکپارچه شده است. یاد بگیرید چگونه وبهوکها را با اندپوینتهای SvelteKit API خود مدیریت کنید و بعد از دریافت درخواست از Stripe، ایمیلها را بهطور خودکار با کتاب الکترونیکی ارسال کنید.
- پورتفولیوی توسعهدهنده با Sanity CMS: مهارتهای خود را با یک پورتفولیوی توسعهدهنده مبتنی بر Sanity CMS به نمایش بگذارید. درخواستهای تماس را با یک فرم پویا جمعآوری کنید و از SendGrid برای ارسال ایمیلهای شخصیسازی شده استفاده کنید که برای توسعهدهندگان فریلنسر که به دنبال جذب مشتریان جدید هستند، ایدهآل است.
- اپلیکیشن CRUD احراز هویت شده با Supabase و OpenAI: فرایند احراز هویت کاربر، مدیریت پایگاه داده و تشخیص تصویر را با این اپلیکیشن غنی از ویژگی بررسی کنید. جلدهای کتاب را آپلود کنید و از OpenAI برای تشخیص کتابها از تصویر یک قفسه کتاب استفاده کنید. این اپلیکیشن یک پروژه نهایی تمامعیار است!
این دوره برای چه کسانی مناسب است؟
- توسعهدهندگان جاوا اسکریپت که میخواهند مهارتهای خود را گسترش دهند و با ساخت پروژههای واقعی به Svelte 5 و SvelteKit مسلط شوند.
- توسعهدهندگان فرانتاند که به دنبال یادگیری یک فریمورک مدرن، سریع و سبک برای جلوتر بودن در رقابت توسعه وب هستند.
- فریلنسرهایی که میخواهند به مشتریان خود وب اپلیکیشنهایی با عملکرد بالا به همراه یکپارچهسازی Svelte ،Stripe ،Supabase و OpenAI ارائه دهند.
- توسعهدهندگانی که با سایر فریمورکهای جاوا اسکریپت آشنا هستند و میخواهند یک جایگزین کارآمدتر و آسانتر برای ساخت وب اپلیکیشنها یاد بگیرند.
تسلط به Svelte 5 و SvelteKit – ساخت و استقرار اپلیکیشنهای واقعی
-
درباره این دوره 03:17
-
چگونه این دوره را بگذرانیم؟ 05:08
-
ساختار یک فایل Svelte 08:59
-
واکنشگرایی در Svelte - بررسی state و Rune مشتقشده 08:30
-
استفاده از state واکنشگرا در ورودیها و effect rune 05:43
-
اشکالزدایی در Svelte - بررسی Inspect rune 01:07
-
انتقال props بین کامپوننتهای Svelte 05:47
-
اسنیپتها، زبان قالببندی و state واکنشگرای پیشرفتهتر 10:29
-
مسیریابی ساختار SvelteKit 09:15
-
واکشی داده در سمت سرور با فایل page.server.ts 10:23
-
واکشی داده در سمت سرور و کلاینت با تابع load 05:48
-
ساخت اندپوینتهای API در SvelteKit 05:20
-
بررسی پروژه: صفحه فرود برای محصول دیجیتال با یکپارچهسازی پرداخت 04:03
-
اختیاری: در صورتی که نمیخواهید کد سی اس اس ننویسید 02:26
-
شروع کار - راهاندازی اولیه پروژه (ریست کردن Svelte و CSS) 12:42
-
بخش Hero - ساختار اچ تی ام ال 12:26
-
بخش Hero - استایلدهی 06:36
-
ساخت یک دکمه قابل استفاده مجدد - اچ تی ام ال 06:27
-
دکمه - استایلدهی 02:57
-
بخش پیشنمایش فصل 06:58
-
پیشنمایش فصل - استایلدهی 07:23
-
پیشنمایش فصل - زبان قالببندی Svelte - استفاده از کلیدواژه each# 05:18
-
پیشنمایش فصل - رندر محتوا بهصورت پویا بر اساس ورودی کاربر 05:54
-
پیشنمایش فصل - استخراج state برای سادهسازی ساختار کد 03:49
-
بخش درباره نویسنده - ساختار اچ تی ام ال 03:08
-
بخش درباره نویسنده - استایلدهی 02:37
-
بخش سوالات متداول - ساختار اچ تی ام ال 08:35
-
بخش سوالات متداول - استایلدهی 12:33
-
بخش سوالات متداول - عملکرد 13:14
-
راهاندازی حساب Stripe 04:54
-
توضیح مفهومی یکپارچهسازی پرداخت با Stripe 09:29
-
کد یکپارچهسازی Stripe 17:41
-
صفحات موفقیت و شکست پس از پرداخت 05:36
-
ثبتنام حساب Sendgrid و ایجاد کلید API 04:41
-
استقرار در Vercel و راهاندازی وبهوک Stripe 10:05
-
ارسال ایمیل با محصول دیجیتال بر روی وبهوک پرداخت از Stripe 08:11
-
بررسی کلی پروژه و زیرساخت اپلیکیشن 04:20
-
راهاندازی پروژه 04:33
-
بخش Hero 05:29
-
کامپوننت دکمه انعطافپذیر 10:19
-
استایلدهی به دکمه انعطافپذیر 01:00
-
کامپوننت هدلاین بخش 06:32
-
بخش درباره من 03:33
-
استایلدهی به بخش درباره من 01:14
-
جدول تجربه کاری 06:36
-
استایلدهی به جدول تجربه کاری 02:42
-
راهاندازی Sanity 15:08
-
واکشی داده از Sanity در فرانتاند SvelteKit 15:16
-
نمایش داده Sanity در فرانتاند 09:29
-
بخش آثار من - اسکیمای داده Sanity و افزودن داده 02:34
-
راهاندازی انواع برای داده پردازششده و خام Sanity 13:33
-
پردازش داده از حالت خام به قابل استفاده در فرانتاند 11:12
-
بخش آثار من - ساختار اچ تی ام ال 13:39
-
بخش آثار من - استایلدهی 04:49
-
مسیریابی پویا و بارگذاری مقاله وبلاگ 06:19
-
رندر مقاله وبلاگ در فرانتاند 10:11
-
استایلدهی به مقاله وبلاگ 02:13
-
ایجاد مهارتها و افزودن آیکونهای مهارت 06:16
-
بخش مهارتها 08:01
-
بخش مهارتها - استایلدهی 01:48
-
بخش تماس 06:28
-
استایلدهی به بخش تماس 08:09
-
اعتبارسنجی فرانتاند فرم تماس با من 11:52
-
مدیریت بخش تماس با من در اندپوینت بکاند 18:15
-
هدر 03:28
-
استایلدهی به هدر 02:21
-
ساختار فوتر و استایلدهی به آن 02:45
-
استقرار پروژه در Vercel 03:17
-
بررسی کلی پروژه 01:48
-
راهاندازی پروژه 03:36
-
بخش Hero 04:51
-
استایلدهی به بخش Hero 01:13
-
کامپوننت دکمه انعطافپذیر 08:41
-
استایلدهی به دکمه انعطافپذیر 01:42
-
هدر 04:52
-
استایلدهی به هدر 01:10
-
فرم احراز هویت برای صفحه ثبتنام و لاگین 10:48
-
استایلدهی به فرم احراز هویت 04:05
-
اکشنهای فرم در SvelteKit برای ثبتنام و لاگین 17:11
-
راهاندازی Supabase 04:41
-
ثبتنام در Supabase با ایمیل و رمز عبور 06:04
-
بررسی Svelte و جریان احراز هویت Supabase 05:09
-
پیادهسازی احراز هویت در سمت سرور 13:18
-
اکشن فرم لاگین 08:41
-
راهاندازی کانتکس برای پیگیری state کاربر 17:23
-
لاگین اجتماعی با گوگل 16:26
-
راهاندازی پایگاه داده و افزودن نام کاربری هنگام ثبتنام 13:18
-
فیکش کردن خروج از سیستم 04:26
-
واکشی کتابها از Supabase 19:13
-
واکشی و نمایش نام کاربری 06:18
-
ناوبری جانبی و طرحبندی احراز هویت 09:10
-
استایلدهی به طرحبندی احراز هویت 03:02
-
داشبورد کاربر 03:33
-
استایلدهی به داشبورد کاربر 01:46
-
کامپوننت کارت کتاب 11:39
-
استایلدهی به کارت کتاب 06:15
-
کامپوننت امتیازدهی ستارهای 10:22
-
استایلدهی به امتیازدهی ستارهای 01:11
-
یکپارچهسازی امتیازدهی ستارهای با کارت کتاب و اتصال به پایگاه داده 03:52
-
کامپوننت دستهبندی کتاب 05:05
-
استایلدهی به دستهبندی کتاب 01:43
-
فیلتر کتابها برای دستهبندیهای مختلف 20:05
-
صفحه کتاب تکی 19:42
-
استایلدهی به کتاب تکی 02:25
-
حالت ویرایش در صفحه کتاب 10:43
-
استایلدهی به فیلدهای ویرایش 02:36
-
بروزرسانی کتابها در پایگاه داده 22:21
-
آپلود جلد کتاب با ذخیرهسازی Supabase 17:08
-
استایلدهی به ناحیه بارگذاری 03:02
-
رابط کاربری حذف کتاب و حذف از پایگاه داده Supabase 04:14
-
صفحه اسکن قفسه با Dropzone 12:57
-
یکپارچهسازی Open AI - ارسال تصویر به چت جی پی تی برای دریافت آرایه کتاب 14:35
-
صفحه اسکن قفسه - جدول کتاب و یکپارچهسازی state 13:03
-
صفحه اسکن قفسه - استایلدهی 07:18
-
افزودن کتابها به پایگاه داده از طریق صفحه اسکن قفسه 14:14
-
صفحه تنظیمات و محاسبه آمار کاربر 16:52
-
استایلدهی به صفحه تنظیمات 01:32
-
ویرایش جزئیات حساب در صفحه تنظیمات 16:49
-
حذف حساب و پاکسازی پروژه و متشکرم از شما!!! 15:06
-
استقرار پروژه 05:59
مشخصات آموزش
تسلط به Svelte 5 و SvelteKit – ساخت و استقرار اپلیکیشنهای واقعی
- تاریخ به روز رسانی: 1404/06/14
- سطح دوره:همه سطوح
- تعداد درس:120
- مدت زمان :15:39:31
- حجم :7.99GB
- زبان:دوبله زبان فارسی
- دوره آموزشی:AI Academy