Текущее время: Вс май 26, 2024 6:22 pm

Часовой пояс: UTC + 3 часа [ Летнее время ]




Начать новую тему Ответить на тему  [ Сообщений: 2 ] 
Автор Сообщение
 Заголовок сообщения: Rikibooru - поиск по артам фандома
СообщениеДобавлено: Ср сен 21, 2022 2:13 am 
Не в сети
Аватар пользователя

Зарегистрирован: Ср авг 24, 2016 12:22 am
Сообщений: 78
Любимый смешарик: Пин
Заслуженная репутация: 89
Привет всем! Завожу эту тему на форуме, чтобы рассказать о созданной большой штуке, которая, уверен, полезна для всего коммьюнити.

Что это вообще такое.

Rikibooru это приложение, которое позволяет искать по артам, опубликованным в паблике Экстремальный рашн фендом фо смешарики (ЭРФФС). У всех артов есть теги, а приложение позволяет сформировать поисковый запрос из этих тегов и получить результат. Запросы можно делать сложные, например, если добавить "-" к тегу, то картинки с этим тегом будут убираться из результатов, а если добавить "+", то найдутся арты, где есть только такой тег... и при этом теги можно не вписывать вручную, можно нажимать на кнопки и ползунки в приложении и строить запросы, подробнее и с примерами написано в инструкции приложения.

Так как это приложение типа VK Mini App, то оно работает из-под официального клиента ВКонтакте. Потом я расскажу, что это за технология, но пока стоит отметить минус - для использования требуется регистрация ВК, и плюс - приложение из-за такого подхода адаптируется под все операционные системы, на которых собственно работает ВК. И оно встраивается в паблик, что...логично для поиска по артам из этого же паблика.

Вот несколько скриншотов с разных устройств. Нажатие на картинки из результатов поиска открывает соответствующий пост в паблике:
 Скриншоты
ИзображениеИзображение
Изображение


Как это построено.

Я попробую описать, как это всё создавалось, какие технологии использовались и какая логика при этом применялась!

Для начала нужно сказать, что проект "Рикибуру" (название отсылает к категории сайтов booru - и милый счётчик артов со смешариками на главной странице это тоже часть стиля таких сайтов) состоит из двух частей: протегированная база артов и механизм поиска по этой базе.
Все семь лет картинки постились в паблик без каких-либо данных, которые позволили бы их как-то каталогизировать, и на то были многие причины: громоздкость тегов, проставленных в тексте поста; плохая работа встроенного поиска вконтакте, который просто не ищет больше определённого количества записей по отдельному тегу; наконец, просто нежелание этим заниматься. Поэтому для начала все картинки были размечены путём добавления тегов в описания фотографий из альбома стены сообщества.

Почему именно так? Почему мы не создали теги в какой-то своей закрытой базе, например?
Во-первых, это страховка. У ВК есть встроенный поиск по фотографиям, о котором мало кто знает и который работает только с десктопной версии, и он ищет по тексту, указанному в описании фотографий. Он крайне ограничен и паршиво работает, но на случай отключения приложения какой-то поиск произвести можно будет, указав нужные теги (просто посмотрите на теги под любой фоткой со стены паблика и попробуйте их вставить в этот поиск).
Во-вторых, это удобство редактирования. Нам, как админам, и подписчикам, как создающим предложку, гораздо удобнее вписать всю нужную информацию прямо на сайте ВК, где и хранятся фотки, чем лезть для этого куда-то в базу или делать админскую панель на левом сайте.
В-третьих, и это правда важно, это открытость для сообщества. Все арты это просто фотографии в сообществе ВК. Теги это описания этих фотографий. Любой может использовать API ВКонтакте, чтобы написать свой скрипт, выгрузить все фотки с тегами куда-то к себе и сделать аналог нашего рикибуру, в виде сайта или своего приложения, с другим дизайном и функционалом. Главное, что у него уже будет готовая база и весь этот огромный труд по отсмотру и разметке тысяч артов ему не придётся делать заново и с нуля.

Как устроен механизм поиска.

Чтобы сделать поиск, нужно, чтобы куда-то можно было вводить поисковый запрос и чтобы что-то его обрабатывало.
Одна из первых мыслей - нужно делать сайт. Но сайт ощущается каким-то совсем оторванным от паблика! И, наверно,все комментарии под постами за семь лет на сайт перенести не получится! И модерировать придётся в два раза больше - и сайт, и паблик... Поэтому я решил, что механизм для поиска должен располагаться тоже в среде ВК, потому что это огромное удобство для всех. Поэтому решение - сконструировать мини-приложение для вконтакте.

Мини-приложения ВК (VK Mini App) в своей сути сайты, работающие в оболочке клиента ВК. То есть буквально ВК запускает браузер внутри себя и отображает сайт. Поэтому приложение написано на React- это библиотека JavaScript для создания интерфейсов сайтов. Чтобы приложение выглядело в стиле самого вк, в его дизайне используются элементы из библиотеки VK UI. Инструкцию по использованию этих библиотек для создания мини-аппов можно найти в разделе для разработчиков на сайте ВК.

Изначально планировалось использовать встроенный поиск вконтакте, просто сделать для него удобный и красивый интерфейс. Но оказалось, что он, как я уже написал выше, плохо и паршиво работает. И это не преувеличение, это значит, что он не возвращает все результаты, он тупо не находит то, что есть! Необъяснимая (и необъяснённая техподдержкой) мистика. Поэтому задача усложнилась: нужно было создать какую-то базу, какой-то сервер, к которому интерфейс будет делать запросы вместо вконтакте.

Была выбрана база данных MySQL (требует мало оперативки для работы), а сервер было решено написать на Node.js (язык JavaScript). Сервер получает запрос от приложения, делает SQL-запрос в MySQL, получает оттуда информацию и отправляет обратно в приложение. Система "клиент - сервер", очень мило.
В базе данных хранятся не сами арты, а ссылки на них с серверов ВК. Две причины: сервера вк "вечные" и фото с них не удаляются никогда, даже если они стёрты со страниц вк; хранить контент на своём сервере требует много места и это стрёмно с точки зрения обращений правообладателей (классический суд от "Рики").
Постоянная работа сервера на Node.js поддерживается планировщиком задач PM2. Он перезапускает сервер, если вдруг его накроет ошибкой от наплыва запросов. Этот же планировщик задач периодически, по таймеру, запускает скрипт (тоже на JavaScript), который использует VK API для того, чтобы собрать фотки со стены паблика и засунуть их в базу - добавить новые арты и обновить теги у старых (вдруг что-то пришлось исправить). Таким образом, арты не загружаются в БД на сервере вручную, это делает скрипт.

Короче, технологии! Фронтенд: React.js, VK UI. Бэкенд: Node.js + PM2, MySQL. Также: аренда виртуального сервера и домена (чтобы получить сертификат безопасности. Нельзя присылать на сайт ВК какие-либо данные, если у отправителя-сайта нет сертификата безопасности). А ещё использовались отдельные подключаемые JavaScript-библиотеки для обеспечения "безопасности сервера", но это уже совсем неинтересно.

 Ещё детали
Всё безумие в интерфейсе, когда нажимаешь на кнопки-ползунки, а в строке ввода появляются-исчезают слова, работает на регулярных выражениях. Адаптивность интерфейса (три колонки с результатами на планшетах и две на телефонах) это использование VK UI. Список тегов, которые отображаются в приложении, поступают с сервера в .json - не нужно пересобирать само приложение, чтобы добавить\удалить кнопки, достаточно отредачить файл на сервере


Вернуться наверх
 Профиль  
Ответить с цитатой  
 Заголовок сообщения: Re: Rikibooru - поиск по артам фандома
СообщениеДобавлено: Чт июн 08, 2023 11:57 pm 
Не в сети
Аватар пользователя

Зарегистрирован: Ср авг 24, 2016 12:22 am
Сообщений: 78
Любимый смешарик: Пин
Заслуженная репутация: 89
Если кто-то не имеет аккаунта ВК, то можно пользоваться зеркалом приложения через сайт rikibooru.host


Вернуться наверх
 Профиль  
Ответить с цитатой  
Показать сообщения за:  Сортировать по:  
Начать новую тему Ответить на тему  [ Сообщений: 2 ] 

Часовой пояс: UTC + 3 часа [ Летнее время ]


Кто сейчас на форуме

Сейчас этот форум просматривают: нет зарегистрированных пользователей и гости: 3


Вы не можете начинать темы
Вы не можете отвечать на сообщения
Вы не можете редактировать свои сообщения
Вы не можете удалять свои сообщения

Найти:
Перейти:  
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group