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

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

معرفی دوره 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