Здравствуйте, меня зовут Зак Антоско, и в настоящее время я учусь на буткемпе по программированию Digital Crafts. Причина, по которой я пишу эту статью, состоит в том, чтобы разбить создание FitGuide на некоторые проблемы, с которыми я столкнулся на этом пути.

Разбивка сайта

FitGuide — это веб-приложение «все в одном», которое облегчает новичкам освоение бодибилдинга/пауэрлифтинга. Когда-то я был новичком в лифтинге, у меня не было структуры и понятия о правильном питании. Я перетренировался и недоедал, потому что хотел быть стройным и в то же время набирать вес. Оглядываясь назад, я знаю, каким глупым я был, но у меня не было надлежащего руководства! Потребовалось много лет, чтобы прочитать бесчисленное количество книг/документов, просмотреть видео на YouTube, просмотреть другие ресурсы, чтобы понять, что привести себя в форму на самом деле не так уж и сложно. Ключевые вещи, которые нужно понять: быть последовательным, контролировать потребление пищи и следовать программе, которая вам нравится. Цель FitGuide — познакомить людей с этими концепциями и дать им основу для дальнейшего развития.

Техническая сторона

В настоящее время FitGuide состоит из 5 страниц: «Главная», «О программе», «Потребность в калориях», «Рецепты», «Планирование тренировки». Страницы «Домой» и «О программе» довольно просты и не требуют большого взаимодействия с пользователем, настоящее мясо и картошка этого проекта находятся на последних 3 страницах. На странице «Потребности в калориях» есть калькулятор, который предлагает пользователю ввести свою информацию (пол, рост, вес, возраст и уровень активности). Затем калькулятор вернет количество калорий в день, которое пользователь должен потреблять, чтобы поддерживать, набирать или терять вес. В качестве дополнительного бонуса эти числа также разделены на процентное содержание макронутриентов (углеводы, белки, жиры) для каждого диапазона калорий, о котором упоминалось ранее. Затем пользователь может перейти к рецептам, где у него есть возможность искать либо конкретные рецепты, либо отдельные продукты питания. Как только пользователь нажмет на поиск, приложение отобразит от 10 до 20 информационных карточек (в зависимости от того, какой поиск был выполнен), отображающих содержание калорий и другую информацию о питании. Наконец, когда у пользователя есть представление о своих потребностях в калориях, а также о продуктах, которые он может есть, он может перейти на страницу планировщика. Эта страница начинается с разбора популярного жаргона, который используется многими фитнес-ютуберами и даже обычными посетителями тренажерного зала. Когда пользователь продолжит прокручивать вниз, он увидит несколько ссылок, разбитых на четыре раздела: «Начинающий», «Средний», «Продвинутый» и «Дополнительные ресурсы». В зависимости от уровня опыта пользователь может выбрать интересующую его программу, и если он хочет расширить свои знания, он может перейти в раздел «Дополнительные ресурсы», где каждая ссылка ведет на сайт, где можно купить эту книгу.

Проблемы, с которыми столкнулись / Заключительные мысли

Безусловно, самой большой проблемой всего этого проекта было изучение того, как использовать фреймворк Materialize CSS. Для меня это была незнакомая территория, я использовал такие фреймворки, как Skeleton и Bootstrap, но у каждого фреймворка свой синтаксис и утилиты. Так что знания из этих фреймворков не слишком много переносились. Еще одна проблема заключалась в том, чтобы заставить Materialize и CSS, которые я написал, работать в унисон друг с другом. Но потратив много времени на изучение документации на веб-сайте Materialize, я смог понять, как работает их макет и какие имена классов запрещены. Еще одно препятствие, с которым пришлось столкнуться, заключалась в расшифровке документации для каждого используемого API и в том, как интерполировать в них пользовательский ввод. Некоторые API лучше других, когда дело доходит до этого, но все они имеют свои ограничения. Spoonacular был хорошим API и содержал много информации о рецептах, но это все, для чего я мог его использовать. Когда дело дошло до поиска информации о пищевой ценности определенных продуктов питания, ничего не было найдено. По этой причине мне пришлось использовать API USDA для отдельных продуктов питания, но документация по его использованию не так интуитивно понятна. Но опять же, после некоторого времени исследований, я смог правильно отформатировать вызов API и передать ему входные данные, которые вернули бы данные. Несмотря на эти препятствия, мне было очень весело кодировать этот проект. Это дало мне возможность совместить мою страсть к фитнесу с вновь обретенной любовью к программированию. Я уверен, что навыки и знания, полученные в ходе этого проекта, помогут мне в дальнейшем путешествии.

Это приложение было создано с использованием JavaScript, Materialise CSS, HTML и некоторого количества простого CSS. Работа над этим проектом научила меня гораздо большему об асинхронном программировании с помощью JavaScript, особенно о том, как реализовать ключевые слова async/await и почему они упрощают написание обещаний. Ключевыми функциями в этом проекте являются калькулятор калорий и панель поиска продуктов питания. Калькулятор калорий учитывает пол пользователя, рост, вес, возраст и уровень активности. После того, как пользователь нажмет кнопку отправки, входные данные будут вставлены в формулу ИМТ и вызовут определенный набор условий на основе выбора пользователя для пола и уровня активности. Эти условия обрабатываются в switch операторе с 5 различными случаями, каждый из которых представляет разный уровень активности (сидячий, малоактивный, умеренно активный, очень активный, сверхактивный). Вызванный случай затем выполнит вложенный в него оператор if, чтобы проверить, был ли выбран мужчина или женщина, а затем рассчитает ежедневное потребление калорий для пользователя. Затем это значение передается функции, которая генерирует модальное окно. Затем значение калорий передается в еще несколько формул для расчета: калории поддержания, калории набора веса, калории потери веса и потребление макронутриентов (углеводы, белки и жиры) для каждого значения калорий. Затем модальная функция динамически генерирует элементы HTML и интерполирует данные пользователя о калориях в HTML. Затем модальное окно будет отображаться на экране с переданными рассчитанными значениями, а также некоторыми общими советами для пользователя. Другой ключевой особенностью является панель поиска еды (две панели поиска: одна для рецептов, а другая для отдельных блюд). Всякий раз, когда выполняется поиск в одном из полей, выполняется асинхронный вызов функции, который извлекает данные из определенного API, используемого в функции. Поиск рецептов извлекается из Sponacular API, преобразует эти данные в формат JSON, а затем генерирует список из 20 элементов. Каждый элемент списка будет содержать краткое описание блюда, а также изображение, время приготовления, информацию о пищевой ценности и ссылку на полный рецепт. Поиск продуктов питания, по сути, делает то же самое, но не так надежен. Это еще одна асинхронная функция, которая извлекает данные из API USDA, преобразует данные в JSON и отображает информацию о пищевой ценности продукта на небольшой карточке (генерирует 10 карточек за раз). Несмотря на то, что эти функции извлекаются из разных API и отображают разные карточки, метод, используемый для циклического просмотра данных, одинаков. Как только одна из функций возвращает данные и преобразует их в JSON, затем используется цикл for для перебора списка объектов, возвращенных из fetch, и отображения данных.

Мой исходный код для этого проекта можно посмотреть «здесь» на GitHub, если вам понравилось читать эту статью, не стесняйтесь подписаться на меня.

FitGuide — Руководство для начинающих по поднятию тяжестей