(Возможно, вы захотите узнать о cheerio и jsonframe и начать работу с предыдущей статьи: Очистка данных за 3 минуты с помощью Javascript)
Предварительные требования:
- лучше всего с установленным Node.js / NPM
- понимать Javascript , HTML и CSS
Я собираюсь провести вас через процесс со скоростью света, чтобы на самом деле запустить 10 волшебных строк кода примерно за 30 секунд.
Контент для очистки
Мы хотели бы получить последние опубликованные продукты, которые находятся на главной странице Producthunt. Мы можем представить, что хотим создать небольшой API, чтобы затем использовать его в наших проектах (или вы могли бы просто использовать PH API 🙄 ).
Структурируйте данные
«Последние продукты» означает, что нам нужно извлечь список продуктов.
Простым представлением продукта может быть:
Добавьте селекторы
Это, вероятно, то, где большинство людей терпят неудачу: найти правильные селекторы CSS. Селектор - это уникальный адрес нужных вам элементов.
Для этого вам действительно понадобится вкладка разработчика в вашем браузере. Если что-то станет действительно сложно, вы можете получить помощь с помощью такого инструмента, как GadgetSelector.
Вы быстро получаете следующие селекторы.
Хорошо, HTML-код PH довольно загружен, поэтому, если у вас нет опыта, я могу понять, что вы тратите немного больше времени, чем я 😜.
Настройте запрос на PH
Просто создайте новую папку и добавьте файл js с именем ph.js (например). Затем вы можете открыть свой терминал и перейти к своей папке. Создайте новый package.json с помощью npm init команда (нажимайте ввод для каждой записи).
Затем вы можете установить необходимые пакеты с помощью следующей команды:
Теперь мы готовы приступить к нашему небольшому скрипту.
Давайте установим запрос на http://producthunt.com с помощью axios (HTTP-клиент, основанный на обещаниях).
Очистите список продуктов
Что ж, нам просто нужно проанализировать html с помощью cheerio, подключить плагин jsonframe и позволить волшебству случиться благодаря определению json frame, которое мы сделали из структурированных данных, которые мы определили ранее.
Почему я сделал json frame просто. Я хотел определить структуру выходных данных в начале запроса. Я также хотел избежать того, чтобы заблудиться в десятках строк кода, проходящих через узлы html. Вы можете узнать больше из этой предыдущей статьи: Очистка данных за 3 минуты с помощью Javascript.
Молодец! 🎇🎉🚀
Мы сделали это за 30 секунд! Хм ...
Ну что ж, думаю, мне нужно было немного больше времени, чтобы вы как следует прошли этапы 😉
Но вы сможете сделать это за 30 секунд после некоторой тренировки 💪
Кстати, вот как выглядит результат:
Аккуратно, правда?
Конечно, было бы разумнее, например, получать ссылку на страницу для каждого продукта. Сможете ли вы сделать это для меня? Вызов принят? 🎯
Не стесняйтесь поделиться с нами своими репозиториями с вашим решением проблемы. Вы также можете поиграть с другим веб-сайтом, кроме ProductHunt (не уверен, что Райан Гувер будет рад этому, извините, Райан 😘🤙).
Я сканирую Интернет, чтобы собрать данные для стартапов и крупных компаний по всему миру. От парсинга надежно защищенных веб-сайтов до огромных объемов данных (миллионы), я смогу помочь вам - [email protected] .
Я также софинансирую платформу, которая поможет французским стартапам воспользоваться хакингом для роста. Si vous êtes intéressez pour vendre vos connaissance de "growth hackeur", n’hésitez pas à me contacter.
