Планировщик питания на фронтенде: как собрать приложение с рецептами и макросами

Представьте ситуацию: вы хотите следить за питанием, но каждый раз тратите час на поиск рецептов и подсчет калорий. Звучит знакомо? Написание собственного планировщика питания - это отличный способ не только решить личную проблему, но и прокачать навыки в веб-разработке. В этой статье мы разберем, как спроектировать такое приложение на фронтенде, какие технологии выбрать и как сделать так, чтобы оно было удобным для пользователя.

Ключевые выводы

• Фронтенд-приложение для питания должно быть быстрым и интуитивно понятным, даже при большом количестве данных.
• Работа с макросами (белки, жиры, углеводы) требует точной логики агрегации данных из базы рецептов.
• Шоп-лист должен автоматически генерироваться на основе выбранных блюд недели.
• Для хранения локальных данных лучше использовать IndexedDB или localStorage в зависимости от объема информации.
• React или Vue.js подходят лучше всего благодаря системе компонентов и реактивности состояния.

Архитектура приложения: что лежит в основе

Прежде чем писать код, нужно понять структуру данных. Основой нашего приложения станет объект «Рецепт». Каждый рецепт содержит название, список ингредиентов и их количество, а также данные о пищевой ценности. Важно разделить эти данные: ингредиенты нужны для формирования списка покупок, а пищевая ценность - для расчета макросов.

В качестве фреймворка стоит рассмотреть React. Его экосистема позволяет легко управлять сложным состоянием, например, когда пользователь добавляет блюдо в план на неделю, а система должна пересчитать общий баланс нутриентов. Альтернативой может стать Vue.js, который часто выбирают разработчики за его простоту и производительность на слабых устройствах.

Управление состоянием и работа с данными

Самая сложная часть такого приложения - это состояние. Пользователь может менять меню, удалять блюда, добавлять свои рецепты. Все эти действия должны мгновенно отражаться на итоговых цифрах. Для этого отлично подойдет библиотека управления состоянием, такая как Redux Toolkit (для React) или Pinia (для Vue). Они позволяют централизовать данные и избегать передачи props через десятки уровней компонентов.

Данные о рецептах можно хранить локально в браузере. Если база рецептов небольшая (до 500-1000 позиций), достаточно использовать localStorage. Однако, если вы планируете добавлять фото рецептов или подробные инструкции, объем данных вырастет, и тогда потребуется IndexedDB. Это более мощный API для асинхронного хранения структурированных данных прямо в браузере.

Расчет макросов: математика на фронтенде

Подсчет белков, жиров и углеводов - это не просто сложение чисел. Здесь важно учесть порции. Если рецепт рассчитан на 4 порции, а пользователь ест одну, то все значения нужно делить на 4. Эта логика должна быть вынесена в отдельную утилиту или хук, чтобы не дублировать код в компонентах интерфейса.

Пример структуры объекта блюда:

1. Name: Название блюда.
2. Ingredients: Массив объектов с названием продукта и граммовкой.
3. Nutrition: Объект с полями calories, protein, fat, carbs (на всю порцию).
4. Servings: Количество порций в базовом рецепте.

При расчете итогового дневного рациона алгоритм проходит по всем блюдам дня, нормализует значения под нужное количество порций и суммирует результаты. Такая модульность делает код легким для тестирования и поддержки.

Генерация шоп-листа: автоматизация рутины

Одна из самых полезных функций - автоматический список покупок. Алгоритм здесь выглядит так: собираем все ингредиенты из всех блюд, запланированных на неделю. Затем группируем одинаковые продукты (например, молоко встречается в завтраках и ужинах) и суммируем их количество. Результат - готовый список, который можно выгрузить в текстовый файл или отправить на почту.

Здесь важно обработать единицы измерения. Если в одном рецепте указан стакан муки, а в другом - 200 грамм, конвертация должна происходить заранее при сохранении рецепта в базу данных. Хранить лучше всегда в стандартных единицах (граммы, миллилитры), а для отображения пользователю переводить обратно в привычные меры.

Оптимизация производительности

Когда в плане питания появляется много рецептов с изображениями, страница может начать тормозить. Чтобы избежать этого, используйте ленивую загрузку изображений (loading="lazy") и оптимизируйте сами файлы. Конвертируйте тяжелые JPG в формат WebP, который сохраняет качество при меньшем размере файла. Также следите за тем, чтобы компоненты не ререндерились зря. В React для этого есть React.memo и хук useMemo, которые помогают кэшировать тяжелые вычисления, такие как сортировка списка рецептов или фильтрация по категориям.

Таблица сравнения подходов к хранению данных

Частые вопросы