Потерпите неудачу, пока вы этого не сделаете.

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

Эта статья расскажет вам о недавно добавленных функциях.

Поддержка большего количества ресторанов

Существующий код был немного громоздким, поэтому я решил объединить определение ресторанов в один файл в папке constants. Этот файл используется как во внешнем, так и во внутреннем интерфейсе. Чтобы добавить новые рестораны, все, что нам нужно сделать, это добавить URL-адрес в список ресторанов.

Второе, что необходимо добавить, — это метод парсера для очистки веб-сайта. Лучше всего зайти на сайт, открыть инструменты разработчика и изучить элементы, которые используются для отображения ежедневного меню.

Выбор ресторанов

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

Я думал, как решить эту проблему, и решил, что все меню ресторана должны отображаться по умолчанию. Если пользователь хочет создать свой список, он может скрыть (или добавить в черный список) определенные рестораны. Я решил эту проблему, добавив простое всплывающее диалоговое окно, в котором вы отменяете выбор ресторанов.

Это хорошо масштабируется, если мы добавим новые рестораны, потому что новые будут отображаться как выбранные в списке, и мы можем позже добавить их в черный список.

Когда пользователь снимает флажок в списке ресторанов, мы незаметно добавляем restaurantId в массив черного списка. Затем этот массив сохраняется в localStorage, чтобы сохраняться между перезагрузками страниц и повторными посещениями.

Сортировка и добавление цветов

Конечно, Roza slon (Розовый слон на английском языке) должен быть розовым :).

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

Кликабельное название ресторана

В файле определения ресторана мы храним URL-адреса, которые используем для очистки веб-сайтов. Я сделал названия ресторанов интерактивными ссылками, и это преследует две цели:

  • Это позволяет вам исследовать сайт прямо из парсера.
  • Из-за ненадежности методов парсинга, если разметка на странице ресторана изменится, мы все равно сможем быстро найти меню по ссылке. Это немного улучшает пользовательский опыт.

Уроки выучены

Мы используем разные форматы модулей на фронтенде и бэкенде. Последний использует стандарт NodeJS (CommonJS), а фронтенд использует нативные модули JavaScript.

Эта несовместимость может отсутствовать в будущем, поскольку организация NodeJS работает над этим, но на данный момент это все еще проблема.

Недавно я посмотрел обучающее видео Уэса Боса по парсингу на YouTube и увидел, что он использовал пакет под названием esm для решения этих проблем. Этот пакет также позволяет использовать нативные модули JavaScript в BE.

Мы внедряем esm, когда запускаем приложение с помощью nodemon.

Как бы фантастически это ни звучало, здесь есть некоторые скрытые проблемы, и некоторые другие пакеты могут быть несовместимы с пакетом esm. В моем случае пакет Puppeteer выдавал ошибки при использовании с esm, поэтому я решил использовать модули CommonJS, которые являются стандартными для NodeJS.

Что ждет в будущем

В моем основном рабочем проекте мы полностью перешли на TypeScript по мере роста проекта. Это оказалось разумным шагом из-за типа безопасности, который он обеспечивает. Я собираюсь перенести интерфейсную часть приложения, так как более новая версия NextJS поддерживает ее из коробки. Затем я перейду к серверной части, добавив слой TypeScript в ExpressJS.

В проектах с открытым исходным кодом документация — это то, что отличает средний побочный проект от отличного. Это также относится и к побочному проекту скребка для пищевых продуктов.

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

Вы можете присоединиться к проекту на GitHub, поднять вопрос или создать форк своей версии парсера еды.

Ресурсы