Предыстория: будучи студентом школы Flatiron, изучающим онлайн-программное обеспечение, для своего четвертого проекта мне было поручено разработать приложение с использованием простого (ванильного) JavaScript на интерфейсе (клиент) и Rails на сервере. (сервер). Мотивация этого проекта была частично связана с моим первым проектом во Flatiron, который назывался Chow Now CLI. Этот проект был связан с отбором рецептов путем парсинга веб-сайта AllRecipes.com. Но чтобы найти рецепты, пользователю приходилось вводить команды в командной строке. У приложения было много недостатков, в том числе: отсутствие подключения к базе данных; приложение очистило только один веб-сайт, а критерии поиска были несколько ограничены из-за ограниченного количества категорий.
Приложение: My Meal Planner состоит из двух компонентов. Окно поиска, которое позволяет пользователю вводить критерии поиска, задавая вопрос о конкретном продукте питания. Вы можете ввести критерий поиска, например, сколько углеводов содержится в ломтике хлеба или сколько калорий в порции печенья с шоколадной крошкой. Лично я предпочитаю есть печенье, игнорируя количество калорий в печенье!
Вторая часть приложения требует, чтобы пользователь вводил общий поиск продуктов или рецептов, за которым следовали несколько необязательных параметров, включая количество возвращенных рецептов; тип пищи, кухня, диета, пищевая непереносимость и любой ингредиент, который пользователь хотел бы исключить из рецепта.
Приложение позволяет пользователю фильтровать рецепты, созданные по категориям. Пользователь также имеет возможность удалить тот или иной рецепт.
Развертывание
Приложение содержит два репозитория GitHub. Первое репо было разработано для интерфейса my-meal-planner-frontend. Второе репо было разработано для серверной части my-meal-planner-backend. Разделив приложение на два отдельных репозитория, теперь я могу разместить серверную часть на Heroku, а переднюю — на GitHub Pages. Вот хорошо написанный блог от однокурсника Flatiron о том, как сделать дельпой как переднюю, так и заднюю часть с помощью Heroku и GitHub Pages. В качестве предостережения … любой установленный Ruby на вашем локальном компьютере или в файле gem вашего проекта, версия которого ниже 2.7, выдаст ошибку Heroku, в которой говорится, что вам нужно либо развернуть более старую версию Heoku, которая больше не поддерживается, либо использовать более поздняя версия Руби. Я обновил свой gemfile до Ruby 3.0.0 и изменил свой Ruby по умолчанию на своей локальной машине с помощью команды $ rvm — по умолчанию используется 3.0.0.
Начальный шаблон
Я использовал Bootstrap 4.0 в своем проекте и благодаря этому много узнал о том, как работают карточки в экосистеме Bootstrap. Сначала найдите шаблон Bootstrap, который можно изменить в соответствии с вашими требованиями к каркасу. Нет причин изобретать велосипед, когда, вероятно, есть шаблон, который можно изменить в соответствии с вашими потребностями. На https://startbootstrap.com/ я нашел шаблон блога для модификации. Если вы используете шаблон, внешние ссылки на Bootstrap должны быть настроены для вас в разделе заголовка файла index.html, поэтому нет необходимости устанавливать приложение Bootstrap локально. Если вы используете какие-либо выпадающие меню или другие плагины, Bootstrap использует приложение под названием Popper. Для запуска Popper необходимо включить jQuery. Если в вашем шаблоне нет ссылок, перечисленных ниже, вам нужно добавить их внизу вашего HTML-файла прямо над закрывающим тегом body.
‹! — Bootstrap core JS →
‹script src=""https://code.jquery.com/jquery-3.2.1.slim.min.js"' целостность="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN ” crossorigin="anonymous"›‹/script›
‹script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"' целостность="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin= ”анонимный”›‹/сценарий›
‹script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"' целостность="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="анонимный"›/ сценарий›
Карты начальной загрузки
Согласно веб-сайту Bootstrap, карта — это гибкий и расширяемый контейнер контента. Он включает в себя параметры верхних и нижних колонтитулов, широкий спектр контента, контекстные цвета фона и мощные параметры отображения. Нажмите здесь, чтобы узнать больше о картах Bootstrap. Вывод заключается в том, что карта может отображать изображения, заголовки и списки отображения тела, ссылки и другой контент.
Вот как выглядит карта рецепта с использованием объектной ориентации для отображения карты рецепта каждый раз, когда создается новый экземпляр рецепта.
Карточки можно создавать динамически, создав экземпляр класса в Javascript или просто создав карточку с помощью HTML.
Каждый раздел в My Meal Planner представляет собой карту, в которой используется сетка, заключенная в столбцы и строки. Псевдокод для создания сетки с двумя рецептами в строке выглядит следующим образом:
Container
/ — Row
// — -Col-Lg-6 (родительский столбец, который будет содержать 1 карточку рецепта)
// — — -Card mb-4 (карточка рецепта)
// — -Col-Lg-6 (родительский столбец, который будет содержать 1 карточку рецепта)
// — — -Card mb-4 (карточка рецепта)
Выше приведен код, перебирающий массив рецептов, который передает 2 параметра в анонимную функцию. Первый параметр - это фактический рецепт, а второй параметр - это индекс этого конкретного рецепта, чтобы отслеживать, является ли индекс нечетным или четным числом. Если индекс рецепта равен 0, что является первым рецептом в массиве, мы закрываем любой существующий тег div и создаем новую строку. Затем мы добавляем экземпляр рецепта (карточку) в контейнер. Если индекс нечетный (i % 2 !==0), мы закрываем существующий тег div, который был частью существующей строки, и создаем новую строку, убедившись, что любой открытый тег div закрыт, а затем мы добавляем эту карту в контейнер и так далее!
Заключение
Пожалуйста, не стесняйтесь проверить приложение!
- Видеопрохождение приложения на Youtube: https://youtu.be/0-xJMiz07D4
- Приложение размещено на Heroku с использованием страниц GitHub: https://cleansolllc.github.io/my-meal-planner-frontend/
- Репозитории GitHub: https://github.com/CleanSolLLC/my-meal-planner-frontend.git https://github.com/CleanSolLLC/my-meal-planner-backend.git