Forbes не хватало женского приложения, поэтому я создал одно на Python и React Native

Мы все знаем, что гендерное неравенство является серьезной проблемой на рабочем месте. Согласно Forbes, Citigroup официально признал, что они платят женщинам почти на 30% меньше, чем мужчинам. Я наткнулся на эту статью, просматривая раздел /forbeswomen. Подобные публикации помогают женщинам образовываться и быть в курсе новостей отрасли. Я хотел следить за этим тегом и был уверен, что должно быть приложение, которое позволит женщинам быть в курсе самых актуальных новостей на своем мобильном устройстве. Просматривая App Store, я нашел всеобъемлющие приложения Forbes и приложение Forbes Woman Africa (отдельное издание), но не нашел приложения Forbes Women для США. Как разработчик, я взял инициативу в свои руки и решил создать мобильное приложение, которое будет парсить тег /forbeswomen и собирать статьи в простое приложение, к которому я могу мгновенно получить доступ на своем телефоне.

Парсеры могут быть сложными, но замечательная вещь в них заключается в том, что с небольшими изменениями их можно оптимизировать для выполнения именно того, что вам нужно. Мне посоветовали проверить вкладку "Сеть" в инспекторе, чтобы найти один из самых больших ответов XHR (иногда это загрузка вызова fetch), но это наиболее оптимально для статического веб-сайта. Веб-сайт Forbes, который динамически загружается через JavaScript, фактически загружает свои статьи через ссылку в своем исходном коде. Как только я нашел это, все пошло гладко (почти). Я использовал библиотеку beautifulsoup на Python, чтобы найти то, что мне нужно: элементы статьи с заголовками, авторами, описаниями, ссылками и изображениями. Единственная проблема была с тегом ссылки, который имел сложную вложенность в div и не позволял мне получить доступ к тексту, поэтому при итерации по элементу мне приходилось вызывать сам элемент, чтобы получить текст ссылки и дальше разбирать его с помощью методов .strip() и .split() на Python. Когда у меня успешно отображалась моя база данных JSON через функцию парсинга beautifulsoup (код на GitHub), я знал, что могу реализовать фронтенд. Причиной, по которой я выбрал React Native (мобильное приложение), а не React JS, было то, что, как я уже упоминал, целью было создание мобильного приложения для удобства доступа к статьям в пути.

React Native немного отличается от React.js тем, что в нем есть встроенные функциональные компоненты, которые делают некоторые вещи за вас (разработчика), такие как отображение состояния в свойства, добавление прокрутки и другие динамические функции, которые были стандартизированы для мобильных систем iOS и Android. Я уже знал, что хочу, чтобы мои статьи были в прокручиваемом списке, поэтому я использовал компонент FlatList в React Native для отображения полученного состояния API. В то время как в React.js я бы использовал .map() для итерации по состоянию и присваивания свойств, мне просто нужно было вызвать массив состояния в компоненте FlatList с помощью JSX.

После этого потребовалось немного стилизации, и у нас есть полностью функциональное приложение Forbes Women! Обратите внимание, что существует спор о парсинге веб-сайтов. Это был личный проект, использованный в образовательных целях; парсинг веб-сайтов с целью получения прибыли может быть недобросовестным и даже незаконным. Если вы не уверены, проверьте условия использования сайта. Если бы я потратил больше времени на это, я бы создал еще один парсер, который бы брал содержимое статей, чтобы вам не приходилось открывать браузер для их полного чтения. Если вам понравилась эта статья, не стесняйтесь связаться со мной в LinkedIn и GitHub. Счастливого кодинга ❤ Sar