Eine Telegram Mini App ist eine Webanwendung, die innerhalb von Telegram geöffnet wird – der Nutzer ist bereits angemeldet und befindet sich schon im passenden Chat. Genau das ist ihr Versprechen: kein neues Konto, kein Download, kein Zurücksetzen des Passworts. Ich entwickle sie wie jedes andere Webprodukt für den Produktivbetrieb: Next.js und TypeScript im Frontend, Node.js im Backend, ergänzt um einige Regeln, die nur in Telegram gelten. Zuletzt habe ich unter NDA eine Fintech-Web- und Mini-App mit virtuellen und physischen Karten auf Next.js, Express und MongoDB ausgeliefert.
Am Anfang steht der Bot. BotFather erstellt Bot und Mini App. Nutzer öffnen sie über die Menüschaltfläche, eine Inline-Keyboard-Schaltfläche oder einen direkten t.me-Link mit dem Parameter startapp. So übergebe ich einen Empfehlungscode oder verlinke direkt auf einen bestimmten Bildschirm. Die App wird regulär über HTTPS bereitgestellt. In der Entwicklung leitet ein Tunnel Telegram an localhost weiter, sodass ich auf einem echten Smartphone statt nur im Desktop-Browser teste.
Bei der Authentifizierung mache ich keine Abstriche. Telegram übergibt der App initData mit Nutzer-ID, Namen, auth_date und Hash. initDataUnsafe ist genau das, wonach es klingt: Der Wert eignet sich, um einen Namen anzuzeigen, darf aber niemals als vertrauenswürdig gelten. Das Backend prüft die unveränderten initData mit einer HMAC-Signatur, die aus dem Bot-Token abgeleitet wird, kontrolliert die Aktualität von auth_date und stellt erst danach eine eigene Sitzung aus. Das Bot-Token verlässt nie den Server. In einem Fintech-Produkt entscheidet diese eine Prüfung darüber, ob jemand wirklich über Telegram angemeldet ist oder mit DevTools jede Identität annehmen kann.
Die Mini App muss sich anschließend nativ anfühlen, nicht wie eine Website, die in eine WebView geklebt wurde. Ich lese themeParams und die CSS-Variablen von Telegram aus, damit Hell- und Dunkelmodus der Nutzer-App folgen. Statt eigene Schaltflächen zu zeichnen, nutze ich MainButton und BackButton, ergänze bei wichtigen Aktionen haptisches Feedback und beachte Viewport und Safe-Area-Abstände, damit nichts unter Kopfzeile oder Home-Indikator verschwindet. Mobile First ist hier kein Schlagwort: Die meisten Sitzungen laufen mit einem Daumen am Smartphone.
Bot und Mini App ergänzen einander. Der Bot sendet Benachrichtigungen, Bestätigungen und Belege; die Mini App übernimmt Ansichten mit Formular, Liste oder Checkout. Webhooks gelangen an das Node.js-Backend, das für Zahlungen und Zustand die einzige verlässliche Quelle bleibt – der Client fragt an, entscheidet aber nie. Digitale Güter in Telegram werden mit Stars bezahlt, physische Waren und Dienstleistungen können über Zahlungsanbieter abgewickelt werden. Das kläre ich früh mit dem Kunden, denn davon hängt der gesamte Ablauf ab.
Was ich ablehne: initDataUnsafe zu vertrauen, eine Desktop-Website in eine WebView zu quetschen, den Checkout ausschließlich im Frontend abzuwickeln oder auf eine Webversion zu verzichten, wenn das Unternehmen zusätzlich SEO oder ein Büro-Dashboard braucht. Wenn du in Telegram starten willst, schick mir die eine Aktion, die Nutzer im Chat erledigen sollen. Ich antworte mit dem Bot-Ablauf, den Bildschirmen der Mini App und einer klaren Grenze dessen, was auf dem Server bleibt.
Geben Sie dem nächsten Produkt jemanden, der bleibt.
Bereit für den Start? Schreiben Sie mir – ich kann sofort beginnen und bleiben. Langfristige Mandate statt Übergabe nach zwei Wochen. Lassen Sie uns über Ihr Projekt, die Anforderungen und den besten Weg nach vorn sprechen.