آموزش بوت‌کمپ کامل توسعه‌دهنده ویو (پینیا، وای‌تست) - آخرین آپدیت

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

مقدمه Introduction

• مرور کلی دوره Course Outline

• به کلاس آنلاین ما بپیوندید! Join Our Online Classroom!

• تمرین: با همکلاسی ها و مدرس خود آشنا شوید Exercise: Meet Your Classmates and Instructor

• Vue در مقابل React در مقابل Angular Vue vs React vs Angular

• API ترکیب در مقابل API گزینه‌ها Composition vs. Options API

• منابع کامل دوره + کد Complete Course Resources + Code

• اختیاری: مستند ویو Optional: Vue Documentary

• منابع ZTM ZTM Resources

• چالش‌های کدنویسی ماهانه، منابع و راهنماهای رایگان Monthly Coding Challenges, Free Resources and Guides

مبانی ویو Vue Fundamentals

• شروع کار Getting Started

• ابزارهای توسعه ویو Vue Dev Tools

• کار با داده‌ها Working with Data

• نمونه‌های ویوی متعدد Multiple Vue Instances

• دسترسی به داده‌های نمونه Accessing the Instance Data

• متدها Methods

• دستورالعمل‌ها Directives

• اتصال داده دو طرفه Two-way data binding

• اتصال خصوصیات Binding Attributes

• نمایش HTML خام Outputting Raw HTML

• گوش دادن به رویدادها Listening to Events

• انتقال داده با رویدادها Passing on Data with Events

• اصلاح کننده‌های رویداد Event Modifiers

• رویدادها و اصلاح کننده‌های صفحه کلید Keyboard Events and Modifiers

• اصلاح کننده‌های v-model v-model Modifiers

• خصوصیات محاسبه شده Computed Properties

• ناظران Watchers

• اتصال کلاس‌ها Binding Classes

• اتصال سبک‌ها Binding Styles

• رندر شرطی Conditional Rendering

• دستورالعمل v-show The v-show Directive

• رندر لیست List Rendering

• درک نقش خصوصیت کلید Understanding the role of the key attribute

• توسعه دهنده وب ماهانه Web Developer Monthly

• تایید در لینکدین Endorsements On LinkedIN

پروژه ۱: زمین بازی پرسپکتیو Project 1: Perspective Playground

• ایجاد یک زمین بازی پرسپکتیو Creating a Perspective Playground

• کپی به کلیپ بورد Copying to the Clipboard

• تمرین اضافی: دکمه کپی Extra Exercise: Copy Button

ویو: فراتر از مبانی Vue: Beyond the Fundamentals

• نصب نمونه ویو Mounting the Vue Instance

• درک هوک‌های چرخه عمر Understanding Lifecycle Hooks

• استفاده از هوک‌های چرخه عمر Using Lifecycle Hooks

• DOM مجازی Virtual DOM

• درک واکنش‌پذیری با پروکسی‌ها Understanding Reactivity with Proxies

• کامپایلر ویو The Vue Compiler

• مقدمه اجزا Introduction to Components

محیط توسعه ویو Vue Developer Environment

• مرور کلی Overview

• ویدیوهای اختیاری در پیوست Optional Videos In Appendix

• مقدمه Vite Introduction to Vite

• بررسی Vite Exploring Vite

• درک SASS Understanding SASS

• PostCSS PostCSS

• نصب ESLint Installing ESLint

• پیکربندی ESLint Configuring ESLint

• Webpack Webpack

• نتیجه‌گیری Conclusion

اجزای پیشرفته ویو Advanced Vue Components

• اسکلت بندی یک پروژه ویو Scaffolding a Vue Project

• نوار کناری: درک سرورها Sidebar: Understanding Servers

• مرور فایل‌ها Reviewing the Files

• ایجاد اجزا Creating Components

• اجزای فرزند Child Components

• سبک‌های اجزا Component Styles

• استفاده از SASS در اجزا Using SASS in Components

• ارتباط بین اجزا Communicating Between Components

• Props Props

• محدودیت‌های Props The Limitations of Props

• انتشار رویدادها Emitting Events

• اعتبارسنجی Props Validating Props

• توابع بازگشتی Callback Functions

• درج محتوا با اسلات‌ها Inserting content with slots

• اسلات‌های نامگذاری شده Named Slots

انتقال‌ها و انیمیشن‌ها Transitions & Animations

• اجزای پویا Dynamic Components

• انیمیشن با انتقال‌های CSS Animating with CSS Transitions

• تنظیم دقیق انتقال‌ها Fine-tuning Transitions

• انیمیشن با انیمیشن‌های CSS Animating with CSS Animations

• انیمیشن با جاوا اسکریپت Animating with JavaScript

• انیمیشن زوم جاوا اسکریپت JavaScript Zoom Animation

• انتقال‌های CSS و جاوا اسکریپت CSS and JavaScript Transitions

• انیمیشن یک لیست Animating a List

• رفع انیمیشن Fixing the Animation

• نام کلاس‌های CSS انتقال Transition CSS Class Names

پروژه ۲: اپلیکیشن کوئیز ویو Project 2: Vue Quiz App

• راه‌اندازی برنامه کوئیز Setting up the Quiz Application

• نمایش سوالات Rendering the Questions

• حرکت بین سوالات Moving between Questions

• لمس نهایی Finishing Touches

• تمرین: سندرم ایمپوستر Exercise: Imposter Syndrome

پروژه اصلی: مقدمه پینیا Master Project: Introduction to Pinia

• گام بعدی The Next Step

• ایجاد یک پروژه جدید Creating a New Project

• مرور فایل‌ها Reviewing the Files

• قالب‌بندی با ESLint و Prettier Formatting with ESLint and Prettier

• افزودن الگو Adding the Template

• Tailwind چیست؟ What is Tailwind?

• نصب Tailwind Installing Tailwind

• تمرین با Tailwind Practicing with Tailwind

• بارگذاری دارایی‌ها Loading Assets

• درک وضعیت Understanding State

• مرور پیکربندی Pinia Reviewing the Pinia Configuration

• تقسیم الگو به اجزا Splitting the Template into Components

• غیرفعال کردن قوانین ویو Disabling Vue’s Rules

• کار با وضعیت Working with State

• توابع نگاشت جایگزین Alternative Mapping Functions

• درک Getterها Understanding Getters

• استفاده از Getterها Using Getters

• بستن مودال Closing the Modal

• نام‌های مستعار Aliases

• افزودن تب‌ها Adding Tabs

پروژه اصلی: اعتبارسنجی فرم Master Project: Form Validation

• راه‌اندازی اعتبارسنجی فرم Setting up Form Validation

• ثبت یک پلاگین Registering a Plugin

• اجزای اعتبارسنجی Validation Components

• تعریف قوانین Defining Rules

• اعمال قوانین Applying Rules

• قوانین اضافی Additional Rules

• اعتبارسنجی ایمیل‌ها Validating Emails

• اعتبارسنجی اعداد Validating Numbers

• اعتبارسنجی رمزهای عبور Validating Passwords

• فیلدهای کشویی و چک باکس Dropdown and Checkbox Fields

• اعتبارسنجی فرم Validating the Form

• نوار کناری: خصوصیات اسلات Sidebar: Slot Properties

• نمایش چندین پیام خطا Rendering Multiple Error Messages

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

• پیام‌های خطای سفارشی Custom Error Messages

• محرک‌های اعتبارسنجی Validation Triggers

• نمایش هشدارها Showing Alerts

• راه‌اندازی فرم ورود Setting up the Login Form

پروژه اصلی: احراز هویت Master Project: Authentication

• درک احراز هویت Understanding Authentication

• مرور قوانین Reviewing the Rules

• راه‌اندازی Firebase SDK Setting up the Firebase SDK

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

• رسیدگی به پاسخ Handling the Response

• صادرات خدمات Exporting Services

• ذخیره اطلاعات فرم کاربر Storing the User Form Data

• تمرین اضافی: افزودن فیلد دیگر Extra Exercise: Add Another Field

• درک احراز هویت Understanding Authentication

• ورود کاربر پس از ثبت نام Logging the user in after Signup

• درک اکشن‌ها Understanding Actions

• استفاده از اکشن‌ها Using Actions

• ارتباط کاربر با داده‌هایش Connecting the User with their Data

• راه‌اندازی اولیه Firebase Initializing Firebase First

• ماندگاری احراز هویت کاربر Persisting the User Authentication

• راه‌اندازی ورود Setting up the Login

• خروج Signing Out

• نوار کناری: توکن‌های وب JSON Sidebar: JSON Web Tokens

پروژه اصلی: مسیریابی Master Project: Routing

• درک مسیریابی Understanding Routing

• مرور پیکربندی مسیریاب Reviewing the Router Configuration

• ایجاد مسیرها Creating Routes

• حالت تاریخچه History Mode

• ناوبری با لینک‌ها Navigating with Links

• لینک‌های سفارشی Custom Links

• سبک‌های Tailwind برای لینک‌های فعال Tailwind Styles for Active Links

• نامگذاری مسیرها Naming Routes

• راه‌اندازی مسیرهای "Catch-All" و هدایت مجدد Setting up “Catch-All” and Redirect Routes

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

• مسیرهای نگهبان Guarding Routes

• نگهبانان خاص مسیر Route Specific Guards

• مسیرهای نگهبان فقط احراز هویت Guarding Authentication Only Routes

• هدایت مجدد پس از خروج از حساب Redirecting after Logging Out

• فیلدهای متای مسیر Route Meta Fields

پروژه اصلی: بارگذاری فایل‌ها Master Project: Uploading Files

• آماده‌سازی کامپوننت بارگذاری Preparing the Upload Component

• مدیریت رویدادهای کشیدن و رها کردن Handling Drag and Drop Events

• مدیریت فایل Handling the File

• فعال کردن سرویس ذخیره‌سازی Firebase Enabling Firebase’s Storage Service

• بارگذاری فایل‌ها با Firebase Uploading Files with Firebase

• قوانین و اعتبارسنجی Firebase Firebase Rules and Validation

• افزودن نوار پیشرفت Adding the Progress Bar

• پویایی نوار پیشرفت Making the Progress Bar Dynamic

• بهبود نوار پیشرفت Improving the Progress Bar

• رسیدگی به خطاها و بارگذاری‌های موفق Handling Errors and Successful Uploads

• ذخیره داده‌های فایل در پایگاه داده Storing the File Data in the Database

• مراجع و اسنپ‌شات‌های Firebase Firebase References and Snapshots

• بارگذاری جایگزین Fallback Upload

• لغو بارگذاری‌ها Canceling Uploads

• لغو بارگذاری‌ها با مراجع Cancelling Uploads with Refs

• یک نکته دیگر در مورد مراجع One more thing about References

• جستجو در پایگاه داده Querying the Database

• ذخیره لیست آهنگ‌ها Storing the List of Songs

• نمایش لیست آهنگ‌ها Displaying the List of Songs

• اعتبارسنجی Prop Prop Validation

• تغییر وضعیت فرم Toggling the Form

• اعتبارسنجی فرم آهنگ Validating the Song Form

• ویرایش آهنگ Editing a Song

• حذف آهنگ از فضای ذخیره‌سازی/پایگاه داده Deleting a Song from the Storage/Database

• به‌روزرسانی لیست آهنگ‌ها پس از بارگذاری Updating the list of songs after an Upload

• نگهبانان ترک مسیر Router Leave Guards

پروژه اصلی: پخش موسیقی Master Project: Playing Music

• ایجاد صفحه اصلی Creating the Home Page

• بررسی موقعیت اسکرول Checking the Scroll Position

• اسکرول بی‌پایان Infinite Scrolling

• پارامترهای مسیر Path Parameters

• ایجاد الگوی آهنگ Creating the Song Template

• اعتبارسنجی کامنت Validating the Comment

• آماده‌سازی فرم Prepping the Form

• نهایی کردن فرم کامنت Finalizing the Comment Form

• نمایش کامنت‌ها Displaying the Comments

• به‌روزرسانی لیست کامنت‌ها Updating the Comments List

• پارامترهای کوئری Query Parameters

• شناسایی پارامترهای کوئری Detecting Query Parameters

• به‌روزرسانی تعداد کامنت‌ها Updating the Comment Count

• ذخیره آهنگ در وضعیت Storing the song in the State

• پخش صدا Playing Audio

• تغییر وضعیت صدا Toggling Audio

• مدت زمان و موقعیت فعلی Duration and Current Position

• قالب‌بندی زمان Formatting the Time

• نوار پیشرفت پخش کننده Player Progress Bar

• تغییر موقعیت صدا Changing the Audio Position

• تمرین اضافی: به‌روزرسانی دکمه "پخش" Extra Exercise: Update the "play" Button

• ایجاد لینک‌ها با فرگمنت‌های هش Creating links with Hash Fragments

• انتقال‌های مسیر Route Transitions

پروژه اصلی: دستورالعمل‌ها Master Project: Directives

• مقدمه دستورالعمل‌ها Introduction to Directives

• نوشتن اولین دستورالعمل ما Writing our First Directive

• ارسال مقادیر به دستورالعمل‌ها Passing Values to Directives

• اصلاح کننده‌های دستورالعمل Directive Modifiers

• ثبت محلی یک دستورالعمل Registering a Directive Locally

پروژه اصلی: بین‌المللی‌سازی Master Project: Internationalization

• مقدمه i18n Introduction to i18n

• اولین ترجمه ما Our First Translation

• قالب‌بندی و جمع‌بندی Formatting and Pluralization

• بومی‌سازی اعداد Number Localizations

• ترجمه HTML با درون‌یابی کامپوننت Translating HTML with Component Interpolation

• تغییر زبان‌ها Changing Locales

• تمرین: ترجمه بقیه اپلیکیشن Exercise: Translating the Rest of the App

پروژه اصلی: PWA (برنامه وب پیشرفته) Master Project: PWA (Progressive Web App)

• برنامه‌های وب پیشرفته چیستند؟ What are Progressive Web Apps?

• فایل Manifest The Manifest File

• ایجاد فایل Manifest Generating the Manifest File

• پیکربندی فایل Manifest Configuring the Manifest File

• پشتیبانی آفلاین با سرویس ورکرها Offline Support with Service Workers

• درک کش کردن Understanding Caching

• Workbox Workbox

• ماندگاری داده Firebase Firebase Data Persistence

• مدیریت بارگذاری‌های آفلاین Handling Offline Uploads

پروژه اصلی: بهینه‌سازی‌های عملکرد Master Project: Performance Optimizations

• مرور کلی Overview

• ثبت خودکار کامپوننت‌های سراسری Auto-Registering Global Components

• عملکرد درک شده Perceived Performance

• واردات مسیر پویا Dynamic Route Imports

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

• پوشش کد Code Coverage

• تجسم کننده Rollup Rollup Visualizer

پروژه اصلی: استقرار + تولید Master Project: Deployment + Production

• استقرار یک اپلیکیشن با Vercel Deploying an App with Vercel

• اشتراک گذاری پروژه شما Sharing Your Project

پروژه اصلی: تست اپلیکیشن ویو شما Master Project: Testing Your Vue App

• مقدمه تست Introduction to Testing

• مقدمه Vitest Introduction to Vitest

• افزودن رابط کاربری Vitest Adding the Vitest UI

• نوشتن اولین تست ما Writing Our First Test

• نصب با Vue Test Utils Mounting with Vue Test Utils

• تست محتوای داخلی Testing the Inner Content

• ارسال داده به کامپوننت‌ها Passing Data to Components

• کامپوننت‌های استاب شده Stubbing Components

• از ادعاهای بولی اجتناب کنید Avoid Boolean Assertions

• تست کامپوننت‌های فرزند Testing Children Components

• شبیه‌سازی متدها Mocking Methods

• تست خصوصیات Testing Attributes

• تست اکشن‌های Pinia Testing Pinia Actions

• شبیه‌سازی Promiseها Mocking Promises

• تست کامپوننت‌های مسیریاب Testing Router Components

• تست اسنپ‌شات Snapshot Testing

• مرور کلی تست E2E E2E Testing Overview

• نوشتن یک تست E2E Writing an E2E Test

API کامپوزیشن Composition API

• API کامپوزیشن The Composition API

• میکسین‌ها Mixins

• مراجع واکنشی Reactive References

• تابع واکنشی The Reactive Function

• ناظران و خصوصیات محاسبه شده Watchers and Computed Properties

• توابع چرخه عمر Lifecycle Functions

• Props Props

• مراجع الگو Template Refs

• انتشار رویدادها Emitting Events

• مزایای API کامپوزیشن Advantages of the Composition API

• هوک‌های مسیریاب Router Hooks

• هوک‌های Pinia Pinia Hooks

• تأیید واکنش‌پذیری Verifying Reactivity

• خصوصیت setup The setup Attribute

الگوهای طراحی کامپوننت Component Design Patterns

• مرور کلی بخش Section Overview

• کامپوننت‌های کنترل شده Controlled Components

• جداسازی دغدغه‌ها Separation of Concerns

• کتابخانه‌های شخص ثالث به عنوان کامپوننت‌های کنترل شده Third-Party Libraries as Controlled Components

• فراتر از سیستم رویداد ویو Moving Beyond Vue’s Event System

• کپسوله کردن اسکرول Encapsulating Scrolling

• کامپوننت Teleport The Teleport Component

از اینجا به بعد کجا برویم؟ Where To Go From Here?

• ممنون! Thank You!

• دانشجوی فارغ التحصیل شوید Become An Alumni

• تاییدیه در لینکدین Endorsements On LinkedIn

• راهنمای یادگیری Learning Guideline

• چالش‌های کدنویسی Coding Challenges

• مرور دوره Course Review

• چالش نهایی The Final Challenge

پیوست: موارد اضافی Appendix: Extra Bits

• نکته سریع: ویدیوهای آینده Quick Note: Upcoming Videos

• فقط برای کاربران ویندوز For WINDOWS Users ONLY

• استفاده از ترمینال/خط فرمان Using The Terminal/Command Prompt

• اجرای script.js در Node Running script.js In Node

• ماژول‌ها در Node Modules In Node

• ماژول‌های ES6؟ ES6 Modules??

• ماژول‌های ES6 در Node ES6 Modules In Node

• انواع ماژول‌ها Types of Modules

بخش جایزه BONUS SECTION

• درس جایزه ویژه Special Bonus Lecture