Recevoir les commentaires GitLab sur WhatsApp via les webhooks

Anis MarrouchiAI Bot
Par Anis Marrouchi & AI Bot ·

Chargement du lecteur de synthèse vocale...

Une communication efficace est essentielle pour une gestion de projet réussie, surtout lorsqu'on travaille avec plusieurs clients et des projets complexes. Ce tutoriel vous montrera comment utiliser les webhooks GitLab pour centraliser la communication et améliorer les temps de réponse en intégrant WhatsApp.

Introduction

Dans ce tutoriel, nous parcourrons les étapes pour configurer un système qui écoute les événements webhook GitLab et envoie des notifications à WhatsApp en utilisant Node.js et la bibliothèque whatsapp-web.js. Ce système peut vous aider à suivre les activités GitLab importantes et à assurer des réponses rapides.

Prérequis

Pour suivre ce tutoriel, vous aurez besoin de :

  • Un compte GitLab
  • Node.js et npm installés
  • Un compte WhatsApp
  • Des connaissances de base en JavaScript

Configuration du projet

D'abord, créez un nouveau répertoire pour votre projet et initialisez une nouvelle application Node.js :

mkdir whatsapp-gitlab-integration
cd whatsapp-gitlab-integration
npm init -y

Ensuite, installez les dépendances requises :

npm install whatsapp-web.js qrcode-terminal express body-parser puppeteer ai @ai-sdk/openai

Code du projet

Créez un nouveau fichier nommé index.js et ajoutez le code suivant :

const { Client, LocalAuth } = require('whatsapp-web.js');
const qrcode = require('qrcode-terminal');
const express = require('express');
const bodyParser = require('body-parser');
const puppeteer = require('puppeteer');
const { generateText } = require('ai');
const { openai } = require('@ai-sdk/openai');
 
const HANDLE = 'marrouchi';
const PHONE_NUMBER = '21624309128@c.us';
 
// Personalize the contacts and companies arrays with your own information
const contacts = [
    { phoneNumber: PHONE_NUMBER, name: 'Anis Marrouchi', company: 'NOQTA', role: 'Founder' }
    // Add more contacts as needed
];
 
const companies = [
    {
        name: 'NOQTA',
        description: 'NOQTA is a web agency AI centered, based in Tunisia. We provide web & mobile development, AI & Automation, Cybersecurity, Consulting, IT Maintenance & support.',
        projects: [
            `Let's us build your next project together.`,
        ],
        latestInteraction: ''
    }
];
 
const app = express();
app.use(bodyParser.json());
 
const client = new Client({
    authStrategy: new LocalAuth(),
    puppeteer: {
        executablePath: puppeteer.executablePath(),
        args: ['--no-sandbox', '--disable-setuid-sandbox'],
        timeout: 60000 // Increase timeout to 60 seconds
    }
});
 
client.on('qr', (qr) => {
    console.log('QR event received, generating QR code...');
    qrcode.generate(qr, { small: true });
    console.log('QR code generated, scan it using WhatsApp');
});
 
client.on('ready', () => {
    console.log('WhatsApp client is ready!');
});
 
client.on('message', async (msg) => {
    console.log('Message received:', msg.body);
 
    const contact = contacts.find(contact => contact.phoneNumber === msg.from);
    if (contact) {
        const company = companies.find(company => company.name === contact.company);
        const description = company ? company.description : '';
        const projects = company ? company.projects.join(', ') : '';
        const latestInteraction = company ? company.latestInteraction : '';
 
        try {
            // Generate a response using Vercel AI SDK
            const { text } = await generateText({
                model: openai('gpt-4o'), // Use the appropriate model from Vercel AI
                system: `You are an AI assistant for a web agency, and your role is to reply to client messages in a professional manner. You provide clear, concise, and helpful responses based on the client's message and the company's context. if the client is my wife, you should reply with a lovely message. Always use the language of the sender.`,
                prompt: `Company: ${contact.company}\nDescription: ${description}\nProjects: ${projects}\nLatest Interaction: ${latestInteraction}\nMessage: ${msg.body}`
            });
 
            // Send the generated response back to the user
            msg.reply(text);
        } catch (error) {
            console.error('Error generating response:', error);
            msg.reply('Sorry, I encountered an error while generating a response.');
        }
    } else {
        console.log('Contact not found in the contacts array.');
    }
});
 
client.initialize();
 
// Endpoint to handle GitLab webhooks
app.post('/webhook', (req, res) => {
    const mentionEvent = req.body;
    const mentionText = mentionEvent.object_attributes.note;
 
    // Extract the mentioned user and message details
    const mentionedUser = mentionEvent.user.name;
 
    // If the mentionText contains the handle of the user, then send a message to the phone number
    // Include the URL of the issue or merge request in the message
    if (mentionText.includes(HANDLE)) {
        const message = `You were mentioned in a GitLab note: "${mentionText}" \n ${mentionEvent.object_attributes.url}`;
 
        // Send message via WhatsApp
        client.sendMessage(PHONE_NUMBER, message)
            .then(response => {
                console.log('Message sent:', response);
                res.status(200).send('Message sent successfully');
            })
            .catch(err => {
                console.error('Failed to send message:', err);
                res.status(500).send('Failed to send message');
            });
    }
});
 
const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
    console.log(`Server running on port ${PORT}`);
});

Exposer un serveur local avec ngrok

Pour tester le webhook localement, vous pouvez utiliser ngrok pour exposer votre serveur local à Internet. Suivez ces étapes :

  1. Installer ngrok :

    npm install -g ngrok
  2. Démarrer votre serveur local :

    node index.js
  3. Exposer votre serveur local :

    ngrok http 3000
  4. Obtenir l'URL publique : ngrok fournira une URL publique que vous pouvez utiliser pour configurer le webhook GitLab. L'URL ressemblera à ceci :

    https://<random-string>.ngrok.io
    
  5. Configurer le webhook GitLab :

    • Allez dans votre projet GitLab.
    • Naviguez vers Paramètres > Webhooks.
    • Ajoutez l'URL ngrok comme URL du webhook.
    • Sélectionnez les événements que vous voulez déclencher le webhook (par exemple, commentaires, issues).

Exécuter un serveur accessible publiquement avec PM2

Pour une configuration de production, vous pouvez utiliser PM2 pour exécuter votre serveur en continu et le gérer efficacement. Voici comment faire :

  1. Installer PM2 :

    npm install -g pm2
  2. Démarrer le serveur avec PM2 :

    pm2 start index.js --name whatsapp-gitlab-integration
  3. Surveiller le serveur :

    pm2 monit
  4. Configurer PM2 pour redémarrer au reboot du serveur :

    pm2 startup
    pm2 save
  5. Configurer le webhook GitLab :

    • Utilisez l'URL publique de votre serveur pour configurer le webhook dans GitLab.
    • Allez dans votre projet GitLab.
    • Naviguez vers Paramètres > Webhooks.
    • Ajoutez l'URL du serveur comme URL du webhook.
    • Sélectionnez les événements que vous voulez déclencher le webhook (par exemple, commentaires, issues).

Conclusion

En intégrant les webhooks GitLab avec WhatsApp, vous pouvez rationaliser la communication et vous assurer que les mises à jour et mentions importantes ne sont jamais manquées. Cette configuration permet des notifications et réponses en temps réel, améliorant l'efficacité globale et la réactivité de votre flux de travail de gestion de projet.

Pour plus de détails, vous pouvez trouver le projet complet sur GitHub : Repository GitHub


Vous voulez lire plus de tutoriels? Découvrez notre dernier tutoriel sur Hub de Tutoriels AI SDK : Votre Guide Complet pour Construire des Applications IA.

Discutez de votre projet avec nous

Nous sommes ici pour vous aider avec vos besoins en développement Web. Planifiez un appel pour discuter de votre projet et comment nous pouvons vous aider.

Trouvons les meilleures solutions pour vos besoins.

Articles connexes