كيف قمت ببناء حاسبة دقيقة للسعرات الحرارية والتغذية لسبواي

كمطور شغوف بتكنولوجيا الصحة، لاحظت فجوة في السوق. بينما تقدم سابواي معلومات غذائية، يفتقر العملاء إلى أداة تفاعلية لتخصيص مجموعات وجباتهم بدقة. أردت إنشاء شيء يمنح الناس رؤى في الوقت الفعلي حول خيارات وجباتهم، وصولاً إلى آخر سعرة حرارية.

كان التحدي واضحًا: بناء آلة حاسبة شاملة يمكنها التعامل مع التنوع الهائل في قائمة سابواي - من خيارات الخبز واختيارات البروتين إلى كل خضار وتوابل، مع الحفاظ على الدقة باستخدام بيانات التغذية الرسمية.

وجدت أداة من 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 };

\ قمت بتنفيذ نظام قائم على الكمية حيث يمكن للمستخدمين إضافة حصص متعددة من البروتينات أو الأجبان أو الخضروات. كان على مضاعف "footlong" مضاعفة المكونات المناسبة تلقائيًا مع الحفاظ على المكونات الأخرى (مثل السلطات) دون تأثير.

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 العالي (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) إنشاء تطبيقات قوية وتفاعلية تسد الفجوة بين بيانات الشركات وفهم المستهلك. كل سطر من التعليمات البرمجية يخدم الهدف النهائي: مساعدة الناس على فهم ما يأكلونه بالضبط، حتى يتمكنوا من مواءمة خياراتهم في سابواي مع أهدافهم الصحية.

تظل الآلة الحاسبة مشروعًا حيًا، مع خطط لتوسيع قدراتها مع الحفاظ على الالتزام الأساسي بالدقة وسهولة الاستخدام التي جعلتها قيمة لآلاف المستخدمين بالفعل.

رابط الآلة الحاسبة: آلة حاسبة سعرات سابواي: احسب السعرات الحرارية واستمتع بالساندويتش - آلة حاسبة سعرات سابواي

\ \