Recevoir les commentaires GitLab sur WhatsApp via les webhooks

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 -yEnsuite, installez les dépendances requises :
npm install whatsapp-web.js qrcode-terminal express body-parser puppeteer ai @ai-sdk/openaiCode 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 :
-
Installer ngrok :
npm install -g ngrok -
Démarrer votre serveur local :
node index.js -
Exposer votre serveur local :
ngrok http 3000 -
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 -
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 :
-
Installer PM2 :
npm install -g pm2 -
Démarrer le serveur avec PM2 :
pm2 start index.js --name whatsapp-gitlab-integration -
Surveiller le serveur :
pm2 monit -
Configurer PM2 pour redémarrer au reboot du serveur :
pm2 startup pm2 save -
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
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

Améliorer la communication GitLab avec les webhooks
Apprenez à utiliser les webhooks GitLab pour centraliser la communication et améliorer les temps de réponse. Inclut des exemples de code en Laravel et Next.js.

Améliorer la Communication GitLab avec les Webhooks
Découvrez comment utiliser les webhooks GitLab pour centraliser la communication et améliorer les temps de réponse. Inclut des exemples de code en Laravel et Next.js.

Flouci : Le Compte Bancaire Professionnel Gratuit pour Auto-entrepreneurs en Tunisie
Découvrez comment Flouci offre un compte bancaire professionnel gratuit et entièrement digital aux auto-entrepreneurs et professionnels (personne physique) en Tunisie, simplifiant la gestion financière.