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

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

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

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

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

При запуске приложения необходимо инициализировать экземпляр 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.

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(), ); } }

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 можно создать динамический интерфейс, который будет реагировать на изменения в реальном времени и обеспечивать удобное взаимодействие с пользователем.

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

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

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

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

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

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

Заключение

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

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

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

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

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

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

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