nilchan pub

nilchan pub

Аудитория: 3 810 подписчиков
Категория: Блоги
База знаний и приватное сообщество:
@nilchanbot

Написать мне в личку:
@patriksocial

YouTube канал:
https://www.youtube.com/@nilchanpub

Статистика канала

3 810 подписчиков

Последние посты

nilchan pub
Как миниприложение работает под капотом? Часть 3.Я пока опускаю очень много неожиданной головной ебли в виде различных CORS-политик (это когда ты через curl делаешь запрос на прод — всё работает, делаешь запрос из js-приложения — хуй тебе на нос, ошибка доступа) и прочих прелестей, ибо тогда написание этих постов займёт ещё пару недель, а до конца дочитает 1% населения нилчана.Так же в миниприложении у некоторых нод вы можете видеть изображения (иконки). Опять же вопрос откуда эти изображение брать и что самое главное как эти новые изображения добавлять, да так, чтобы мне не приходилось каждый раз руками лезть в файловую систему прод-сервера, закидывать туда изображение, дописывать в React-приложуху новый путь до нового изображения, и пересобирать полностью React-приложуху, чтобы изменения были видны юзерам. Решение: S3 сервер. И есть отличное решение: open-source'ный бесплатный S3-совместимый сервер: minio. Его я развернул так же в докер-контейнере на проде, через Caddy на отдельном суб-домене организовал туда доступ, и теперь могу в веб-интерфейсе докидывать новые изображения, а потом в Crawler'е генерировать ссылки на эти изображения, и складывать их в тот же json, куда кладу граф (понимаю, для новичка это просто набор букав, но статья чисто для гиков). Благодаря чему больше нет необходимости лезть на прод и что-то там пересобирать просто для того, чтобы добавить новую изображеньку в миниприложение.А так, в целом, касаемо миниприложения, всё) Кажется глобально ничего не забыл
5 950
nilchan pub
Как миниприложение работает под капотом? Часть 2.А дальше нужно думать, как лучше организовать отдачу собранного json'а. Если я на каждое открытые веб-страницы (на каждый запрос на получение графа в бекенд) буду прогонять описанный выше алгоритм, то веб-страница будет открываться очень долго, секунд 10-15, но как вы видите открывается она практически моментально. Всё потому, что было принято решение раз в N времени (сейчас это раз в пол часа) прогонять описанную программу (называл её crawler, типо как в гугл хроме, типо крутой в общем), crawler собирает раз в пол часа актуальный json и сохраняет его в файл. Вы знали что в linux'е для периодического запуска команд существует утилита cron + crontab для её настройки? Потом уже на запрос от фронтенда "дай мне json представление графа" я просто буду отдавать готовый файлик, что стократно быстрее.Хорошо, мы умеем автоматически читать базу знаний из приватки и собирать по ней json граф, что дальше? Дальше вопрос как организовать HTTPS подключение к серверу. Поизучав информацию, я понял что можно воспользоваться Caddy (современный аналог nginx, только caddy АВТОМАТИЧЕСКИ сгенерирует мне сертификат и подпишет его, БЕСПЛАТНО😏). Плюс Caddyfile (аналог nginx.conf) выглядит ну гораздо приятнее и понятнее аналога от nginx.ХАРАШО, бекенд считай готов. Crawler раз в пол часа собирает json, Caddy по https умеет этот json отдавать (на самом деле я написал гошную приложуху в 1 эндпоинт, которая читает json файл и отдаёт его, а Caddy уже ходит за json'ом в эту гошную приложуху, но мне просто хотелось чтобы в этом большом проекте была частичка гошки xd, так то понятно что можно было этот самый json как статику отдавать напрямую через Caddy). Понятное дело что как Caddy, так и Crawler, так и гошная приложуха на 1 эндпоинт — всё завёрнуто в докер-контейнеры и деплоятся одной кнопкой через Makefile + dockercompose.Что с фронтендом? Как рисовать граф? Сначала я пытался понять как obsidian строит свои графы (ведь у обсидиана есть веб-версия, как-то же они это делают), но в итоге наткнулся на библиотеки для React'а для построения графа. Был выбор из нескольких, одна более красиво рисует граф но ужасно регистрирует касания и клики, вторая не так красиво отрисовывает но замечательно регистрирует пользовательский ввод. Очевидно смысла в красивом но неудобном графе нет, поэтому был выбран не самый красивый но наиболее удобный вариант (вы его видите в миниприложухе).Окей, есть библиотека для реакта, но я в душе не ебу как этот реакт устроен, как на нём писать, как устроено взаимодействие компонентов, и что самое главное как это потом деплоить в прод. И тут я бы мог встрять на пару месяцев, но мне на помощь пришла моя девушка, которая уже какое-то время изучает фронтенд на реакте, она помогла мне разобраться, так сказать, в базовых ценностях, да и компоненты поиска и инфопанели (которые вы видите в миниприложении) она верстала, за что ей большое спасибо.Фронтенд был самой сложной и мучительной частью, этот css это просто пиздец, 99999 свойств на один эффект и нахуй ни одно свойство не работает как надо. Плюс борьба с телеговской средой запуска веб-страниц, в которой если я открываю клавиатуру (например когда хочу в поиске что-то вбить), то нахуй рабочая область уменьшается в 2 раза и по пизде едет вся вёрстка. Тут уже пришлось 10 тысяч запросов в нейронку написать, чтобы на десять тысяч первый запрос она выдала рабочее решение, которое с помощью ебейшего костыля помогает обойти эту особенность телеграм-среды для веб-страниц.Кое-как допинали этот фронтенд до адекватного внешнего вида, теперь вопрос как это деплоить. Опять же поискав инфу, я узнал что React приложения компилируются в js+css+html, и потом на проде веб-сервером (nginx или Caddy) просто отдаются как статика. Интересно. В общем описываю докер-контейнер который на базе nodejs-имаджа собирает прям на прод-сервере мне статику и через docker-volume отдаёт её в папку, из которой уже Caddy отдаёт полученные файлы в качестве веб-страницы юзеру.
4 580
nilchan pub
Как миниприложение работает под капотом? Часть 1.(в конце изображение со схемой всей системы)Чтобы в телеграмме создать миниприложение, необходимо иметь постоянную https ссылку на веб-страницу, которая будет открываться в среде телеграмма и называться собственно миниприложением. То есть миниприложение — это просто сайтик, который открыт в среде телеграмма. То есть сразу нужны:— Веб-морда. Верстай как хочешь, но без веб-морды нет и миниприложения.— HTTPS подключение. То есть сертификаты. То есть нужен домен.Ну сразу вырисовывается стандартная картина фронтент+бекенд, где продовый бекенд крутится на сервере с купленным доменом, плюс ещё каким-то образом нужно HTTPS соединение поддержать (раньше я ничего подобного не делал своими руками).Хорошо, допустим с вёрсткой веб-морды и покупкой домена я как-то разберусь. Но откуда вообще брать инфу для построения графа? На каждый новый пост в базе знаний лезть в продовую бд и руками править json-представление графа? Нууу... заебусь и окончательно облысею от такого капитального заёба. Нужно как-то автоматизировать агрегацию информации из базы знаний, чтобы я мог просто накакать новый пост, а этот новый пост сам подсосался в граф и как следствие в миниприложение. Как?Решение оказалось довольно очевидное. Телеграмм (до сих пор не знаю одна тут м должна быть или две) чаты поддерживают возможность копировать ссылки на сообщения, и есть возможность по нажатию на эти самые ссылки — сразу переходить на нужное сообщение, то есть телега сама перекидывает юзера на нужный топик + нужное сообщение, да ещё и подсвечивает это самое сообщение. Получается я могу все сообщения запихнуть в один топик (не обязательно в один, но в одном удобнее), в одних сообщениях давать ссылки на другие, в этих других сообщениях давать ссылки на третьи сообщения, ну и так далее. То есть уже вырисовывается графовое представление всей базы знаний, благодаря возможности телеграмма переходить на конкретное сообщение со ссылке. Осталось только это всё добро как-то автоматически парсить и строить по этой инфе json, который я буду отдавать фронтенду, и по которому этот самый фронтенд будет строить nilchan-obsidian😄У тг-ботов нет возможности читать произвольные сообщения в чате. Зато такая возможность есть у меня. Но как мне заставить программу от моего имени открыть чат, начать читать сообщения и переходить по ссылкам на другие сообщения? А у телеграмма даже такая возможность есть. Можно на сайте телеги зарегистрировать своё приложение, тебе выдадут api_id+api_hash, по которым ты сможешь коннектиться к апи телеграмма и делать практически любые действия от своего имени, только при помощи программы (можно даже сообщения другим людям отсылать, но я так один раз чуть акк не проебал из-за того, что кто-то на спам пожаловался xd). Но голая telegram api выглядит очень страшно, а вот разного рода обёрточки на питончике выглядят уже более привлекательно. Решил не экспериментировать с аналогами на гошке, и взял telethon либу для питона, и поехали.Получается алгоритм такой: изначально даю программе ссылку на корневое сообщение (корневую ноду) в базе знаний в телеграмм-чате. Эта программа получает текст сообщения, парсит все ссылки из этого сообщения, и если эта ссылка — это ссылка на другое телеграмм-сообщение, то переходит на это другое телеграмм-сообщение и повторяет алгоритм (опять ищет все ссылки на другие сообщения и переходит на них). Параллельно запоминая каждое сообщение в котором мы побывали + запоминая переходы между сообщениями (из какого конкретно сообщения дана ссылка на другое сообщение, чтобы понимать как рисовать связи между нодами). Получается тот самый обход графа в глубину) А вы говорите алгоритмы не нужны. Шучу. Не шучу. В общем окей, спарсили целый топик, построили граф, сдампили в json. Что дальше?
4 940
nilchan pub
Превью публикации
tl;dr https://t.me/nilchanbot/nilchanbaseБаза знаний в нашей приватке стремительно растёт, и я понял, что если продолжу в текущем виде отгружать новые инсайды/гайды/контент в приватное сообщество, то навигироваться по всему этому будет максимально неудобно. Многие скажут "хештег повесил и кайфуй" но нет, навигация по хештегам это лютый кал, ты просто пишешь в поиске хештег, и получаешь миллион сообщений, которые хуй пойми вообще в чему относятся. А учитывая, что у нас на подходе инсайды на новые стеки (qa/ios/android/etc), то что-то с организацией информации срочно нужно было предпринять.Я долго думал как лучше поступить, пока меня не посетила идея сделать мини-приложение, где все наши знания из приватного сообщества будут организованы в виде графа, по которому можно будет максимально удобно находить нужную тебе информацию. Поначалу мне слабо верилось что я смогу что-то подобное реализовать, всё-таки миниприложение это в том числе фронтенд, с которым я не то что на "вы", скорее на "увы", да и как мне автоматизировать агрегацию информации из чата в что-то, что можно скормить фронтенду, чтобы этот самый фронтенд нарисовал мне граф... Но идея с миниприложением уж слишком сильно меня вдохновила, чтобы я с таким количеством лет анальной айтишки за спиной не решился попробовать реализовать задуманное.Как это всё устроено в техническом плане мы разберём в следующих постах, там скорее для гиков, которым интересно как это всё живёт под капотом, а система в итоге получилась достаточно масштабная, я думаю будет о чём рассказать)А пока те, кто уже вступил в приватку, могут смотреть прикреплённый видос для того, чтобы научиться пользоваться нашей новой базой знаний.Те, кто не вступил в приватку — вступайте: @nilchanbot
5 630
nilchan pub
Превью публикации
pov кладёшь месяц жизни на первую часть курса по гошкечто вселенная тебе посылает в ответ:
7 510

Оставить комментарий/отзыв

Рекомендации

НАСТЯ ЕРМАК

НАСТЯ ЕРМАК

@ermaknastya
3.3K подписчиков

Сотрудничество: @superman_top1

sturmnva

sturmnva

@sturmnva
3.3K подписчиков

тут моя жизнь ✨ 💌 реклама: sturmnva_pr

NapolskayaLive

NapolskayaLive

@napolskayaLive
3K подписчиков

Напольская без цензуры 🤪 Более или менее приличное тут https://t.me/napolskaya_ege

Валетова Кристина

Валетова Кристина

@valetova_kristina
3.2K подписчиков

По рекламе: • tg: @banktokrot_AD by @banktokrotAD • e-mail: banktokrotad@yandex.ru Админ тгк: Платина, LIL KR...

Фёдор Zверев

Фёдор Zверев

@zverevfeodor
3.3K подписчиков

Разговоры, мысли, чтение

шарашкина контора

шарашкина контора

@schkont
3.2K подписчиков

личный тгк со спойлерами, меми и щитопостом: https://t.me/scharasch

МУЖИКИ

МУЖИКИ

@myzhiki_smr
3.5K подписчиков

Всем здарова! По вопросам и рекламе: @myzhiki_manager Моя инста: andreylarin_ YouTube: https://youtube.com/@MY...

Личный дневник Лики

Личный дневник Лики

@likagordi
3.4K подписчиков

Здесь я делюсь моментами своей жизни и создаю уютный уголок для общения с вами! 🫶🏼 🔗 Мой блог: instagram.com/...

Шмаровозы и маромои

Шмаровозы и маромои

@shmaromoi
3.2K подписчиков

Название говорит само за себя. Рассказываю про шмаровозов, караю марамоев и кидаю смехуёвые картинки. Написат...

Nika koshka

Nika koshka

@shitpostingbynika
4.3K подписчиков

Канал является лишь порождением моего раздутого эго. 💌Для связи, сотрудничества и признаний в любви: @vrnqi Р...