آموزش جنگو و HTMX - ساخت اپلیکیشن‌های وب هایپرمدیا! - آخرین آپدیت

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

مقدمه دوره Course Introduction

• مقدمه دوره Course Introduction

• مرور کلی HTMX HTMX - An Overview

• چرا در توسعه وب مدرن از HTMX استفاده کنیم؟ Why use HTMX in the Modern Web Development Landscape?

مرور کلی HTMX HTMX Overview

• مقدمه فصل Chapter Introduction

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

• نصب HTMX Installing HTMX

• مقدمه‌ای بر درخواست‌های AJAX AJAX Requests - Introduction

• ویژگی hx-get برای درخواست‌های GET hx-get attribute - for GET requests

• مفهوم HTML Over the Wire HTML Over the Wire

• ویژگی hx-target hx-target attribute

• ویژگی hx-swap hx-swap attribute

• انتقال‌های نمایشی (View Transitions) با HTMX View Transitions with HTMX

• ویژگی hx-trigger hx-trigger attribute

• ویژگی hx-select hx-select attribute

• ویژگی hx-post و ارسال فرم‌ها hx-post and Form Submissions

• مدیریت درخواست‌های POST Handling POST Requests

• ویژگی hx-on و مدیریت رویدادها hx-on and event handling

• ویژگی hx-boost برای بهبود تدریجی hx-boost for Progressive Enhancement

• کوییز ویژگی‌های HTMX HTMX Attribute Quiz

اپلیکیشن CRUD با جنگو، HTMX و TailwindCSS CRUD Application with Django, HTMX & TailwindCSS

• مقدمه Introduction

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

• مرور کد‌های اولیه Starter Code Overview

• مدل‌های جنگو Django Models

• تنظیمات پنل ادمین جنگو Django Admin setup

• نمایش کتاب‌های کاربر احرازهویت شده Displaying the authenticated user's books

• ساخت کلاس فرم در جنگو Creating Django Form class

• رندر کردن HTML فرم Form HTML Rendering

• ارسال فرم با hx-post Submitting form with hx-post

• اسکریپت‌نویسی DOM با hx-on DOM Scripting with hx-on

• مدیریت خطاهای فرم با HTMX Form Errors with HTMX

• فراخوانی توابع جاوااسکریپت با hx-on Calling JavaScript functions with hx-on

• جنگو فرم‌ها - مدیریت خطاهای سطح فیلد Django Forms - handling field-level form errors

• رفع باگ جدول خالی Fixing empty table bug

• ویژگی hx-delete - حذف کتاب‌ها از لیست کاربر hx-delete - Deleting books from user list

• تایید اقدامات کاربر با ویژگی hx-confirm Confirming user actions with hx-confirm attribute

• یکپارچه‌سازی HTMX و SweetAlert2 HTMX and SweetAlert2 integration

• انتقالات Opacity هنگام حذف محتوا Opacity Transitions when removing content

• قابلیت‌های مشابه SPA با HTMX و Alpine.js HTMX, Alpine.js & SPA-like functionality

• به‌روزرسانی صفحه با hx-push-url Refreshing page with hx-push-url

• طرح‌های واکنش‌گرا (Responsive) Responsive Layouts

• جستجوی فعال (Active Search) با HTMX Active Search with HTMX

• انیمیشن‌های GSAP با HTMX GSAP animations with HTMX

• کوییز CRUD در جنگو و HTMX HTMX and Django CRUD - Quiz

اپلیکیشن چت با جنگو، django channels و وب‌سوکت‌ها Chat App with Django, django-channels, & websockets

• مقدمه ماژول Module Introduction

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

• مدل‌های اپلیکیشن چت جنگو Django chat app - Models

• صفحه لیست اتاق‌های چت Chat Room list page

• صفحه جزئیات اتاق چت Chat Room detail page

• نمایش پیام‌های چت در اتاق Displaying Chat Messages in the Room

• افزودن فرم ارسال پیام چت Adding Chat Message Form

• افزونه WebSocket در HTMX HTMX WebSocket Extension

• مقدمه‌ای بر django channels و وب‌سوکت‌ها django-channels & WebSockets introduction

• ویژگی‌های WebSocket در HTMX HTMX WebSocket attributes

• کلاس Consumer در django channels django-channels Consumer class

• ذخیره پیام‌های چت در دیتابیس Saving chat messages to the database

• ساخت قطعه HTML به عنوان پاسخ WebSocket Creating HTML Fragment as WebSocket response

• مفهوم Channel Layers و گروه‌ها در django channels Channel Layers & Groups in django-channels

• بک‌اند Redis برای Channel Layer Redis Channel Layer backend

• پخش پیام‌های چت برای تمام کاربران اتاق Broadcasting Chat Messages to all Users in Room

• ساخت فرم آپلود فایل (عکس پروفایل) Creating File Upload form (Profile Pictures)

• آپلود فایل با HTMX و hx-encoding File Uploads with HTMX and hx-encoding

• استفاده از Amazon S3 برای فایل‌های رسانه‌ای Amazon S3 for Media Files

• آماده‌سازی فایل‌های استاتیک برای محیط Production Preparing static assets for production

• سرو کردن فایل‌های استاتیک با Whitenoise Serving static assets with Whitenoise

• اسکریپت Build رندر، پیکربندی دیتابیس و تنظیمات Render build script, database configuration & settings

• تعریف زیرساخت در Render (دیتابیس، ذخیره‌ساز Key-Value، وب‌سرویس) Render - Defining Infrastructure (Database, Key-Value store, Web Service)

• استقرار اپلیکیشن در محیط Production روی Render Deploying app to production on Render

• کوییز HTMX، جنگو و وب‌سوکت‌ها HTMX, Django & WebSockets - Quiz

قابلیت Polling با جنگو و HTMX Polling with Django + HTMX

• مقدمه ماژول Module Introduction

• راه‌اندازی و مدل‌های جنگو Setup and Django Models

• نمایش داده‌های تست در صفحه وب Displaying fixtures on the webpage

• قابلیت Polling با HTMX و تریگر every Polling with HTMX and the "every" trigger

• استفاده از django-htmx و django-template-partials django-htmx and django-template-partials

• ارتقای رابط کاربری با TailwindCSS و CSS Grid Upgrading UI with TailwindCSS & CSS Grid

• انیمیشن‌ها با HTMX Animations with HTMX

• ویژگی hx-indicator - نمایش بازخورد هنگام درخواست‌های HTMX hx-indicator - Showing feedback during HTMX requests

• پیاده‌سازی Polling با جنگو و HTMX Django + HTMX polling

قابلیت SSE با جنگو و HTMX SSE with Django & HTMX

• مقدمه‌ای بر SSE با جنگو و HTMX Intro to SSE with Django & HTMX

• تبدیل Polling به رویدادهای ارسالی سرور (SSE) Reactoring Polling to Server-Sent Events (SSE)

• رویدادهای افزونه SSE در HTMX HTMX SSE Extension Events

• پاک‌سازی اتصالات قطع شده SSE SSE Disconnects Cleanup

• جنگوی Async و SSE Async Django and SSE

• تغییرات SSE در نسخه ۴ HTMX HTMX v4 - SSE changes