آموزش Livewire V3 از صفر: دوره عملی و کاربردی - آخرین آپدیت

آموزش Livewire: ساخت پروژه‌های واقعی با TALL Stack

با این دوره آموزشی، Livewire را به صورت عملی و با ساخت پروژه‌های واقعی یاد بگیرید. یاد بگیرید چگونه با استفاده از TALL Stack (Tailwind CSS, Alpine.js, Laravel, Livewire) برنامه‌های کاربردی بسازید.

آنچه در این دوره Livewire خواهید آموخت:

• ساخت کامپوننت‌های Livewire سفارشی و قابل استفاده مجدد از ابتدا
• ساخت برنامه‌های Real-Time با Laravel و Livewire
• ساخت فرم‌های Multi-Step با TALL Stack
• ساخت دیتا تیبل‌های شگفت‌انگیز با TALL Stack (شامل Bulk Actions، Excel Exports، Filters، Multi-Column Searching/Sorting و غیره)
• ساخت کامپوننت Re-Usable Drag & Drop Uploader با TALL Stack

پیش‌نیازها: دانش مقدماتی از PHP/Laravel مورد نیاز است.

در این دوره، Laravel Livewire v3 (ابزاری برای ساخت رابط‌های کاربری قدرتمند و پویا بدون ترک PHP) و Laravel (به طور کلی TALL stack) را به صورت عملی و با ساخت پروژه‌های کاربردی یاد خواهید گرفت.

نقشه راه و وضعیت پروژه‌ها:

• [آپلود شده] مبانی Livewire
• [آپلود شده] ساخت یک سیستم مدیریت دانشجویی ساده
• [آپلود شده] ساخت دیتا تیبل‌های شگفت‌انگیز و پرسرعت با TALL Stack
• [آپلود شده] ساخت سیستم نظرات قابل استفاده مجدد با Livewire
• [آپلود شده] ساخت فرم‌های Multi-Step با Livewire
• [آپلود شده] ساخت Uploader کشیدن و رها کردن قابل استفاده مجدد
• [آپلود شده] ساخت برنامه‌های Real-Time با Laravel، Livewire و Reverb

توضیحات پروژه:

[آپلود شده] مبانی Livewire

در این بخش، به مبانی Livewire و برخی از ویژگی‌های اساسی ارائه شده توسط Livewire می‌پردازیم.

برخی از موضوعاتی که در این بخش پوشش خواهیم داد عبارتند از:

• یادگیری نحوه تعریف کامپوننت‌ها در Livewire
• بررسی Properties و Actions در Livewire و موارد استفاده عمومی آنها.
• یادگیری Lifecycle Hooks در Livewire و قراردادهای آنها.
• آشنایی با Full Page Components در Livewire، نحوه استفاده از آنها و برخی از مشکلاتی که ممکن است با آن مواجه شویم. (اینها استفاده از Laravel Controllers و views میانی را حذف می‌کنند)
• معرفی مختصر به Alpine.js و نحوه استفاده از آن در Livewire/Blade

[آپلود شده] ساخت یک سیستم مدیریت دانشجویی ساده

در این بخش، یک برنامه CRUD ساده می‌سازیم و به مبانی ساخت برنامه‌های CRUD با Livewire و TALL Stack می‌پردازیم. با نصب Laravel شروع می‌کنیم و سپس Livewire را به همراه Laravel Breeze نصب می‌کنیم و موضوعات زیر را در طول مسیر یاد می‌گیریم:

• یادگیری Lifecycle hooks و ساخت dropdown های وابسته در Livewire
• یادگیری نحوه استخراج properties و methods به یک Form Object و استفاده از آن در یک Livewire Component
• یادگیری نحوه کار با Factories و Seeders در Laravel و seed کردن داده‌های لازم برای همه Models
• یادگیری سینتکس جدید #[Rule] attribute در Livewire و پیاده‌سازی Validations.
• یادگیری wire:navigate و پیاده‌سازی تجربه SPA در یک برنامه مبتنی بر Livewire.
• بررسی مشکلاتی که ممکن است در هنگام استفاده از form objects اختصاصی با آن مواجه شویم و در نهایت همه آنها را برطرف می‌کنیم.

[آپلود شده] ساخت دیتا تیبل‌های پرسرعت با TALL Stack

از جایی که در بخش قبلی متوقف شدیم ادامه می‌دهیم و یک دیتا تیبل جالب در این بخش می‌سازیم.

این شامل Excel Exports، Filtering Functionality، Bulk Records Selection، Loading Indicators و غیره است.

برخی از ویژگی‌هایی که در این بخش پوشش خواهیم داد در زیر لیست شده‌اند:

• یادگیری نحوه پیاده‌سازی Loading Indicators (در هنگام paginating داده یا در هنگام انجام هر عملیاتی)
• یادگیری نحوه پیاده‌سازی Search functionality (پشتیبانی از multi-column searching)
• یادگیری نحوه پیاده‌سازی Columns Sort functionality (پشتیبانی از multi-column sorting)
• یادگیری نحوه پیاده‌سازی Bulk Actions (ویژگی برای انتخاب چند ردیف و انجام گروهی عمل بر روی همه آنها)
• یادگیری نحوه پیاده‌سازی Excel Exports
• همچنین یاد می‌گیریم که چگونه پکیج Filament Notifications را برای نمایش اعلان‌ها نصب و پیکربندی کنیم.
• همچنین انتخاب تمام رکوردهای (در تمام صفحات) را پیاده‌سازی می‌کنیم و تغییرات بصری لازم را اعمال می‌کنیم.
• یادگیری نحوه پیاده‌سازی Filter Functionality
• و بسیاری موارد دیگر...

[آپلود شده] ساخت سیستم نظرات قابل استفاده مجدد با Livewire

در این بخش، یک کامپوننت نظرات قابل استفاده مجدد می‌سازیم که بلافاصله برای هر مدلی کار می‌کند. از روابط چند ریختی استفاده می‌کنیم که می‌توان آن را به چندین مدل متصل کرد.

برخی از ویژگی‌هایی که در این بخش پوشش خواهیم داد در زیر لیست شده‌اند:

• یادگیری نحوه ساخت کامپوننت نظرات قابل استفاده مجدد که از چندین مدل به همراه Comment Edit، Delete و Reply Functionality پشتیبانی می‌کند.
• یادگیری نحوه پیاده‌سازی بررسی‌های authorization مناسب (در frontend و backend) به طوری که فقط کاربر authorized بتواند کامنت را حذف کند.
• ما Alpine.js را اضافه می‌کنیم تا Livewire Component خود را تعاملی‌تر کنیم (مانند نمایش فرم‌های reply/edit، اعمال transitions و غیره)
• همچنین یاد می‌گیریم که چگونه به طور خودکار فرم‌های reply/edit را هنگام رندر شدن در فرم فوکوس کنیم. (با استفاده از Alpine.js)
• همچنین replying به Comments، Editing Comments/Replies، Deleting Comments و Replies را پیاده‌سازی می‌کنیم
• یادگیری نحوه صحیح paginate کردن نظرات و رفع چند issue در طول مسیر.
• در پایان، نگاهی به نحوه بهینه‌سازی کوئری‌های دیتابیس خود با استفاده از استراتژی‌های eager loading خواهیم داشت.

[آپلود شده] ساخت فرم‌های Multi-Step با Livewire

در این بخش، هر آنچه را که برای ساخت فرم‌های multi-step در Livewire نیاز داریم را یاد خواهیم گرفت. ما مبانی ایجاد یک فرم multi-step، افزودن مراحل، پیمایش مراحل و دسترسی به state و ساخت یک پروژه عملی در پایان بخش را پوشش خواهیم داد.

برخی از ویژگی‌هایی که در این بخش پوشش خواهیم داد در زیر لیست شده‌اند:

• یادگیری نحوه پیمایش یکپارچه بین مراحل فرم multi-step، همچنین Validations مناسب را در طول مسیر پیاده‌سازی می‌کنیم.
• در این بخش از یک پکیج Laravel اختصاص داده شده برای ساخت فرم‌های multi-step استفاده خواهیم کرد و بر اساس نیازهای خود features را در بالا می‌سازیم.
• یادگیری نحوه کار با Image Uploads و رفع issue های مربوط به state
• یادگیری نحوه تعریف یک کامپوننت navigation قابل تنظیم برای نشان دادن state کامپوننت Multi-Step.
• در نهایت، یک مثال عملی کاملاً کاربردی با پیمایش مرحله‌ای پیشرفته‌تر، file uploads و custom state می‌سازیم.

[آپلود شده] ساخت برنامه‌های Real-Time با Laravel، Livewire و Reverb

• یادگیری نحوه ادغام Laravel با Reverb برای ساخت برنامه‌های Real-Time

• یادگیری نحوه نمایش رویدادهای تایپ کاربر با استفاده از Whisper و ارتباط Client-to-Client
• یادگیری نحوه استفاده از presence channels برای نشان دادن کاربران آنلاین برای هر اتاق
• یادگیری نحوه استفاده از ترفندهای Flexbox برای نگه داشتن پیام‌ها در نمای پیمایشی با ورود آنها
• Seeding دیتابیس‌ها به ترتیب
• گوش دادن به رویدادهای Broadcast شده از backend و واکنش مناسب به آنها در Livewire
• همچنین یاد می‌گیریم که چگونه به کاربران گوش دهیم که رویدادهای خروج یا پیوستن را ترک می‌کنند و آنها را از لیست کاربران آنلاین اضافه/حذف کنیم