ساختن یک برنامه یادداشت های مشارکتی بلادرنگ با htmx 2.0

Summarize this content to 400 words in Persian Lang
هی همه! 👋

اگر هفته گذشته وبلاگ من را در مورد Remix و React Router گرفتید، می دانید که من در تعطیلات آخر هفته به سراغ فناوری های جدید رفته ام. این بار، تصمیم گرفتم با htmx 2.0 بازی کنم و به یک پروژه کوچک و منظم رسیدم: یک برنامه یادداشت های مشارکتی بلادرنگ. بگذارید همه چیز را به شما بگویم! 🚀

چیزی که من ساختم

من یک برنامه یادداشت های مشترک ایجاد کردم که در آن می توانید یادداشت ها را در زمان واقعی اضافه، ویرایش و حذف کنید. جالب ترین قسمت؟ همه اینها با حداقل جاوا اسکریپت به لطف htmx انجام می شود!

چرا htmx 2.0؟

htmx 2.0 به چند دلیل بسیار عالی است:

به روز رسانی جزئی صفحه: می‌توانید بخش‌های خاصی از یک صفحه وب را بدون بازخوانی کل آن به‌روزرسانی کنید.

تعامل پیشرفته: به شما کمک می کند برنامه های وب تعاملی با جاوا اسکریپت کمتر ایجاد کنید.

مدیریت ساده داده ها: مدیریت عملیات داده به صورت پویا با htmx بسیار آسان است.

ویژگی های کلیدی

به روز رسانی در زمان واقعی: یادداشت ها را اضافه، ویرایش و حذف کنید و تغییرات را فورا مشاهده کنید.

حداقل جاوا اسکریپت: htmx به روز رسانی محتوای پویا را برای ما مدیریت می کند.

رندر سمت سرور: یادداشت ها بر روی سرور ارائه شده و به صورت پویا در سمت سرویس گیرنده به روز می شوند.

قطعه کد

در اینجا چند قطعه برای نشان دادن نحوه استفاده من از htmx وجود دارد:

افزودن یادداشت جدید:

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

این فرم از htmx استفاده می کند hx-post برای ارسال یادداشت جدید به سرور و hx-swap برای الحاق یادداشت به لیست بدون بارگیری مجدد صفحه.

ویرایش یک یادداشت:

class=”edit-button” hx-get=”/edit-note/${note.id}”>Edit

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

دکمه ویرایش یک درخواست GET برای واکشی فرم ویرایش برای یک یادداشت خاص ارسال می کند و امکان ویرایش در محل را فراهم می کند.

حذف یک یادداشت:

class=”delete-button” hx-delete=”/delete-note/${note.id}”>Delete

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

دکمه حذف یک درخواست DELETE برای حذف یادداشت ارسال می کند و فوراً رابط کاربری را به روز می کند.

ساختار پروژه

index.html: فایل HTML اصلی.

server.js: یک سرور Express.js ساده برای رسیدگی به درخواست ها.

style.css: یک ظاهر طراحی اولیه برای برنامه.

می توانید کد کامل این پروژه را در مخزن GitHub من پیدا کنید.

نتیجه

این پروژه بسیار سرگرم کننده بود و قدرت htmx 2.0 را برای ایجاد برنامه های وب پویا به نمایش گذاشت. امیدوارم این پروژه به اندازه من هیجان انگیز باشد!

برای مشاهده عملکرد برنامه، اسکرین شات زیر را بررسی کنید:

کد نویسی مبارک! ✨سوهینی

 class="edit-button" hx-get="/edit-note/${note.id}">Edit

 class="delete-button" hx-delete="/delete-note/${note.id}">Delete