Dans ce tutoriel, nous allons explorer comment développer un bot Telegram en utilisant uniquement du JavaScript. Aucune bibliothèque tierce comme Node.js ne sera nécessaire. En nous appuyant sur des requêtes HTTP simples, nous allons directement interagir avec l’API Telegram dans une page web.
Ce qu’il vous faut avant de commencer
Avant de débuter, assurez-vous d’avoir :
- Un compte Telegram.
- Un serveur web pour héberger vos fichiers.
Étape 1 : Créer votre Bot avec BotFather
- Lancez Telegram et trouvez le bot
BotFather. - Tapez
/startpour commencer une session avec lui. - Utilisez la commande
/newbotpour générer un nouveau bot. - Choisissez un nom pour votre bot (par exemple : « MonBotJS »).
- Ensuite, sélectionnez un nom d’utilisateur qui doit se terminer par
bot(par exemple : « monbotjs_bot »). - Après validation, BotFather vous remettra un token d’accès. Ce dernier est nécessaire pour communiquer avec l’API Telegram.
Remarque importante : Ce token est sensible, veillez à le conserver en sécurité.
Étape 2 : Configurer le Bot avec JavaScript
L’API de Telegram fournit des moyens simples d’envoyer et de recevoir des messages via des requêtes HTTP. Nous allons utiliser du JavaScript pur pour effectuer ces appels, directement à partir d’une page web.
- Créez un fichier HTML, par exemple
index.html. - Ajoutez le code suivant :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bot Telegram en JavaScript</title>
</head>
<body>
<h1>Mon Bot Telegram avec JavaScript</h1>
<p id="status">En attente de messages...</p>
<script>
// Remplacez par le token de votre bot
const botToken = 'VOTRE_TOKEN_ICI';
const apiUrl = `https://api.telegram.org/bot${botToken}`;
// Fonction pour envoyer des messages à l'utilisateur
function envoyerMessage(chatId, texte) {
const url = `${apiUrl}/sendMessage?chat_id=${chatId}&text=${encodeURIComponent(texte)}`;
fetch(url)
.then(response => response.json())
.then(data => {
console.log("Message envoyé : ", data);
})
.catch(error => console.error('Erreur :', error));
}
// Fonction pour récupérer les nouveaux messages
function obtenirMisesAJour() {
const url = `${apiUrl}/getUpdates`;
fetch(url)
.then(response => response.json())
.then(data => {
const misesAJour = data.result;
if (misesAJour.length > 0) {
misesAJour.forEach(update => {
const chatId = update.message.chat.id;
const message = update.message.text;
console.log("Message reçu :", message);
// Répondre selon le contenu du message
if (message === "/start") {
envoyerMessage(chatId, "Bienvenue sur mon bot Telegram en JavaScript!");
} else {
envoyerMessage(chatId, `Vous avez dit : ${message}`);
}
});
} else {
console.log("Aucun nouveau message.");
}
})
.catch(error => console.error('Erreur :', error));
}
// Rafraîchissement toutes les 5 secondes pour vérifier les nouveaux messages
setInterval(obtenirMisesAJour, 5000);
</script>
</body>
</html>Décryptage du code :
- La fonction
envoyerMessagepermet d’envoyer des messages à un utilisateur spécifique en utilisant l’API/sendMessage. obtenirMisesAJourinterroge l’API/getUpdatespour recevoir les messages envoyés au bot, puis répond en fonction du contenu.- Nous utilisons la méthode
fetchpour envoyer et recevoir des requêtes HTTP. - Le script vérifie les nouveaux messages toutes les 5 secondes via
setInterval.
Étape 3 : Héberger et tester le bot
Pour que Telegram puisse interagir avec votre bot, ce dernier doit être hébergé en ligne sur un serveur accessible (ou au moins localement pour les tests).
- Hébergez vos fichiers sur un serveur, qu’il soit local (comme avec XAMPP) ou distant (comme sur GitHub Pages, Netlify, etc.).
- Accédez à Telegram, recherchez votre bot, et tapez
/start. Le bot devrait répondre avec « Bienvenue sur mon bot Telegram en JavaScript! ». - Envoyez un autre message pour voir la réponse du bot qui devrait refléter votre texte.
Étape 4 : Configurer un Webhook (Optionnel)
La méthode utilisée jusqu’ici repose sur l’interrogation régulière de l’API pour obtenir les messages (via getUpdates). Pour rendre votre bot plus réactif, vous pouvez configurer un Webhook. Cela permettra à Telegram d’envoyer directement les messages à votre serveur dès qu’ils sont reçus.
Utilisez cette URL pour configurer le Webhook :
https://api.telegram.org/botVOTRE_TOKEN_ICI/setWebhook?url=URL_DE_VOTRE_SERVEURRemplacez VOTRE_TOKEN_ICI par le token de votre bot et URL_DE_VOTRE_SERVEUR par l’adresse de votre serveur où est hébergé votre fichier.
Vous avez maintenant un bot Telegram fonctionnel, écrit uniquement en JavaScript pur, sans frameworks. Ce tutoriel vous a montré comment créer un bot de base avec des fonctionnalités simples, mais vous pouvez aller plus loin en explorant la documentation de l’API Telegram pour intégrer des fonctionnalités plus avancées.
Vous pouvez ajouter des bibliothèques pour facilement gérer ou ajouter des programmes intéressants pour votre bot.
