Нейронный Кот

Моя первая веб аппка (telegram mini app)

Пару месяцев назад в Twitter завирусилось веб-приложение, которое анализирует твиты и делает разбор личности в стиле: «Ты похож на волка 🐺, брат. Станешь мультимиллионером с вероятностью 99%». twitter.wordware.ai — было создано на no-code платформе от YC-backed компании Wordware.

Я решил неспешно повторить нечто подобное для телеги, так как давно хотел разобраться в Telegram Mini Apps и веб-разработке. Сделал www.tgoop.com/GigoGramBot/report — тут можно ради кеков проанализировать профиль/канал/бота по публичной инфе (аватарке, имени, никнейму, bio и постам в случае каналов)

Раньше я никогда не делал production-ready веб приложений, поэтому захотел поделиться гайдом, как обычному python enjoyer-у сделать свою аппку

🔫😊🔫 Фронтенд
🟣v0
v0 умеет делать красивый дизайн, если в промпте просто указать «сделай красиво». ChatGPT и Claude хуже справляются с абстрактной задачей «сделай красиво» — у них часто получается не очень. Я же, не будучи дизайнером, не могу конкретно объяснить, что нужно улучшить (цвета, расположение, эффекты и т.д.)

От кода, полученного от v0 я, в итоге, отказался, потому что там на выходе Next.js и куча всяких файлов-папок. Мне показалось это сложным, поэтому решил упрощать

🟣 ChatGPT (GPT-4o) и Claude (3.5 Sonnet) 🥴
С их помощью я накидал основу приложения через Create React App. Получился простой репозиторий с несколькими файлами, в которых легко разобраться. И я уже мог давать конкретные комменты по дизайну из v0 и прикладывать скриншоты к промптам.

🟣 В дальнейшем я остановился на ChatGPT, так как он предполагал, что я ничего не знаю, и давал базовые советы типа: «Сначала вызови команду npm install, создай такой-то файл». Эти советы немного раздражают, когда ты опытный разработчик, но в моём случае были полезны.

🟣 С помощью Cursor разработал весь функционал приложения. Кажется, я самостоятельно написал всего несколько строчек кода. Единственное — столкнулся с тривиальной багой, которую не могли пофиксить ни Cursor, ни ChatGPT, ни Claude. Только с выходом o1-preview её удалось исправить, лол.

🟣Сами Telegram Mini Apps оказались прикольными. Достаточно добавить один JS-скрипт, и становятся доступны все методы из документации.

🟣 Деплой через Netlify. Просто подключил GitHub-репозиторий, и всё само выкатилось. Больше ничего не делал. Цена: $0.

🥸🥸🥸 Бэкенд
🔹 FastAPI
Здесь живут все эндпоинты для получения информации о юзернейме и предсказаний. Очень люблю FastAPI. Если вы ещё на Flask, то пора переходить!

🔹 Redis в качестве единственной БД
Возможно, это не самое логичное решение, зато супер просто и быстро! У меня всего две операции: получить информацию по юзернейму или сохранить её.

🔹 Python Telegram Bot
На этом фреймворке написан сам бот. В принципе, можно было бы и без бота, но для оплат нужен сервис, который отвечает на pre-checkout запросы. С помощью этого фреймворка такой сервис сделать очень просто

🔹 Сервер
Арендовал Droplet на DigitalOcean, там же задеплоил приложение. Redis поднял через их Databases. Цена: $30/месяц за всё.

🔹 Оказалось, что сервера DigitalOcean заблокированы в РФ, поэтому подключил Cloudflare DNS + Proxy. Цена: $0.

🙂🙂🙂 AI часть
🟣 Написал пару функций, которые парсят доступную публичную информацию о пользователе или канале по юзернейму.

🟣Промпт скопировал у twitter.wordware.ai — у них можно форкнуть агента и посмотреть внутренности. Немного подкорректировал его, чтобы лучше работал для Telegram.

🟣 Использую GPT-4o с включенными Vision Capabilities и Structured Outputs. Эту фичу я больше всего люблю в современных ллм-системах. По сути, нужно задать pydantic модель (см. скрин) и она у тебя будет на выходе запроса (sic!) Цена: ~$0.1 за генерацию.

Короче, попробуйте потыкать аппку (там 3 предсказания бесплатно), а я отвечу на любые вопросы про реализацию.

🤪 https://www.tgoop.com/GigoGramBot/report

Please open Telegram to view this post

VIEW IN TELEGRAM

Please open Telegram to view this post

VIEW IN TELEGRAM

🔥20👏2❤1👍1

www.tgoop.com/neural_cat/99

2.64K viewsOct 2, 2024 at 15:28

Моя первая веб аппка (telegram mini app)

Пару месяцев назад в Twitter завирусилось веб-приложение, которое анализирует твиты и делает разбор личности в стиле: «Ты похож на волка 🐺, брат. Станешь мультимиллионером с вероятностью 99%». twitter.wordware.ai — было создано на no-code платформе от YC-backed компании Wordware.

Я решил неспешно повторить нечто подобное для телеги, так как давно хотел разобраться в Telegram Mini Apps и веб-разработке. Сделал www.tgoop.com/GigoGramBot/report — тут можно ради кеков проанализировать профиль/канал/бота по публичной инфе (аватарке, имени, никнейму, bio и постам в случае каналов)

Раньше я никогда не делал production-ready веб приложений, поэтому захотел поделиться гайдом, как обычному python enjoyer-у сделать свою аппку

🔫😊🔫 Фронтенд
🟣v0
v0 умеет делать красивый дизайн, если в промпте просто указать «сделай красиво». ChatGPT и Claude хуже справляются с абстрактной задачей «сделай красиво» — у них часто получается не очень. Я же, не будучи дизайнером, не могу конкретно объяснить, что нужно улучшить (цвета, расположение, эффекты и т.д.)

От кода, полученного от v0 я, в итоге, отказался, потому что там на выходе Next.js и куча всяких файлов-папок. Мне показалось это сложным, поэтому решил упрощать

🟣 ChatGPT (GPT-4o) и Claude (3.5 Sonnet) 🥴
С их помощью я накидал основу приложения через Create React App. Получился простой репозиторий с несколькими файлами, в которых легко разобраться. И я уже мог давать конкретные комменты по дизайну из v0 и прикладывать скриншоты к промптам.

🟣 В дальнейшем я остановился на ChatGPT, так как он предполагал, что я ничего не знаю, и давал базовые советы типа: «Сначала вызови команду npm install, создай такой-то файл». Эти советы немного раздражают, когда ты опытный разработчик, но в моём случае были полезны.

🟣 С помощью Cursor разработал весь функционал приложения. Кажется, я самостоятельно написал всего несколько строчек кода. Единственное — столкнулся с тривиальной багой, которую не могли пофиксить ни Cursor, ни ChatGPT, ни Claude. Только с выходом o1-preview её удалось исправить, лол.

🟣Сами Telegram Mini Apps оказались прикольными. Достаточно добавить один JS-скрипт, и становятся доступны все методы из документации.

🟣 Деплой через Netlify. Просто подключил GitHub-репозиторий, и всё само выкатилось. Больше ничего не делал. Цена: $0.

🥸🥸🥸 Бэкенд
🔹 FastAPI
Здесь живут все эндпоинты для получения информации о юзернейме и предсказаний. Очень люблю FastAPI. Если вы ещё на Flask, то пора переходить!

🔹 Redis в качестве единственной БД
Возможно, это не самое логичное решение, зато супер просто и быстро! У меня всего две операции: получить информацию по юзернейму или сохранить её.

🔹 Python Telegram Bot
На этом фреймворке написан сам бот. В принципе, можно было бы и без бота, но для оплат нужен сервис, который отвечает на pre-checkout запросы. С помощью этого фреймворка такой сервис сделать очень просто

🔹 Сервер
Арендовал Droplet на DigitalOcean, там же задеплоил приложение. Redis поднял через их Databases. Цена: $30/месяц за всё.

🔹 Оказалось, что сервера DigitalOcean заблокированы в РФ, поэтому подключил Cloudflare DNS + Proxy. Цена: $0.

🙂🙂🙂 AI часть
🟣 Написал пару функций, которые парсят доступную публичную информацию о пользователе или канале по юзернейму.

🟣Промпт скопировал у twitter.wordware.ai — у них можно форкнуть агента и посмотреть внутренности. Немного подкорректировал его, чтобы лучше работал для Telegram.

🟣 Использую GPT-4o с включенными Vision Capabilities и Structured Outputs. Эту фичу я больше всего люблю в современных ллм-системах. По сути, нужно задать pydantic модель (см. скрин) и она у тебя будет на выходе запроса (sic!) Цена: ~$0.1 за генерацию.

Короче, попробуйте потыкать аппку (там 3 предсказания бесплатно), а я отвечу на любые вопросы про реализацию.

🤪 https://www.tgoop.com/GigoGramBot/report