آموزش Svelte and Firebase - The Complete Guide (2023)

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

معرفی Introduction

• معرفی Introduction

• چگونه می توان کمک گرفت How to get a help

• ترفندهای Github repo Github repo tricks

P1: پروژه آغازین P1: Init Project

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

• راه اندازی ویرایشگر کدنویسی Coding Editor Setup

• ساختار پوشه Folder Structure

• پوشه Src Src Folder

• چیدمان Layout

• امتحان Quiz

• باد دم Tailwind

• اصلاح باد دم Tailwind Correction

• بهبودهای اضافی CSS Additional CSS Improvements

• امتحان Quiz

P1: صفحات و واکنش پذیری P1: Pages & Reactivity

• مسیر جدید New Route

• بیشتر در مورد طرح بندی More about layouts

• صفحه فرعی Sub Page

• پاک کردن Cleanup

• واکنش پذیری Svelte Svelte Reactivity

• بیانیه واکنشی Reactive statement

• اعلامیه های واکنشی Reactive declarations

• نکات Tips

• امتحان Quiz

P1: مورد و فهرست کار P1: Task Item & List

• طرح بندی را کپی/پیست کنید Copy/Paste Layout

• مورد وظیفه Task Item

• فهرست وظیفه یا لیست کار Task List

• لوازم جانبی Props

• گزینه های قالب بندی Formatting Options

• داده های لیست وظایف Task List Data

• امتحان Quiz

P1: نحو الگو P1: Template Syntax

• هر حلقه Each Loop

• تکرار وظایف Iterate Tasks

• کامپوننت قابل ویرایش Editable Component

• اگر بلاک کنید If Block

• قالب بندی دکمه Button Formatting

• حالت ویرایش Editing Mode

• امتحان Quiz

P1: ارزش الزام آور و رویدادها P1: Value binding and Events

• الزام آور ارزشی Value binding

• مقدار پیش فرض Default Value

• اتصال به کامپوننت Bind to Component

• رویداد اعزام Dispatch Event

• تغییر نام رویداد Rename event

• انتقال داده در رویدادها Pass Data in Events

• امتحان Quiz

P1: فروشگاه ها P1: Stores

• مغازه ها Stores

• Sub to Store Sub to Store

• به روز رسانی فروشگاه Update Store

• لغو زیر Unsub

• اشتراک خودکار Auto Subscription

• تابع شروع Start Function

• عملکرد توقف Stop Function

• فروشگاه خواندنی Readable Store

• داده های ذخیره لیست وظایف Task List Store Data

• انتقال رویداد Event Forwarding

• امتحان Quiz

P1: به روز رسانی وظیفه P1: Task Update

• وظیفه به‌روزرسانی را برگردانید Revert Update Task

• فهرست پاس Pass List Index

• Task Idx را پیدا کنید Find Task Idx

• به روز رسانی Task Update Task

• بازگشت فقط اشتراک Return subscribe only

• به‌روزرسانی را به فروشگاه منتقل کنید Move update to store

• تمرین کد Code Exercise

• امتحان Quiz

P1: لیست و کار را اضافه کنید P1: Add List and Task

• افزودن لیست آماده سازی Add List Prep

• اضافه کردن لیست جدید Add new list

• اسکرول X را مجاز کنید Allow X Scrolling

• Task را اضافه کنید Add Task

• لیست را تمام قد تهیه کنید Make list full height

P1: کشیدن و رها کردن P1: Drag & Drop

• شروع را بکشید Drag Start

• رها کردن آیتم Drop Item

• انتقال داده رویداد Event data transfer

• انتقال کد به ذخیره Move code to store

• انتقال آیتم Move Item

• Refactor Props Refactor Props

• شناسه شناور لیست List Hover Id

• اثر شناور Hovering Effect

• ماژول اسکریپت Script Module

• امتحان Quiz

• تمرین کد Code Exercise

P1: انتقال P1: Transitions

• Crossfade Transition Crossfade Transition

• متحرک کردن تلنگر Animate Flip

• انتقال های بیشتر More Transitions

P1: پایداری P1: Persistence

• ماندگاری Persistence

• ذخیره داده ها Store Data

• امتحان Quiz

P1: Finish Store API P1: Finish Store API

• عملکرد مورد را حذف کنید Remove item function

• Task را حذف کنید Remove Task

• حذف لیست Remove List

• لیست قابل ویرایش Editable List

• به روز رسانی نام لیست Update List Name

• تمرین کد Code Exercise

• تمرین کد 2 Code Exercise 2

P1: گزینه های رندر P1: Rendering Options

• تابع بارگذاری Load Function

• SSR + CSR SSR + CSR

• پیش اجرا Prerendering

• فن با نوار اسکرول Fan with Scrollbar

• امتحان Quiz

P2: تهیه کد P2: Code Preparation

• طرح بندی پروژه 2 Project 2 Layout

• منوی پایین Bottom Menu

• صفحه نخست Home Page

• فرمت سند Format Document

• اجزای نوارهای جانبی Sidebars Components

• امتحان Quiz

P2: داده های ایستا تا پویا P2: Static to dynamic data

• داده های روند Trends data

• هر روند حلقه Each Loop Trend

• داده های پیوندهای ناو Nav Links Data

• رندر لینک ها Render Links

• امتحان Quiz

• ایجاد طرح بندی مشترک Create Shared Layout

• نقطه پایانی Api Api Endpoint

• داده ها را به Layout ارائه دهید Provide data to Layout

• ایجاد سر خوردن - ساده Create glide - simple

• داده های بیشتری را به Glide ارائه دهید Provide more data to Glide

• مولفه پست سر خوردن Glide post component

P2: صفحات بیشتر و گروه بندی P2: More Pages and Grouping

• صفحه ورود و ثبت نام Login and Register Page

• گروه بندی مسیرها Route Grouping

• مؤلفه طرح‌بندی تأیید اعتبار Auth layout component

• صفحه خطا Error page

• امتحان Quiz

P2: بهبودهای تجربه برنامه نویس P2: Dev Experience Improvements

• نام مستعار مسیر Path Alias

• Intelisense را اصلاح کنید Fix Intelisense

P2: پنجره بازشو P2: Popup

• کامپوننت پاپ آپ Popup component

• بسته بندی منوی پایین در پنجره بازشو Wrap bottom menu in popup

• منوی خروج Logout Menu

• قبل از آپدیت و بعد از آپدیت Before Update and after update

• بستن پنجره بازشو Close popup

• شنونده رویداد پاک Clean event listener

• پاپ آپ پایین موقعیت Popup Bottom Position

• پورتال Portal

• موقعیت سمت چپ پنجره بازشو را تنظیم کنید Adjust popup left position

• هنگام تغییر اندازه تنظیم کنید Adjust while resizing

• بستن فقط روی کلیک خارجی Close on outside click only

• اقدامات Actions

• دستگیره پنجره بازشو در عمل Handle popup close in action

• امتحان Quiz

P2: زمینه رابط کاربری P2: UI Context

• زمینه رابط کاربری UI Context

• زمینه را تنظیم کنید Set context

• انتزاع زمینه را دریافت کنید Get context abstraction

• تنظیم اندازه صفحه نمایش Set screen size

• متغیرهای اندازه کمک کننده Helper size variables

• مولفه پنجره شیک Svelte window component

• زمینه رابط کاربری را ساده کنید Simplify Ui context

• نمایش نماد به صورت مشروط Display icon conditionally

• برای بارگیری UI بررسی کنید Check for loading UI

• CSR CSR

• امتحان Quiz

P2: زمینه تأیید اعتبار P2: Auth Context

• زمینه تأیید اعتبار Auth Context

• شبیه سازی احراز هویت Simulate Authentication

• کامپوننت لودر Loader Component

• احراز هویت مشروط Conditional Auth

• در صورت احراز هویت تغییر مسیر دهید Redirect if authenticated

• جزء طرح بندی اصلی Main layout component

• تغییر مسیر صفحات اصلی Main pages redirect

• امتحان Quiz

P2: فرم‌های تأیید اعتبار را ببندید P2: Bind auth forms

• انتقال فرم ها به کامپوننت ها Move forms to components

• اتصال داده های ورود به سیستم Bind login data

• داده های ثبت را پیوند دهید Bind register data

• اقدام را تأیید کنید Validate action

• نام مستعار برای اکشن ها و فروشگاه ها اضافه کنید Add alias for actions and stores

P2: رسیدگی به فرم P2: Form Handling

• فروشگاه فرم Handler Form Handler Store

• حالت را به فروشگاه فرم اضافه کنید Add state to form store

• فروشگاه جداگانه ایجاد کنید Create store separately

• چرخه حیات createStore createStore lifecycle

• کنترل کننده رویداد ورودی Input event handlers

• آماده سازی اعتبار را بررسی کنید Check Validity Preparation

• فروشگاه خطاها Errors store

• خطاهای به روز رسانی Update Errors

• امتحان Quiz

P2: اعتبار سنجی فرم P2: Form Validators

• اعتبار سنجی تصادفی Random validator

• اعتبار سنج حداکثر طول Max length validator

• بازنگری اعتبار سنج حداکثر طول Max length validator rework

• اعتبار سنج را جدا کنید Detach validator

• اعتبار سنجی حلقه Loop validators

• اولین اعتبار سنجی حروف بزرگ First uppercase validator

• آرایه خطاها Errors array

• مولفه خطاهای فرم Form Errors Component

• خطاها را به عنوان پروپوزال عبور دهید Pass errors as props

• اعتباردهنده های بیشتر More validators

• ارزش های سفارشی را به اعتباردهنده ها منتقل کنید Pass custom values to validators

• امتحان Quiz

P2: اعتبار سنجی بیشتر P2: More Validation

• عملکرد نام خوب Nice name function

• تابع ارسال کنید Submit function

• فروشگاه فرم را حذف کنید Remove form store

• تایید در ارسال Validate on submit

• فقط در صورت معتبر بودن ارسال کنید Submit only when valid

• ارسال فرم به اعتباردهنده Pass form to validator

• با اعتبار سنج مقایسه کنید Compare with validator

• در اعتبار سنجی ورودی On Input validation

• تایید فرم ورود Login form validation

• امتحان Quiz

P2: ثبت نام کاربر P2: Register User

• معرفی Firebase Firebase Intro

• پیکربندی firebase را اضافه کنید Add firebase config

• ایجاد کاربران در DB Create Users in DB

• ثبت پاسخ تماس Register callback

• پوشه Api Api folder

• ثبت نام کاربر firebase Register user firebase

• ایجاد کاربر در مجموعه Create user in collection

• امتحان Quiz

P2: دولت تأیید P2: Auth State

• وضعیت احراز هویت را در پاسخ به تماس بررسی کنید Check auth state in callback

• Refactor auth state Refactor auth state

• خروج از کاربر Logout user

• ورود کاربر Login User

• امتحان Quiz

• تغییر مسیرهای واکنشی Reactive redirects

• فروشگاه Auth Auth Store

• در حال بارگیری وضعیت احراز هویت Loading auth state

• کاربر را از Firestore دریافت کنید Get user from Firestore

• نمایش داده های کاربر در منوی پایین Display user data in bottom menu

• جزء پیام رسان Messenger component

• امتحان Quiz

P2: اسنک بار P2: Snackbar

• شروع اسنکبار Snackbar Start

• اسنک بار در زمینه Snackbar in context

• اشیاء اسنکبار Snackbar Objects

• اسنکبار اضافه کنید Add snackbar

• نوار اسنک را حذف کنید Remove snackbar

• اسنک بار را از فروشگاه خارج کنید Remove snackbar from store

• میان وعده مخفی خودکار Auto hide snack

• نوار پیشرفت Progress bar

• انتقال اسنکبار Snackbar transitions

• Snackbar در احراز هویت Snackbar on authentication

• امتحان Quiz

P2: Glide را ایجاد کنید P2: Create Glide

• فروشگاه گلاید ایجاد کنید Create glide store

• ایجاد glide در مسنجر Create glide in Messenger

• هنگام اضافه کردن glide، مسنجر را غیرفعال کنید Disable messenger when adding glide

• Glides API Glides API

• گرفتن را امتحان کنید Try catch

• گلاید را در FS ذخیره کنید Store glide in FS

• اسلاید جدید را به صورت واکنشی اضافه کنید Add new glide reactively

• امتحان Quiz

P2: واکشی Glides P2: Fetch Glides

• واکشی آماده سازی سرسره ها Fetch glides prep

• واکشی گلاید Fetch glides

• فروشگاه گلاید Store glides

• کاربر glide را به سر خوردن وصل کنید Attach glide user to glide

• نشانگر دیتا لودر Data loader indicator

• ترتیب داده ها با محدودیت ها Order data with constraints

• امتحان Quiz

P2: صفحه بندی P2: Pagination

• اسلایدها را به صفحات تغییر دهید Change glides to pages

• نمایش صفحات Display Pages

• دوباره کاری اضافه کردن glide Rework add glide

• مولفه سرخوردن صفحه بندی شده Paginated glides component

• برای بارگیری سرسره ها، آستانه را اضافه کنید Add treshold to load glides

• آخرین گلاید دکتر Last glide doc

• سر خوردن های بیشتری را بارگیری کنید Load more glides

• وضعیت توقف بارگیری Loading stop condition

• امتحان Quiz

P2: صفحه نمایه P2: Profile Page

• صفحه نمایه Profile page

• فروشگاه صفحه Page store

• کاربران را بارگیری کنید Load users

• کاربران را از firestore واکشی کنید Fetch users from firestore

• مورد کاربر و بارگیری User item and loading

• واکشی همه کاربران غیر از ورود به سیستم Fetch all but logged in user

• امتحان Quiz

P2: کاربر را دنبال کنید P2: Follow User

• آماده سازی کاربر را دنبال کنید Follow user preparations

• به روز رسانی کاربر را در FS دنبال کنید Follow User Update in FS

• فیلتر کردن کاربران دنبال شده Filter out followed users

• دکمه غیرفعال کردن هنگام دنبال کردن Disable button while following

• پس از دنبال کردن، کاربر auth را به روز کنید Update auth user after follow

• در صورت دنبال کردن کاربر، خطا ایجاد کنید Throw error if following user

• کاربر زیر را از لیست حذف کنید Remove following user from list

• نمایش پیام در صورت عدم وجود کاربر Display message when no users

• نمایش اسلایدها از کاربران دنبال شده Display glides from followed users

• امتحان Quiz

P2: در New Glides مشترک شوید P2: Subscribe to New Glides

• مشترک شدن در اسلایدهای جدید Subscribe to new glides

• داده‌های خام اسلاید را دریافت کنید Get glide raw data

• اسلایدها را از اسناد دریافت کنید Get glides from documents

• گلایدهای تازه را ذخیره کنید Store fresh glides

• دکمه ای برای نمایش لغزش های بیشتر Button to display more glides

• نمایش سر خوردن - کلیدهای تکراری Display glides - duplicate keys

• مجدداً به سر خوردن Resub to glides

• اندازه خودکار منطقه متن Autosize text area

• امتحان Quiz

P2: جستجو و صفحه جزئیات P2: Lookup and Detail Page

• جستجو را اضافه کنید Add Lookup

• بازگشت جستجو از تابع استخراج Return lookup from extract function

• صفحه نمایش جزئیات سر خوردن Glide detail screen

• پارامترهای مسیر را دریافت کنید Get route params

• به صفحه جزئیات بروید Navigate to detail page

• جستجوی سر خوردن را از کاربر دریافت کنید Get glide lookup from user

• داده های سر خوردن را دریافت کنید Get glide data

• امتحان Quiz

P2: فروشگاه ID Glide P2: Glide ID Store

• فروشگاه Glide ID Glide Id store

• وضعیت بارگیری با جزئیات Loading State in Detail

• ارسال اسلاید و مسنجر Provide glide post and messenger

• دکمه برگشت Back Button

• واکشی subglides Fetch subglides

• به مسنجر مراجعه کنید Pass glide lookup to messenger

• اسلاید را در مجموعه صحیح اضافه کنید Add glide in correct collection

• برای واکشی زیرگلایدها، جستجوی سر خوردن را پاس کنید Pass glide lookup to fetch subglides

• واکشی subglides از جستجو Fetch subglides from lookup

• امتحان Quiz

P2: صفحه بندی در صفحه جزئیات P2: Pagination on Detail Page

• صفحه بندی شده را به صفحه جزئیات اضافه کنید Add paginated to detail page

• افزایش تعداد لغزش در FS Increment glide count in FS

• به روز رسانی تعداد subglide در زمان واقعی Update subglide count in real time

• اسلاید را به فهرست زیرگلایدها اضافه کنید Add glide to subglides list

• دستگیره مورد بازیابی Handle refetch case

• سر خوردن مجدد Refetch glide

• در پاسخ به تماس بارگیری شده با سر خوردن On glide loaded callback

• تنظیم مجدد صفحه بندی Reset pagination

• صفحه بندی را سابلاید می کند Subglides pagination

• بررسی کنید که سر خوردن نداشته باشد Check for no glides

• امتحان Quiz

P2: ویژگی مدال P2: Modal Feature

• شروع مودال Modal start

• مودال را به صورت مشروط باز کنید Open modal conditionaly

• اسلات به نام Named slot

• اسلات بازکن Opener slot

• لوازم اسلات Slot props

• روی کلیک خارج ببندید Close on click outside

• مسنجر و غیرفعال کردن اسکرول Messenger and disable scroll

• سر خوردن جهانی Global Glide

• جهانی on glide ارسال callback.mov Global on glide posted callback.mov

• وقتی سر خوردن پست شد، حالت را ببندید Close modal when glide posted

• امتحان Quiz

P2: آپلود تصویر P2: Image Upload

• انتخاب تصویر را کنترل کنید Handle image selection

• دریافت بایت تصویر Get image bytes

• پیش نمایش تصویر Preview image

• تابع آپلود تصویر Upload image function

• آپلود تصویر کار می کند Upload image working

• تصویر را برای سر خوردن ضمیمه کنید Attach image to glide

• مشکل صفحه بندی را برطرف کنید Fix issue with pagination

• امتحان Quiz

P2: پایان با استقرار P2: Finishing With Deployment

• Github Repo Github Repo

• استقرار در Vercel Deployment to Vercel

• آزمایش برنامه و پایان Testing App & Finish