فریمورک SvelteKit با مثال: وبسایت تجارت الکترونیک Full-Stack
✅ سرفصل و جزئیات آموزش
آنچه یاد خواهید گرفت:
- تسلط به اصول Svelte و SvelteKit (فریمورک Svelte)
- ساخت یک وباپلیکیشن تجارت الکترونیک Full-Stack
- پذیرش پرداختها در فروشگاه وب با استفاده از Stripe به عنوان درگاه پرداخت
- اتصال پروژههای SvelteKit به پایگاه داده
- مدیریت پایگاه داده با استفاده از Prisma ORM
توضیحات دوره
SvelteKit یک فریمورک مدرن وباپلیکیشن است که توسعه Frontend را ساده میکند و به توسعهدهندگان امکان میدهد با استفاده از معماری کامپوننت، وب اپلیکیشن های بسیار کارآمد و واکنشگرا بسازند.
SvelteKit عمدتاً به دلیل رویکرد مبتنی بر کامپایل خود، به سرعت فوقالعادهاش شناخته میشود. برخلاف فریمورکهای سنتی JavaScript، فریمورک SvelteKit کامپوننتها را در زمان بیلد کامپایل کرده و کد JavaScript بسیار بهینه و مینیمال تولید میکند. این امر منجر به زمان بارگذاری سریعتر و بهبود عملکرد در زمان اجرا میشود، زیرا نیازی به Virtual DOM یا فریمورک زمان اجرا برای مدیریت بروزرسانی کامپوننتها نیست. علاوه بر این، SvelteKit از واکنشگرایی دقیق استفاده میکند و تنها بخشهایی از DOM را که واقعاً تغییر میکنند بروزرسانی میکند، که باعث کاهش کار غیرضروری و بهبود عملکرد میشود.
SvelteKit از کامپایلر داخلی خود برای تبدیل کامپوننتهای Svelte به کد JavaScript بسیار بهینه در طول فرآیند بیلد استفاده میکند. این کامپایلر سفارشی بخش اساسی رویکرد فریمورک Svelte برای تولید JavaScript کارآمد و مینیمال برای وباپلیکیشنها است.
در این دوره جامع، شما درک شفافی از اصول هستهای SvelteKit به دست خواهید آورد که دانش ضروری برای کار موثر با این فریمورک پیشرفته را برایتان فراهم میکند. یادگیری بر اساس مثال رویکرد موثری است و در طول این دوره، ما مجموعه ویژگیهای گسترده SvelteKit را با ساخت یک فروشگاه وب تجارت الکترونیک کامل از پایه بررسی خواهیم کرد. شما یاد خواهید گرفت که چگونه از فناوریهای کلیدی مانند Svelte ،SvelteKit Prisma ORM ،PostgreSQL ،TailwindCSS و ادغام درگاه پرداخت Stripe استفاده کنید.
با بیش از 6 سال تجربه کار گسترده با React و تکمیل پروژههای متعدد، اولین برخورد مدرس با SvelteKit هم سرگرمکننده و هم هیجانانگیز بود. آنچه SvelteKit را متمایز میکند و مدرس شخصاً آن را تحسین میکند، سادگی آن است که از پیچیدگیهای خاص و زمانبر فریمورکها اجتناب میکند. در عوض، SvelteKit تشویق به استفاده از اصول توسعه وبی میکند که شما از قبل به آنها تسلط دارید. یادگیری Svelte نه تنها شما را به مهارتهای خاص این فریمورک مجهز میکند، بلکه تواناییهای کلی شما در توسعه وب را نیز ارتقا میدهد.
این دوره پذیرای شرکتکنندگانی است که درک اولیهای از JavaScript دارند و نیازی به تجربه قبلی با Svelte نیست. اگرچه آشنایی با سایر فریمورکها یا کتابخانههای Frontend مانند React، NextJS یا Vue میتواند به درک برخی مفاهیم کمک کند، اما به هیچ وجه پیشنیازی برای تکمیل موفقیتآمیز این دوره نیست.
این دوره برای چه کسانی مناسب است؟
- توسعهدهندگان وب که تازه با Svelte و SvelteKit آشنا شدهاند
- افرادی که به دنبال افزودن یک مهارت و فریمورک جدید به پورتفولیوی خود هستند.
- توسعهدهندگانی که میخواهند یک فروشگاه تجارت الکترونیک Full-Stack با درگاه پرداخت بسازند.
فریمورک SvelteKit با مثال: وبسایت تجارت الکترونیک Full-Stack
-
مقدمه 01:28
-
استراتژی شاخهبندی 02:01
-
Svelte و SvelteKit چیست؟ 01:47
-
رندر سمت سرور (SSR) چیست؟ 02:27
-
درگاه پرداخت چیست؟ 01:49
-
راهاندازی حساب Stripe 01:20
-
افزودن محصولات در Stripe 04:22
-
ساخت تمام محصولات فروشگاه در Stripe 01:51
-
راهاندازی پروژه SvelteKit 02:10
-
ساختار پروژه SvelteKit 01:58
-
Vite چیست؟ 01:54
-
TailwindCSS چیست؟ 01:55
-
نصب TailwindCSS در یک پروژه SvelteKit 02:44
-
راهاندازی پایگاه داده PostgreSQL 01:56
-
Prisma ORM چیست؟ 01:17
-
نصب Prisma در پروژه SvelteKit 01:21
-
اتصال Prisma به یک پایگاه داده PostgreSQL 02:56
-
ساخت مدل محصول 04:59
-
روابط بین مدلهای Prisma 05:32
-
ساخت مدل دستهبندی 02:21
-
دادهگذاری جدول Category 01:21
-
دادهگذاری جدول Products 03:06
-
کامپوننتها در SvelteKit 03:47
-
ساخت کامپوننت Header 04:17
-
ساخت کامپوننت CartButton 02:01
-
ساخت کامپوننت Footer 02:36
-
مقدمهای بر Routing در SvelteKit 02:06
-
فایلهای Page در روتر SvelteKit 03:34
-
ساخت صفحات تجارت الکترونیک 04:39
-
فایلهای Error در روتر SvelteKit 01:28
-
API Routeهای SvelteKit 02:37
-
خواندن دادهها با Prisma 03:13
-
ساخت Endpoint برای API دریافت محصولات (GET) 03:17
-
طرح بندی ها در SvelteKit 04:09
-
ساخت یک طرح بندی و استایلدهی صفحات 03:36
-
بارگذاری محصولات در صفحه اصلی 02:57
-
رندر شرطی در SvelteKit 02:27
-
هیچ محصولی یافت نشد - پیام جایگزین 02:02
-
حلقههای رندر در SvelteKit (بلوک منطقی each#) 02:01
-
حلقه زدن روی محصولات 01:27
-
ساخت کامپوننت ShopCard 06:54
-
ساخت Endpoint برای API دریافت دستهبندیها (GET) 03:05
-
ساخت کامپوننت CategoryItem 03:45
-
صفحه اصلی دستهبندیها 04:14
-
ساخت طرح بندی دستهبندیها 04:52
-
ساخت Endpoint برای API دریافت محصولات بر اساس دستهبندی 04:11
-
واکنشگرایی در Svelte 02:03
-
صفحات دستهبندی پویا 03:13
-
ساخت Endpoint برای API دریافت محصول با ID 03:14
-
نشانهگذاری و استایلدهی صفحه محصول 03:34
-
بارگذاری داده جزئیات محصول 02:53
-
نشانهگذاری و استایلدهی صفحه سبد خرید 03:48
-
ساخت کامپوننت CartItem 03:34
-
سیستم سبد خرید 07:00
-
بهبودهای کامپوننت CartButton 02:53
-
نشانهگذاری و استایلدهی صفحات وضعیت پرداخت 01:35
-
ساخت Endpoint برای API تسویه حساب 05:08
-
فراخوانی پرداخت Stripe از صفحه سبد خرید 01:46
-
تست پرداخت Stripe 01:46
مشخصات آموزش
فریمورک SvelteKit با مثال: وبسایت تجارت الکترونیک Full-Stack
- تاریخ به روز رسانی: 1404/12/10
- سطح دوره:همه سطوح
- تعداد درس:59
- مدت زمان :02:57:38
- حجم :1.26GB
- زبان:دوبله زبان فارسی
- دوره آموزشی:AI Academy