88- آموزش جاوااسکریپت | پروژه عملی :قسمت 1 از 12-معرفی پروژه Meal & Calorie Tracker با Module Pattern
در این بخش با پروژه Meal & Calorie Tracker آشنا میشویم؛ یک اپلیکیشن مدیریت وعده غذایی و کالری با JavaScript خالص، Module Pattern و Local Storage که امکان افزودن، ویرایش، حذف و ذخیرهسازی اطلاعات را فراهم میکند.
در این بخش، قرار است ساخت یک پروژه نسبتاً کامل را آغاز کنیم: Meal & Calorie Tracker.
این پروژه یک برنامه ساده اما کاربردی برای مدیریت وعدههای غذایی و محاسبه مجموع کالریها است.
هدف اصلی این پروژه فقط ساخت یک رابط ساده نیست، بلکه میخواهیم در طول پیادهسازی آن، از JavaScript Module Pattern برای سازماندهی بهتر کدها استفاده کنیم. علاوه بر آن، با Local Storage نیز کار خواهیم کرد تا اطلاعات واردشده پس از رفرش صفحه یا بستن مرورگر از بین نروند.
پروژه چه کاری انجام میدهد؟
در این برنامه، کاربر میتواند:
- یک وعده غذایی جدید اضافه کند
- مقدار کالری هر وعده را ثبت کند
- مجموع کالریها را مشاهده کند
- آیتمهای ثبتشده را ویرایش کند
- آیتمها را حذف کند
- همه دادهها را یکباره پاک کند
- اطلاعات را در Local Storage ذخیره کند تا ماندگار باشند
اگرچه از نظر ظاهری این پروژه ساده به نظر میرسد، اما از نظر ساختار کدنویسی، نمونه بسیار خوبی برای یادگیری ماژولار کردن برنامه با JavaScript خالص است.
تکنولوژیها و مفاهیم استفادهشده
در این پروژه از موارد زیر استفاده میکنیم:
- JavaScript خالص
- Module Pattern
- Local Storage
- Materialize CSS برای رابط کاربری
- برخی قابلیتهای ES6 مانند:
letconstforEach- template literals
نکته مهم این است که این پروژه بدون هیچ فریمورک یا کتابخانهای برای منطق برنامه ساخته میشود.
یعنی از مواردی مانند:
- jQuery
- React
- Vue
- ابزارهای build
- کتابخانههای کمکی اضافی
استفاده نخواهیم کرد.
ساختار کلی پروژه
برای اینکه کدها منظم و قابلمدیریت باشند، برنامه را به چند بخش یا ماژول تقسیم میکنیم. هر ماژول مسئول بخش مشخصی از برنامه خواهد بود.
1. Storage Controller
این ماژول وظیفه کار با Local Storage را بر عهده دارد.
اطلاعات وعدهها در این بخش ذخیره و بازیابی میشوند تا پس از بارگذاری مجدد صفحه همچنان در دسترس باشند.
2. Item Controller
این بخش وظیفه مدیریت دادهها را بر عهده دارد.
برای مثال:
- افزودن آیتم جدید
- ویرایش آیتم
- حذف آیتم
- نگهداری state مربوط به دادهها
3. UI Controller
این ماژول مسئول مدیریت رابط کاربری است.
کارهایی مانند:
- دریافت مقدار ورودیها
- نمایش یا مخفیکردن دکمهها
- رندر کردن آیتمها در لیست
- بهروزرسانی مجموع کالریها
در این بخش انجام میشود.
4. App Controller
این بخش، کنترلکننده اصلی برنامه است و وظیفه هماهنگسازی ماژولها را بر عهده دارد.
در واقع، این قسمت همان جایی است که برنامه از آن initialize میشود و رویدادها به ماژولهای مناسب متصل میشوند.
عملکرد برنامه
در این پروژه، کاربر میتواند یک وعده غذایی مانند Steak Dinner با مقدار کالری مشخص وارد کند. پس از افزودن:
- آیتم به لیست اضافه میشود
- مجموع کالریها بهروزرسانی میشود
برای مثال، اگر کاربر چند آیتم مانند:
- Steak Dinner
- Ice Cream
را وارد کند، همه آنها در لیست نمایش داده میشوند و مجموع کالریها نیز محاسبه خواهد شد.
ذخیرهسازی دادهها با Local Storage
یکی از ویژگیهای مهم این پروژه، ماندگاری دادهها است.
یعنی اگر صفحه را رفرش کنیم یا مرورگر را ببندیم، اطلاعات ثبتشده همچنان باقی میمانند. این کار با استفاده از Local Storage انجام میشود.
مزیت این موضوع این است که برنامه حالت کاربردیتری پیدا میکند و دادهها فقط بهصورت موقت در حافظه برنامه نگهداری نمیشوند.
ویرایش آیتمها
هر آیتم در لیست، امکان ویرایش نیز دارد.
با کلیک روی آیکن ویرایش، برنامه وارد حالت ویرایش میشود.
در این حالت:
- اطلاعات همان آیتم داخل inputها قرار میگیرد
- دکمههای مربوط به ویرایش نمایش داده میشوند
- کاربر میتواند مقدار نام یا کالری را تغییر دهد
پس از ثبت تغییرات:
- آیتم در لیست بهروزرسانی میشود
- مجموع کالریها دوباره محاسبه میشود
- تغییرات در Local Storage نیز ذخیره میشوند
حذف آیتمها
علاوه بر ویرایش، کاربر میتواند آیتمهای ثبتشده را حذف کند.
با حذف هر آیتم:
- آن مورد از لیست پاک میشود
- مجموع کالریها اصلاح میشود
- Local Storage نیز بهروزرسانی میشود
پاککردن همه دادهها
در برنامه، امکان حذف کامل همه آیتمها نیز وجود دارد.
این قابلیت زمانی مفید است که کاربر بخواهد لیست را از ابتدا شروع کند.
با اجرای این عملیات:
- تمام آیتمها از رابط کاربری حذف میشوند
- مجموع کالریها صفر میشود
- اطلاعات ذخیرهشده نیز از Local Storage پاک میشوند
چرا این پروژه مهم است؟
این پروژه با وجود سادگی ظاهری، چند مفهوم مهم را بهصورت همزمان آموزش میدهد:
- سازماندهی کد با Module Pattern
- جداسازی مسئولیتها
- مدیریت state
- کار با Local Storage
- تعامل با DOM
- ساخت یک SPA ساده با JavaScript خالص
به همین دلیل، این پروژه میتواند تمرین بسیار خوبی برای درک بهتر ساختار برنامههای جاوااسکریپتی باشد.
رابط کاربری پروژه
برای ظاهر برنامه از Materialize CSS استفاده میشود.
رابط کاربری این پروژه شامل یک صفحه ساده است و ساختار آن بهصورت Single Page Application پیادهسازی میشود.
یعنی همه عملیات بدون جابهجایی بین صفحات مختلف انجام میشوند و کل منطق در همان صفحه مدیریت خواهد شد.
رویکرد پیادهسازی
در طول این پروژه، تمرکز اصلی بر موارد زیر خواهد بود:
- نوشتن کد تمیز و ماژولار
- استفاده از الگوهای مناسب در JavaScript
- جداسازی منطق داده، رابط کاربری و ذخیرهسازی
- استفاده از ویژگیهای مدرن JavaScript بدون وابستگی به فریمورکها
اگر بخواهید، حتی میتوانید بخش رابط کاربری را از فایل آماده بردارید و مستقیماً وارد مرحله منطق برنامه شوید. اما چون ساختار HTML این پروژه ساده است، پیادهسازی دستی آن نیز مفید خواهد بود.
جمعبندی
در این بخش با پروژه Meal & Calorie Tracker آشنا شدیم؛ برنامهای که با استفاده از JavaScript Module Pattern ساخته میشود و امکاناتی مانند:
- افزودن وعده غذایی
- ثبت کالری
- ویرایش
- حذف
- پاکسازی کامل
- ذخیرهسازی در Local Storage
را در اختیار کاربر قرار میدهد.
این پروژه، تمرین بسیار خوبی برای یادگیری معماری بهتر در JavaScript خالص است و میتواند دید مناسبی نسبت به ساخت برنامههای ماژولار و قابلنگهداری ایجاد کند.