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

Две фиолетовые 3D-шестерёнки с логотипами Telegram и Flutter

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

Читать на Habr
Читать на VC
Читать на Дзен

Шаг 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

Заключение

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