آموزش Solid JS & Firebase - راهنمای کامل (برنامه توییتر کلون)

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

معرفی Introduction

• معرفی Introduction

• چگونه مسائل را حل کنیم How to resolve issues

• چند کلمه قبل از شروع Few words before start

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

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

• ویرایشگرهای کدگذاری را باز کنید Open Coding Editors

• فایل های ورودی ایجاد کنید Create entry files

• Tailwind css Tailwind css

• امتحان Quiz

• چیدمان Layout

• Init Icons + Menu Popup Init Icons + Popup menu

• چیدمان پایه انجام شد Base Layout Done

• امتحان Quiz

اجزا و مدولاریت Components & Modularity

• اجزای نوار کناری Sidebar Components

• امتحان Quiz

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

• برای حلقه For Loop

• طرح بندی ها Layouts

• چیدمان اصلی Main Layout

• امتحان Quiz

واکنش پذیری Reactivity

• سیگنال ایجاد کنید Create signal

• عملکرد سر خوردن را ایجاد کنید Create glide function

• محتوای بیشتری را به glide اضافه کنید Add more content to the glide

• امتحان Quiz

• مولفه پست سر خوردن Glide Post Component

• لوازم جانبی را به پست سر خوردن منتقل کنید Pass props to glide post

• نوع سر خوردن Glide Type

• دریافت کننده ها را ساده کنید Simplify Getters

• امتحان Quiz

مسیریابی Routing

• صفحه نمایش ها Screens

• طرح ورود و ثبت نام Login and Register layout

• روتر Router

• بارگذاری تنبل Lazy loading

• پیوندهای ناوبری اصلی Main navigation Links

• یک جزء روتر A Router Component

• امتحان Quiz

پنجره بازشو Popup

• نمایش محتوا به صورت مشروط Show content conditionally

• توابع بازگشت و چرخه حیات Fallback and lifecycle functions

• پاپ آپ ساده Simple Popup

• کامپوننت را به پاپ آپ منتقل کنید Pass component to Popup

• بهبود ظاهر پنجره بازشو Improve look of popup

• ایجاد افکت Create effect

• پاپ آپ را تنظیم کنید Adjust popup

• تنظیم موقعیت بازشو Set popup position

• با کلیک خارجی پنجره بازشو را ببندید Close popup on outside click

• پورتال Portal

• تغییر اندازه رویداد Resize Event

• با کلیک پاپ آپ نبندید Dont close on popup click

• امتحان Quiz

Root را ایجاد کنید Create Root

• اندازه صفحه createroot Pagesize createroot

• تغییر اندازه آهنگ Track resize

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

• ردیابی اندازه صفحه Pagesize tracking

• امتحان Quiz

زمینه و ارائه دهنده Context and Provider

• Auth Provider Auth Provider

• ارزش های زمینه را تأیید کنید Auth context values

• مغازه ها Stores

• وضعیت تأیید را تنظیم کنید Set Auth State

• امتحان Quiz

• لودر Loader

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

• طرح بندی مسیریابی Routing Layouts

• تغییر مسیرها Redirects

• امتحان Quiz

فرم ثبت نام Register Form

• مقدار را در فرم تنظیم کنید Set value in the form

• عملکردی برای مدیریت تغییرات ورودی Function to handle input changes

• امتحان Quiz

• نوع فرم ثبت نام Register form type

• استفاده از قلاب فرم useForm hook

• انتقال عملکرد به useForm Move functionality to useForm

• ارسال پاسخ به تماس Submit Callback

• انواع ژنریک Generic types

• امتحان Quiz

اعتبار سنجی Validation

• بخشنامه سفارشی Custom directive

• در Blur، در ورودی On Blur, On Input

• انتقال اعتبار به خارج Move Validate Out

• اعتبار سنجی ساده Simple validation

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

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

• اعتبار سنجی قابل استفاده مجدد Reusable validators

• تمام اعتبار سنجی ها را اجرا کنید Run all validators

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

• امتحان Quiz

اعتبار سنجی - قسمت 2 Validation - part 2

• تابع تولید Produce Function

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

• جزء خطای فرم Form error component

• نمایش پیام های خطا Display error messages

• خطاهای فرم ساده تر Simpler form errors

• امتحان Quiz

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

• اسم های قشنگ Nice names

• پیکربندی اعتبار سنجی Validator Config

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

• فرم معتبر است Is Form Valid

• امتحان Quiz

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

• فرم را به اعتبار سنج منتقل کنید Pass form into validator

• مقایسه با Compare with

Firebase Firebase

• استفاده ثبت نام useRegister

• Firebase را راه اندازی کنید Init Firebase

• مجموعه را از Firebase دریافت کنید Get Collection from Firebase

ثبت نام/ورود و خروج Register/Login & Logout

• ثبت نام کاربر Register User

• گسترش نوع کاربر Extend User Type

• ایجاد کاربر در Firestore Create user in Firestore

• احراز هویت کاربر Authenticate user

• خروج کاربر Logout User

• فرم ورود Login Form

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

• تغییر نام ثبت نام Rename Register

• امتحان Quiz

تصدیق کردن Authenticate

• از Auth استفاده کنید Use Auth

• ورود و ثبت نام را جایگزین کنید Replace login and register

• تغییر مسیر کاربر Redirect user

• دریافت کاربر Get User

• Auth Loading Auth Loading

• امتحان Quiz

اسنک بار Snackbars

• نمایش اطلاعات کاربر Display User Info

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

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

• اسنک بارهای پیچیده تر More Complex Snackbars

• ارسال UI UI Dispatch

• گلاید جدید را برای ذخیره فشار دهید Push new glide to store

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

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

• امتحان Quiz

• پنهان کردن خودکار اسنکبار Auto Hide Snackbar

• پیشرفت اسنکبار Snackbar progress

• نمایش میان وعده در احراز هویت Display snack on authentication

پیام رسان Messenger

• از مسنجر استفاده کنید Use Messenger

• جزء مسنجر Messenger Component

• پیام پاکسازی Cleanup message

• اندازه خودکار ناحیه متن Auto size textarea

• وضعیت احراز هویت را بررسی کنید Check auth state

• glide api ایجاد کنید Create glide api

• ایجاد glide try catch Create glide try catch

• glide را در FS ذخیره کنید Save glide to FS

• امتحان Quiz

از Glides Hook استفاده کنید Use Glides Hook

• از Glides Hook استفاده کنید Use Glides Hook

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

• Glides را با کاربران دریافت کنید Get Glides with users

• محدودیت ها Constraints

• قالب Glides را در فروشگاه تغییر دهید Change Glides Format in Store

• Slide را به State اضافه کنید Add Glide to State

• کاربر را به گلاید ایجاد شده اضافه کنید Add user to created glide

• سر خوردن نامشخص را بررسی کنید Check for undefined glide

• امتحان Quiz

شروع صفحه بندی Pagination Start

• کامپوننت Glides صفحه بندی شده Paginated Glides Component

• در حال بارگیری سر خوردن Glide Loading

• بارگذار داده Data Loader

• زمان بارگیری موارد جدید را بررسی کنید Check when to load new items

• نگه داشتن آخرین سر خوردن Keep Last Glide

• بارگذاری اطلاعات بیشتر Load More Data

• وضعیت توقف بارگذاری Stop Loading Condition

• امتحان Quiz

صفحه نمایه Profile Screen

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

• عنوان صفحه Page Title

• از قلاب کاربران استفاده کنید Use users hook

• کاربران را جذب کنید Get users

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

• لودر هنگام بارگیری کاربران Loader while loading users

• امتحان Quiz

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

• ویژگی کاربر را دنبال کنید Follow user feature

• پنهان کردن کاربران دنبال شده Hide followed users

• بهبود UX در Follow UX Improvement in Follow

• ارسال تاییدیه Auth Dispatch

• کاربر را به روز کنید Update user

• بررسی کنید که آیا کاربر null نیست Check if user is not null

• بررسی کنید که آیا قبلاً کاربر را دنبال می کنید Check if already follow user

• حذف کاربر از کاربران Remove user from users

• نمایش پیام هنگام دنبال کردن همه کاربران Display message when following all users

• غیر فعال کردن دکمه ارسال Disable send button

• امتحان Quiz

مشترک شدن در Glides Subscribe to Glides

• اسلایدهای کاربران دنبال شده را واکشی کنید Fetch glides of followed users

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

• لغو اشتراک از glides Unsubscribe from glides

• دریافت داده از زیر Get data from sub

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

• نمایش دکمه سرخوردن بیشتر Show more glides button

• دکمه لفاف Wrapper button

• نمایش سر خوردن های تازه Display fresh glides

• امتحان Quiz

جزئیات سر خوردن Glide Detail

• نحوه نگهداری گلاید How to store glides

• جستجوی سر خوردن فروشگاه Store glide lookup

• صفحه جزئیات سر خوردن Glide Detail Page

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

• جستجو کنید Get lookup

• Glide By Id را دریافت کنید Get Glide By Id

• نمایش سر خوردن با ایجاد منبع Display Glide with Create Resource

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

• پیام رسان را به جزئیات اضافه کنید Add messenger to detail

• امتحان Quiz

Subglides را دریافت کنید Get Subglides

• از Subglides استفاده کنید Use Subglides

• بارگیری سابگلاید Load Subglides

• جستجوی عبور برای واکشی سر خوردن Pass lookup to fetch glides

• واکشی subglides Fetch subglides

• جواب دادن به Answer To

• مجموعه ای را برای اضافه کردن لغزش دریافت کنید Get collection to add glide to

• صفحه بندی شده سر خوردن روی جزئیات Paginated Glide on Detail

• به روز رسانی تعداد subglide Update subglide count

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

• اسلاید را در زمان واقعی اضافه کنید Add glide in real time

• امتحان Quiz

صفحه بندی Subglide Subglide Pagination

• Refactor محل بارگیری سابگلایدها Refactor where to load subglides

• بازیابی داده ها Refetch Data

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

• صفحه بندی سابلاید می شود Pagination subglides

• نمایش پیام در صورت عدم سر خوردن Display message when no glides

• Handle Times Handle Times

• امتحان Quiz

مدال با مسنجر Modal with Messenger

• جزء معین Modal Component

• Modal را باز کنید Open Modal

• کامپوننت را در Modal باز کنید Open component in Modal

• بازپرداخت ها را به غرفه ها برگردانید Pass props back to props

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

• ارائه پیام رسان به مدال Provide messenger to modal

• پاس گلاید به مسنجر Pass glide to messenger

• از کودکان به عنوان یک جزء عبور کنید Pass children as a component

• غیرفعال کردن اسکرول Disable scrolling

• امتحان Quiz

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

• انتخاب تصویر دسته Handle Image Selection

• بافر آرایه Array buffer

• آدرس تصویر Image url

• Image را روی سیگنال قرار دهید Set Image to Signal

• عملکرد آپلود تصویر Upload Image Function

• آپلود تصویر با موفقیت انجام شد Upload Image Success

• ایجاد لغزش با تصویر Create glide with image

• تصویر را پاک کرده و نمایش دهید Clean Image and Display It

• امتحان Quiz

گسترش Deployment

• مخزن Github Github repo

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

• تست برنامه Application Testing

ماندگاری Persistence

• ارائه دهنده پایداری Persistence Provider

• تنظیم و دریافت ارزش Set and Get Value

• نوع ارزش را دریافت کنید Get value type

• سر خوردن انتخاب شده را ذخیره کنید Store Selected Glide

• از revalidate استفاده کنید use revalidate

• اعتبار مجدد تابع گیرنده Revalidate getter function

• از پشتکار ارزش بگیرید Get value from persistence

• امتحان Quiz

اعتبار مجدد Revalidate

• اعتبار مجدد Revalidate

• داده های ثابت و واکشی شده را مقایسه کنید Compare persisted and fetched data

• آخرین داده ها را در فروشگاه تنظیم کنید Set latest data in store

• برای تأیید مجدد، پاسخ تماس را اضافه کنید Add callback to revalidate

• در Glide فروشگاه به‌روزرسانی اضافه شد On Glide added update store

• ماندگاری روشن Clear persistence

• امتحان Quiz

• سخنرانی پایانی Final Lecture