Conditions requises
Pour suivre et comprendre ce tutoriel, vous devez avoir des connaissances de base concernant les applications Node.js et Express.js. De plus, assurez-vous d’avoir suivi les étapes de base de notre guide pour vous lancer dans la documentation WhatsApp. Si vous êtes un fournisseur de solutions professionnelles , suivez notre guide pour les fournisseurs de solutions professionnelles et assurez-vous que votre application passe la procédure d’examen.
Assurez-vous d’avoir trois éléments à portée de main :
- Un ID WhatsApp Business
- Un ID de numéro de téléphone ou un ID de téléphone de test.
- Votre token d’utilisateur système avec les autorisations requises ci-dessous :
(whatsapp_business_management, whatsapp_business_messaging et business_management).
Si vous êtes impatient·e de voir l’application finale, vous pouvez consulter le code du projet final.
Création d’une application de base
Pour cette démonstration, vous utiliserez ce squelette de base Node.js et ce serveur Express.js avec les dépendances et les fonctions squelette nécessaires déjà créées.
Le tutoriel comprend également un package de requêtes pour effectuer des requêtes HTTP pendant la communication entre votre application et une API. Le fichier .env de l’application comporte deux variables :
META_AUTH_TOKEN et MESSAGING_PRODUCT.
Après avoir configuré le serveur, vous pouvez passer directement à la création de l’API.
Importer une image pour un message multimédia
Avant de pouvoir envoyer des messages multimédias via WhatsApp, vous devez importer des fichiers multimédias auxquels WhatsApp pourra accéder ultérieurement. Les fichiers média importés sur WhatsApp sont conservés pendant 30 jours, à moins que vous ne les supprimiez.
Vous devez créer une nouvelle route POST dans le fichier routes/media.js que vous pouvez utiliser pour gérer votre contenu multimédia. Selon la documentation , quatre éléments doivent être transmis :
- L’ID du numéro de téléphone, que vous transmettez en tant que paramètre.
- Fichier que vous souhaitez importer et que vous transmettez en tant que données de formulaire.
- Type d’importation de fichier, que vous générez à l’aide de la fonction d’assistance.
- Le produit de messagerie, que vous obtenez à partir du fichier .env.
Cependant, pour créer un appel d’API, vous avez uniquement besoin d’un ID et d’un fichier de numéro de téléphone. Les champs restants sont générés à l’aide des fonctions d’assistance.
Vous utilisez le package npm formidable pour traiter les données du formulaire. Notez que l’API WhatsApp Business comporte certaines limitations concernant certains types et certaines tailles. Vous pouvez consulter la section Types de contenu multimédia pris en charge en bas de la documentation sur le contenu multimédia. Le fichier helper/validations.js du projet de squelette contient deux fonctions d’assistance conçues à cet effet.
Pour importer une image, vous devez initialiser un nouveau formulaire. À l’aide de l’objet form, analysez le fichier et effectuez quelques validations à l’aide des fonctions d’assistance. Ensuite, effectuez une requête POST avec les données du formulaire et un token d’authentification valide à l’aide de la requête.
exports.uploadMedia = async (req, res) => { let form = new formidable.IncomingForm(); form.keepExtensions = true; form.parse(req, async (err, fields, files) => { if (err) { return res.status(400).json({ error: "Media could not be uploaded", }); } if (!files.file) { return res.status(400).json({ error: "Media File is required", }); } let isFileValidSize = validateMediaSize(files.file.size, files.file.type); if (!isFileValidSize) { return res.status(400).json({ error: `Media File size should be less than ${mediaLimits( files.file.type )}`, }); } request.post( { url: `https://graph.facebook.com/v13.0/${req.params.id}/media`, formData: { file: { value: fs.createReadStream(files.file.path), options: { filename: files.file.name, contentType: files.file.type, }, }, type: files.file.type, messaging_product: process.env.MESSAGING_PRODUCT, }, headers: { Authorization: `Bearer ${process.env.META_AUTH_TOKEN}`, "content-type": "multipart/form-data", }, }, function (err, resp, body) { if (err) { console.log("Error!"); } else { res.json(JSON.parse(body)); } } ); }); };Après avoir ajouté cette fonction, vous pouvez tester cette route à l’aide de Postman. Voici à quoi devrait ressembler l’objet final dans l’interface de Postman :
Une fois que vous avez cliqué sur Envoyer, l’API vous renvoie l’identifiant de contenu multimédia importé.
Notez l’ID de contenu multimédia importé, car nous l’utiliserons ultérieurement dans ce tutoriel. Si vous créez une application avec une couche de données, vous pouvez stocker cet ID dans votre base de données pour une utilisation ultérieure. Votre application front-end peut aussi stocker l’ID temporairement dans les variables ou l’état.
Envoi d’un message multimédia
Utilisez maintenant l’ID de contenu multimédia que vous avez récupéré à l’étape précédente pour envoyer un message multimédia à la cliente ou au client. Selon la référence de l’API, vous devez envoyer cinq éléments à l’API pour que l’envoi du message multimédia à la clientèle soit une réussite :
- ID du numéro de téléphone transmis en tant que paramètre
- Numéro de téléphone du client ou de la cliente envoyé dans le corps de la requête
- Type de contenu multimédia envoyé dans le corps de la requête
- ID du contenu multimédia envoyé dans le corps de la requête
- Type de destinataire, dans notre cas, une personne
La fonction se présente comme suit :
exports.sendMediaMessage = async (req, res) => { const { id, to, type } = req.body; if (!id || !to || !type) { return res.status(400).json({ error: "Required Fields: to, type and id", }); } request.post( { url: `https://graph.facebook.com/v13.0/${req.params.id}/messages`, headers: { Authorization: `Bearer ${process.env.META_AUTH_TOKEN}`, "content-type": "application/json", }, body: `{ "messaging_product": "whatsapp", "recipient_type": "individual", "to": "${to}", "type": "${type}", "${type}": { "id": "${id}", }, }`, }, function (err, resp, body) { if (err) { console.log("Error!"); } else { res.json(JSON.parse(body)); } } ); };Si vous exécutez ce point de terminaison dans Postman, avec les détails et les arguments requis, voici à quoi ressemble la requête.
Après l’envoi, le résultat suivant apparaît dans Postman, avec l’ID du message.
Afficher les éléments multimédias
La récupération de l’URL du contenu multimédia est facile à effectuer avec l’opération GET et l’ID du contenu multimédia récupéré ou stocké.
exports.getMediaUrl = async (req, res) => { request.get( { url: `https://graph.facebook.com/v13.0/${req.params.id}`, headers: { Authorization: `Bearer ${process.env.META_AUTH_TOKEN}`, }, }, function (err, resp, body) { if (err) { console.log("Error!"); } else { res.json(JSON.parse(body)); } } ); };Voici à quoi ressemblent la requête et la réponse Postman après la récupération de l’élément multimédia.
Supprimer du contenu multimédia
Pour supprimer un média, vous utiliserez le même point de terminaison de l’API WhatsApp pour les requêtes liées aux médias avec l’opération DELETE.
exports.deleteMedia = async (req, res) => { request.delete( { url: `https://graph.facebook.com/v13.0/${req.params.id}`, headers: { Authorization: `Bearer ${process.env.META_AUTH_TOKEN}`, }, }, function (err, resp, body) { if (err) { console.log("Error!"); } else { res.json(JSON.parse(body)); } } ); };Une fois la suppression effectuée, l’API renvoie la réponse suivante :
En savoir plus sur la plateforme WhatsApp Business
Ce tutoriel n’est qu’un exemple de ce que vous pouvez faire avec la plateforme WhatsApp Business. Lors de la planification de votre prochain projet, consultez la documentation de la plateforme WhatsApp Business pour comprendre toutes ses fonctionnalités et limites en matière de contenu multimédia.
Gardez à l’esprit les informations suivantes :
- Le contenu multimédia importé n’est conservé que pendant 30 jours
- Les URL de téléchargement générées ne sont valides que pendant cinq minutes.
- Enregistrez toujours l’ID du contenu multimédia lorsque vous importez un fichier.
Voici une liste des types de contenu multimédia actuellement pris en charge. Consultez la page Types de contenu multimédia pris en charge pour plus d’informations.
- Audio (< 16 Mo) : formats ACC, MP4, MPEG, AMR et OGG
- Documents (< 100 Mo) : textes, PDF, Office et Open Office
- Images (< 5 Mo) : formats JPEG et PNG
- Vidéo (< 16 Mo) : formats MP4 et 3GP
- Stickers (<100 Ko) : format WebP
Conclusion
La plateforme WhatsApp Business peut vous permettre d’interagir avec votre clientèle à l’aide de messages multimédias. Créer une application basée sur une API vous permet de collecter et de créer une bibliothèque de contenu multimédia que vos utilisateur·ices peuvent exploiter pour envoyer des messages de manière cohérente et efficace, réduisant ainsi les tâches répétitives.
Consultez le portail des développeur·ses WhatsApp et commencez à créer votre application dès aujourd’hui pour découvrir toutes les fonctionnalités disponibles.
