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.