آموزش استاد لاراول با GraphQL، Vue.js و Tailwind

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

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

• به دوره خوش آمدید! Welcome to The Course!

• کد منبع را از کجا پیدا کنیم؟ Where to find the Source Code?

• پیشنهادات و راه اندازی ویرایشگر کد (کد ویژوال استودیو) Code Editor Suggestions and Setup (Visual Studio Code)

• لینک های کد ویژوال استودیو Visual Studio Code Links

• ابزارهای توسعه Vue (از دست ندهید!) Vue Development Tools (Don't Skip!)

• پیشنهادات راه اندازی PHP و پایگاه داده PHP & Database Setup Suggestions

دوره Crash Vue.js (در کمتر از 2 ساعت Vue.js را یاد بگیرید!) Vue.js Crash Course (Learn Vue.js in under 2 hours!)

• مقدمه ای بر Vue.js Crash Course Introduction to Vue.js Crash Course

• نظریه نمونه Vue Vue Instance Theory

• مثال عملی Vue Instance Vue Instance Practical Example

• نمونه Vue The Vue Instance

• الگوسازی در Vue Templating in Vue

• الگوسازی در Vue Templating in Vue

• کوتاه در Vue Shorthands in Vue

• کوتاه در Vue Shorthands in Vue

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

• تماشاگران در Vue Watchers in Vue

• کلاس CSS Binding CSS Class Binding

• نحو آرایه اتصال کلاس CSS CSS Class Binding Array Syntax

• رندر شرطی (دستورالعمل v-if) Conditional Rendering (v-if Directive)

• ارائه فهرست (v-for Directive) List Rendering (v-for Directive)

• صحافی ورودی فرم Form Input Binding

• مدیریت رویداد Event Handling

دوره خرابی GraphQL GraphQL Crash Course

• مقدمه GraphQL GraphQL Introduction

• زمین بازی GraphQL GraphQL Playground

• مثال پرس و جو پیچیده تر More Complicated Query Example

• جهش ها Mutations

BlogQL - راه اندازی Laravel، Vue، GraphQL و Tailwind BlogQL - Setting Up Laravel, Vue, GraphQL & Tailwind

• آهنگساز 101 Composer 101

• نصب لاراول و Dependencies Installing Laravel and Dependencies

• راه اندازی لاراول Setting Up Laravel

• Laravel Mix & Tailwind CSS Laravel Mix & Tailwind CSS

• راه اندازی Tailwind CSS & Vue.js Setting Up Tailwind CSS & Vue.js

• راه اندازی GraphQL Server در لاراول قسمت 1 Setting up a GraphQL Server in Laravel Part 1

• راه اندازی GraphQL Server در لاراول قسمت 2 Setting up a GraphQL Server in Laravel Part 2

BlogQL - پایگاه داده - مدل ها، روابط و مهاجرت BlogQL - Database - Models, Relations & Migrations

• ایجاد مدل های فصیح و مهاجرت Creating Eloquent Models & Migrations

• روابط مدل و مهاجرت Model Relations & Migration

• کارخانه های مدل و بذرپاش Model Factories & Seeder

برنامه BlogQL - Vue & GraphQL BlogQL Application - Vue & GraphQL

• انواع اشیاء، پرس و جوها و دستورالعمل های GraphQL GraphQL Object Types, Queries and Directives

• روابط مدل N + 1 مسئله Model Relations N + 1 Problem

• استفاده از تلسکوپ لاراول Using Laravel Telescope

• روتر Vue و اجزای تک فایل Vue Router & Single File Components

• راه اندازی مسیرها در روتر Vue Setting Up Routes in Vue Router

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

• Vue Apollo Client Setup Vue Apollo Client Setup

• جستارهای هوشمند Vue Apollo Vue Apollo Smart Queries

• وضعیت بارگیری Vue Apollo Vue Apollo Loading State

• Tailwind CSS Layout، Mobile First & Design Responsive Tailwind CSS Layout, Mobile First & Responsive Design

• لوازم جانبی Vue، پیوندهای روتر و موارد دیگر Tailwind Vue Component Props, Router Links and More of Tailwind

• افزودن چهره‌های آواتار Adding Avatar Faces

• علامت گذاری صفحه پست و CSS Flexbox Post Page Markup & CSS Flexbox

• متغیرهای Query GraphQL Static & Reactive Static & Reactive GraphQL Query Variables

• لیست پست ها بر اساس موضوع List of Posts by Topic

• لیست پست های نویسنده List of Posts by Author

• فیلترهای Vue و قالب‌بندی تاریخ Vue Filters & Date Formatting

• مسیر برگشتی Fallback Route

• خطای 404 طراحی صفحه 404 Error Page Design

راه اندازی Laravello (Trello Clone). Laravello (Trello Clone) Setup

• راه اندازی پروژه لارالو Setting Up Laravello Project

• مدل ها و روابط و مهاجرت های فصیح Eloquent Models & Relations & Migrations

• انواع GraphQL GraphQL Types

• Tailwind & Vue Setup Tailwind & Vue Setup

Laravello - GraphQL Queries & The Board Laravello - GraphQL Queries & The Board

• صفحه نمایش هیئت مدیره (شامل دوره خرابی CSS Flexbox) Board View Page (incl. CSS Flexbox crash course)

• استخراج تابلو در جزء Vue Extracting Board Into Vue Component

• بذر داده (تولید داده های جعلی) Seeding Data (Generating Fake Data)

• Vue Apollo & JavaScript Import Syntax را تنظیم کنید Setup Vue Apollo & JavaScript Import Syntax

• Querying For The Board (GraphQL Query) Querying For The Board (GraphQL Query)

• صفحه هیئت - پرس و جو از داده های واقعی Board Page - Querying Real Data

Laravello - کارت‌ها و جهش‌های GraphQL Laravello - Cards & GraphQL Mutations

• استخراج پرس و جوهای GraphQL در فایل های مجزا Extracting GraphQL Queries Into Separate Files

• اضافه کردن جهش کارت GraphQL Adding Card GraphQL Mutation

• نوع ورودی جهش GraphQL (ورودی گروه بندی) GraphQL Mutation Input Type (Grouping Input)

• جهش GraphQL در داخل مؤلفه Vue GraphQL Mutation Inside Vue Component

• به روز رسانی کش کوئری پس از جهش Updating Query Cache After Mutation

Laravello - Vue & Tailwind، به‌روزرسانی و حذف Laravello - Vue & Tailwind, Updating & Deleting

• جزء ویرایشگر کارت Card Editor Component

• رویدادهای سفارشی Vue (ارتباطات والدین/فرزند) Custom Vue Events (Parent/Child Communication)

• اطلاعات بیشتر در مورد رویدادهای سفارشی Vue More On Custom Vue Events

• شناور و انتقال گروهی در Tailwind Group Hover & Transitions in Tailwind

• حذف جهش Deleting Mutation

• حذف کارت و به روز رسانی بهبود حافظه پنهان پرس و جو Deleting Card & Updating Query Cache Improvements

• حذف کارت و به‌روزرسانی بهبودهای کش کوئری قسمت 2 Deleting Card & Updating Query Cache Improvements Part 2

• پشتیبانی از کامپوننت v-model سفارشی شما Your Custom Component v-model Support

• @Update Directive Lighthouse @update Lighthouse Directive

• ویرایشگر به روز رسانی کارت Card Updating Editor

امنیت لارالو - احراز هویت Laravello Security - Authentication

• راه اندازی روتر Vue (به روشی متفاوت از قبل) Setting Up Vue Router (In a Different Way Than Before)

• نشانه گذاری صفحه ورود (A Lot of Tailwind) Login Page Markup (A Lot of Tailwind)

• علامت گذاری صفحه ثبت نام Registration Page Markup

• احراز هویت، جلسات، کوکی ها، توکن ها و لاراول پناهگاه Authentication, Sessions, Cookies, Tokens & Laravel Sanctum

• تنظیم احراز هویت مبتنی بر جلسه با GraphQL Setting Up Session Based Authentication with GraphQL

• احراز هویت مبتنی بر جلسه در Frontend (توکن و کوکی‌های CSRF) Session Based Authentication on Frontend (CSRF Token & Cookies)

• گارد لاراول Laravel Guards

• تعمیر زمین بازی GraphQL Fixing GraphQL Playground

• جهش های ورود و خروج سفارشی غیر مستقیم Non Directive Custom Login & Logout Mutations

• احراز هویت Frontend Frontend Authentication

Laravello - اعتبار سنجی، مدیریت خطا و رویدادها Laravello - Validation, Error Handling & Events

• مدیریت خطای GraphQL GraphQL Error Handling

• توابع پیکان، توابع آرایه و عملگرها (اختیاری) Arrow Functions, Array Functions and Operators (Optional)

• مدیریت خطای ورود Login Error Handling

• ثبت جهش GraphQL Registration GraphQL Mutation

• اعتبار سنجی ورودی سمت سرور Server Side Input Validation

• رویدادها و شنوندگان - احراز هویت کاربر پس از ثبت نام Events & Listeners - Authenticate User After Registration

Laravello - VueX Global State & Authentication Sessions Laravello - VueX Global State & Authentication Sessions

• مدیریت وضعیت جهانی VueX توضیح داده شده است VueX Global State Management Explained

• نصب و پیکربندی VueX VueX Installation & Configuration

• وضعیت VueX و جهش VueX State & Mutations

• Tailwind CSS @apply Tailwind CSS @apply

• اقدامات VueX، عوارض جانبی و حافظه محلی VueX Actions, Side Effects and Local Storage

• تشخیص جلسات منقضی شده در بارگذاری مجدد صفحه Detecting Expired Sessions on Page Reload

• نمایش نام کاربری تایید شده (VueX mapState) Displaying Authenticated User Name (VueX mapState)

• خروج از سیستم - تنظیم مجدد وضعیت VueX Logging Out - Resetting VueX State

لارالو - مجوز (چه کسی می تواند چه کاری انجام دهد؟) Laravello - Authorization (Who Can do What?)

• خط‌مشی‌های مجوز لاراول و دستورالعمل @can Laravel Authorization Policies & @can Directive

• مجوز در Frontend Authorization on Frontend

• رسیدگی به جلسات منقضی شده در مورد درخواست های ناموفق Handling Expired Sessions on Failed Requests

• تخته های مختلف رنگ های متفاوتی دارند Different Boards Have Different Colors

• مجوز - چه کسی می تواند یک کارت اضافه کند؟ Authorization - Who Can Add a Card?

• مجوز Frontend - چه کسی می تواند یک کارت اضافه کند؟ Frontend Authorization - Who Can Add a Card?

Laravello - Vue & Tailwind Wizardry (کامپوننت های رابط کاربری سفارشی) Laravello - Vue & Tailwind Wizardry (Custom UI Components)

• جزء منوی کشویی Dropdown Menu Component

• شکاف های کامپوننت Vue Vue Component Slots

• Vue Transitions - کرکره متحرک Vue Transitions - Animated Dropdown

• کشویی تخته های کاربر User Boards Dropdown

• کرکره تابلوهای کاربر - پرس و جو و مجوز User Boards Dropdown - Querying & Authorizing

• دستورالعمل Vue Clickaway Vue Clickaway Directive

• کامپوننت جعبه مدال Modal Box Component

• افزودن یک جعبه مدال هیئت مدیره جدید Adding a New Board Modal Box

• جزء رنگ تخته Board Color Component

• اضافه کردن جهش و به روز رسانی حافظه نهان Board Adding Mutation & Cache Update

• افزودن جزء لیست Adding List Component

• اضافه کردن جهش لیست Adding List Mutation

بعد چه می شود؟ What's Next?

• هنوز چیزهای بیشتری در راه است! There is Still More To Come!

• جایزه! Bonus!