آموزش Master Svelte 5 & SvelteKit – ساخت و استقرار برنامه های دنیای واقعی

دانلود Master Svelte 5 & SvelteKit – Build & Deploy Real-World Apps

نکته: آخرین آپدیت رو دریافت میکنید حتی اگر این محتوا بروز نباشد.
نمونه ویدیوها:
توضیحات دوره: Svelte 5 Rune Syntax، Build with Stripe، Supabase، OpenAI را بیاموزید – Svelte را با ساختن پروژه های دنیای واقعی بیاموزید! برنامه های وب مدرن را با استفاده از Svelte 5 و SvelteKit بسازید، و از آخرین نحو، از جمله نحو Rune، در پروژه های دنیای واقعی استفاده کنید. سرویس‌های شخص ثالث مانند Stripe، Supabase و OpenAI را در برنامه‌های وب ادغام کنید تا پرداخت‌ها، احراز هویت و تشخیص تصویر را انجام دهید. با استفاده از SvelteKit، برنامه‌های رندر شده توسط سرور را که بسیار تعاملی، سبک وزن و بهینه‌سازی شده‌اند، توسعه دهید. یک برنامه CRUD کاملا کاربردی با احراز هویت، مدیریت پایگاه داده و رابط های کاربری، از جمله آپلود و پردازش تصاویر از طریق هوش مصنوعی ایجاد کنید. نحوه استفاده از TypeScript در Svelte & SvelteKit پیش نیازها:دانش جاوا اسکریپت، هر چیز دیگری که می توانید در طول دوره انتخاب کنید. بدون نیاز به دانش برخی چارچوب ها

Svelte 5 را از ابتدا از طریق پروژه های واقعی و واقعی بیاموزید! چه یک توسعه‌دهنده جاوا اسکریپت باشید که مشتاق کشف یک چارچوب جدید داغ هستید یا به دنبال افزودن مهارت‌های توسعه وب مدرن به جعبه ابزار خود هستید، این دوره برای شما مناسب است.


چرا Svelte SvelteKit را یاد بگیریم؟

Svelte یک چارچوب انقلابی است که کد شما را با جاوا اسکریپت خالص جمع‌آوری می‌کند و برنامه‌های وب شما را سریع، سبک و بسیار کارآمد می‌کند. برخلاف سایر فریم‌ورک‌ها، Svelte به DOM مجازی متکی نیست، به این معنی که کد کمتری ارسال می‌کند و عملکرد سریع‌تری دارد. آن را با SvelteKit جفت کنید، و یک جعبه ابزار با امکانات کامل برای ساختن برنامه‌های ارائه‌شده توسط سرور، بسیار تعاملی و در دسترس به آسانی خواهید داشت.
با Svelte 5، کدی که می‌نویسید حتی نازک‌تر و کارآمدتر است، و این این دوره تمام نحو جدید و بهترین شیوه ها را پوشش می دهد و آن را بهترین زمان برای شروع یادگیری Svelte می کند.

آنچه خواهید آموخت:

  • بر ویژگی‌های جدید Svelte 5 مسلط شوید

  • ساخت سه پروژه کاملاً کاربردی: از صفحه فرود محصول با ادغام Stripe تا برنامه های وب تأیید شده

  • یکپارچه سازی Stripe برای پرداخت، Sanity CMS برای مدیریت محتوا، و Supabase برای احراز هویت

  • ایمیل ها را با SendGrid خودکار کنید و برنامه خود را برای تشخیص تصویر به OpenAI متصل کنید

  • از یادگیری مبتنی بر پروژه برای حل مشکلات واقعی استفاده کنید

  • نحوه استفاده از TypeScript در برنامه Svelte SvelteKit (سومین پروژه از آن استفاده می کند)


نمای کلی دوره:

این دوره شما را عمیقاً به Svelte 5، نسخه اصلی بعدی چارچوب Svelte می‌برد. شما سه پروژه به تدریج پیچیده خواهید ساخت که به شما کمک می کند تا با یادگیری عملی و عملی سطح خود را ارتقا دهید. پروژه دوم و سوم با TypeScript نوشته شده اند، در حالی که پروژه اول از جاوا اسکریپت وانیلی استفاده می کند.

  1. صفحه فرود کتاب الکترونیکی با یکپارچه سازی Stripe
    یک صفحه فرود شیک برای فروش آنلاین محصول ایجاد کنید، که برای پرداخت ها کاملاً با Stripe یکپارچه شده است. با نحوه مدیریت وب‌قلاب‌ها با نقاط پایانی SvelteKit API و ارسال ایمیل با کتاب الکترونیکی به‌طور خودکار هنگام دریافت درخواست از Stripe آشنا شوید.

  2. نمونه کار برنامه‌نویس با Sanity CMS
    مهارت‌های خود را با یک نمونه کار توسعه‌دهنده ارائه شده توسط Sanity CMS نشان دهید. درخواست های تماس را با استفاده از یک فرم پویا ضبط کنید و از SendGrid برای ارسال ایمیل های شخصی سازی شده استفاده کنید. ایده آل برای توسعه دهندگان آزاد که به دنبال جذب مشتریان جدید هستند.

  3. برنامه CRUD احراز هویت شده با Supabase و OpenAI
    در احراز هویت کاربر، مدیریت پایگاه داده و تشخیص تصویر با این برنامه غنی از ویژگی ها غوطه ور شوید. جلدهای کتاب را آپلود کنید و از OpenAI برای تشخیص کتاب ها از تصویر قفسه کتاب استفاده کنید. پروژه تمام پشته نهایی!


چرا این دوره؟

  • آموزش مبتنی بر پروژه: نظریه خسته کننده را فراموش کنید! هر پروژه به سناریوهای دنیای واقعی می پردازد که شما در کار خود از آنها استفاده خواهید کرد.

  • Svelte 5 Syntax : یکی از اولین کسانی باشید که Svelte 5 را یاد می گیرند، از جمله آخرین نحو و ویژگی ها.

  • دشواری پیشرونده: با پیشرفت، پروژه‌ها پیشرفته‌تر می‌شوند و به شما کمک می‌کنند اعتماد به نفس و درک کاملی از SvelteKit ایجاد کنید.

  • CSS Simplified : هر پروژه دارای قالب های CSS اسکلتی است تا از ویدیوهای استایل رد شده و بر عملکرد جاوا اسکریپت و Svelte تمرکز کند. اگر نمی خواهید، لازم نیست یک خط CSS بنویسید.


این دوره برای چه کسانی است؟

همه کسانی که جاوا اسکریپت را می دانند. انتخاب Svelte بسیار آسان است و همه چیزهایی که باید بدانید در این دوره پوشش داده شده است.


سرفصل ها و درس ها

معرفی دوره Course Intro

  • در مورد این دوره About this course

  • نحوه گذراندن این دوره How to go through this course

  • تمامی مطالب این دوره All materials for this course

  • Svelte 5 Release - چه چیزی برای این دوره تغییر کرده است؟ Svelte 5 Release - What has changed for this course?

Svelte 5 Crash Course Svelte 5 Crash Course

  • ساختار یک فایل Svelte Structure of a Svelte File

  • واکنش پذیری در Svelte - حالت و رون مشتق شده Reactivity in Svelte - state & derived rune

  • استفاده از حالت واکنشی در ورودی ها و رون افکت Using reactive state in inputs and effect rune

  • اشکال زدایی در Svelte - Rune را بررسی کنید Debugging in Svelte - Inspect rune

  • جابجایی لوازم اطراف اجزای Svelte Passing props around Svelte components

  • اسنیپت ها، زبان قالب و حالت واکنشی پیشرفته تر Snippets, templating language and more advanced reactive state

دوره تصادف SvelteKit SvelteKit Crash Course

  • ساختار و مسیریابی SvelteKit SvelteKit Structure & Routing

  • واکشی داده ها در سمت سرور با فایل page.server.ts Fetching Data server-side with page.server.ts file

  • واکشی سمت سرور و مشتری داده با عملکرد بارگذاری Fetching data server & client side with load function

  • ساختن نقاط پایانی API در SvelteKit Building API endpoints in SvelteKit

پروژه 1: صفحه فرود محصول با ادغام Stripe Project 1: Product Landing Page with Stripe Integration

  • منابع پروژه PROJECT RESOURCES

  • نمای کلی پروژه: صفحه فرود برای محصول دیجیتال با ادغام پرداخت Project Overview: Landing Page for Digital Product with Payment integration

  • اختیاری: در صورتی که نمی خواهید css بنویسید Optional: In case you do not want to write any css

  • شروع به کار - راه اندازی اولیه پروژه (بازنشانی صاف و css) Getting started - initial project setup (svelte & css reset)

  • بخش قهرمان - ساختار HTML Hero Section - HTML Structure

  • بخش قهرمان - یک ظاهر طراحی Hero Section - Styling

  • ایجاد یک دکمه قابل استفاده مجدد - HTML Creating a reusable button - HTML

  • دکمه - یک ظاهر طراحی شده Button - Styling

  • بخش پیش نمایش فصل Chapter Preview Section

  • پیش نمایش فصل - یک ظاهر طراحی Chapter Preview - Styling

  • Chapter Preview - Svelte Templating language - استفاده از #هر کلمه کلیدی Chapter Preview - Svelte Templating language - Usage of #each keyword

  • پیش نمایش فصل - محتوا را به صورت پویا در ورودی کاربر رندر کنید Chapter Preview - Render content dynamically on user input

  • پیش نمایش فصل - استخراج حالت برای ساده کردن ساختار کد Chapter Preview - Derive state to simplify code structure

  • درباره بخش نویسنده - ساختار HTML About the author section - HTML structure

  • درباره بخش نویسنده - سبک About the author section - Styling

  • بخش پرسش و پاسخ - ساختار HTML FAQ Section - HTML structure

  • بخش پرسش های متداول - یک ظاهر طراحی FAQ Section - Styling

  • بخش پرسش و پاسخ - عملکرد FAQ Section - Functionality

  • راه اندازی حساب راه راه Stripe Account Setup

  • ادغام پرداخت با نوار به صورت مفهومی توضیح داده شده است Payment integration with stripe conceptually explained

  • کد ادغام نواری Stripe integration code

  • صفحات موفقیت و شکست پس از پرداخت Success & Failure pages after payment

  • ثبت حساب Sendgrid و ایجاد کلید API Sendgrid account registration & API key creation

  • استقرار به vercel و راه اندازی وب هوک نواری Deployment to vercel & setup of stripe webhook

  • ارسال ایمیل با محصول دیجیتال در وب هوک پرداخت از stripe Send out email with digital product on payment webhook from stripe

  • اختیاری: نحوه ایمن کردن وبکهک راه راه Optional: How to secure your stripe webhook

پروژه 2: نمونه کار توسعه دهندگان با CMS بدون سر Project 2: Developer portfolio with headless CMS

  • منابع پروژه PROJECT RESOURCES

  • نمای کلی پروژه و زیرساخت برنامه Project overview & app infrastructure

  • راه اندازی پروژه Project setup

  • بخش قهرمان Hero Section

  • کامپوننت دکمه انعطاف پذیر Flexible Button Component

  • یک ظاهر طراحی دکمه انعطاف پذیر Flexible Button Styling

  • جزء سرفصل بخش Section Headline Component

  • بخش درباره من About Me Section

  • استایلینگ بخش درباره من About Me Section Styling

  • جدول سابقه کار Work Experience Table

  • طراحی میز تجربه کاری Work Experience Table Styling

  • راه اندازی سلامت عقل Sanity Setup

  • واکشی داده ها از Sanity در SvelteKit frontend Fetch data from Sanity in SvelteKit frontend

  • نمایش داده های سلامت عقل در جلو Display sanity data on frontend

  • بخش کار من - طرح واره داده های سلامت و افزودن داده ها My Work Section - Sanity data schema & adding data

  • انواعی را برای داده های پردازش شده و خام عقل تنظیم کنید Set up types for processed and raw data of sanity

  • داده ها را از خام تا قابل استفاده در قسمت جلویی پردازش کنید Process data from raw to usable on the frontend

  • بخش کار من - ساختار HTML My Work Section - HTML structure

  • بخش کار من - یک ظاهر طراحی My Work Section - Styling

  • مسیریابی و بارگذاری پویا مقاله وبلاگ Dynamic routing & loading of blog article

  • رندر مقاله وبلاگ در frontend Render blog article on frontend

  • استایل مقاله وبلاگ Blog article styling

  • مهارت ایجاد کنید و نمادهای مهارت را اضافه کنید Create skills & add skill icons

  • بخش مهارت ها Skills section

  • بخش مهارت - یک ظاهر طراحی Skills section - styling

  • بخش تماس Contact Section

  • طراحی بخش تماس Contact Section Styling

  • اعتبارسنجی فرانت اند فرم تماس با من Frontend Validation of Contact Me form

  • مدیریت بخش تماس با من در نقطه پایانی باطن Handling of contact me section in backend endpoint

  • سربرگ Header

  • یک ظاهر طراحی هدر Header Styling

  • ساختار و استایل پاورقی Footer Structure & Styling

  • استقرار پروژه به vercel Project deployment to vercel

پروژه 3: کتابخانه شخصی کتاب با احراز هویت supabase Project 3: Personal book library with supabase authentication

  • منابع پروژه PROJECT RESOURCES

  • بررسی اجمالی پروژه Project Overview

  • راه اندازی پروژه Project Setup

  • بخش قهرمان Hero Section

  • سبک بخش قهرمان Hero Section Styling

  • کامپوننت دکمه انعطاف پذیر Flexible Button Component

  • یک ظاهر طراحی دکمه انعطاف پذیر Flexible Button Styling

  • سربرگ Header

  • یک ظاهر طراحی هدر Header Styling

  • فرم احراز هویت برای صفحه ثبت نام و ورود Auth Form for Register & Login Page

  • Auth Form Styling Auth Form Styling

  • Form Actions در SvelteKit برای ثبت نام و ورود Form Actions in SvelteKit for Registration & Login

  • راه اندازی Supabase Supabase Setup

  • ثبت نام Supabase با ایمیل و رمز عبور Supabase Signup with Email and Password

  • بررسی اجمالی Svelte & Supabase Auth Flow Overview Svelte & Supabase Auth Flow

  • سمت سرور اجرای احراز هویت Auth implementation server side

  • اقدام فرم ورود Login form action

  • زمینه را برای پیگیری وضعیت کاربر تنظیم کنید Set up context to keep track of user state

  • ورود به شبکه اجتماعی با گوگل Social Login with Google

  • راه اندازی پایگاه داده و افزودن نام کاربری در هنگام ثبت نام Database setup and addition of username on registration

  • رفع خروج Fix logout

  • کتاب ها را از supabase بیاورید Fetch books from supabase

  • واکشی و نمایش نام کاربری Fetch & Display username

  • ناوبری جانبی و طرح‌بندی تأیید اعتبار Side Navigation & Auth Layout

  • Auth Layout Styling Auth Layout Styling

  • داشبورد کاربر User Dashboard

  • طراحی داشبورد کاربر User Dashboard Styling

  • جزء کارت کتاب Book Card Component

  • طراحی کارت کتاب Book Card Styling

  • جزء رتبه بندی ستاره Star Rating Component

  • استایل رتبه بندی ستاره Star Rating Styling

  • ادغام رتبه بندی ستاره با کارت کتاب و اتصال پایگاه داده Integrate Star Rating with Book Card and Database connection

  • جزء دسته کتاب Book Category Component

  • دسته بندی کتاب استایلینگ Book Category Styling

  • کتاب‌ها را برای دسته‌های مختلف کتاب فیلتر کنید Filter books for different book categories

  • صفحه کتاب فردی Individual Book Page

  • سبک کتاب فردی Individual Book Styling

  • حالت ویرایش در صفحه کتاب Edit Mode on Book Page

  • ویرایش یک ظاهر طراحی شده فیلدها Edit Fields Styling

  • به روز رسانی کتاب ها در پایگاه داده Update books in database

  • جلد کتاب را با فضای ذخیره سازی سوابیز بارگذاری کنید Upload book cover with supabase storage

  • یک ظاهر طراحی شده Droparea Droparea styling

  • UI کتاب را حذف کنید و از supabase db حذف کنید Delete book UI and delete from supabase db

  • اسکن صفحه قفسه با Dropzone Scan Shelf Page with Dropzone

  • ادغام هوش مصنوعی را باز کنید - برای دریافت آرایه کتاب، تصویر را به chat-gpt ارسال کنید Open AI Integration - Send picture to chat-gpt to get book array

  • اسکن صفحه قفسه - جدول کتاب و ادغام حالت Scan Shelf Page - Book table and state integration

  • اسکن صفحه قفسه - یک ظاهر طراحی شده Scan Shelf Page - Styling

  • از طریق صفحه اسکن قفسه کتاب ها را به پایگاه داده اضافه کنید Add books to database through scan-shelf page

  • صفحه تنظیمات و محاسبه آمار کاربر Settings Page & Calculation of user statistics

  • تنظیمات استایل صفحه Settings Page Styling

  • جزئیات حساب را در صفحه تنظیمات ویرایش کنید Edit account details on settings page

  • حذف اکانت و پاکسازی پروژه و با تشکر از شما!!! Delete account and clean up of project and THANKS TO YOU!!!

  • استقرار پروژه Project deployment

نمایش نظرات

Udemy (یودمی)

یودمی یکی از بزرگ‌ترین پلتفرم‌های آموزشی آنلاین است که به میلیون‌ها کاربر در سراسر جهان امکان دسترسی به دوره‌های متنوع و کاربردی را فراهم می‌کند. این پلتفرم امکان آموزش در زمینه‌های مختلف از فناوری اطلاعات و برنامه‌نویسی گرفته تا زبان‌های خارجی، مدیریت، و هنر را به کاربران ارائه می‌دهد. با استفاده از یودمی، کاربران می‌توانند به صورت انعطاف‌پذیر و بهینه، مهارت‌های جدیدی را یاد بگیرند و خود را برای بازار کار آماده کنند.

یکی از ویژگی‌های برجسته یودمی، کیفیت بالای دوره‌ها و حضور استادان مجرب و با تجربه در هر حوزه است. این امر به کاربران اعتماد می‌دهد که در حال دریافت آموزش از منابع قابل اعتماد و معتبر هستند و می‌توانند به بهترین شکل ممکن از آموزش‌ها بهره ببرند. به طور خلاصه، یودمی به عنوان یکی از معتبرترین و موثرترین پلتفرم‌های آموزشی آنلاین، به افراد امکان می‌دهد تا به راحتی و با کیفیت، مهارت‌های مورد نیاز خود را ارتقا دهند و به دنبال رشد و پیشرفت شغلی خود باشند.

آموزش Master Svelte 5 & SvelteKit – ساخت و استقرار برنامه های دنیای واقعی
جزییات دوره
16 hours
126
Udemy (یودمی) Udemy (یودمی)
(آخرین آپدیت)
381
4.7 از 5
دارد
دارد
دارد
جهت دریافت آخرین اخبار و آپدیت ها در کانال تلگرام عضو شوید.

Google Chrome Browser

Internet Download Manager

Pot Player

Winrar

Niklas Fischer Niklas Fischer

نیکلاس موسس یک آژانس فریلنسری است که در توسعه وب و علم داده تخصص دارد. سفر او با مقابله با چالش‌های کدنویسی در دنیای واقعی و برآوردن نیازهای مشتری مشخص شده است، که از آن بینش‌های ارزشمندی به دست آورده است. با این حال، اشتیاق واقعی او در تدریس نهفته است. نیکلاس هنر کدنویسی را با تأکید زیادی بر عملی بودن و کاربرد مستقیم با موفقیت به صدها نفر آموزش داده است. او این انبوهی از تجربیات عملی را در دوره های خود می ریزد و تضمین می کند که یادگیری ارائه شده فقط تئوری نیست، بلکه بلافاصله قابل عمل است. نیکلاس برای کسانی که آماده بهره مندی از موفقیت های او و درس گرفتن از اشتباهات او هستند، فرصتی بی نظیر برای فرو رفتن عمیق در دنیای کدنویسی ارائه می دهد.