Comment créer votre première Mini App Telegram : guide étape par étape

Telegram ou WeChat : le duel des super-apps

WeChat domine depuis des années le paysage des super-apps. Lancée en 2011, l’application est vite devenue incontournable au quotidien en Chine en réunissant messagerie, réseaux sociaux, paiements et commerce en ligne sur une seule plateforme. Telegram est arrivé plus tard, en 2013, mais a rapidement gagné du terrain et s’impose désormais comme un sérieux concurrent sur la scène mondiale des super-apps. Aujourd’hui, les développeurs peuvent créer des services innovants, voire des mini-solutions directement dans Telegram. Avec la bonne documentation sur les Mini Apps, toute personne souhaitant créer un bot Telegram ou concevoir une Mini App à l’aide de technologies web familières peut se lancer dans le développement d’applications plus facilement que jamais.

Principales différences entre Telegram et WeChat :

WeChat règne depuis longtemps sur le marché chinois comme application tout-en-un, mais l’application Telegram accélère pour le concurrencer à l’échelle mondiale. En misant sur la confidentialité, des fonctionnalités de pointe et des outils pour les développeurs, Telegram se forge une place à part. Grâce aux Mini Apps Telegram (TMA), les développeurs peuvent désormais créer des applications web qui s’intègrent parfaitement à la plateforme. De quoi combler rapidement l’écart et séduire toujours plus d’utilisateurs dans le monde entier.

Voyons maintenant comment créer une Mini App Telegram et rejoindre la communauté grandissante de développeurs qui exploitent tout le potentiel de Telegram.

Que sont les Mini Apps Telegram et pourquoi ont-elles autant de succès ?

Mini Apps Telegram (TMA) : ce sont essentiellement des applications web qui s’exécutent dans Telegram. Imaginez des sites web classiques conçus en HTML, CSS et JavaScript, mais qui peuvent accéder aux fonctionnalités propres à Telegram grâce à son SDK. Elles se lancent directement dans Telegram et offrent une expérience utilisateur fluide, l’intégration des données et des systèmes de paiement intégrés. Pour utiliser Telegram avec des Mini Apps, les développeurs créent généralement un bot avec BotFather, lui attribuent un nom d’utilisateur et configurent les paramètres nécessaires pour le connecter à leur application. Une fois configurées, les Mini Apps peuvent être partagées dans des groupes Telegram ou directement avec des utilisateurs, ce qui en fait un puissant prolongement de l’écosystème. Il est essentiel de comprendre leur fonctionnement pour tirer pleinement parti de la plateforme.

Pourquoi les développeurs adorent les TMA :

Exemples de Mini Apps Telegram à succès

Voici quelques exemples concrets pour découvrir tout ce qu’il est possible de faire :

• Wallet – Un exemple de service de portefeuille accessible via Telegram ; les fonctionnalités varient selon le portefeuille et la région.
• Hamster Kombat – Un jeu de tap-tap qui a suscité un engagement massif.
• DurgerKing – La Mini App de démonstration de Telegram pour tester un parcours de commande et de paiement de repas.

Comment se lancer avec les Mini Apps Telegram

Ce qu’il vous faut :

• Un éditeur de code (VS Code ou WebStorm feront parfaitement l’affaire).
• Des connaissances de base en HTML, CSS et JavaScript.
• Telegram installé sur votre téléphone et votre ordinateur.
• L’envie de découvrir de nouvelles choses.

Étape 1 : créer un bot auxiliaire

Tout commence par la création d’un bot Telegram. Il servira de porte d’entrée vers votre application. Voici comment procéder :

1. Recherchez @BotFather dans Telegram.
2. Envoyez la commande /newbot.
3. Choisissez un nom pour votre bot.
4. Enregistrez le token fourni par BotFather en lieu sûr sur votre serveur : vous en aurez besoin pour l’API Bot. Ne le mettez jamais dans le code du navigateur ni dans un dépôt public.

Voici le code Node.js à exécuter sur votre serveur. Installez node-telegram-bot-api, récupérez le token depuis une variable d’environnement côté serveur, puis remplacez https://your-domain.com/app par votre URL HTTPS une fois l’application déployée, avant d’exécuter le code. Le bouton inline web_app est prévu pour une conversation privée avec le bot :

javascript
const TelegramBot = require('node-telegram-bot-api');
const bot = new TelegramBot(token, { polling: true });

bot.onText(/\/start/, (msg) => {
const chatId = msg.chat.id;
bot.sendMessage(chatId, 'Bienvenue ! Cliquez sur le bouton ci-dessous pour ouvrir l’application.', {
reply_markup: {
inline_keyboard: [[
{
text: 'Ouvrir l’application',
web_app: { url: 'https://your-domain.com/app' }
}
]]
}
});
});

Étape 2 : configurer votre environnement

Créez une structure de projet simple pour développer une Mini App Telegram et configurer votre environnement de test :

Structure des dossiers du projet (le contenu d’index.html est présenté à l’étape 3) :

text
my-tma/
├── index.html
├── styles/
│ └── main.css
├── scripts/
│ └── app.js
└── assets/
└── images/

Étape 3 : créer votre application

Enregistrez ce code HTML dans un fichier nommé index.html. Il charge le pont Telegram WebApp ainsi que scripts/app.js. Il s’agit d’un exemple d’interface, pas d’un système d’authentification : vérifiez initData de Telegram sur votre backend avant de faire confiance à l’identité de l’utilisateur.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First TMA</title>
<link rel="stylesheet" href="styles/main.css">
<script src="https://telegram.org/js/telegram-web-app.js"></script>
</head>
<body>
<div id="app">
<h1>Bonjour, Telegram !</h1>
</div>
<script src="scripts/app.js"></script>
</body>
</html>

Personnaliser le style de votre application

Enregistrez le code JavaScript ci-dessous dans scripts/app.js. setupTheme applique les couleurs du thème Telegram ; styles/main.css est une feuille de style séparée que vous pouvez personnaliser. Testez votre Mini App dans Telegram sur Android et iOS. Important : sendData fonctionne uniquement avec les Mini Apps lancées depuis un bouton web_app du clavier de réponse, et non depuis le bouton inline de l’étape 1. Pour enregistrer les données lors d’un lancement depuis ce bouton inline, mettez en place un endpoint backend et validez initData. Cet exemple ne persiste pas les données et ne gère pas les messages web_app_data entrants :

javascript
const app = {
data: { count: 0 },

init() {
this.setupTheme();
this.setupCounter();
this.setupMainButton();
},

setupTheme() {
const theme = window.Telegram.WebApp.themeParams;
document.body.style.backgroundColor = theme.bg_color;
document.body.style.color = theme.text_color;
},

setupCounter() {
const counter = document.createElement('div');
counter.innerHTML = `
<h2>Compteur : <span id="count">0</span></h2>
<button id="increment">+1</button>
<button id="decrement">-1</button>
`;
document.querySelector('#app').appendChild(counter);

document.querySelector('#increment').onclick = () => this.updateCount(1);
document.querySelector('#decrement').onclick = () => this.updateCount(-1);
},

setupMainButton() {
const MainButton = window.Telegram.WebApp.MainButton;
MainButton.setText('Enregistrer');
MainButton.onClick(() => this.saveData());
MainButton.show();
},

updateCount(delta) {
this.data.count += delta;
document.querySelector('#count').textContent = this.data.count;
},

saveData() {
window.Telegram.WebApp.sendData(JSON.stringify(this.data));
}
};

window.Telegram.WebApp.ready();
app.init();

Ajouter des fonctionnalités

Une fois les bases en place, enrichissez votre Mini App avec des fonctionnalités avancées :

• Ajoutez des fonctionnalités Web3 basées sur TON si cela est pertinent. Pour acheter des biens et services numériques dans Telegram, les utilisateurs doivent payer avec Telegram Stars, et non avec TON.
• Proposez le paiement en Telegram Stars pour les biens et services numériques, en veillant à confirmer les paiements et à gérer les remboursements correctement.
• Enregistrez les données des utilisateurs sur un serveur après avoir validé initData et vérifié toutes les valeurs envoyées.
• Ajoutez des animations et des fonctionnalités avancées.
• Envoyez des notifications via le bot, avec l’autorisation requise de l’utilisateur. Une Mini App ne peut pas envoyer de messages à n’importe quel utilisateur.
• Ajoutez un bouton de menu pour faciliter la navigation.

Et ensuite ?

1. Déployez votre application sur un serveur HTTPS.
2. Reliez votre application à Telegram via @BotFather.
3. Déboguez et testez votre application en conditions réelles.
4. Lancez votre Mini App Telegram et recueillez vos premiers retours.
5. Partagez votre code sur GitHub pour recueillir les avis de la communauté, sans y inclure de jetons de bot, de secrets ni de données personnelles.
6. Recueillez les retours des utilisateurs et améliorez votre application au fil des retours.

Suivez ces étapes pour mettre toutes les chances de votre côté et créer une Mini App Telegram performante, qui tire pleinement parti de l’écosystème grandissant de la plateforme.