Как я создавал поисковик с нуля: личный опыт

Всем привет. Меня зовут Азат Юлдашев. Я учусь на первом курсе образовательного центра «Алабуга Политех» по специальности «Программирование Python». Хочу поделиться с вами опытом создания поисковика.

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

На втором этапе нам нужно было реализовать полноценный проект поисковика: самим придумать его концепцию и добавить различные функции. Я не стал добавлять много фишек, а решил сделать продукт максимально удобным, быстрым, красивым и завершенным.

Разработка началась с проектирования. Идея заключалась в том, чтобы сервер распознавал статьи с новостных сайтов и загружал их в базу данных. После чего пользователи могли зайти на сайт, ввести поисковый запрос и увидеть список новостей из мира технологий.

Расписав концепт проекта, я приступил к дизайну. Оформление сайта постарался сделать простым и понятным для посетителей. Дизайн всех страниц поисковика создавался в программе Figma. Дизайн мне хотелось сделать в стиле минимализм, чтобы он выглядел аккуратно и красиво. Для этого я начал изучать дизайн схожих сайтов и пришел к выводу, что главная страница должна состоять из строки поиска, названия сайта, переключателя темы и моего тега для подчеркивания авторства. Выполнить сайт решил в монохромных цветах, чтобы он не сильно бросался в глаза. Максимальную ширину ограничил 800 пикселями для того, чтобы на широких мониторах поиск не разъезжался по сторонам и находился в центре. Далее по подобию главной страницы я оформил и остальные. Упор был сделан на то, чтобы это было легко реализовать и анимировать все элементы.

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

Затем началась самая сложная и ответственная работа по разработке. В процессе разработки возникали сложности и пришлось обучаться по ходу работы. Начал с создания сервера, затем установил библиотеки: для серверной части проекта использовались Django и Django Rest Framework, а для клиентской — React.

Cоздал проект, под которым я подразумеваю создание определенной структуры папок и автоматической установки дополнений необходимых для удобной разработки. Для создания проекта на сервере необходимо ввести команду: python manage. py startproject. А на клиенте: npx create-react-app

Затем описал структуру базы данных. У любой базы данных есть определенная структура хранения данных и ее нужно определять заранее. Так, в библиотеке Django она описывается в файле models. py, в данном случае потребовалось создать лишь одну таблицу для новостей, состоящей из заголовка, текста статьи, ссылки на исходник и даты создания.

Далее, так как по задумке на моем сайте поиск осуществлялся по новостям с других сайтов, их нужно было загрузить к себе в базу данных. Для загрузки я узнал url- адреса страниц с новостями и с помощью библиотеки requests загружал их, а затем парсил с помощью библиотеки Beautiful soup 4 и заносил в базу данных через Django ORM.

Теперь осталось реализовать функцию поиска. В качестве поискового движка и базы данных для хранения поисковых индексов использовался Elasticsearch.

Как все это работает: пользователь заходит на сайт и пишет поисковый запрос, React отправляет запрос на сервер, который принимает его и формирует поисковый запрос для ElasticSearch. Далее он возвращает отсортированные результаты поиска от лучших к худшим, а также подсвечивает найденные совпадения. Во время поиска используется проверка похожих слов, в связи с этим не стоит беспокоиться, если вы ошиблись при запросе — в результатах все равно выйдет нужная вам информация.

Больше всего проблем при разработке доставила настройка всего этого на сервере с использованием Docker, который по факту должен был упростить работу, но только усложнил ее.

К примеру, ElasticSearch никак не хотел запускаться внутри Docker-контейнера на сервере с 1 гб оперативной памяти, для этого пришлось устанавливать переменные окружения для ограничения его потребления. В данном проекте было использовано много крутых технологий, с которыми я еще не работал. Открытием для меня стало использование TypeScript, благодаря которому редактор кода автоматически дополняет код, рекомендую использовать его на всех более менее крупных проектах, так как это сильно ускорит разработку. Также новинкой для меня стало встроенное в браузер распознавание голоса, которое я использовал для голосового ввода.

На финальной стадии сверстанный сайт объединил с сервером и поисковик был готов.

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

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