Aller au contenu

Développement

3 articles avec l'étiquette « Développement »

Créer un bot de veille multi-agents Discord avec Mastra (Guide Complet 2025)

Un bot de veille discord

Avec la popularisation des LLMs, agents, MCP et autres technologies, nous pouvons bricoler des applications de plus en plus facilement. Aujourd’hui je vais vous présenter un framework Agentic en TypeScript que j’apprécie énormément, Mastra. https://mastra.ai/

Mastra

Le but ici n’est pas de présenter toutes les fonctionnalités de Mastra, ni de rentrer en détail dans la configuration, mais de vous montrer son potentiel avec les workflows et sa facilité de prise en main.

Normalement il y a un playground qui facilite les essais, mais ici nous les ferons directement sur Discord.

Discord

En premier, nous allons aller sur : https://discord.com/developers/applications

Et créer une nouvelle application

Discord

Dans la partie ‘General Information’, récupérez l’application ID pour plus tard.

Ensuite dans la partie bot, faites un reset du token pour en générer un nouveau.

Enfin, récupérez dans installation, l’URL d’installation pour l’ajouter à un serveur pour les tests.

CODE !

Maintenant passons au code et au setup du projet.

Setup

Pour mettre en place le projet en TypeScript je vais suivre ce guide :

https://medium.com/@rosarioborgesi/setting-up-a-node-js-project-with-pnpm-and-typescript-0b16a512ef24

Il y a juste ma partie script qui est différente :

"scripts": {
"dev": "tsx watch src/index.ts",
"start": "tsx src/index.ts",
}

Pour cela il faudra aussi ajouter tsx :

Fenêtre de terminal
pnpm add tsx

Maintenant nous allons faire notre setup discord, un simple message d’echo pour l’instant.

Il faudra installer la librairie Discord.js

Fenêtre de terminal
pnpm add discord.js dotenv

Voici mon index.ts :

import { Client, GatewayIntentBits, REST, Routes, SlashCommandBuilder } from 'discord.js';
import dotenv from 'dotenv';
// Charger les variables d'environnement
dotenv.config();
// Créer une nouvelle instance du client Discord
const client = new Client({
intents: [
GatewayIntentBits.Guilds,
],
});
// Définir la commande /ping
const commands = [
new SlashCommandBuilder()
.setName('ping')
.setDescription('Répond avec pong!')
.toJSON(),
];
// Fonction pour enregistrer les commandes slash
async function deployCommands() {
const rest = new REST({ version: '10' }).setToken(process.env.DISCORD_TOKEN!);
try {
console.log('Déploiement des commandes slash...');
await rest.put(
Routes.applicationCommands(process.env.CLIENT_ID!),
{ body: commands },
);
console.log('Commandes slash déployées avec succès!');
} catch (error) {
console.error('Erreur lors du déploiement des commandes:', error);
}
}
// Event: Bot prêt
client.once('ready', async () => {
console.log(`Bot connecté en tant que ${client.user?.tag}!`);
await deployCommands();
});
// Event: Interaction avec les commandes slash
client.on('interactionCreate', async (interaction) => {
if (!interaction.isChatInputCommand()) return;
const { commandName } = interaction;
if (commandName === 'ping') {
await interaction.reply('Pong!');
}
});
// Gestion des erreurs
client.on('error', (error) => {
console.error('Erreur du client Discord:', error);
});
process.on('unhandledRejection', (error) => {
console.error('Promesse rejetée non gérée:', error);
});
// Connexion du bot
client.login(process.env.DISCORD_TOKEN);

Faites un pnpm run dev et ajoutez-le à votre serveur, il devrait vous répondre pong !

pong

Mastra

Pour ce tutoriel je vais utiliser les clés de Google, et le modèle flash preview, car il est gratuit !

Vous pourriez vous aussi les utiliser pour avoir un bot 100% free : https://ai.google.dev/gemini-api/docs/api-key?hl=fr

En premier, nous allons installer toutes les dépendances :

Fenêtre de terminal
pnpm add @mastra/core @mastra/memory @mastra/libsql @ai-sdk/google zod rss-parser

Maintenant nous allons créer un dossier agents et faire un agentRss.ts :

import 'dotenv/config';
import { Agent } from "@mastra/core/agent";
import { Memory } from '@mastra/memory';
import { LibSQLStore } from '@mastra/libsql';
import { createTool } from '@mastra/core';
import { z } from 'zod';
import Parser from 'rss-parser';
import { google } from '@ai-sdk/google';
// Initialiser le parser RSS
const parser = new Parser();
const memory = new Memory({
storage: new LibSQLStore({
url: "file:./memory.db",
}),
});
const today = new Date().toLocaleDateString('fr-FR', {
year: 'numeric',
month: 'long',
day: 'numeric',
weekday: 'long'
});
// Outil pour lire les flux RSS
const rssFeedTool = createTool({
id: 'rss-feed-reader',
description: 'Lit et analyse un flux RSS depuis une URL',
inputSchema: z.object({
url: z.string().url().describe('L\'URL du flux RSS à lire'),
limit: z.number().optional().default(10).describe('Nombre maximum d\'articles à récupérer (défaut: 10)')
}),
outputSchema: z.object({
title: z.string().describe('Titre du flux RSS'),
description: z.string().optional().describe('Description du flux'),
link: z.string().optional().describe('Lien vers le site web'),
articles: z.array(z.object({
title: z.string().describe('Titre de l\'article'),
link: z.string().optional().describe('Lien vers l\'article'),
pubDate: z.string().optional().describe('Date de publication'),
contentSnippet: z.string().optional().describe('Extrait du contenu'),
creator: z.string().optional().describe('Auteur de l\'article')
})).describe('Liste des articles du flux')
}),
execute: async ({ context }) => {
try {
const { url, limit } = context;
// Parser le flux RSS
const feed = await parser.parseURL(url);
// Limiter le nombre d'articles
const articles = feed.items.slice(0, limit).map(item => ({
title: item.title || 'Sans titre',
link: item.link || undefined,
pubDate: item.pubDate || undefined,
contentSnippet: item.contentSnippet || item.content || undefined,
creator: item.creator || item.author || undefined
}));
return {
title: feed.title || 'Flux RSS',
description: feed.description || undefined,
link: feed.link || undefined,
articles
};
} catch (error) {
throw new Error(`Erreur lors de la lecture du flux RSS: ${error instanceof Error ? error.message : 'Erreur inconnue'}`);
}
}
});
export const rssAgent = new Agent({
name: 'RSS Feed Agent',
instructions:
`You are a specialized RSS feed reader assistant. ` +
`Today is ${today}. ` +
`Your capabilities include: ` +
`- Reading and parsing RSS feeds from URLs ` +
`- Summarizing RSS feed content and articles ` +
`- Providing information about the latest articles from various sources ` +
`- Helping users stay updated with news and content from their favorite websites ` +
`When users provide RSS feed URLs or ask about specific feeds: ` +
`- Use the rssFeedTool to fetch and parse the RSS content ` +
`- Provide clear summaries of the articles ` +
`- Highlight the most important or recent articles ` +
`- Format the information in an easy-to-read way ` +
`You can help with popular RSS feeds from tech blogs, news sites, ` +
`podcasts, and other content sources. Always be helpful and provide ` +
`organized information about the RSS content.`,
model: google('gemini-2.5-flash-preview-04-17'),
memory,
tools: { rssFeedTool }
});

ici nous avons créé un agent avec la date du jour et il a un outil qui lui permet de récupérer avec une URL les flux RSS. En .env vous devez aussi ajouter GOOGLE_GENERATIVE_AI_API_KEY=your-key, pour que cela fonctionne.

Maintenant nous allons faire un agent qui va permettre de réécrire les news reçues.

agentWriter.ts

import 'dotenv/config';
import { Agent } from "@mastra/core/agent";
import { Memory } from '@mastra/memory';
import { google } from '@ai-sdk/google';
import { LibSQLStore } from '@mastra/libsql';
const memory = new Memory({
storage: new LibSQLStore({
url: "file:./memory.db",
}),
});
export const writerAgent = new Agent({
name: 'Content Writer',
instructions: `You are an expert content rewriter specialized in tech news and research aggregation. Your goal is to:
1. Take multiple pieces of content (RSS feeds, web research, etc.) and create a comprehensive digest
2. Identify common trends and important topics across sources
3. Organize the information with clear sections
4. Maintain accuracy while improving readability and flow
5. Respond in plain text with no Markdown formatting
When rewriting:
- Prioritize the most important and current information
- Group related topics together
- Highlight major trends and innovations
- Use a professional yet accessible tone
- Include dates and sources when available
- Do NOT use Markdown; answer as if sending a simple text message
`,
memory,
model: google('gemini-2.5-flash-preview-04-17')
});

Et maintenant passons au workflow ! Là où nous allons indiquer quelles URLs checker. Nous pourrions aller plus loin, et faire une commande à l’utilisateur pour ajouter des sources et pendant le workflow nous irions voir en DB les sources.

mais pour l’instant faisons simple.

Créez un dossier workflows et dedans créez un index.ts

import 'dotenv/config';
import { createWorkflow, createStep } from "@mastra/core/workflows";
import { z } from "zod";
import { rssAgent } from "../agents/agentRss";
import { writerAgent } from "../agents/agentWriter";
// Step 1: Lire Blog du Modérateur Tech
const blogModeratorStep = createStep({
id: "blog-moderator-step",
description: "Lit le flux RSS du Blog du Modérateur Tech",
inputSchema: z.object({}),
outputSchema: z.object({
blogModeratorContent: z.string()
}),
execute: async () => {
const message1 = "📡 Step 1: Lecture du flux RSS Blog du Modérateur Tech...";
console.log(message1);
const response = await rssAgent.generate(
"Lis le flux RSS de https://www.blogdumoderateur.com/tech/feed/ et donne-moi un résumé CONCIS des 3 articles les plus récents seulement. Limite-toi à 2-3 phrases par article.",
{
resourceId: "rss_workflow",
threadId: "rss_workflow_blog_moderator"
}
);
const message2 = "✅ Step 1: Blog du Modérateur Tech terminé";
console.log(message2);
return {
blogModeratorContent: response.text
};
}
});
// Step 2: Lire Le Monde Informatique Cloud
const mondeInformatiqueStep = createStep({
id: "monde-informatique-step",
description: "Lit le flux RSS du Monde Informatique Cloud",
inputSchema: z.object({}),
outputSchema: z.object({
mondeInformatiqueContent: z.string()
}),
execute: async () => {
const message1 = "📡 Step 2: Lecture du flux RSS Le Monde Informatique Cloud...";
console.log(message1);
const response = await rssAgent.generate(
"Lis le flux RSS de https://www.lemondeinformatique.fr/flux-rss/thematique/le-monde-du-cloud-computing/rss.xml et donne-moi un résumé CONCIS des 3 articles les plus récents sur le cloud computing. Limite-toi à 2-3 phrases par article.",
{
resourceId: "rss_workflow",
threadId: "rss_workflow_monde_informatique"
}
);
const message2 = "✅ Step 2: Le Monde Informatique Cloud terminé";
console.log(message2);
return {
mondeInformatiqueContent: response.text
};
}
});
// Step 3: Lire Forbes Innovation
const forbesStep = createStep({
id: "forbes-step",
description: "Lit le flux RSS de Forbes Innovation",
inputSchema: z.object({}),
outputSchema: z.object({
forbesContent: z.string()
}),
execute: async () => {
const message1 = "📡 Step 3: Lecture du flux RSS Forbes Innovation...";
console.log(message1);
const response = await rssAgent.generate(
"Lis le flux RSS de https://www.forbes.com/innovation/feed et donne-moi un résumé CONCIS des 3 articles les plus récents sur l'innovation. Limite-toi à 2-3 phrases par article.",
{
resourceId: "rss_workflow",
threadId: "rss_workflow_forbes"
}
);
const message2 = "✅ Step 3: Forbes Innovation terminé";
console.log(message2);
return {
forbesContent: response.text
};
}
});
// Step 4: Réécriture et synthèse finale
const rewriteStep = createStep({
id: "rewrite-synthesis-step",
description: "Réécrit et synthétise tous les contenus RSS",
inputSchema: z.object({
"blog-moderator-step": z.object({ blogModeratorContent: z.string() }),
"monde-informatique-step": z.object({ mondeInformatiqueContent: z.string() }),
"forbes-step": z.object({ forbesContent: z.string() })
}),
outputSchema: z.object({
finalDigest: z.string()
}),
execute: async ({ inputData }) => {
const message1 = "🔄 Step 4: Synthèse et réécriture...";
console.log(message1);
const blogModeratorContent = inputData["blog-moderator-step"].blogModeratorContent;
const mondeInformatiqueContent = inputData["monde-informatique-step"].mondeInformatiqueContent;
const forbesContent = inputData["forbes-step"].forbesContent;
const synthesisPrompt = `
Crée un digest tech quotidien professionnel à partir des contenus RSS suivants:
Source 1 - Blog du Modérateur Tech:
${blogModeratorContent}
Source 2 - Le Monde Informatique (Cloud):
${mondeInformatiqueContent}
Source 3 - Forbes Innovation:
${forbesContent}
Instructions:
1. Crée une synthèse globale organisée par thèmes technologiques
2. Identifie les tendances communes et les sujets importants
3. Hiérarchise l'information par ordre d'importance
4. Utilise uniquement du texte brut sans Markdown, comme un message WhatsApp
5. Indique toujours la source et la date pour chaque article
6. Garde un ton informatif et engageant avec des sections claires
`;
const response = await writerAgent.generate([
{ role: "user", content: synthesisPrompt }
]);
const message2 = "✅ Step 4: Synthèse finale terminée, ça arrive soon !";
console.log(message2);
return {
finalDigest: response.text
};
}
});
// Création du workflow complet
export const rssWorkflow = createWorkflow({
id: "rss-aggregator-workflow",
description: "Agrège et réécrit le contenu de plusieurs sources RSS tech",
inputSchema: z.object({}),
outputSchema: z.object({
finalDigest: z.string()
})
})
.parallel([
blogModeratorStep,
mondeInformatiqueStep,
forbesStep
])
.then(rewriteStep)
.commit();

Très bien nous avons un workflow maintenant ! Qui a trois steps qui se font en parallèle (fetch des RSS et synthétisation par LLM) et ensuite l’agent ‘writer’ qui va résumer les actualités.

Vous allez me dire très bien mais je veux converser avec moi, pas de problème !

Chef agent

Nous allons bientôt tester notre code, mais avant il nous reste quelques étapes.

Créez un agentMaster.ts dans le dossier agents :

import 'dotenv/config';
import { Agent } from "@mastra/core/agent";
import { Memory } from '@mastra/memory';
import { rssWorkflow } from '../workflows';
import { google } from '@ai-sdk/google';
import { LibSQLStore } from '@mastra/libsql';
const memory = new Memory({
storage: new LibSQLStore({
url: "file:./memory.db",
}),
});
const today = new Date().toLocaleDateString('fr-FR', {
year: 'numeric',
month: 'long',
day: 'numeric',
weekday: 'long'
});
export const chefAgent = new Agent({
name: 'News Assistant',
instructions:
`You are a specialized news assistant focused on providing tech news and current events. ` +
`Today is ${today}. ` +
`Always reply in plain text without using Markdown formatting. ` +
`Do not use asterisks or any other symbols for bold or italic text. ` +
`MANDATORY RULE: For ANY request related to news, actualités, current events, or tech updates, ` +
`you MUST use the rssWorkflow immediately. This includes: ` +
`- "actualités" ` +
`- "news" ` +
`- "dernières nouvelles" ` +
`- "infos du jour" ` +
`- "tech news" ` +
`- "what's happening" ` +
`- Any request for current information ` +
`The rssWorkflow provides real-time tech news from Blog du Modérateur, Le Monde Informatique, and Forbes Innovation. ` +
`Always use rssWorkflow first for news requests - do not attempt to provide news from your knowledge base. `,
model: google('gemini-2.5-flash-preview-04-17'),
memory,
workflows: { rssWorkflow },
});

Et dans cet agent, nous lui avons donné comme outil le workflow, donc il pourra exécuter le workflow pour récupérer les actualités. Génial non ?!

Test Discord

Modifions le index.ts pour ajouter la commande /chat et générer une conversation avec l’agent master :

import { Client, GatewayIntentBits, REST, Routes, SlashCommandBuilder } from 'discord.js';
import dotenv from 'dotenv';
import { chefAgent } from './agents/agentMaster';
// Charger les variables d'environnement
dotenv.config();
// Créer une nouvelle instance du client Discord
const client = new Client({
intents: [
GatewayIntentBits.Guilds,
],
});
// Définir les commandes /ping et /chat
const commands = [
new SlashCommandBuilder()
.setName('ping')
.setDescription('Répond avec pong!')
.toJSON(),
new SlashCommandBuilder()
.setName('chat')
.setDescription('Converser avec l\'assistant IA')
.addStringOption(option =>
option.setName('message')
.setDescription('Votre message à l\'assistant')
.setRequired(true))
.toJSON(),
];
// Fonction pour enregistrer les commandes slash
async function deployCommands() {
const rest = new REST({ version: '10' }).setToken(process.env.DISCORD_TOKEN!);
try {
console.log('Déploiement des commandes slash...');
await rest.put(
Routes.applicationCommands(process.env.CLIENT_ID!),
{ body: commands },
);
console.log('Commandes slash déployées avec succès!');
} catch (error) {
console.error('Erreur lors du déploiement des commandes:', error);
}
}
// Event: Bot prêt
client.once('ready', async () => {
console.log(`Bot connecté en tant que ${client.user?.tag}!`);
await deployCommands();
});
// Event: Interaction avec les commandes slash
client.on('interactionCreate', async (interaction) => {
if (!interaction.isChatInputCommand()) return;
const { commandName } = interaction;
if (commandName === 'ping') {
await interaction.reply('Pong!');
} else if (commandName === 'chat') {
const message = interaction.options.getString('message', true);
try {
// Répondre immédiatement pour éviter le timeout
await interaction.reply('🤖 Recherche d\'informations...');
// Créer un threadId unique basé sur l'utilisateur et la date
const uniqueThreadId = `discord_chat_${interaction.user.id}_${new Date().toDateString().replace(/\s/g, '_')}`;
// Envoyer le message à l'agent
const response = await chefAgent.generate(message, {
resourceId: `discord_user_${interaction.user.id}`,
threadId: uniqueThreadId,
});
// Fonction pour diviser le texte en chunks de 2000 caractères max
const splitMessage = (text: string, maxLength: number = 2000): string[] => {
if (text.length <= maxLength) {
return [text];
}
const chunks: string[] = [];
let currentChunk = '';
// Diviser par paragraphes d'abord
const paragraphs = text.split('\n\n');
for (const paragraph of paragraphs) {
// Si le paragraphe seul dépasse la limite, le diviser par phrases
if (paragraph.length > maxLength) {
const sentences = paragraph.split('. ');
for (const sentence of sentences) {
const potentialChunk = currentChunk + (currentChunk ? '\n\n' : '') + sentence + (sentence.endsWith('.') ? '' : '.');
if (potentialChunk.length > maxLength) {
if (currentChunk) {
chunks.push(currentChunk.trim());
currentChunk = sentence + (sentence.endsWith('.') ? '' : '.');
} else {
// Si même une phrase dépasse, la couper brutalement
chunks.push(sentence.substring(0, maxLength - 3) + '...');
}
} else {
currentChunk = potentialChunk;
}
}
} else {
const potentialChunk = currentChunk + (currentChunk ? '\n\n' : '') + paragraph;
if (potentialChunk.length > maxLength) {
chunks.push(currentChunk.trim());
currentChunk = paragraph;
} else {
currentChunk = potentialChunk;
}
}
}
if (currentChunk) {
chunks.push(currentChunk.trim());
}
return chunks;
};
// Diviser la réponse si nécessaire
const messageChunks = splitMessage(response.text);
// Envoyer le premier chunk en modifiant la réponse initiale
await interaction.editReply(messageChunks[0]);
// Envoyer les chunks suivants en tant que nouveaux messages
for (let i = 1; i < messageChunks.length; i++) {
await interaction.followUp(messageChunks[i]);
}
} catch (error) {
console.error('Erreur lors de la génération de la réponse:', error);
await interaction.editReply('Désolé, une erreur s\'est produite lors du traitement de votre demande. 😔');
}
}
});
// Gestion des erreurs
client.on('error', (error) => {
console.error('Erreur du client Discord:', error);
});
process.on('unhandledRejection', (error) => {
console.error('Promesse rejetée non gérée:', error);
});
// Connexion du bot
client.login(process.env.DISCORD_TOKEN);

Faites maintenant /chat et demandez “Quelles sont les actualités du jour ? ”

actuResponse

C’est top non ?

Ajoutons un workflow web pour demander plus d’informations sur une actualité !

Web

Pour éviter la re-création d’un agent, vous pouvez utiliser https://tsai-registry.dev.

Je vais donc en profiter pour ajouter l’agent web, avant cela, allez-vous créer un compte firecrawl.dev et récupérer votre clé d’API free.

Exécutez la commande suivante pour ajouter votre agent web :

Fenêtre de terminal
npx tsai-registry add firecrawl-agent

L’utilitaire vous demandera votre clé API firecrawl pour alimenter le .env directement.

Une fois installé, vous avez normalement un dossier mastra/registry/agent/firecrawl… qui s’est créé, je vais prendre le dossier firecrawl et le mettre dans mon src/agents.

Je ne vais pas rentrer en détail dans la configuration de l’agent, tout ce qu’il faut faire c’est de remplacer openai par google comme les autres agents.

Ensuite, vous pouvez créer dans le dossier workflows un web.ts

import 'dotenv/config';
import { createWorkflow, createStep } from "@mastra/core/workflows";
import { z } from "zod";
import { firecrawlAgent } from "../agents/firecrawl-agent/index";
import { writerAgent } from "../agents/agentWriter";
// Étape 1: Recherche web
const webSearchStep = createStep({
id: "web-search-step",
description: "Effectue une recherche web approfondie sur le sujet donné",
inputSchema: z.object({
query: z.string().describe("Le sujet ou la requête de recherche")
}),
outputSchema: z.object({
searchResults: z.string().describe("Les résultats de recherche compilés")
}),
execute: async ({ inputData }) => {
const { query } = inputData;
const message1 = "🔎 Étape 1: Recherche web en cours...";
console.log(message1);
const prompt = `Recherche des informations détaillées sur: ${query}`;
const { text } = await firecrawlAgent.generate([
{ role: "user", content: prompt }
]);
const message2 = "✅ Étape 1: Recherche web terminée.";
console.log(message2);
return {
searchResults: text
};
}
});
// Étape 2: Réécriture du contenu
const rewriteStep = createStep({
id: "rewrite-step",
description: "Réécrit et améliore le contenu de recherche",
inputSchema: z.object({
searchResults: z.string().describe("Les résultats de recherche à réécrire")
}),
outputSchema: z.object({
rewrittenContent: z.string().describe("Le contenu réécrit et amélioré")
}),
execute: async ({ inputData }) => {
const { searchResults } = inputData;
const message1 = "✍️ Étape 2: Réécriture du contenu en cours...";
console.log(message1);
const prompt = `
Réécris et améliore le contenu suivant de manière claire et engageante:
${searchResults}
Instructions:
- Organise le contenu avec des titres appropriés
- Améliore la lisibilité et la structure
- Garde toutes les informations importantes
- Rends le ton professionnel mais accessible
`;
const { text } = await writerAgent.generate([
{ role: "user", content: prompt }
]);
const message2 = "✅ Étape 2: Réécriture terminée.";
console.log(message2);
return {
rewrittenContent: text
};
}
});
// Création du workflow complet
export const webResearchWorkflow = createWorkflow({
id: "web-research-workflow",
description: "Workflow de recherche web et réécriture de contenu",
inputSchema: z.object({
query: z.string().describe("Le sujet de recherche")
}),
outputSchema: z.object({
rewrittenContent: z.string().describe("Le contenu final réécrit et amélioré")
})
})
.then(webSearchStep)
.then(rewriteStep)
.commit();

Voici maintenant mon nouveau chef agent avec le workflow et des indications en plus en prompt :

export const chefAgent = new Agent({
name: 'Chef Assistant',
instructions:
`You are a helpful global assistant that can help with various tasks and questions. ` +
`Today is ${today}. ` +
`Always reply in plain text without using Markdown formatting. ` +
`Do not use asterisks or any other symbols for bold or italic text. ` +
`You have access to different workflows that can help you provide better answers: ` +
`- rssWorkflow: **MANDATORY** - Use this IMMEDIATELY when users ask for news, actualités, current events, or tech updates. This provides a comprehensive tech digest from multiple sources. ` +
`- webResearchWorkflow: Use this when you need other current information, research, or web search ` +
`IMPORTANT RULES: ` +
`- When users ask for "actualités", "news", "dernières nouvelles", "infos du jour", or any news-related request: YOU MUST use rssWorkflow first ` +
`- Do not attempt to provide news from your knowledge - always use rssWorkflow for current news ` +
`- The rssWorkflow provides real-time tech news aggregated from Blog du Modérateur, Le Monde Informatique, and Forbes Innovation ` +
`- Keep conversations focused and concise to avoid token overflow ` +
`You can assist with: ` +
`- General questions and information ` +
`- News and current events (use rssWorkflow MANDATORY) ` +
`- Research and web search (use webResearchWorkflow) ` +
`- Technical help and explanations ` +
`- Creative tasks and brainstorming ` +
`Always try to be helpful, accurate, and use the available workflows when they can ` +
`improve your response quality.`,
model: google('gemini-2.5-flash-preview-04-17'),
memory,
workflows: { rssWorkflow, webResearchWorkflow },
});

Et maintenant demandons plus d’informations sur une actualité :

finalResponse

Conclusion

J’espère que ce tutoriel vous donnera envie d’utiliser Mastra, c’est un framework TypeScript agréable à utiliser avec une communauté active et un support rapide de la part des fondateurs.

Le repo de ce tutoriel : https://github.com/Killian-Aidalinfo/discord-bot-actu

De plus, si vous souhaitez participer à la construction communautaire d’agents et workflows vous pouvez participer ici : https://github.com/aidalinfo/tsai-registry

C’est tout pour moi !

n’hésitez pas à me suivre sur les réseaux sociaux :

Découverte de Bun : le nouveau runtime JavaScript rapide et moderne

À la découverte de bun

Bonjour à tous ! Aujourd’hui on se retrouve pour découvrir Bun !

Bun

C’est quoi Bun ?

Bun est un framework de développement qui a pour but de ‘remplacer’ Node.js pour le développement en TypeScript/JavaScript. Bun contient plusieurs modules natifs, il va aussi nous permettre de gérer les packages NPM mais aussi de réaliser des tests unitaires très facilement.

Avant de commencer

Avant d’aller dans notre éditeur de code préféré, je tiens à souligner que je n’ai jamais fait de TypeScript, donc ce sera de la découverte pour moi.

L’idée, c’est de créer un projet qui sera une petite API, une base de données SQLite et de créer les tests unitaires.

Le projet

Mais on va coder quoi ?

Pour créer cet article, je profite d’un projet qui m’a été donné à mon école (CESI). Le projet est assez grand pour le peu de temps accordé donc nous devons prioriser les tâches, je ne vais pas vous expliquer tout le sujet, donc je vais juste vous énoncer quelques user stories que nous avons choisies.

User stories

User storie 1

En tant qu’utilisateur je souhaite m’inscrire pour parier sur un match.

Remarque : L’utilisateur ne peut pas s’inscrire s’il a moins de 18 ans. Il faut également connaître le pays de l’utilisateur.

User storie 2

En tant qu’utilisateur je veux pouvoir me connecter à mon compte.

Remarque : Un token JWT de 1H devra être fourni.

User storie 3

En tant qu’utilisateur je peux visualiser les matchs disponibles ainsi que leurs côtes.

Remarque : Pas besoins de compte pour visualiser les matchs. Remarque : Les matchs seront fictifs dans un JSON.

User storie 4

(optionnel) En tant qu’utilisateur connecté je peux parier sur un match une somme.

Remarque : Le match ne doit pas être en cours de jeu.

Installation de bun

Maintenant que nous avons nos user stories qui déterminent nos tâches, on va pouvoir commencer à coder !

Pour commencer, on va installer bun.

Sous linux et MacOS nous utiliserons cette commande :

Fenêtre de terminal
curl -fsSL https://bun.sh/install | bash

Voici la sortie de la commande :

Fenêtre de terminal
Added "~/.bun/bin" to $PATH in "~/.zshrc"
To get started, run:
exec /usr/bin/zsh
bun --help

Nous allons donc réaliser la commence exec et tester bun —help.

Screen de bun —help :

Screen de bun --help

Parfait tout va bien !

Je vais créer un nouveau dossier que je vais appeler “bun-trd”

Fenêtre de terminal
mkdir bun-trd

Et je vais aller dans le dossier :

Fenêtre de terminal
cd bun-trd

Création du projet

Maintenant nous allons créer le projet avec bun init.

Fenêtre de terminal
bun init

Screen de bun init

Nous voyons que nous avons un dossier avec tous les fichiers nécessaires pour notre projet. (Pas comme NodeJS, créer ne crée pas le fichier index.js)

Dans le package.json je vais ajouter la partie scripts qui va nous permettre de lancer le fichier index.ts qui contient un console.log.

"scripts": {
"dev": "bun --hot index.ts"
},

C’est quoi —hot ? Magie ! C’est une option qui permet de lancer le programme avec hot reload. Pas besoin d’ajouter nodemon ou autres. :)

Il nous reste plus qu’à lancer le projet avec bun run dev

Screen de bun run dev

Et voilà notre projet est lancé !

Avant de bien structurer notre projet, nous allons ajouter Hono, u module qui permet la création d’API Rest très facilement.

Ajout de Hono

Normalement nous pouvons faire bun create hono projetname, mais comme nous avons déjà initialisé notre projet, nous allons utiliser bun add hono

Screen de bun add hono

On va commencer les choses sérieuse, donc je vais structurer le projet.

Voici ma structure choisis :

.
├── bun.lockb
├── nodes_modules
├── package.json
├── README.md
├── data
├── .env
├── tests
├── src
│ ├── controllers
│ ├── index.ts
│ ├── models
│ └── utils
└── tsconfig.json

Persistance des données

Avant de commencer notre api nous allons explorer la persistance des données, pour cela nous allons utiliser une base de données SQLite.

Bun à une gestion native de SQLite ?! Trop bien ! https://bun.sh/docs/api/sqlite

Bon bah on va créer un fichier db.ts dans src/utils.

Voici pour l’instant mon fichier db.ts :

import { Database } from "bun:sqlite";
//Connexion à la base de données (La création est faite si elle n'existe pas)
export const db = new Database("data/trd.sqlite", { create: true });
//Création de la table utilisateur par défaut
db.run(`
CREATE TABLE IF NOT EXISTS users (
id INTEGER PRIMARY KEY AUTOINCREMENT,
nom TEXT NOT NULL,
prenom TEXT NOT NULL,
email TEXT NOT NULL UNIQUE,
password TEXT NOT NULL,
age INTEGER,
pays TEXT,
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);
`);

Je n’ai pas encore testé mais dans l’idée, nous pourrons utiliser db dans d’autre fichier pour créer des query,transaction et autres.

La partie db.run nous permet de créer la table utilisateur si elle n’existe pas, nous en ajouterons d’autres plus tard.

dans mon fichier index.ts je vais juste ajouter l’import de db.ts pour initialiser la base de données.

import './utils/db';

Création de l’API

Maintenant que nous avons notre base de données, nous allons créer les différents endpoints ainsi que les controllers.

Pour commencer, je vais créer un fichier dans le dossier controllers nommé usersController.ts.

UsersController

Création d’utilisateur

Voici mon fichier usersController.ts avec la fonction qui permet la création d’un utilisateur ainsi que son helper qui servira à notre futur route :

// Import du helper create Factory de Hono
// https://hono.dev/docs/helpers/factory
import { createFactory } from "hono/factory";
// Import de l'exception HTTP
import { HTTPException } from 'hono/http-exception'
// Import du connecteur SQLite
import { db } from "../utils/db";
// Création d'un type utilisateur
type user = {
id: number;
nom: string;
prenom: string;
email: string;
password: string;
age: number;
pays: string;
created_at: string;
};
// Création d'un type d'input utilisateur sans id et created_at
type userInput = Omit<user, "id" | "created_at">;
//Instanciation du Factory
const factory = createFactory();
// Création d'une fonction qui permet de créer un utilisateur
// la fonction est en dehors du helper pour faciliter la création des test
export async function fonctionUserCreate(userInput: userInput){
//Vérification des champs obligatoires
if (!userInput.email || !userInput.password || !userInput.nom || !userInput.prenom || !userInput.age || !userInput.pays) {
throw new HTTPException(400, {message: "Tous les champs sont obligatoires"});
}
//Vérification de l'age
if(userInput.age < 18){
throw new HTTPException(400, {message: "L'age doit être supérieur à 18"});
}
//Hashage du mot de passe
//https://bun.sh/guides/util/hash-a-password
const hashedPassword = await Bun.password.hash(userInput.password);
// Insertion de l'utilisateur dans la base de données
try {
db.run(
"INSERT INTO users (nom, prenom, email, password, age, pays) VALUES (?, ?, ?, ?, ?, ?)",
[userInput.nom,
userInput.prenom,
userInput.email,
hashedPassword,
userInput.age,
userInput.pays]
);
return 'Utilisateur créé avec succès';
}
catch (err) {
//Envoie d'une erreur si la création de l'utilisateur a échoué
throw new HTTPException(500, {message: `Erreur lors de la création de l'utilisateur: ${err}`});
}
}
export const userCreate = factory.createHandlers(async (c) => {
// Récupéreration des donnée de la requête
const userInput = await c.req.json<userInput>();
const message = await fonctionUserCreate(userInput);
return c.text(message);
})

J’ai commenté au maximum les différentes parties de mon code pour que vous compreniez mieux l’utilité de chaque ligne.

D’ailleurs pour faire un retour rapide, je suis assez choqué du nombre de documentation pour Bun alors qu’il est très récent.

Par exemple pour le hashage de mot passe, il y a un module intégré et même bcrypt. https://bun.sh/guides/util/hash-a-password

Maintenant, modifions l’index.ts pour ajouter hono et notre route.

import './utils/db';
import { Hono } from "hono";
import { userCreate} from './controllers/usersController';
const app = new Hono();
// Route de status
app.get("/", (c) => {
return c.text("Ready");
});
//Partie utilisateur
app.post("/user", ...userCreate);
//https://hono.dev/docs/getting-started/bun
//https://bun.sh/guides/runtime/read-env
export default {
port: Bun.env.API_PORT,
fetch: app.fetch
}

Pour essayer les variables d’environnement, j’ai rajouter un fichier .env à la racine du projet.

Pour l’instant elle contient seulement ceci :

Fenêtre de terminal
API_PORT=3000

On teste la création de l’utilisateur ?

Voici la requête que je vais utiliser avec mon terminal directement :

Fenêtre de terminal
curl -X POST http://localhost:3000/user \
-H "Content-Type: application/json" \
-d '{
"nom": "STEIN",
"prenom": "Killian",
"email": "killian.stein@civilisation-it.fr",
"password": "SuperAzerty57",
"age": 23,
"pays": "France"
}'

Screen de curl

Et voilà notre utilisateur est créé ! On va vérifier en base ?

DB Browser utilisateur créé

Parfait, maintenant je vais essayer de créer un test unitaire pour notre fonction userCreate.

Test unitaire

L’avantage c’est que bun embarque directement Jest et une cli, donc l’intégration de test est très simple. https://bun.sh/docs/cli/test

Pour commencer, je vais créer un fichier dans le dossier tests qui sera nommé userCreate.test.ts.

Voici mon fichier userCreate.test.ts :

//Import des class de test via bun:test
import { describe, expect, test, jest } from "bun:test";
//Récupération de la fonction à tester
import { fonctionUserCreate } from "../src/controllers/usersController";
// Import de l'exception HTTP
import { HTTPException } from "hono/http-exception";
// Import de la db pour mock la méthode db.run
import { db } from "../src/utils/db";
// Mock de la méthode db.run pour éviter les écritures en base réelle
// https://jestjs.io/docs/mock-functions
db.run = jest.fn();
//Input standard pour la création d'un utilisateur
let userInput = {
nom: "Test",
prenom: "Killian",
email: "killian.stein@civilisation.fr",
password: "SuperAzerty57",
age: 23,
pays: "France",
};
//Création d'un bloc de test pour fonctionUserCreate
describe("Tests de la fonction fonctionUserCreate", () => {
// Test de la création d'un utilisateur
test("Création d'un utilisateur", async () => {
//Message de retour dans une variable
const resultUserCreation = await fonctionUserCreate(userInput);
//Vérification que ça retourne la valeur attendu
expect(resultUserCreation).toBe("Utilisateur créé avec succès");
});
// Test de la création d'un utilisateur avec un age inférieur à 18
test("Erreur de création de l'utilisateur avec un age inférieur à 18", async () => {
userInput.age = 17;
//Ici on met pas la fonction dans une variable sinon nous n'avons pas l'erreur Throw
expect(fonctionUserCreate(userInput)).rejects.toThrow(
new HTTPException(400, { message: "L'age doit être supérieur à 18" })
);
});
// Test de la création d'un utilisateur avec des champs manquants
test("Erreur de création de l'utilisateur avec des champs manquants", async () => {
userInput.age = 18;
userInput.email = "";
expect(fonctionUserCreate(userInput)).rejects.toThrow(
new HTTPException(400, { message: "Tous les champs sont obligatoires" })
);
});
});

Encore une fois, j’ai commenté au maximum les différentes parties de mon code pour que vous compreniez mieux l’utilité, et pour moi ici quand je regarderai mon tutoriel plus tard ^^”

Maintenant on va lancer notre test avec la commande bun test

Screen de bun test

Connexion d’un utilisateur

Je ne vais pas vous détailler tout le projet, mais je trouve ça intéressant d’avoir plusieurs outils à notre disposition directement, comme le hash de mot de passe ou le connecteur de base de données.

Pour continuer sur cette lancé je vais utiliser une autre intégration, la génération de token JWT ! Ce n’est pas vraiment bun qui l’intégre mais Hono embarque directement le module https://hono.dev/docs/helpers/jwt

Dans userController je vais donc ajouter le code suivant :

// Login utilisateur
import { sign } from "hono/jwt";
//Fonction de login de l'utilisateur
export async function fonctionUserLogin(userInput: Pick<userInput, "email" | "password">) {
//Vérification des champs obligatoires
if (!userInput.email || !userInput.password) {
throw new HTTPException(400, {
message: "Tous les champs sont obligatoires",
});
}
//Requete dans la base de données pour récupérer l'utilisateur
const user = db
.query("SELECT * FROM users WHERE email = ?")
.get(userInput.email) as user; //Nécessite as user en TS pour typé le résultat de la query
//Erreur si l'utilisateur n'existe pas
if(!user){
throw new HTTPException(400, { message: "Utilisateur inexistant" });
}
//Vérification du password
//https://bun.sh/guides/util/hash-a-password
const isMatch = await Bun.password.verify(userInput.password, user.password);
//Vérification si le password signé correspond
if (!isMatch) {
throw new HTTPException(400, { message: "Mot de passe incorrect" });
}
//Création du payload pour le token
const payload = {
id: user.id,
exp: Math.floor(Date.now() / 1000) + 60 * 60, // Expiration dans 60 minutes
};
// Création du token
const token = await sign(payload, Bun.env.JWT_SECRET as string);
return token;
}
export const userLogin = factory.createHandlers(async (c) => {
// Récupéreration des donnée de la requête
const userInput = await c.req.json<userInput>();
const result = await fonctionUserLogin(userInput);
return c.text(result);
});

Dans l’index.ts on va rajouter une route /login

app.post("/login", ...userLogin);

Résultat :

Login

Parfait tout ça ! Mais maintenant, je me demande comment faire les tests de login, sachant qu’on mock la fonction db donc on insère par l’utilisateur dedans.

En demandant à GPTo il m’a indiqué qu’en mode test notre NODE_ENV est égal à test. Donc nous pourrions modifier db.ts pour créer une database de test.

Et spoiler alerte, il a raison !

J’ai testé sans créer la base de données de test, c’est une galère de mock toutes les commandes SQLite.

Donc je vais faire un if à la création de la base de données pour créer une base de données de test si la variable d’environnement NODE_ENV est égale à test.

//Connexion à la base de données (La création est faite si elle n'existe pas)
export const db =
Bun.env.NODE_ENV === "test"
? new Database("data/trd_test.sqlite", { create: true })
: new Database("data/trd.sqlite", { create: true });
Test unitaire

Avec le changement de base de données, j’ai du intégré la suppression des données dans la tables, mais j’ai pu rajouter aussi le test d’erreur lorsque l’email existe déjà !

Voici mon fichier complet de test à présent :

//Import des class de test via bun:test
import { describe, expect, test, jest } from "bun:test";
//Récupération de la fonction à tester
import { fonctionUserCreate, fonctionUserLogin } from "../src/controllers/usersController";
// Import de l'exception HTTP
import { HTTPException } from "hono/http-exception";
// Import de la db vider les données de la base de données
import { db } from "../src/utils/db";
import { verify } from "hono/jwt";
//Récupération des tables de la base de données
const tables = db.query("SELECT name FROM sqlite_master WHERE type='table' AND name NOT LIKE 'sqlite_%';").all() as { name: string }[];
// as name string[], permet de dire que le résultat de la query est un tableau
//Suppression des données de chaque table
for (const table of tables) {
db.run(`DELETE FROM ${table.name};`);
}
//Input standard pour la création d'un utilisateur
let userInput = {
nom: "Test",
prenom: "Killian",
email: "killian.stein@civilisation.fr",
password: "SuperAzerty57",
age: 23,
pays: "France",
};
//Création d'un bloc de test pour fonctionUserCreate
describe("Tests de la fonction fonctionUserCreate", () => {
// Test de la création d'un utilisateur
test("Création d'un utilisateur", async () => {
//Message de retour dans une variable
const resultUserCreation = await fonctionUserCreate(userInput);
//Vérification que ça retourne la valeur attendu
expect(resultUserCreation).toBe("Utilisateur créé avec succès");
});
test("Vérification d'un essaie de création avec une email déjà existant", async () => {
expect(fonctionUserCreate(userInput)).rejects.toThrow(
new HTTPException(500, { message: "Erreur lors de la création de l'utilisateur: SQLiteError: UNIQUE constraint failed: users.email" })
);
});
// Test de la création d'un utilisateur avec un age inférieur à 18
test("Erreur de création de l'utilisateur avec un age inférieur à 18", async () => {
userInput.age = 17;
//Ici on met pas la fonction dans une variable sinon nous n'avons pas l'erreur Throw
expect(fonctionUserCreate(userInput)).rejects.toThrow(
new HTTPException(400, { message: "L'age doit être supérieur à 18" })
);
});
// Test de la création d'un utilisateur avec des champs manquants
test("Erreur de création de l'utilisateur avec des champs manquants", async () => {
userInput.age = 18;
userInput.pays = "";
expect(fonctionUserCreate(userInput)).rejects.toThrow(
new HTTPException(400, { message: "Tous les champs sont obligatoires" })
);
});
});
//Input de login
let loginInput = {
email: userInput.email,
password: userInput.password,
}
// Tests de la fonction fonctionUserLogin
describe("Tests de la fonction fonctionUserLogin", () => {
test("Connexion réussie", async () => {
const token = await fonctionUserLogin(loginInput);
expect(token).toBeDefined();
// Décodage et vérification du token
const payload = await verify(token, Bun.env.JWT_SECRET as string);
expect(payload).toHaveProperty("id" && "exp");
//https://jestjs.io/docs/expect#tohavepropertykeypath-value
});
test("Échec de connexion avec un mot de passe incorrect", async () => {
loginInput.password = "Azerty57";
expect(fonctionUserLogin(loginInput)).rejects.toThrow(
new HTTPException(400, { message: "Mot de passe incorrect" })
);
});
test("Addresse email inexistante", async () => {
loginInput.email = "test@gmail.com";
expect(fonctionUserLogin(loginInput)).rejects.toThrow(
new HTTPException(400, { message: "Utilisateur inexistant" })
);
});
test("Échec de connexion avec des champs manquants", async () => {
loginInput.email = "";
loginInput.password = "";
expect(fonctionUserLogin(loginInput)).rejects.toThrow(
new HTTPException(400, { message: "Tous les champs sont obligatoires" })
);
});
});

On peut voir un résultat satisfaisant !

Nouveau test

MatchController

Maintenant que la partie utilisateur est fonctionnelle, on va passer aux matchs.

Pour travailler sur des données fictives, j’ai demandé à GPTo de créer un tableau de matchs.

const championsLeagueMatches = [
{
equipe1: "Paris Saint-Germain",
equipe2: "Manchester City",
date: new Date("2023-11-06T20:00:00"), // 6 novembre 2023, 20h00
odds: {
"1": 2.10, // Victoire de PSG
"N": 3.60, // Match nul
"2": 2.30, // Victoire de Manchester City
},
},
{
equipe1: "Real Madrid",
equipe2: "Inter Milan",
date: new Date("2023-11-07T20:00:00"), // 7 novembre 2023, 20h00
odds: {
"1": 1.85, // Victoire de Real Madrid
"N": 3.40, // Match nul
"2": 4.00, // Victoire de Inter Milan
},
},
{
equipe1: "Liverpool",
equipe2: "Bayern Munich",
date: new Date("2023-11-08T20:00:00"), // 8 novembre 2023, 20h00
odds: {
"1": 2.50, // Victoire de Liverpool
"N": 3.50, // Match nul
"2": 2.20, // Victoire de Bayern Munich
},
},
{
equipe1: "Chelsea",
equipe2: "Barcelona",
date: new Date("2023-11-09T20:00:00"), // 9 novembre 2023, 20h00
odds: {
"1": 2.25, // Victoire de Chelsea
"N": 3.20, // Match nul
"2": 2.40, // Victoire de Barcelona
},
},
{
equipe1: "Juventus",
equipe2: "Manchester United",
date: new Date("2023-11-10T20:00:00"), // 10 novembre 2023, 20h00
odds: {
"1": 2.40, // Victoire de Juventus
"N": 3.30, // Match nul
"2": 2.30, // Victoire de Manchester United
},
},
{
equipe1: "Atletico Madrid",
equipe2: "AC Milan",
date: new Date("2023-11-11T20:00:00"), // 11 novembre 2023, 20h00
odds: {
"1": 1.95, // Victoire de Atletico Madrid
"N": 3.30, // Match nul
"2": 3.90, // Victoire de AC Milan
},
},
{
equipe1: "Dortmund",
equipe2: "Porto",
date: new Date("2023-11-12T20:00:00"), // 12 novembre 2023, 20h00
odds: {
"1": 1.75, // Victoire de Dortmund
"N": 3.80, // Match nul
"2": 4.20, // Victoire de Porto
},
},
{
equipe1: "Benfica",
equipe2: "RB Leipzig",
date: new Date("2023-11-13T20:00:00"), // 13 novembre 2023, 20h00
odds: {
"1": 2.60, // Victoire de Benfica
"N": 3.40, // Match nul
"2": 2.10, // Victoire de RB Leipzig
},
},
];

Je vais partir de cette base, mais en modifiant quelques éléments pour que ce soit plus intéressant.

Je vais créer un fichier matchController.ts dans src/controllers :

// Import du helper create Factory de Hono
// https://hono.dev/docs/helpers/factory
import { createFactory } from "hono/factory";
// Import de l'exception HTTP
import { HTTPException } from "hono/http-exception";
// Import du connecteur SQLite
import { db } from "../utils/db";
const championsLeagueMatches = [
{
equipe1: "Paris Saint-Germain",
equipe2: "Manchester City",
date: new Date("2024-10-27T20:00:00"),
cote: {
"1": 2.10, // Victoire de PSG
"N": 3.60, // Match nul
"2": 2.30, // Victoire de Manchester City
},
},
{
equipe1: "Real Madrid",
equipe2: "Inter Milan",
date: new Date("2024-10-27T18:00:00"),
cote: {
"1": 1.85, // Victoire de Real Madrid
"N": 3.40, // Match nul
"2": 4.00, // Victoire de Inter Milan
},
},
{
equipe1: "Liverpool",
equipe2: "Bayern Munich",
date: new Date("2024-10-27T15:00:00"),
cote: {
"1": 2.50, // Victoire de Liverpool
"N": 3.50, // Match nul
"2": 2.20, // Victoire de Bayern Munich
},
},
{
equipe1: "Chelsea",
equipe2: "Barcelona",
date: new Date("2024-10-28T18:00:00"),
cote: {
"1": 2.25, // Victoire de Chelsea
"N": 3.20, // Match nul
"2": 2.40, // Victoire de Barcelona
},
},
{
equipe1: "Juventus",
equipe2: "Manchester United",
date: new Date("2024-10-28T18:00:00"),
cote: {
"1": 2.40, // Victoire de Juventus
"N": 3.30, // Match nul
"2": 2.30, // Victoire de Manchester United
},
},
{
equipe1: "Atletico Madrid",
equipe2: "AC Milan",
date: new Date("2024-10-28T18:00:00"),
cote: {
"1": 1.95, // Victoire de Atletico Madrid
"N": 3.30, // Match nul
"2": 3.90, // Victoire de AC Milan
},
},
{
equipe1: "Dortmund",
equipe2: "Porto",
date: new Date("2024-10-28T18:00:00"),
cote: {
"1": 1.75, // Victoire de Dortmund
"N": 3.80, // Match nul
"2": 4.20, // Victoire de Porto
},
},
{
equipe1: "Benfica",
equipe2: "RB Leipzig",
date: new Date("2024-10-28T18:00:00"),
cote: {
"1": 2.60, // Victoire de Benfica
"N": 3.40, // Match nul
"2": 2.10, // Victoire de RB Leipzig
},
},
];
type match = {
equipe1: string;
equipe2: string;
date: Date;
cote: {
"1": number;
"2": number;
"N": number;
};
};
export async function fonctionViewMatch(){
const today = new Date();
//Permet de récupérer juste les matchs avec la date du jour dans le tableau
const match = championsLeagueMatches.filter(match => match.date.getDate() === today.getDate()) as match[];
if(!match){
throw new HTTPException(400, { message: "Aucun match du jour" });
}
return match;
}
export const viewMatch = createFactory().createHandlers(async (c) => {
const match = await fonctionViewMatch();
return c.json(match);
});

Rajouter la route dans l’index :

app.get("/matchs", ...viewMatch);

Un petit curl pour tester curl http://localhost:3000/matchs

Et voici le retour :

[
{"equipe1":"Paris Saint-Germain","equipe2":"Manchester City","date":"2024-10-27T19:00:00.000Z","cote":{"1":2.1,"2":2.3,"N":3.6}},
{"equipe1":"Real Madrid","equipe2":"Inter Milan","date":"2024-10-27T17:00:00.000Z","cote":{"1":1.85,"2":4,"N":3.4}},
{"equipe1":"Liverpool","equipe2":"Bayern Munich","date":"2024-10-27T14:00:00.000Z","cote":{"1":2.5,"2":2.2,"N":3.5}}
]

Tout va bien ! C’est très simple mais mon but encore une fois est de faire des tests unitaires, donc c’est parti !

test unitaire

J’ai décidé de faire un seul test unitaire, car pour les matchs il faudrait implémenter une forte logique pour une gestion parfaite, mais je pense avoir assez détaillé les tests dans la partie utilisateur, ce qui m’a permis d’acquérir de nouvelles connaissances sur jest et bun.

Voici mon fichier matchController.test.ts :

import { describe, expect, test } from "bun:test";
import { fonctionViewMatch } from "../src/controllers/matchController";
describe("Recupéation des matchs seulement du jour", () => {
test("Recupération des matchs du jour", async () => {
const match = await fonctionViewMatch();
const today = new Date();
expect(match.length).toBeGreaterThan(0);
match.forEach((m) => {
expect(m.date.getDate()).toBe(today.getDate());
})
});
})

Ce fichier permet de vérifier que la fonction fonctionViewMatch retourne bien des données et que c’est donnée soit uniquement des matchs du jour.

Conclusion

J’espère que cet article vous a plu et vous donnera envie de tester Bun !

Etant une personne qui n’est jamais fait de TypeScript, je n’ai pas ressenti d’énorme difficulté, je suis même étonné de la facilité d’utilisation. Cela ne change pas énormément de JavaScript, à part l’ajout d’un typage qui permet une sécurité accrue sur l’input/output des données.

Bien sûr, je n’ai pas exploré toutes les possibilités de TypeScript/Bun, mais je pense que c’est une première expérience très intéressante !

Pour ceux qui sont intéressés par le code de cet article voici le repos github : https://github.com/Killian-Aidalinfo/bun-trd

Liens utiles

Réseaux sociaux

Comme d’habitude, n’hésitez pas à me rejoindre sur les réseaux sociaux pour plus de contenu !

plugins vite pour vue 3 : auto-imports et productivité

Des librairies gain de temps pour VueJS

En utilisant VueJS dans son état le plus pur possible, il nous arrive d’importer plusieurs fois des fonctions/méthodes, ici je veux parler de Ref, Watch, onMounted ou encore d’autres comme route et router de vue-router.

img post.png

Si vous avez déjà utilisé des frameworks comme Nuxt, vous avez remarqué que vous n’avez pas besoin de cela, même pour les components, de l’auto import qui nous rend plus efficaces et rend le code plus propre.

Cependant, tous les frameworks ne sont pas dotés de cette technologie, ni Vue dans son état brut. Dans cet article de blog, je vais donc vous montrer comment y remédier 🙂 Il suffit de 2 librairies très puissantes qui vont vous faire gagner beaucoup de lignes de code.

Librairie pour l’auto import des fonctions :

https://www.npmjs.com/package/unplugin-auto-import/v/0.17.1

Librairie pour l’auto import de components :

https://www.npmjs.com/package/unplugin-vue-components/v/0.14.0-beta.1

Pour commencer, je vais créer un projet Vue avec Vite :

Need to install the following packages.png

On va maintenant suivre la documentation et faire un premier npm install.

npm i -D unplugin-auto-import

Dans le fichier vite.config.js, nous allons ajouter l’import et indiquer le plugin pour qu’il soit chargé au build de l’application. Ensuite, en suivant la documentation, nous allons pré-importer des librairies dans un tableau.

CleanShot 2024-08-19 at 21.45.19@2x.png

À présent, dans mon component TheWelcome, je peux utiliser ref sans l’importer.

CleanShot 2024-08-19 at 21.46.52@2x.png

CleanShot 2024-08-19 at 21.47.46@2x.png

Je vais supprimer aussi les imports de vue-router dans mon app.vue

CleanShot 2024-08-19 at 21.48.48@2x.png

Et ça fonctionne :D

CleanShot 2024-08-19 at 21.49.59.gif

Maintenant, on va supprimer toute la partie script setup, avec unplugin-vue-components, fini l’import de components !

Un petit npm install :

npm i unplugin-vue-components -D

On retourne dans vite.config.js et on ajoute notre plugin dans vite.

CleanShot 2024-08-19 at 21.55.55@2x.png

J’ai supprimé l’import de components dans App.vue

CleanShot 2024-08-19 at 21.56.55@2x.png

Et cela fonctionne parfaitement !

CleanShot 2024-08-19 at 21.58.40@2x.png

J’espère que ces librairies vous plairont mais aussi qu’elles vous seront utiles 😁

Pour finir, n’hésitez pas à me rejoindre sur les réseaux sociaux pour plus de contenu !

Youtube ➡️ https://www.youtube.com/@civilisationit

X (ancien Twitter) ➡️ https://x.com/Ninapepite_

LinkedIn ➡️ https://www.linkedin.com/in/killian-stein-4465b81a2/