Jak zbudowałem dokładny kalkulator kalorii i wartości odżywczych dla Subway

Jako deweloper z pasją do technologii zdrowotnych, zauważyłem lukę na rynku. Chociaż Subway oferuje informacje o wartościach odżywczych, klientom brakuje interaktywnego narzędzia do dostosowywania dokładnych kombinacji posiłków. Chciałem stworzyć coś, co dawałoby ludziom wgląd w czasie rzeczywistym w ich wybory żywieniowe, aż do ostatniej kalorii.

Wyzwanie było jasne: zbudować kompleksowy kalkulator, który mógłby obsłużyć ogromną zmienność menu Subway - od wyboru chleba i białka po każde warzywo i dodatek, jednocześnie zachowując dokładność z oficjalnymi danymi żywieniowymi.

Znalazłem narzędzie od nutritionix, które robi to samo, co jest dobre, ale chciałem zbudować coś, co byłoby bardziej przyjazne dla użytkownika.

Stos techniczny i struktura

1. Wyzwanie danych

Moim pierwszym zadaniem było zebranie i ustrukturyzowanie danych żywieniowych. Spędziłem tygodnie zbierając oficjalne tabele żywieniowe Subway, standaryzując pomiary i tworząc kompleksową bazę danych JSON.

Struktura musiała być zarówno kompleksowa, jak i efektywna:

const subwayMenu = { breads: [ { id: 'artisan-italian', name: '6" Artisan Italian Bread', calories: 210, totalFat: 2, saturatedFat: 1, // ... 14 dodatkowych pól żywieniowych }, // ... 10 więcej opcji chleba ], // ... 9 dodatkowych kategorii };

\ Każda pozycja menu zawiera 19 wskaźników żywieniowych, zapewniając, że możemy wyświetlić kompletną etykietę żywieniową w stylu FDA, a nie tylko kalorie.

2. Architektura zarządzania stanem

Główna złożoność leżała w zarządzaniu stanem wyboru użytkownika. Zamówienie w Subway to nie prosty wybór - to wielowymiarowa kombinacja:

let currentSelection = { sandwichSize: '6inch', bread: null, proteins: {}, cheeses: {}, vegetables: {}, condiments: {}, // ... z ilościami dla każdego };

\ Zaimplementowałem system oparty na ilościach, w którym użytkownicy mogli dodawać wiele porcji białek, serów lub warzyw. Mnożnik "footlong" musiał automatycznie podwajać odpowiednie komponenty, zachowując inne (jak sałatki) bez zmian.

3. Responsywny, izolowany projekt komponentów

Aby zapewnić działanie kalkulatora na dowolnej stronie internetowej bez konfliktów CSS, zastosowałem podejście z zakresem:

#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; }

\ Reset all: initial i wysoki z-index (99999) zapewniły, że kalkulator będzie renderowany spójnie niezależnie od stylizacji strony hostującej.

Silnik dokładności: Integracja oficjalnych danych żywieniowych

1. Kompleksowa integracja danych

Narzędzie wykorzystuje oficjalne informacje żywieniowe Subway z 2025 roku, w tym najnowsze dodatki, takie jak Ghost Pepper Bread i zaktualizowane formuły sałatek. Każdy punkt danych został zweryfikowany z oficjalnymi przewodnikami żywieniowymi Subway w formacie PDF i danymi ze strony internetowej.

Baza danych zawiera nie tylko kalorie, ale także:

• Makroskładniki (tłuszcz, węglowodany, białko)
• Mikroskładniki (witaminy A, C, wapń, żelazo)
• Specjalne względy dietetyczne (sód, dodane cukry, błonnik)
• Informacje istotne dla alergików (cholesterol, tłuszcze trans)

2. Dynamiczny algorytm obliczeniowy

Silnik obliczeniowy musiał obsługiwać złożone scenariusze:

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. Etykieta żywieniowa zgodna z FDA

Odtworzyłem dokładny format etykiety żywieniowej FDA, obliczając procent dziennych wartości na podstawie diety 2000 kalorii (regulowanej przez użytkownika):

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 };

Obliczenia % Daily Value wykorzystują te oficjalne ilości referencyjne FDA, zapewniając zgodność z przepisami.

Wyzwania i rozwiązania doświadczenia użytkownika

1. Intuicyjne zarządzanie kategoriami

Rozwijane menu w stylu akordeonu z licznikami w czasie rzeczywistym rozwiązało problem złożoności:

• Pojedynczy wybór dla chleba (przyciski radiowe)
• Wielokrotne wybory z ilościami dla białek, warzyw itp.
• Wyraźne wizualne informacje zwrotne z liczbą wyborów i oznaczeniami kalorii
• Działania zbiorcze (Wyczyść wszystko) dla każdej kategorii

2. System informacji zwrotnej w czasie rzeczywistym

Każda akcja użytkownika wyzwala wiele aktualizacji:

1. Podgląd wyboru aktualizuje się natychmiast
2. Etykieta żywieniowa przelicza się
3. Pasek postępu kalorii animuje się
4. Lista składników regeneruje się

Pasek postępu wykorzystuje kodowanie kolorami (zielony → żółty → czerwony), aby wizualnie wskazać, jak posiłek pasuje do codziennych celów.

3. Responsywność Mobile-First

Kalkulator wykorzystuje CSS Grid i Flexbox ze strategicznymi punktami przerwania:

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

Na urządzeniach mobilnych elementy układają się pionowo, a etykieta żywieniowa pozostaje czytelna bez poziomego przewijania.

Zaawansowane funkcje i dopracowanie

1. Funkcja zapisywania

Funkcja eksportu generuje szczegółowy raport tekstowy zawierający:

• Kompletne informacje żywieniowe
• Lista składników z ilościami
• Analiza dziennego postępu
• Spersonalizowane porady zdrowotne oparte na profilu żywieniowym posiłku

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. Wizualne informacje zwrotne i mikrointerakcje

• Animowane przejścia dla rozwijanych menu i pasków postępu
• Animacje pulsowania dla informacji zwrotnej o wyborze
• Podpowiedzi po najechaniu z pomocnymi wyjaśnieniami
• Efekty błysku przy potwierdzeniu resetowania
• Płynne ładowanie zawartości zakładek

3. Optymalizacje wydajności

• Leniwe ładowanie zawartości zakładek
• Efektywne aktualizacje DOM (grupowane tam, gdzie to możliwe)
• Minimalne ponowne renderowanie dzięki ukierunkowanym aktualizacjom
• Zoptymalizowana delegacja zdarzeń

Dokładność danych i konserwacja

1. Proces weryfikacji

Każda wartość odżywcza została porównana z:

1. Oficjalnymi przewodnikami żywieniowymi Subway w formacie PDF
2. Kalkulatorami żywieniowymi na stronie internetowej
3. Zasadami zaokrąglania FDA dla etykiet żywieniowych
4. Kontrolami spójności między podobnymi pozycjami

2. Strategia aktualizacji

Modularna struktura JSON umożliwia łatwe aktualizacje, gdy Subway:

• Wprowadza nowe pozycje menu
• Reformułuje istniejące pozycje
• Zmienia wielkości porcji
• Aktualizuje informacje żywieniowe

3. Obsługa wariantów regionalnych

Narzędzie zawiera uwagi (**) dla pozycji z potencjalnymi wariantami regionalnymi, doradzając użytkownikom sprawdzenie lokalnych informacji żywieniowych, gdy są dostępne.

Wnioski i przyszłe ulepszenia

Co działało dobrze:

1. Izolowana architektura komponentów - Zero konfliktów ze stronami hostującymi
2. Kompleksowa struktura danych - Łatwa w utrzymaniu i rozszerzaniu
3. Informacje zwrotne w czasie rzeczywistym - Użytkownicy natychmiast widzą konsekwencje swoich wyborów
4. Optymalizacja mobilna - Działa bezproblemowo na wszystkich urządzeniach

Pokonane wyzwania:

1. Złożone zarządzanie stanem - Rozwiązane za pomocą przejrzystych struktur danych
2. Wydajność z wieloma elementami - Zoptymalizowane aktualizacje DOM
3. Dokładne obliczenia rozmiaru - Jasne zasady dotyczące tego, co podwaja się w footlongach
4. Spójność wizualna - Niestandardowy reset CSS dla niezawodnego renderowania

Planowane przyszłe ulepszenia:

1. Konta użytkowników do zapisywania ulubionych kombinacji
2. Śledzenie celów dietetycznych (niska zawartość węglowodanów, wysoka zawartość białka itp.)
3. Planowanie posiłków na przestrzeni wielu dni
4. Integracja z aplikacjami fitness za pomocą API
5. Wykrywanie menu regionalnego na podstawie lokalizacji użytkownika

Podsumowanie

Budowanie kalkulatora żywieniowego Subway było czymś więcej niż tylko projektem kodowania - chodziło o stworzenie przejrzystości w wyborach żywieniowych. Łącząc dokładne, oficjalne dane żywieniowe z intuicyjnym interfejsem, umożliwiliśmy użytkownikom podejmowanie świadomych decyzji dotyczących ich posiłków.

Narzędzie pokazuje, jak technologie internetowe (HTML, CSS, JavaScript) mogą tworzyć potężne, interaktywne aplikacje, które wypełniają lukę między danymi korporacyjnymi a zrozumieniem konsumentów. Każda linia kodu służy ostatecznemu celowi: pomaganiu ludziom zrozumieć dokładnie, co jedzą, aby mogli dostosować swoje wybory w Subway do swoich celów zdrowotnych.

Kalkulator pozostaje żywym projektem, z planami rozszerzenia jego możliwości przy jednoczesnym zachowaniu podstawowego zobowiązania do dokładności i użyteczności, które uczyniło go już wartościowym dla tysięcy użytkowników.

Link do kalkulatora: Kalkulator kalorii Subway: Licz kalorie, ciesz się kanapką - Kalkulator kalorii Subway

\ \