Разработал аналог P2P Wallet в Telegram или как я сделал WebApp в Telegram
Всем привет! Думаю все видели новость о том что Telegram сделал кошелек Wallet доступным для каждого пользователя. Еще до этих событий ко мне обратился клиент, сделать копию P2P Маркета Wallet для его страны.
Не забудь поставить лайк:) Мне будет очень приятно 😉
Web App - по факту сайт, на чем делать его решает каждый для себя. Но Telegram расширяет его возможность для взаимодействия с пользователем через Telegram Bot.
То есть при запуске того же кошелька Wallet, вы передаете скрипту Telegram заранее установленному на сайте свои данные, в свою очередь сайт обрабатывает эти данные, расшифровывает и далее делает с ними что хочет.
Как правила расшифрованные данные подвязываются на авторизацию пользователя, то есть обмануть не получится. Да и плюс это безопасно.
Например можно получать следующие данные: Версия приложения, какую платформу используете, ваша цветовая схема и многое другое.
Имея опыт разработки Telegram Ботов я решил что смогу осилить Web App, но не тут то было.
Задача: Сделать P2P маркет для клиента из республики Беларусь, с возможностью создавать свои сделки, удалять, редактировать а так же список сделок других клиентов, при реакции на сделку отправлять в чат бота данные продавца для дальнейшего взаимодействия между ними.
Стек: Front - React, TypeScript. Back - Node.js, Express, Sequelize. База - PostgreSq.
А так же Docker, Nginx для развертывания на сервере Ubunty.
Это мой первый опыт полноценного развертывания проекта на облачном сервере, настройка Web-Сервера и подключение ssl сертификатов. Обычно все эти вещи предоставлял заказчик.
Что было сделано?
Клиентскую часть ( Front-end ) я разрабатывал с использованием Vite.js. Подключил так же скрипт телеграма для синхронизации telegram с сайтом.
Кнопки, фон, цвет текста и прочие вещи постарался сделать под стиль пользователя. Сделано это для того, чтоб пользователь не испытывал дискомфорт переходя на наше приложение.
А вы знали, чтоб обратиться к клиентской части через телеграм бота, нужно его установить на хост? При этом у вас должен быть ssl сертификат.
Да из-за того что телеграм не поддерживает ничего кроме реального хоста с реальным сертификатом, приходилось вечно все настройки обновлять и выгружать на хост. Благо Vercel уже обладал всеми этими возможностями и делал все за меня.
Далее получая от Telegram данные о пользователя, они были как правило сырые. Их нужно расшифровать. Это сложная тема, скажу лишь то что все это требуется для авторизации на стороне сервера.
Серверную часть ( Back-end ) я разрабатывал на Node.js с использованием Express.js, Sequelize. Взял уже готовую серверную часть и переписал ее под себя и свои нужды.
Как раз здесь реализовал API создания, удаления, редактирования сделок. А так же списки сделок, кто их создал.
Долго гадал как реализовать авторизацию пользователя Telegram на стороне сервера. В итоге просто изучил API Wallet, после чего нашел в документации телеграма информацию о расшифровки данных.
В итоге что у меня получилось?
К сожалению макетов как таковых не было, пришлось импровизировать и делать как попросит клиент. Я считаю результат довольно не плохой, учитываю что это новый опыт, позволяющий мне в дальнейшем реализовывать в 2 раза быстрее такие приложения.
Сам функционал довольно скудный на самом деле, но меня это не сколько не огорчило, это было интересно делать!
Теперь пользователь данного приложения может создавать свои сделки на продажу или покупку криптовалюты, а так же искать другие сделки.
Какие возможности у Web Apps в Telegram?
Я думаю это только начало, недавно вышло обновление и добавили новые функции которые я думаю в скором времени потестировать!
Видимо обновление связано с недавними новостями по Wallet, кто знает, надеюсь это не единственное обновление.
Возможностей я считаю довольно много, вопрос в удобстве и актуальности для пользователей. Но есть и свои ограничения со стороны разработчиков Telegram, например отправлять данные с WebApp можно только ОДНИМ методом! Это ужас.
Спасибо что дочитали до конца! Вы можете задать вопрос, либо просто оставить свое мнение:)
Мой канал Telegram - @thismisterit
Нас уже целых 2 подписчика! 😁