چگونه یک ماشین‌حساب دقیق کالری و تغذیه برای ساب‌وی ساختم

به عنوان یک توسعه دهنده بازی های ویدئویی علاقه‌مند به فناوری سلامت، متوجه شکافی در بازار شدم. در حالی که ساب‌وی اطلاعات تغذیه‌ای را ارائه می‌دهد، مشتریان فاقد ابزاری تعاملی برای سفارشی‌سازی ترکیب‌های دقیق وعده‌های غذایی خود هستند. می‌خواستم چیزی بسازم که به مردم بینش‌های بلادرنگ درباره انتخاب‌های غذایی‌شان بدهد، تا آخرین کالری.

چالش واضح بود: ساخت یک ماشین حساب جامع که بتواند تنوع عظیم منوی ساب‌وی را مدیریت کند - از انتخاب‌های نان و پروتئین گرفته تا هر سبزیجات و چاشنی، همه در حالی که دقت با داده‌های تغذیه‌ای رسمی حفظ شود.

ابزاری توسط nutritionix پیدا کردم که همین کار را انجام می‌دهد، که خوب است، اما می‌خواستم چیزی بسازم که کاربرپسندتر باشد.

استک فنی و ساختار

1. چالش داده

اولین وظیفه من جمع‌آوری و ساختاردهی داده‌های تغذیه‌ای بود. هفته‌ها را صرف جمع‌آوری نمودارهای تغذیه رسمی ساب‌وی، استانداردسازی اندازه‌گیری‌ها و ایجاد یک پایگاه داده JSON جامع کردم.

ساختار باید هم جامع و هم کارآمد می‌بود:

const subwayMenu = { breads: [ { id: 'artisan-italian', name: '6" Artisan Italian Bread', calories: 210, totalFat: 2, saturatedFat: 1, // ... 14 additional nutritional fields }, // ... 10 more bread options ], // ... 9 additional categories };

\ هر آیتم منو شامل 19 معیار تغذیه‌ای است، که اطمینان می‌دهد می‌توانیم یک برچسب تغذیه‌ای کامل به سبک FDA نمایش دهیم، نه فقط کالری.

2. معماری مدیریت وضعیت

پیچیدگی اصلی در مدیریت وضعیت انتخاب کاربر بود. یک سفارش ساب‌وی یک انتخاب ساده نیست - یک ترکیب چند بعدی است:

let currentSelection = { sandwichSize: '6inch', bread: null, proteins: {}, cheeses: {}, vegetables: {}, condiments: {}, // ... with quantities for each };

\ من یک سیستم مبتنی بر مقدار پیاده‌سازی کردم که در آن کاربران می‌توانستند چندین بخش از پروتئین‌ها، پنیرها یا سبزیجات اضافه کنند. ضریب "فوت‌لانگ" باید به طور خودکار اجزای مناسب را دو برابر می‌کرد در حالی که دیگران (مانند سالادها) بدون تغییر می‌ماندند.

3. طراحی اجزای پاسخگو و ایزوله

برای اطمینان از اینکه ماشین حساب بدون تداخل CSS در هر وب‌سایتی کار می‌کند، از یک رویکرد محدود استفاده کردم:

#subway-calculator-isolated { all: initial; display: block; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', ...; } #subway-calculator-isolated * { box-sizing: border-box; margin: 0; padding: 0; }

\ بازنشانی all: initial و z-index بالا (99999) اطمینان می‌داد که ماشین حساب بدون توجه به استایل سایت میزبان به طور یکنواخت رندر می‌شود.

موتور دقت: ادغام داده‌های تغذیه‌ای رسمی

1. ادغام داده‌های جامع

این ابزار از اطلاعات تغذیه‌ای رسمی ساب‌وی 2025 استفاده می‌کند، از جمله افزودنی‌های اخیر مانند نان فلفل روح و فرمول‌های به‌روزشده سالاد. هر نقطه داده با راهنماهای تغذیه‌ای PDF ساب‌وی و داده‌های وب‌سایت تأیید شد.

پایگاه داده شامل نه تنها کالری بلکه:

• ماکرونوترینت‌ها (چربی، کربوهیدرات، پروتئین)
• میکرونوترینت‌ها (ویتامین‌های A، C، کلسیم، آهن)
• ملاحظات رژیم غذایی ویژه (سدیم، قندهای افزوده، فیبر)
• اطلاعات مربوط به آلرژن (کلسترول، چربی ترانس)

2. الگوریتم محاسبه پویا

موتور محاسبه باید سناریوهای پیچیده را مدیریت می‌کرد:

function calculateTotalNutrition() { let total = { calories: 0, totalFat: 0, /* ... */ }; const sizeMultiplier = currentSelection.sandwichSize === 'footlong' ? 2 : 1; // Bread calculation (size-dependent) if (currentSelection.bread) { addItemNutrition(total, bread, currentSelection.bread.quantity * sizeMultiplier); } // Proteins, cheeses, vegetables (size-dependent) ['proteins', 'cheeses', 'vegetables'].forEach(category => { // Apply size multiplier }); // Soups, desserts (size-independent) ['soups', 'desserts'].forEach(category => { // No size multiplier }); return { nutrition: total, ingredients }; }

3. برچسب تغذیه‌ای مطابق با FDA

من فرمت دقیق برچسب تغذیه‌ای FDA را بازسازی کردم، با محاسبه درصد ارزش‌های روزانه بر اساس یک رژیم 2000 کالری (قابل تنظیم توسط کاربر):

const fdaDailyValues = { totalFat: 78, saturatedFat: 20, cholesterol: 300, sodium: 2300, totalCarbs: 275, dietaryFiber: 28, addedSugars: 50, protein: 50, vitaminA: 900, vitaminC: 90, calcium: 1300, iron: 18 };

محاسبات % Daily Value از این مقادیر مرجع رسمی FDA استفاده می‌کنند، که انطباق با مقررات را تضمین می‌کند.

چالش‌ها و راه‌حل‌های تجربه ی کاربر

1. مدیریت دسته‌بندی شهودی

منوهای کشویی آکاردئونی با شمارنده‌های بلادرنگ مشکل پیچیدگی را حل کردند:

• انتخاب تکی برای نان (دکمه‌های رادیویی)
• انتخاب‌های چندگانه با مقادیر برای پروتئین‌ها، سبزیجات و غیره
• بازخورد بصری واضح با شمارش انتخاب‌ها و نشان‌های کالری
• اقدامات انبوه (پاک کردن همه) برای هر دسته

2. سیستم بازخورد در زمان واقعی

هر اقدام کاربر چندین به‌روزرسانی را فعال می‌کند:

1. پیش‌نمایش انتخاب فوراً به‌روز می‌شود
2. برچسب تغذیه‌ای مجدداً محاسبه می‌شود
3. نوار پیشرفت کالری انیمیشن می‌شود
4. لیست مواد تشکیل‌دهنده بازسازی می‌شود

نوار پیشرفت از کدگذاری رنگی (سبز → زرد → قرمز) برای نشان دادن بصری چگونگی تناسب وعده غذایی با اهداف روزانه استفاده می‌کند.

3. پاسخگویی موبایل-اول

ماشین حساب از CSS Grid و Flexbox با نقاط شکست استراتژیک استفاده می‌کند:

@media (max-width: 768px) { .calculator-container { flex-direction: column; } .item-with-quantity { flex-direction: column; } .goal-setting-content { grid-template-columns: 1fr; } }

در موبایل، آیتم‌ها به صورت عمودی چیده می‌شوند و برچسب تغذیه‌ای بدون اسکرول افقی قابل خواندن باقی می‌ماند.

ویژگی های شخصی سازی شده و پیشرفته

1. قابلیت ذخیره‌سازی

ویژگی صادرات یک گزارش متنی دقیق تولید می‌کند که شامل:

• حقایق تغذیه‌ای کامل
• لیست مواد تشکیل‌دهنده با مقادیر
• تحلیل پیشرفت روزانه
• نکات سلامتی شخصی‌سازی شده بر اساس پروفایل تغذیه‌ای وعده غذایی

window.subwaySaveNutritionInfo = function() { const summary = ` ============================================================ SUBWAY NUTRITION CALCULATOR - MEAL SUMMARY ============================================================ MEAL DETAILS: ------------- Size: ${sizeText} Total Calories: ${Math.round(nutrition.calories)} Daily Calorie Goal: ${userSettings.dailyCalorieGoal} calories Percentage of Daily Goal: ${Math.round((nutrition.calories / userSettings.dailyCalorieGoal) * 100)}% `; // ... generates downloadable file };

2. بازخورد بصری و میکرواینتراکشن‌ها

• انتقال‌های انیمیشنی برای منوهای کشویی و نوارهای پیشرفت
• انیمیشن‌های ضربان برای بازخورد انتخاب
• راهنمایی های شناور با توضیحات مفید
• جلوه‌های فلش در تأیید بازنشانی
• بارگذاری نرم محتوای تب

3. بهينه سازي عملکرد

• بارگذاری تنبل محتوای تب
• به‌روزرسانی‌های کارآمد DOM (در صورت امکان دسته‌ای)
• رندر مجدد حداقلی از طریق به‌روزرسانی‌های هدفمند
• نمایندگی رویداد بهینه‌شده

دقت داده و نگهداری

1. فرآیند تاییدیه

هر ارزش تغذیه‌ای با موارد زیر متقابلاً مرجع‌گذاری شد:

1. راهنماهای تغذیه‌ای PDF رسمی ساب‌وی
2. ماشین‌حساب‌های تغذیه‌ای وب‌سایت
3. قوانین گرد کردن FDA برای برچسب‌های تغذیه‌ای
4. بررسی‌های سازگاری در میان آیتم‌های مشابه

2. استراتژی به‌روزرسانی

ساختار ماژولار JSON به‌روزرسانی‌های آسان را زمانی که ساب‌وی:

• آیتم‌های جدید منو را معرفی می‌کند
• آیتم‌های موجود را بازفرمول‌بندی می‌کند
• اندازه‌های بخش را تغییر می‌دهد
• اطلاعات تغذیه‌ای را به‌روز می‌کند

3. مدیریت تغییرات منطقه‌ای

این ابزار شامل یادداشت‌هایی (**) برای آیتم‌هایی با تغییرات منطقه‌ای بالقوه است، که به کاربران توصیه می‌کند در صورت دسترسی، اطلاعات تغذیه‌ای محلی را بررسی کنند.

درس‌های آموخته شده و بهبودهای آینده

آنچه خوب کار کرد:

1. معماری اجزای ایزوله - بدون تداخل با سایت‌های میزبان
2. ساختار داده جامع - نگهداری و گسترش آسان
3. بازخورد در زمان واقعی - کاربران فوراً پیامدهای انتخاب‌ها را می‌بینند
4. بهینه‌سازی موبایل - به طور یکپارچه روی همه دستگاه‌ها کار می‌کند

چالش‌های غلبه شده:

1. مدیریت وضعیت پیچیده - با ساختارهای داده واضح حل شد
2. عملکرد با آیتم‌های زیاد - به‌روزرسانی‌های بهینه‌شده DOM
3. محاسبات دقیق اندازه - قوانین واضح برای آنچه در فوت‌لانگ‌ها دو برابر می‌شود
4. سازگاری بصری - بازنشانی CSS سفارشی برای رندر قابل اعتماد

بهبودهای آینده برنامه‌ریزی شده:

1. حساب‌های کاربری برای ذخیره ترکیب‌های مورد علاقه
2. ردیابی اهداف رژیمی (کم‌کربوهیدرات، پرپروتئین و غیره)
3. برنامه‌ریزی وعده غذایی در چندین روز
4. ادغام با برنامه‌های تناسب اندام از طریق API
5. تشخیص منوی منطقه‌ای بر اساس موقعیت کاربر

نتیجه‌گیری

ساخت ماشین حساب تغذیه ساب‌وی بیش از یک پروژه کدنویسی بود - درباره ایجاد شفافیت در انتخاب‌های غذایی بود. با ترکیب داده‌های تغذیه‌ای دقیق و رسمی با یک رابط شهودی، ما کاربران را توانمند کرده‌ایم تا تصمیمات آگاهانه‌ای درباره وعده‌های غذایی خود بگیرند.

این ابزار نشان می‌دهد که چگونه فناوری‌های وب (HTML، CSS، JavaScript) می‌توانند برنامه‌های قدرتمند و تعاملی ایجاد کنند که شکاف بین داده‌های شرکتی و درک مصرف‌کننده را پر می‌کنند. هر خط کد در خدمت هدف نهایی است: کمک به مردم برای درک دقیق آنچه می‌خورند، تا بتوانند انتخاب‌های ساب‌وی خود را با اهداف سلامتی‌شان هماهنگ کنند.

ماشین حساب یک پروژه زنده باقی می‌ماند، با برنامه‌هایی برای گسترش قابلیت‌های آن در حالی که تعهد اصلی به دقت و قابلیت استفاده را حفظ می‌کند که آن را برای هزاران کاربر ارزشمند کرده است.

لینک ماشین حساب: ماشین حساب کالری ساب‌وی: کالری‌ها را بشمارید از ساب لذت ببرید - ماشین حساب کالری ساب‌وی

\ \