آموزش با Vue JS 3 و Firebase برنامه های وب بسازید

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

معرفی و راه اندازی Introduction & Setup

• Vue چیست؟ What is Vue?

• ویژگی های جدید در Vue 3 New Features in Vue 3

• آنچه شما از قبل باید بدانید What You Should Already Know

• راه اندازی محیط Environment Setup

• فایل های دوره Course Files

مبانی Vue Vue Basics

• نحوه استفاده از Vue (با استفاده از CDN) How to use Vue (using the CDN)

• ایجاد یک برنامه Vue Creating a Vue App

• الگوها و داده ها Templates & Data

• روش‌ها و روی رویدادها کلیک کنید Methods & Click Events

• رندر مشروط Conditional Rendering

• سایر رویدادهای ماوس Other Mouse Events

• لیست های خروجی (v-for) Outputting Lists (v-for)

• صفت Binding Attribute Binding

• کلاس های دینامیک Dynamic Classes

• چالش - به موارد دلخواه اضافه کنید CHALLENGE - Add to Favs

• راه حل - به موارد دلخواه اضافه کنید SOLUTION - Add to Favs

• ویژگی های محاسبه شده Computed Properties

Vue CLI (برای پروژه های بزرگتر) The Vue CLI (for Bigger Projects)

• چرا از Vue CLI استفاده کنیم؟ Why Use the Vue CLI?

• نحوه استفاده از Vue CLI How to Use the Vue CLI

• بررسی پروژه جدید New Project Walkthrough

• فایل‌ها و قالب‌های Vue Vue Files & Templates

• Refs الگو Template Refs

• اجزای چندگانه Multiple Components

• سبک های مؤلفه و سبک های جهانی Component Styles & Global Styles

• انتقال داده با Props Passing Data with Props

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

• روی Event Modifiers کلیک کنید Click Event Modifiers

• شکاف ها Slots

• چالش - استفاده مجدد از اجزا CHALLENGE - Reusing Components

• با استفاده از تله پورت Using Teleport

پروژه ساخت - تایمر واکنش PROJECT BUILD - Reaction Timer

• پروژه 1 پیش نمایش و راه اندازی Project 1 Preview & Setup

• شروع یک بازی جدید Starting a New Game

• قلاب چرخه حیات اجزا Component Lifecycle Hooks

• ایجاد تایمر واکنش Creating the Reaction Timer

• انتشار رویدادهای سفارشی با داده ها Emitting Custom Events with Data

• چالش - نمایش مولفه نتایج CHALLENGE - Showing a Results Component

• پایان لمس Finishing Touches

فرم ها و اتصال داده ها Forms & Data Binding

• معرفی و راه اندازی فرم ها Forms Intro & Setup

• اتصال داده دو طرفه Two-way Data Binding

• فیلدها را انتخاب کنید Select Fields

• چک باکس ها Checkboxes

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

• چالش - مهارت های حذف CHALLENGE - Deleting Skills

• ارسال فرم Submitting the Form

مبانی روتر Vue Vue Router Basics

• چرا از روتر Vue استفاده کنیم؟ Why Use the Vue Router?

• راه اندازی روتر برای پروژه های جدید Router Setup for New Projects

• لینک های روتر Router Links

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

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

• لینک های پویا Dynamic Links

• 404 صفحات و تغییر مسیرها 404 Pages & Redirects

• ناوبری برنامه ای Programmatic Navigation

• کامپوننت های بارگذاری تنبل Lazy Loading Components

واکشی داده ها Fetching Data

• استفاده از سرور JSON Using JSON Server

• کجا داده ها را واکشی کنیم Where to Fetch Data

• نمایش مشروط داده ها Conditionally Showing Data

پروژه ساخت - برنامه ریز پروژه ساده PROJECT BUILD - Simple Project Planner

• Project 2 Preview & Setup Project 2 Preview & Setup

• نمای خانه و داده ها Home View & Data

• قالب پروژه واحد Single Project Template

• استفاده از آیکون های متریال Using Material Icons

• حذف پروژه ها Deleting Projects

• تکمیل پروژه ها Completing Projects

• فرم پروژه جدید New Project Form

• افزودن پروژه های جدید Adding New Projects

• کامپوننت نوار ناوبری Navbar Component

• ویرایش مسیر پروژه Edit Project Route

• چالش - به روز رسانی پروژه ها CHALLENGE - Updating Projects

• ایجاد یک Filter Nav Creating a Filter Nav

• چالش - نمایش پروژه های فیلتر شده CHALLENGE - Showing Filtered Projects

Composition API The Composition API

• معایب Options API Drawbacks of the Options API

• Composition API اصول Composition API Basics

• Refs الگو در تابع Setup Template Refs in the Setup Function

• استفاده از Refs برای واکنش پذیری Using Refs for Reactivity

• Refs vs Reactive Refs vs Reactive

• مقادیر محاسبه شده در تابع Setup Computed Values in the Setup Function

• استفاده از ساعت و ساعت افکت Using watch and watchEffect

• استفاده از Props در تابع Setup Using Props in the Setup Function

• قلاب چرخه حیات Lifecycle Hooks

کد Async (و Composition API) Async Code (& the Composition API)

• واکشی داده ها در تابع Setup Fetching Data in the Setup Function

• توابع ترکیب قابل استفاده مجدد (قابلیت ترکیب) Reusable Composition Functions (Composables)

• ایجاد یک قابل ترکیب دیگر Creating Another Composable

• ایجاد یک اسپینر بارگیری Creating a Loading Spinner

• ساخت فرم وب Making a Web Form

• چالش - ایجاد یک درخواست پست CHALLENGE - Making a POST Request

• درس Async آینده و یک ظاهر طراحی اضافی Future Async Lesson & Extra Styling

مسیریابی (با Composition API) Routing (with the Composition API)

• Routing Recap & Navbar Routing Recap & Navbar

• با استفاده از userRouter Using useRouter

• استفاده از useRoute Using useRoute

• چالش - ایجاد یک مسیر برچسب CHALLENGE - Creating a Tag Route

• ایجاد یک ابر برچسب Creating a Tag Cloud

پایگاه های اطلاعاتی Firebase (Firestore) Firebase Databases (Firestore)

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

• اتصال به پروژه Firebase Connecting to a Firebase Project

• مجموعه ها و اسناد Firestore Firestore Collections & Documents

• واکشی مجموعه ای از اسناد Fetching a Collection of Documents

• واکشی اسناد واحد Fetching Single Documents

• افزودن اسناد Adding Documents

• حذف اسناد Deleting Docments

• استفاده از مهر زمانی Using Timestamps

• سفارش مجموعه ها Ordering Collections

• معرفی شنوندگان بلادرنگ Intro to Real-Time Listeners

PROJECT BUILD - اتاق چت زنده با احراز هویت PROJECT BUILD - Live Chat Room with Authentication

• پیش نمایش و راه اندازی پروژه 3 Project 3 Preview & Setup

• راه اندازی Firebase (و استفاده مجدد از پروژه های Firebase) Firebase Setup (& Reusing Firebase Projects)

• ایجاد فرم ثبت نام و ورود Creating a Signup & Login Form

• چالش - جابجایی بین فرم ها CHALLENGE - Switching Between Forms

• تنظیم احراز هویت Firebase Firebase Authentication Setup

• ایجاد یک Signup Composable Creating a Signup Composable

• خطاهای خروجی Outputting Errors

• ایجاد یک Login Composable Creating a Login Composable

• تنظیم زمینه و انتشار رویدادها Setup Context & Emitting Events

• کامپوننت نوار ناوبری Navbar Component

• خروج کاربران از سیستم (قابل ترکیب) Logging Users Out (Composable)

• دریافت کاربر فعلی (قابل ترکیب) Getting the Current User (Composable)

• Route Guards (برای کاربران Unauth) Route Guards (for Unauth Users)

• در انتظار راه اندازی Firebase Auth Waiting for Firebase Auth to Initialize

• چالش - تماشای کاربر فعلی CHALLENGE - Watching the Current User

• فرم جدید چت New Chat Form

• افزودن پیام های جدید به Firestore Adding New Messages to Firestore

• شنونده زمان واقعی Firestore (قابل ترکیب) Real-Time Firestore Listener (Composable)

• ایجاد پنجره چت Creating the Chat Window

• قالب بندی تاریخ ها (date-fns) Formatting Dates (date-fns)

• چالش - پیمایش خودکار پنجره چت CHALLENGE - Auto-Scrolling the Chat Window

• لغو اشتراک از شنوندگان بلادرنگ Unsubscribing From Real-Time Listeners

• گارد نهایی مسیر Final Route Guard

• تست و مراحل بعدی Testing & Next Steps

ساخت و استقرار (Hosting Firebase) Building & Deploying (Firebase Hosting)

• Firebase CLI The Firebase CLI

• ساخت اپلیکیشن Building an App

• استقرار برنامه Deploying the App

• ایجاد تغییرات و استقرار مجدد Making Changes & Re-deploying

قوانین امنیتی Firebase Firebase Security Rules

• قوانین امنیتی چیست؟ What Are Security Rules?

• مسیرها و قوانین توضیح داده شده است Paths & Rules Explained

• نیاز به احراز هویت Requiring Authentication

• قفل کردن API روی یک دامنه Locking the API to a Domain

ساخت پروژه - نینجاهای موسو (و فضای ذخیره‌سازی Firebase) PROJECT BUILD - Muso Ninjas (& Firebase Storage)

• پروژه 4 پیش نمایش و راه اندازی Project 4 Preview & Setup

• سبک های جهانی و قلم سفارشی Global Styles & Custom Font

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

• اتصال به Firebase Connecting to Firebase

• استفاده مجدد از Firebase Composables Reusing Firebase Composables

• ایجاد نمای ورود Creating a Login View

• افزودن یک حالت "در انتظار" به درخواست ها Adding a 'pending' State to Requests

• ایجاد نمای ثبت نام Creating a Signup View

• افزودن کامپوننت نوار ناوبری Adding a Navbar Component

• چالش - خروج کاربران از سیستم CHALLENGE - Logging Users Out

• چالش - نمایش مشروط پیوندها CHALLENGE - Conditionally Showing Links

• جزء جدید لیست پخش New Playlist Component

• مدیریت تغییرات فایل Handling File Changes

• معرفی Firebase Storage Intro to Firebase Storage

• آپلود تصاویر (قسمت اول) Uploading Images (part 1)

• آپلود تصاویر (قسمت دوم) Uploading Images (part 2)

• افزودن لیست های پخش جدید Adding New Playlists

• CHALLENGE - دریافت اطلاعات لیست پخش در زمان واقعی CHALLENGE - Getting Real-Time Playlist Data

• فهرست کردن لیست های پخش Listing Playlists

• به روز رسانی Nav & Route Guards Nav Update & Route Guards

• مسیر جزئیات لیست پخش Playlist Details Route

• تغییر مسیر به جزئیات لیست پخش Redirecting to Playlist Details

• دریافت اسناد واحد (در زمان واقعی) Getting Single Documents (Real-time)

• الگوی جزئیات لیست پخش Playlist Details Template

• بررسی مالکیت لیست پخش Checking Playlist Ownership

• CHALLENGE - حذف لیست پخش (قابل نوشتن) CHALLENGE - Deleting a Playlist (Composable)

• حذف تصاویر از فضای ذخیره سازی Deleting Images from Storage

• بیشتر در مورد قوانین Firestore More on Firestore Rules

• قوانین ذخیره سازی Storage Rules

• اضافه کردن آهنگ به لیست پخش Adding Songs to Playlists

• به روز رسانی جزئیات لیست پخش Updating Playlist Details

• لیست آهنگ ها Listing Songs

• چالش - حذف آهنگ ها CHALLENGE - Deleting Songs

• مسیر لیست های پخش کاربر User Playlists Route

• پرس و جوهای Firestore Firestore Queries

• فهرست کردن لیست های پخش کاربران Listing User Playlists

• لمس نهایی Final Touches

• ساخت و استقرار Building & Deploying

• مراحل بعدی Next Steps

استفاده از Vue با Firebase 9 Using Vue with Firebase 9

• پروژه معرفی و شروع Intro & Starter Project

• فایل پیکربندی Firebase Firebase Config File

• واکشی داده های Firestore Fetching Firestore Data

• داده های جمع آوری زمان واقعی Real Time Collection Data

• افزودن اسناد جدید Adding New Documents

• حذف اسناد Deleting Documents

• به روز رسانی اسناد Updating Documents

• راه اندازی Firebase Auth Setting up Firebase Auth

• ثبت نام کاربران جدید Signing Up New Users

• خروج کاربران از سیستم Logging Users Out

• ورود کاربران به Logging Users In

• دریافت کاربر فعلی Getting the Current User

• محتوای نوار ناوبری مشروط Conditional Navbar Content

• در انتظار آماده شدن Auth Waiting for Auth to be Ready

• ساخت گارد مسیر Making a Route Guard

• تغییر مسیر کاربران Redirecting Users

• پرس و جوهای Firestore Firestore Queries

درس های اضافی و منابع بیشتر Extra Lessons & More Resources

• دروس اضافی جاوا اسکریپت Extra JavaScript Lessons

• ماژول های ES6 (واردات و صادرات) ES6 Modules (Import & Export)

• استفاده از map( ) و filter( ) Using map( ) & filter( )

• نحو را گسترش دهید Spread Syntax

• رشته های الگو Template Strings

• نحو تابع پیکان Arrow Function Syntax

• Fetch & Promises Fetch & Promises

• Async & Await Async & Await

آرشیو - مقدمه ARCHIVED - Introduction

• معرفی Introduction

• فایل های دوره Course Files

• راه اندازی ویرایشگر متن Text Editor Setup

بایگانی شده - مبانی Vue.js ARCHIVED - Vue.js Basics

• Vue.js چیست؟ What is Vue.js?

• راه اندازی Vue.js (راه ساده) Setting up Vue.js (the simple way)

• نمونه Vue The Vue Instance

• مواد و روش ها Methods

• اتصال داده ها Data Binding

• مناسبت ها Events

• شی رویداد The Event Object

• رویدادهای صفحه کلید Keyboard Events

• اتصال داده دو طرفه (مدل v) Two-way Data Binding (v-model)

• اصلاح کننده ها Modifiers

• خروجی شرطی با v-if Conditional Output with v-if

• حلقه زدن با v-for Looping with v-for

بایگانی شده - Vue CLI ARCHIVED - The Vue CLI

• Vue CLI The Vue CLI

• کامپوننت ها و فایل های Vue Components & Vue Files

• تابع data(). The data() Function

• اجزای تودرتو Nesting Components

• CSS با محدوده Scoped CSS

• انتقال داده با Props Passing Data with Props

• رویدادهای سفارشی Custom Events

• قلاب چرخه زندگی Life-cycle Hooks

• درخواست با Axios Making Requests with Axios

• فیلترها Filters

• ویژگی های محاسبه شده (کادر جستجوی سفارشی) Computed Properties (custom search box)

بایگانی شده - روتر Vue ARCHIVED - The Vue Router

• روتر Vue چیست؟ What is the Vue Router?

• راه اندازی مسیرها Setting up Routes

• لینک های روتر Router Links

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

• تماشای شی $route Watching the $route Object

• اطلاعات بیشتر در مورد پیوندهای روتر More on Router Links

• تغییر مسیر کاربران به صورت برنامه ای Programmatically Redirecting Users

• حالت هش در مقابل تاریخچه Hash vs History Mode

• سبک دادن به پیوندهای فعال Styling Active Links

آرشیو - پروژه یک - نینجا اسموتی ARCHIVED - Project One - Ninja Smoothies

• پیش نمایش و راه اندازی پروژه Project Preview & Setup

• ساختار پروژه Project Structure

• طراحی متریال Material Design

• کامپوننت نوار ناوبری Navbar Component

• جزء شاخص Index Component

• حذف داده ها (محلی). Deleting (local) Data

• مقدمه ای بر Firebase Introduction to Firebase

• راه اندازی Firestore Setting up Firestore

• نصب Firebase Installing Firebase

• بازیابی اطلاعات Firestore Retrieving Firestore Data

• حذف داده های Firestore Deleting Firestore Data

• کامپوننت اسموتی را اضافه کنید Add Smoothie Component

• افزودن مواد تشکیل دهنده Adding Ingredients

• خروجی مواد Outputting Ingredients

• ذخیره سوابق در Firestore Saving Records to Firestore

• حذف مواد تشکیل دهنده Deleting Ingredients

• مسیر اسموتی را ویرایش کنید Edit Smoothie Route

• پرس و جوهای Firestore Firestore Queries

• فرم اسموتی را ویرایش کنید Edit Smoothie Form

• به روز رسانی سوابق Firestore Updating Firestore Records

• در حال استقرار در Firebase Deploying to Firebase

• بررسی پروژه Project Review

بایگانی شده - پروژه دو - برنامه چت بلادرنگ ARCHIVED - Project Two - Real-Time Chat App

• بررسی اجمالی و راه اندازی پروژه Project Overview & Setup

• ساختار پروژه Project Structure

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

• ساخت یک صفحه خوش آمد گویی Making a Welcome Screen

• عبور وسایل از طریق مسیرها Passing Props Via Routes

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

• ایجاد پنجره چت Creating the Chat Window

• جزء پیام جدید New Message Component

• افزودن پیام به Firestore Adding Messages to Firestore

• رویدادهای زمان واقعی (شنوندگان رویداد) Real-Time Events (event listeners)

• قالب بندی زمان ها با لحظه Formatting Times with Moment

• پیمایش خودکار Auto-scrolling

• استقرار برنامه Deploying the App

• بررسی پروژه Project Review

بایگانی شده - پروژه سه - Geo Ninjas ARCHIVED - Project Three - Geo Ninjas

• بررسی اجمالی و راه اندازی پروژه Project Overview & Setup

• ساختار پروژه Project Structure

• راه اندازی Firebase Setting up Firebase

• کامپوننت نوار ناوبری Navbar Component

• جزء نقشه Map Component

• Google Maps API Google Maps API

• ایجاد یک نقشه جدید Creating a New Map

• ایجاد صفحه ثبت نام Creating a Signup Page

• Firebase Auth و ساختار داده Firebase Auth & Data Structure

• بررسی اینکه آیا نام مستعار وجود دارد یا خیر Checking if an Alias exists

• ثبت نام کاربر Signing up a User

• ایجاد سوابق کاربر Firestore Creating Firestore User Records

• پیچیدن نمونه Vue Wrapping the Vue Instance

• خروج یک کاربر Logging a User Out

• کامپوننت ورود Login Component

• ورود کاربران به Logging Users In

• API مکان جغرافیایی Geolocation API

• به روز رسانی مکان کاربر Updating a User’s Location

• نگهبانی مسیر (auth) Route Guarding (auth)

• پیوندهای نوار ناوبری مشروط Conditional Navbar Links

• نشانگرهای نینجا (نقشه). Ninja (map) Markers

• پروفایل های کاربر User Profiles

• نظرات کاربران (بحث داده ها) User Comments (data discussion)

• افزودن نظرات Adding Comments

• نمایش نظرات (زمان واقعی) Showing Comments (Real-Time)

• چند سبک نهایی Some Final Styles

• استقرار برنامه Deploying the app

بایگانی شده - توابع ابری Firebase ARCHIVED - Firebase Cloud Functions

• توابع ابری چیست؟ What Are Cloud Functions?

• ایجاد یک تابع قابل فراخوانی ساده Creating a Simple Callable Function

• فراخوانی یک تابع Calling a Function

• معرفی قوانین Firebase Intro to Firebase Rules

بایگانی شده - ES6 و موارد اضافی ARCHIVED - ES6 & Extras

• توابع پیکان ES6 ES6 Arrow Functions

• وعده های ES6 ES6 Promises

• واردات و صادرات Imports and Exports

• روش فیلتر جاوا اسکریپت JavaScript Filter Method

بایگانی شده - جایزه: Vue CLI 3 ARCHIVED - BONUS: Vue CLI 3

• Vue CLI 3 مقدمه Vue CLI 3 Introduction

• با استفاده از Vue CLI جدید Using the new Vue CLI

• سرویس CLI The CLI Service

• تنظیمات از پیش سفارشی Custom Presets

• اضافه کردن پلاگین ها Adding Plugins

• ساخت و استقرار در Firebase Build & Deploy to Firebase

• نمونه سازی فوری Instant Prototyping

• ساخت اهداف (ساخت کامپوننت وب) Build Targets (Making a Web Component)

• استفاده از کامپوننت های وب Using Web Components

• رابط کاربری گرافیکی Vue (قسمت 1) The Vue GUI (part 1)

• رابط کاربری گرافیکی Vue (قسمت 2) The Vue GUI (part 2)

• استفاده از 'vue init' با New CLI Using 'vue init' with the New CLI