JavascriptTutoriels

Comment Créer un Bot Telegram avec JavaScript ?

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

  1. Lancez Telegram et trouvez le bot BotFather.
  2. Tapez /start pour commencer une session avec lui.
  3. Utilisez la commande /newbot pour générer un nouveau bot.
  4. Choisissez un nom pour votre bot (par exemple : “MonBotJS”).
  5. Ensuite, sélectionnez un nom d’utilisateur qui doit se terminer par bot (par exemple : “monbotjs_bot”).
  6. 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.

  1. Créez un fichier HTML, par exemple index.html.
  2. Ajoutez le code suivant :
HTML
<!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 envoyerMessage permet d’envoyer des messages à un utilisateur spécifique en utilisant l’API /sendMessage.
  • obtenirMisesAJour interroge l’API /getUpdates pour recevoir les messages envoyés au bot, puis répond en fonction du contenu.
  • Nous utilisons la méthode fetch pour 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).

  1. Hébergez vos fichiers sur un serveur, qu’il soit local (comme avec XAMPP) ou distant (comme sur GitHub Pages, Netlify, etc.).
  2. Accédez à Telegram, recherchez votre bot, et tapez /start. Le bot devrait répondre avec “Bienvenue sur mon bot Telegram en JavaScript!”.
  3. 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 :

Bash
https://api.telegram.org/botVOTRE_TOKEN_ICI/setWebhook?url=URL_DE_VOTRE_SERVEUR

Remplacez 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.

Henry Fiti

CEO - CO-FOUNDER

Articles similaires

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Bouton retour en haut de la page