refreak

Вам знакомо это ощущение? Открыто 15 вкладок: один сервис для конвертации PDF, другой для удаления фона, третий AI-чат.

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

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

Задача №1: Работа с документами в чате. Кинул файл — получил ответ.

Вы отправляете боту файл (PDF, Word, Excel, PPT и другие текстовые), и он может проанализировать его содержимое.

Как это работает на деле:

• Бесплатно: Обработка файлов до 1 МБ. Этого хватит для текстовых договоров, небольших таблиц или презентаций без тяжелых изображений. Да, это ограничение, и мы его не скрываем. Оно нужно, чтобы сервис оставался стабильным и доступным для всех.

• Что умеет: Задавайте вопросы к документу: «Резюмируй», «Найди главные пункты», «Какие риски в этом договоре?». Бот поддерживает контекст беседы — можно уточнять вопросы, не загружая файл заново.

• Сравниваем честно: Это не замена мощным сервисам вроде ChatGPT с его продвинутым анализом данных. Наша цель — дать быстрый и удобный инструмент для повседневных задач, не выходя из Telegram.
  

Итог: Удобно для разовых задач с небольшими файлами. Для сложного анализа больших файлов придется купить подписку.

Задача №2: Базовая работа с изображениями: фон, генерация, апскейл.

Примеры генерации и обработки изображений

Доступ к разным AI-моделям для работы с картинками в одном меню.

Как это работает на деле:

• Модели: Мы действительно даем выбор из нескольких моделей (Stability AI для удаления фона и работы с изображениями, OpenAI/DALL-E и Gemini для генерации и редактирования). Мы используем их API.

• Без водяных знаков — это правда. Качество на выходе соответствует возможностям исходной модели.

• Главный вопрос: а как насчет стоимости? Мы не сжигаем деньги бесконечно. Сейчас эти функции доступны в ограниченном количестве 5 шт в сутки. Либо приобрести подписку или пакет запросов. Это честная модель, которая позволяет нам развивать бота, а вам — получать предсказуемый результат без скрытых ограничений.

Итог: Это агрегатор, который избавляет от необходимости регистрироваться на десятке сайтов. Вам не нужно покупать отдельные подписки на каждый сервис — достаточно одной в нашем боте.

Задача №3: AI-агенты для конкретных задач (в разработке).

Попытка уйти от ручного «дирижирования» ИИ. Это не просто чат, а заранее настроенные сценарии.

• Как это работает на деле:
  Пример «Агент для маркетплейсов»: Он знает специфику создания карточек товаров. Вы даете ему фото товара и описание, а он генерирует структурированное описание, подбирает характеристики и предлагает идеи для изображений. Он уже доступен в боте с возможностью протестировать его.

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

Итог: Потенциально — самая сильная сторона бота. Но на данный момент это анонс ближайшего будущего, а не готовый продукт.

Резюме: кому подойдет этот бот прямо сейчас?

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

Он вам подойдет, если:

• Вам надоела регистрация на десятках сервисов.

• Вы работаете с небольшими документами и изображениями и цените скорость.

• Вы готовы мириться с ограничениями бесплатного тарифа или рассматриваете подписку как единый доступ к разным моделям.

• Вам интересно тестировать новые функции (как AI-агенты) и влиять на их развитие.

Что мы делаем дальше: Увеличиваем лимиты, добавляем новых агентов, работаем над стабильностью. Мы понимаем, что путь только начинается и нам многое предстоит сделать.КЛАЦ

Ссылка на бота, попробуйте пока доступно бесплатно: КЛАЦ

Если в общем, то мой стек используемых инструментов выглядит следующим образом:

• Telegram App ( Библиотека )

• Strapi ( Админ панель + REST API )

• PostgreSQL ( База данных )

• Next.js ( Само приложение )

Решение с защитой что я предлагаю подойдет каждому. Главное понять его принцип.

Как я защищал REST API? Валидация данных

Когда пользователь открывает веб-приложение через Telegram, ваше приложение получает начальные данные от самого Telegram, такие как идентификатор пользователя и его имя. Чтобы убедиться, что эти данные подлинные и не были изменены, используется специальный процесс проверки.

1. Преобразование данных: Приложение преобразует начальные данные в удобный формат.

2. Создание строки для проверки: Из всех параметров (кроме специального hash) создается отсортированная строка.

3. Создание секретного ключа: С помощью токена вашего бота создается секретный ключ.

4. Создание цифровой подписи: Используя секретный ключ и строку параметров, создается цифровая подпись.

5. Сравнение подписей: Приложение сравнивает созданную подпись с полученной от Telegram. Если они совпадают, данные подлинные.

Этот процесс помогает убедиться, что данные, полученные от Telegram, не были изменены, обеспечивая безопасность вашего приложения и его пользователей.

После успешной валидации я генерировал JWT токен для пользователя и он становился полноценным пользователем в моей системе.

Далее можно с ним делать что угодно 😏 - ну допустим заблокировать его, дать права админа и т.д.

А сам пользователь имеет полный доступ к возможностям приложения. Но вне телеграма он ничего не сделает.

Какие дыры есть в приложениях и почему?

Не буду показывать на конкретном примере, но большинство разработчиков не умеют или не хотят защищать свои приложения, а чисто привязывают все к Telegram ID ( ID вашего аккаунта ) и так и живут.

Telegram ID состоит из цифр и перебрать его методом подбора не составит труда и получить доступ к аккаунту в Mini App.

Зачастую этим грешат новые приложения или не опытные разработчики, например в Telegram Apps Store ваше приложение проверяют на наличие этой защиты.

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

Кроме всего этого можно запретить вне телеграма заходить в ваше приложение тем же способом что описан выше.

Как же защитить приложение и пользователей?

Не важно на каком языке вы пишите, телеграм уже сделал для вас подсказку, осталось ей воспользоваться.

Оставлю ссылку здесь на данный раздел - Документация Telegram

Итого

Я надеюсь эта статья поможет тем кто хочет или уже занимается разработкой WebApp на Telegram. Если все еще осталось что-то не понятно, то пишите смело - будем вместе разбираться:)

Если у вас так же останутся вопросы или предложения или вы просто захотите поделиться своим приложением, то пишите! Всегда рад пообщаться с читателями 😁

Ну и мой телеграм, если вдруг вам интересно 😜

Next.js — фреймворк на JavaScript, использующий React для построения Server Side Render-приложений (SSR) и статически-генерируемых сайтов

Автор: Гугл

Преимущества которые я выделил - это Next.js позволяет мне делать FullStack приложения, без необходимости развертывать дополнительные инструменты, а развертывание приложения написанного на Next.js занимает у меня пару минут и без дополнительных затрат.

Еще пару преимуществ:

• Рендеринг на стороне сервера за исключением динамических данных.

• Оптимизированные изображения

• Простой роутинг без необходимости дополнительных манипуляций

• Middleware

  Так же Next.js советуют использовать сами разработчики React помимо других инструментов.

Я создал "Шаблон" для разработки Mini Apps Telegram

Сделал публичный OpenSource шаблон для быстрого развертывания проекта для разработки, что позволяет мне экономить время и переиспользовать готовые куски кода.

Вы можете так же использовать и переделать под себя, либо предложить свое.

На данный момент он дополняется, но вы сами можете ознакомится с ним и написать вашу обратную связь, чем поможете стать лучше - ОЗНАКОМИТЬСЯ

Здесь я использую кроме Next.js такие инструменты как:

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

DrizzleORM - использую для прямого подключения с Next.js к базе данных, что позволяет мне брать данные напрямую в обход как я уже говорил других инструментов.

Redux - недавно его подключил, использую для хранения состояний. Так как у нас нет "Адресной строки" а так же еще сырые "браузерные хранилища" я решил прибегнуть к этому инструменту.

А так же еще пару дополнений и плагинов Next.js для анализа кода и его размеров.

Что я еще использую?

Strapi - для реализации админ панели с готовыми запросами, я использую OpenSource проект Strapi. Он мне позволяет делать любые сущности, посты, юзеров, загружать медиа и многое другое и использовать на Mini App Telegram и давать возможность пользователям самим добавлять данные.

PostgresSQL - реляционная база данных. Использую обычно отдельного от всего. А так же она применяется в админ панели.

Vercel - для быстрого развертывания Mini Apps Telegram. Выдается готовый домен ( без него вы Mini App не запустите ), автоматическое обновление с GitHub при изменениях. И самое главное - БЕСПЛАТНО! Правда я так и не понял какие там ограничения есть. Использую чисто для разработки.

TimeWeb Cloud - еще один инструмент в моем списке, быстрое развертывание баз данных, облачных серверов и новая возможность - это развернуть Next.js приложение за 1 рубль! Тоже самое что и Vercel но за 1 рубль 😅 ( PS не реклама, а то приложил бы реферальную ссылку )

Подытожим

Делать можно на чем угодно и как угодно, знаю ребят кто сгенерировал HTML страницы и собрали таким образом приложение и жили спокойно.

Как говорится на что хватит фантазии то можно сделать.

Выбирать на чем делать конечно же вам, если вы разработчик или клиент который хочет реализовать свою идею. Мой выбор пал на Next.js как на универсальный инструмент который подходит мне во всем, да есть и свои минусы без них никуда.

Если вам вдруг интересно и не хватает каналов в вашем списке в Telegram, то приглашаю в свой ( чисто по желанию ) - ПОЕХАЛИ

Если ты разработчик и у тебя есть вопросы, пиши не стесняйся, я отвечаю всем и по возможности стараюсь помочь, возможно вместе научимся новому!

Это первая часть статьи.

Ссылка на WebApp внизу 👇

Идея

Я хочу реализовать Фриланс Биржу в WebApp внутри Telegram. Будет доступна возможность как откликаться на задачи так и создавать эти задачи. А так же оставлять отзыв.

У Фрилансера будет возможность добавить описание к своему профилю, добавить портфолио.

У Заказчика будет возможность создавать задачи, просматривать отклики на нее и выбирать исполнителя.

Авторизация будет работать на основе самого Telegram.

Дизайн интерфейса

Я не дизайнер. Я пытался им быть, вышло не очень. Но интерфейс надо реализовать. Но как? Я научился использовать UI KIT'ы от различных компаний.

UI Kit (User Interface Kit) — это набор готовых элементов графического интерфейса, который может включать в себя кнопки, иконки, ползунки, текстовые поля и другие компоненты интерфейса. Такой набор позволяет разработчикам и дизайнерам создавать интерфейсы приложений и веб-сайтов, обеспечивая единообразие и высокое качество дизайна.

Спросил у ChatGPT

На этот раз я остановился на VKUI. Их UI KIT как раз создан для мобильных приложений, это то что мне нужно! Тем более есть поддержка светлой и темной темы, просто шикарно.

Вот ссылка на Figma если кому интересно: Figma

На чем будем писать?

При разработке буду использовать Next.js, а так же Prizma. Prizma - это ORM для взаимодействия с базами данных, она как раз поддерживает Next.js напрямую, не придется поднимать свой сервер ( наверное ). Полная FullStack разработка.

Так же я буду использовать библиотеку UI от VK для реализации наших интерфейсов в едином дизайне. Так же ознакомится можно здесь: Docs

Первые макеты

Накидать интерфейс не такая простая задача, даже не смотря на то что у нас есть готовые компоненты.

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

Тем более зачастую ты сам не понимаешь "А как надо?". На картинке вы видите примеры пары макетов, возможно они не финальные но они и не первые.

Первые неудачи

Telegram WebApp сама по себе интересная возможность до конца не изученная, например как только я сделал первые три экрана приложения, я решил их протестировать в телеграм. И вот что вышло: Цветовые схемы сбивались постоянно, потому что VK UI имеют свою схему а телеграм подсовывает свою.

p.s Разработчики Telegram, если вы это читаете, разрешите выключать вашу цветовую схему одним параметром.

Новые решения

Так же я решил отказаться от так называемой "Шапки" так как ее сама WebApp предоставляет, я думаю профиль вы вынесем в настройки внутри WebApp.

Интересные факты

Факт 1: А вы знали что WebApp работает через Edge браузер? Вот и я не знал, этот момент тоже нужно учитывать. Почему именно был выбран этот браузер не понятно.

Факт 2: Вы можете сделать WebApp как в своей цветовой схеме, так и использовать цветовую схему которую настроил сам пользователь Telegram.

Итог

В итоге полученный результат вы можете увидеть по ссылке: t.me/FreelancerForJobsBot

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

Многие детали могут отличаться от тех что есть на скриншоте.

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

Подписывайтесь на мой канал ( https://t.me/thismisterit ), я там часто рассказываю о ходе разработки и об открытиях при ней, нас целых 18 человек уже! Будет здорово если ты поддержишь:) Это мотивирует!