Telegram Mini Apps: create your own

• На втором этаже находится кейтеринг.  

• Начало мероприятия в 15:45, время для регистрации.  

• Алексей Соловьев, ивент-менеджер, объявляет открытие мероприятия.  

• Мероприятие посвящено созданию мини-приложений для Telegram.  

• Будут два спикера: Влад Кибенко и Богдан.  

• Влад Кибенко расскажет о создании мини-приложений для Telegram.  

• Цель мероприятия - дать участникам полный пакет знаний для создания мини-приложений.  

• Интеграция блокчейна в Telegram началась с ноября прошлого года.  

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

• Будет нетворкинг между спикерами.  

• В перерыве будет вторая перемена блюд от кейтеринга.  

• Влад Кибенко рассказывает о платформе Telegram Mini Apps.  

• Платформа имеет широкий функционал и полезна для разработчиков.  

• Мини-приложение - это приложение, существующее в рамках супер-приложения.  

• Супер-приложения могут предоставлять нативный функционал через API.  

• Мини-приложения запускаются в веб-окружении.  

• Для разработки мини-приложений нужны базовые знания веб-разработки.  

• Рекомендуется использовать Solit, но можно и другие технологии, такие как React.  

• Веб-технологии обеспечивают высокую гибкость и мощность визуальной составляющей.  

• Веб-технологии просты в изучении и позволяют легко найти разработчиков.  

• Мини-приложения могут использовать нативный функционал, если супер-приложение позволяет.  

• Бесшовная авторизация позволяет мини-приложению получать данные пользователя без необходимости входа.  

• В Telegram NPS есть данные инициализации, которые подписываются и передаются мини-приложению.  

• Telegram состоит из множества приложений, что усложняет разработку мини-приложений.  

• Ориентируются на шесть официальных платформ, но неофициальные платформы могут быть ненадежными.  

• Каждое приложение развивается самостоятельно, что приводит к багам и проблемам.  

• Мини-приложение взаимодействует с нативным приложением Telegram через методы и события.  

• Методы отправляются мини-приложением нативному приложению, а события уведомляют мини-приложение о событиях.  

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

• Текущая версия платформы совпадает с Bot API.  

• Новые версии могут добавлять новые методы и аргументы, сохраняя обратную совместимость.  

• Важно проверять поддержку методов, так как Telegram не уведомляет о неподдерживаемых методах.  

• Параметры запуска передаются в хэше URL при запуске мини-приложения.  

• В Telegram параметры запуска передаются в хэше, что позволяет передавать длинные данные.  

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

• Пример: флаг для показа кнопки настроек в приложении Telegram.  

• Решение специфично для библиотеки Telegram, что вызывает недовольство.  

• Это пример кастомного решения, которое не является корректным для платформы.  

• Данные инициализации важны для аутентификации и авторизации.  

• Эти данные можно проверить на корректность с помощью токена Telegram-бота.  

• В данных содержится информация о пользователе, включая ID и имя.  

• Важно проверять дату генерации данных инициализации.  

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

• Рекомендуется проверять дату генерации на всех платформах.  

• Стартовый параметр передается в параметре запуска Telegram Web API.  

• Он важен для запуска приложения с кастомными параметрами.  

• Параметр находится в query параметрах запроса и дублируется в данных инициализации.  

• Параметр ограничен до 64 символов и использует только английские буквы, цифры и нижнее подчеркивание.  

• Официальная информация о ограничениях не подтверждена.  

• Аутентификация — процесс идентификации пользователя с помощью логина и пароля.  

• Авторизация — подтверждение права на выполнение действия с использованием данных аутентификации.  

• Пример использования библиотеки Express для обработки запросов.  

• Для внедрения в другие платформы, такие как VK, лучше использовать аутентификацию по токену.  

• Это позволяет избежать лишних запросов и упрощает процесс.  

• Меню батон — самый простой способ открытия мини-приложения.  

• Это можно рассматривать как UI для бота.  

• В бот-фазере можно создать бота и использовать команду set menu button.  

• Меню-батон позволяет отображать приложение при нажатии на него.  

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

• Кнопки клавиатуры inline keyboard button и keyboard button отличаются расположением.  

• При использовании этих кнопок необходимо указывать ссылку, а не идентификатор приложения.  

• Телеграмм не может определить, какое приложение открывается, поэтому данные инициализации нужно составлять самостоятельно.  

• Кнопка на слайде не соответствует оригиналу, возможно, из-за фотошоп.  

• В реальности кнопка может быть на пол экрана, что вызывает проблемы.  

• Проблема может быть исправлена в будущем.  

• В UI есть четыре компонента: back button, main button, navigation bar и footer.  

• Back button используется для навигации и может быть скрыта.  

• Main button имеет несколько состояний и может быть кликабельной даже при отключении.  

• Баг в приложении не исправлен уже полтора года.  

• Проблема в том, что разработчики имеют разные подходы к ведению проектов.  

• Автор не нашел, куда репортить баг, и не смог его исправить.  

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

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

• Компоненты настраиваются, можно задать заголовок и до трех кнопок.  

• Для открытия веб-приложений всегда нужна ссылка.  

• Настройка через m-cacert позволяет сгенерировать SSL-сертификат и ключ.  

• Локальные инструменты, такие как локальный и анжерок, помогают генерировать статичные ссылки.  

• Приложения должны выглядеть и реагировать как нативные.  

• Телеграм предоставляет параметры темы для стилизации.  

• В будущем будет выпущена библиотека для упрощения стилизации с использованием React.  

• Всегда опирайтесь на документацию, прежде чем задавать вопросы.  

• Есть официальная документация и документация сообщества.  

• Используйте ресурсы, такие как гидхаб и организации, для поиска и использования библиотек.  

• Решение объединить наработки нескольких организаций в одну.  

• Создание единой организации для документации, библиотек и примеров.  

• Фокус на создании библиотек для бэкенда, фронтенда и различных фреймворков.  

• Презентация охватывает обширную тему, но не все аспекты были освещены.  

• Надежда на то, что слушатели запомнят информацию и смогут найти её в документации.  

• Вопросы к Владу о возможности подключения внешних процессингов к мини-апкам.  

• Мини-апки могут обращаться к нативным приложениям, но только к тем методам, которые предоставляет супер-а папе.  

• Если метод не прописан в супер-а папе, мини-апк не сможет его использовать.  

• Пример с веб-экспертом, который помогает мини-апкам вызывать методы нативных приложений.  

• Вопрос о различиях в работе нативных приложений на iPhone и обычных телефонах.  

• Пример с анимацией "кончающий баклажан", которая работает по-разному на разных устройствах.  

• Влад не знает о конкретном примере и не может дать точный ответ.  

• В разных приложениях Telegram могут быть разные проблемы.  

• Разработчики Telegram не всегда быстро реагируют на баги.  

• Пример: баг с кнопкой "Главная" в Android, который не исправлен полтора года.  

• Влад показал библиотеки для работы с данными инициализации на Golang и Node.js.  

• Он предложил написать библиотеку на Python, но получил отказ.  

• Влад ждет предложений от сообщества для написания библиотек на других языках.  

• В Minneap странно работает кэширование больших изменений.  

• При перезапуске Minneap большие изменения загружаются заново.  

• Проблема может зависеть от настроек сервера, который раздает статику.  

• Артем не знает о планах по интеграции Minneap с Telegram Wallet.  

• В Telegram есть готовые библиотеки для работы с TON, но Артем не эксперт в этой области.  

• Платежи можно принимать с помощью этих библиотек.  

• Вопрос о методах проверки параметров запуска в IBC.  

• Аутентификация и авторизация предлагается реализовывать самостоятельно.  

• Вопрос о проверке подлинности параметров запуска.  

• Проверка подписи данных инициализации.  

• Использование алгоритма для создания хэша.  

• Сравнение хэшей для проверки подлинности данных.  

• Переход экосистемы AdVcash в Telegram.  

• Призыв к команде с опытом работы с Full Stack и Java.  

• Благодарность за участие и переход к следующему спикеру.  

• Реактор уже реализован и доступен в грантах.  

• Обсуждение реализации и возможных проблем.  

• Возможность использования библиотеки после релиза.  

• Оттачмент меню для приложений с доступом к более широкому функционалу.  

• Проблемы с доступом к буферу обмена для не-партнеров.  

• Необходимость подтверждения пользователя для доступа к данным.  

• Призыв к знакомству участников через QR-код.  

• Введение в нетворкинг и возможность общения.  

• Призыв к участию в нетворкинге для расширения контактов.  

• Богдан Митурский, основатель студии веб-разработки Код-Брд.  

• Опыт работы в разработке мини-приложений для ВКонтакте и Telegram.  

• План выступления: от идеи до реализации, сбор команды, история команды.  

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

• Участвуйте в мероприятиях и нетворкингах.  

• Гранты от Telegram Foundation помогают создавать мини-приложения.  

• Разбейте идею на небольшие фрагменты "мейл стоуны".  

• Интегрируйте проект с TON для получения гранта.  

• Пример: проект "Гата" получил грант в размере $22,000.  

• Составьте ТЗ или CJM для продукта.  

• Продумайте интеграцию с блокчейном.  

• Разработайте MVP для получения обратной связи.  

• Пользователи теряют интерес к приложению за 3 секунды.  

• Используйте CDN для быстрой загрузки.  

• Оптимизируйте код с помощью Lighthouse.  

• Делите код на фрагменты для быстрой загрузки.  

• Делегируйте хостинг статики на внешние сервисы.  

• Избегайте использования Unity и Unreal для веб-разработки.  

• Используйте Cocos для веб-разработки.  

• Пикси и Fyzer для создания игр на JavaScript.  

• Примеры: "Гата" и "Шип Рояль" на Pixi.js.  

• Мини-приложения не рассчитаны на большое количество пользователей.  

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

• Кубернетис не всегда необходим, так как его настройка сложна и дорога.  

• Докер позволяет быстро упаковать и перевозить приложения между серверами.  

• Проект менеджер 2 помогает управлять нодами и мониторить нагрузку.  

• CDN упрощает процесс обновления приложений, сокращая количество команд до одной.  

• Важно тестировать приложения на разных браузерах, включая Safari.  

• Разные версии языков программирования могут привести к проблемам совместимости.  

• Используйте сайт caniuse.com для проверки поддержки функций в браузерах.  

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

• Тестовые группы и стейджинг помогают отловить баги до выпуска на продакшн.  

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

• Доступность данных важна для доверия пользователей.  

• Потеря базы данных может привести к потере пользователей и инвесторов.  

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

• Сайт должен быть доступен круглосуточно.  

• Настройка уведомлений о недоступности сайта через сервис Uptime Kuma.  

• Важно поддерживать доступность приложения 24/7.  

• В приложении должно быть обучение или анбординг.  

• Аналитика помогает выявить проблемы и улучшить приложение.  

• Рекомендуется использовать готовые решения, такие как Google Analytics.  

• Публикация в каталогах, таких как Telegram Mini Apps и Game SMS.  

• Инвестирование в маркетинг, особенно в Web3.  

• Использование коллабораций и социальных механик для привлечения пользователей.  

• Продумайте идею и соберите команду.  

• Интегрируйте блокчейн и сделайте приложение легким и быстрым.  

• Заботьтесь о доступности и резервных копиях.  

• Развивайте продукт, участвуйте в коллаборациях и продолжайте улучшать его.  

• В 2022 году команда начала с курсового проекта в вузе.  

• В команде были неопытные участники, но они получили гранты и премии.  

• Приложение приносило около 10 тысяч рублей в месяц, но привлекло внимание к команде.  

• Команда стала официальным подрядчиком ВКонтакте и начала получать заказы.  

• В 2024 году команда выросла до 30 человек и закрыла около 40 приложений.  

• Приложение "Гата" набрало 1 миллион пользователей за три месяца.  

• Команда планирует развивать "Гата" и получать гранты.  

• Ищут новых разработчиков и специалистов для команды.  

• Презентация доступна для скачивания по QR-коду.  

• Команда использует штатных тестировщиков для обката обновлений.  

• Разбивка функционала на пользователей пока не требуется.  

• Стоимость разработки приложения зависит от запроса и функционала.  

• Чат-боты и календарь наград работают хорошо.  

• Важно включать как PvP, так и PvE контент для разнообразия.  

• Команда приветствует студентов и школьников для практики.  

• Геймдев проекты начинают использовать токены и NFT.  

• "Гата" использует механику питомцев для конвертации в NFT.  

• Механика питомцев показывает себя хорошо и может быть использована в других проектах.  

• Обсуждение проблем с загрузкой игр на Unity и Unreal.  

• Игры на Unity и Unreal часто загружаются медленно, что отпугивает пользователей.  

• Пример с загрузкой веб-сайтов: Google рекомендует не более трех секунд.  

• Вопрос о статистике по геймингу в ВК и Телеграме.  

• В ВК около 43 миллионов ежемесячной аудитории мини-апов.  

• В Телеграме около 15 миллионов пользователей веб-три.  

• Представление участников и их проектов.  

• Введение QR-кодов для онлайн-трансляции и нетворкинга.  

• Примеры проектов: краудфандинг, биржа игрового лута, сервис знакомств.  

• Подведение итогов официальной части.  

• Благодарности участникам и организаторам.  

• Анонс следующего мероприятия.