Telegram Mini App и интерфейс продукта

01Обзор проекта

02Инженерная задача

Mini App работает внутри WebView Telegram, который ведёт себя по-разному на разных платформах. Приложение должно ощущаться нативным, быстро работать на телефоне и отображать сложное серверное состояние, не перегружая пользователя.

• A

  Авторизовать пользователей через Telegram и связать их с аккаунтами в бэкенде.

• B

  Последовательно показывать функции, зависящие от доступа, в соответствии со статусом подписки.

• C

  Сохранять плавность графиков и переходов внутри мобильного WebView.

• D

  Полностью перевести каждый экран на четыре языка.

03Архитектура решения

Наведите или нажмите на этап.

04Основные компоненты

• 01

  Главная

  Обзор аккаунта со структурированными карточками ключевого состояния.

• 02

  Экран сигналов

  Структурированные карточки сигналов с параметрами и статусом на основе движка сигналов.

• 03

  AI-чат

  Диалоговый интерфейс, подключённый к подсистеме AI-ассистента.

• 04

  Настройки

  Личная конфигурация, сохраняемая на бэкенде, включая язык и предпочтения по риску.

• 05

  Подписки и доступ

  Логика UI, которая последовательно отражает уровень доступа пользователя на всех экранах.

• 06

  Слой локализации

  Строки на русском, английском, польском и украинском для всего интерфейса.

05Технологический стек

07Инженерные решения

1. 01

   Источник истины — бэкенд

   Клиент отображает состояние и отправляет намерения; доступ, настройки и проверки решаются на сервере.

2. 02

   SVG для графиков

   Лёгкие, чёткие при любой плотности пикселей и легко анимируются внутри WebView.

3. 03

   Переводы как данные

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

4. 04

   Тест на реальной цели

   Поведение проверяется внутри Telegram на iPhone, а не только в десктопном браузере.

08Надёжность и тестирование

• ✓Проверка init-данных Telegram на сервере.
• ✓Аккуратные пустые состояния и состояния ошибок для каждого экрана, зависящего от API.
• ✓Ручная приёмка на реальных устройствах внутри Telegram.
• ✓Проверка, что каждый ключ существует во всех четырёх локалях.

09Пример кода

const dictionaries = {
  en: { "signals.title": "Signals", "settings.title": "Settings" },
  pl: { "signals.title": "Sygnały", "settings.title": "Ustawienia" },
  uk: { "signals.title": "Сигнали", "settings.title": "Налаштування" },
  ru: { "signals.title": "Сигналы", "settings.title": "Настройки" },
};

export function createTranslator(locale, fallback = "en") {
  const primary = dictionaries[locale] ?? {};
  const backup = dictionaries[fallback];

  return function t(key) {
    if (key in primary) return primary[key];
    console.warn(`[i18n] missing "${key}" for ${locale}`);
    return backup[key] ?? key;
  };
}

Исходный код продукта закрыт. Примеры показывают инженерный подход, а не внутреннюю логику. Больше — в Engineering Lab.

10Возможное развитие

• →Офлайн-кеширование последнего известного состояния аккаунта.
• →Автоматические визуальные регрессионные тесты ключевых экранов.
• →Веб-версия того же интерфейса вне Telegram.