Telegram Mini App i interfejs produktu

01Przegląd projektu

02Wyzwanie inżynierskie

Mini App działa w WebView Telegrama, który zachowuje się różnie na różnych platformach. Musi sprawiać wrażenie natywnej aplikacji, działać szybko na telefonie i przedstawiać złożony stan serwera bez przytłaczania użytkownika.

• A

  Uwierzytelniać użytkowników przez Telegram i mapować ich na konta w backendzie.

• B

  Spójnie pokazywać funkcje zależne od dostępu zgodnie ze statusem subskrypcji.

• C

  Utrzymać płynność wykresów i przejść w mobilnym WebView.

• D

  W pełni przetłumaczyć każdy ekran na cztery języki.

03Architektura rozwiązania

Najedź lub dotknij etapu.

04Główne komponenty

• 01

  Pulpit

  Przegląd konta z ustrukturyzowanymi kartami najważniejszego stanu.

• 02

  Widok sygnałów

  Ustrukturyzowane karty sygnałów z parametrami i statusem, zasilane przez silnik sygnałów.

• 03

  Czat AI

  Interfejs konwersacyjny połączony z podsystemem asystenta AI.

• 04

  Ustawienia

  Konfiguracja osobista zapisywana w backendzie, w tym język i preferencje ryzyka.

• 05

  Subskrypcje i dostęp

  Logika UI spójnie odzwierciedlająca poziom dostępu użytkownika na wszystkich ekranach.

• 06

  Warstwa lokalizacji

  Teksty po rosyjsku, angielsku, polsku i ukraińsku dla całego interfejsu.

05Stack technologiczny

07Decyzje inżynierskie

1. 01

   Backend jako źródło prawdy

   Klient renderuje stan i wysyła intencje; dostęp, ustawienia i walidacja są rozstrzygane na serwerze.

2. 02

   SVG dla wykresów

   Lekkie, ostre przy każdej gęstości pikseli i łatwe do animowania w WebView.

3. 03

   Tłumaczenia jako dane

   Wszystkie teksty żyją w słownikach języków, więc dodanie lub poprawa języka nie dotyka kodu layoutu.

4. 04

   Testy na docelowej platformie

   Zachowanie jest weryfikowane w Telegramie na iPhonie, a nie tylko w przeglądarce desktopowej.

08Niezawodność i testy

• ✓Weryfikacja danych inicjalizacyjnych Telegrama na serwerze.
• ✓Dopracowane stany puste i błędów dla każdego widoku zależnego od API.
• ✓Ręczny odbiór na prawdziwych urządzeniach w Telegramie.
• ✓Kontrola, czy każdy klucz istnieje we wszystkich czterech językach.

09Przykład kodu

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;
  };
}

Kod źródłowy produktu jest prywatny. Przykłady pokazują podejście inżynierskie, a nie wewnętrzną logikę. Więcej w Engineering Lab.

10Możliwe kierunki rozwoju

• →Buforowanie offline ostatniego znanego stanu konta.
• →Automatyczne wizualne testy regresji kluczowych ekranów.
• →Wersja webowa tego samego interfejsu poza Telegramem.