Telegram Web App: Интеграция с Flutter

Telegram Web Apps — это мощный инструмент для создания интерактивных мини-приложений, которые можно запускать прямо внутри Telegram. Эти приложения могут использовать данные пользователя, настройки интерфейса и другие возможности Telegram для создания персонализированного опыта.

В этой статье мы рассмотрим, как создать Telegram Web App с использованием Flutter, популярного фреймворка для разработки кроссплатформенных приложений.

Шаг 1: Добавление библиотеки Flutter Telegram Web App 

Для взаимодействия с Telegram Web App API нам понадобится библиотека flutter_telegram_web_app. Добавьте её в файл pubspec.yaml вашего проекта: yaml

dependencies:   flutter:     sdk: flutter   telegram_web_app: ^версия_библиотеки

После добавления зависимости выполните команду flutter pub get, чтобы установить пакет.

Шаг 2: Инициализация Telegram Web App  

При запуске приложения необходимо инициализировать экземпляр TelegramWebApp. Это позволит нам использовать данные пользователя и настройки интерфейса Telegram. В приведённом ниже коде мы проверяем, поддерживается ли Telegram Web App, и инициализируем его. 

import 'package:telegram_web_app/telegram_web_app.dart';  void main() async {   try {     if (TelegramWebApp.instance.isSupported) {       TelegramWebApp.instance.ready();       Future.delayed(const Duration(seconds: 1), TelegramWebApp.instance.expand);     }   } catch (e) {     print("Error happened in Flutter while loading Telegram $e");     // add delay for 'Telegram not loading sometimes' bug     await Future.delayed(const Duration(milliseconds: 200));     main();     return;   }    runApp(const MyApp()); }

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

Шаг 3: Использование темы Telegram в приложении  

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

class MyApp extends StatelessWidget {   const MyApp({super.key});    @override   Widget build(BuildContext context) {     return MaterialApp(       title: 'Telegram Web App Example',       theme: TelegramThemeUtil.getTheme(TelegramWebApp.instance),       home: const MainScreen(),     );   } }

Шаг 4: Работа с данными пользователя

Telegram предоставляет доступ к данным пользователя, таким как initData, initDataUnsafe, цветовая схема, параметры темы и многое другое. В приведённом ниже коде мы используем эти данные для отображения информации в интерфейсе:  

@override Widget build(BuildContext context) {   final TelegramWebApp telegram = TelegramWebApp.instance;   return Scaffold(     backgroundColor: telegram.backgroundColor ?? Colors.grey,     appBar: TeleAppbar(title: 'Flutter Telegram Demo', top: safeAreaTop),     body: ListView(       padding: const EdgeInsets.all(8),       children: [         ListButton('Expand', onPress: telegram.expand),         InfoExpandableTile(           'Init Data',           telegram.initData.toString(),         ),         InfoExpandableTile(           'Init Data Unsafe',           telegram.initDataUnsafe?.toReadableString() ?? 'null',         ),         InfoExpandableTile(           'isVerticalSwipesEnabled',           telegram.isVerticalSwipesEnabled.toString(),         ),         ListButton('enableVerticalSwipes', onPress: telegram.enableVerticalSwipes),         ListButton('disableVerticalSwipes', onPress: telegram.disableVerticalSwipes),         InfoExpandableTile('Version', telegram.version),         InfoExpandableTile('Platform', telegram.platform),         InfoExpandableTile('Color Scheme', telegram.colorScheme.name),         ThemeParamsWidget(telegram.themeParams),         InfoExpandableTile('isActive', telegram.isActive.toString()),         InfoExpandableTile('isExpanded', telegram.isExpanded.toString()),         InfoExpandableTile('viewportHeight', telegram.viewportHeight.toString()),         InfoExpandableTile('viewportStableHeight', telegram.viewportStableHeight.toString()),         InfoExpandableTile('safeAreaInset', telegram.safeAreaInset.toString()),         InfoExpandableTile('contentSafeAreaInset', telegram.contentSafeAreaInset.toString()),         OneColorExpandableTile('headerColor', telegram.headerColor),         OneColorExpandableTile('backgroundColor', telegram.backgroundColor),         OneColorExpandableTile('bottomBarColor', telegram.bottomBarColor),       ],     ),   ); }

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

Шаг 5: Размещение приложения на хостинге 

После завершения разработки приложение нужно разместить на хостинге. В качестве примера можно использовать Firebase Hosting. Для этого выполните следующие шаги:

1. Установите Firebase CLI.  

2. Инициализируйте Firebase в вашем проекте: firebase init hosting

3. Соберите проект: flutter build web

4. Разместите проект на Firebase

Шаг 6: Интеграция с Telegram-ботом  

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

Заключение 

Telegram Web Apps предоставляют уникальные возможности для создания приложений, которые интегрируются с Telegram. В этой статье мы рассмотрели основные шаги для создания Telegram Web App, от инициализации проекта до размещения на хостинге и интеграции с Telegram-ботом.