Créer un chatbot WhatsApp alimenté par l'IA : un guide étape par étape

Publié: 2024-03-22

IA/ML 9 minutes 4

22 mars 2024

Résumé:

Apprenez étape par étape à créer un chatbot WhatsApp basé sur l'IA, en tirant parti des capacités de Node.js et d'OpenAI. De la création d'un compte professionnel Meta à l'intégration de l'API WhatsApp et d'OpenAI, ce guide permet aux entreprises de rationaliser les interactions avec les clients et d'ouvrir de nouvelles possibilités de communication automatisée.

À l'ère numérique d'aujourd'hui, exploiter la puissance de l'intelligence artificielle (IA) pour améliorer les interactions avec les clients est primordial pour les entreprises qui s'efforcent de garder une longueur d'avance sur le marché. WhatsApp, étant l'une des plateformes de messagerie les plus utilisées au monde, offre aux entreprises une excellente opportunité d'interagir efficacement avec leur public. Entrez dans le royaume des chatbots WhatsApp basés sur l’IA. Ces assistants virtuels révolutionnent le service client, fournissant une assistance 24 heures sur 24 et rationalisant les processus de communication.

Que vous soyez une startup en plein essor ou une entreprise établie, la navigation à travers les étapes de développement peut être simplifiée avec la bonne approche. Dans ce guide complet, nous explorerons les principes fondamentaux, les procédures étape par étape et les considérations cruciales nécessaires à l'intégration de l'API WhatsApp Business à votre application Node.js. En exploitant la puissance des capacités de traitement du langage naturel d'OpenAI, nous créerons une expérience utilisateur transparente qui trouvera un écho auprès de votre public.

De la configuration de votre compte WhatsApp Business à l'intégration de l'API d'OpenAI à votre code Node.js, suivez-nous pendant que nous démystifions le processus et vous donnons les moyens de créer votre propre solution basée sur l'IA. Ce voyage transformateur vers le domaine des agents conversationnels pilotés par l’IA n’est pas un voyage que vous devez entreprendre seul. Une société de développement de chatbots IA peut servir de partenaire de confiance, vous fournissant des informations et une expertise inestimables tout au long du processus. Embarquons ensemble dans cette passionnante expédition.

Étape 1 : Configuration du compte professionnel et de l'application Meta (Facebook)

Créez d’abord un compte Meta business (cliquez ici).

Remplissez les détails et cliquez sur Soumettre.

2. Créez une nouvelle application Meta (Facebook) (cliquez ici).

(Connectez-vous) à votre compte de développeur Meta (Facebook).

Après vous être connecté, cliquez sur « Mes applications »

3. Cliquez maintenant sur « créer une application »

4. Sélectionnez « Autre » et cliquez sur « suivant ».

5. Choisissez le type d'application : « Business » et cliquez sur « Suivant ».

6. Fournissez les détails de l'application et cliquez sur « Créer une application »

Étape 2 : Configuration de l'application Meta (Facebook) pour l'intégration de WhatsApp

1. Ajoutez WhatsApp à votre application Meta (Facebook).

Dans le « Tableau de bord des développeurs », choisissez votre application.
Localisez « Ajouter des produits à votre application » dans l'onglet du tableau de bord de votre application.

Choisissez « WhatsApp » pour la configuration.

Sélectionnez votre compte professionnel Meta (Facebook)
Accédez à Paramètres de l'application > Basique dans la barre latérale.

Sauvegarder les modifications.
Définir le mode application sur Live

Étape 3 : Générer un jeton WhatsApp

Pour obtenir un jeton d'accès WhatsApp permanent, suivez 1 à 3 étapes :

1. Créez un « utilisateur système » :

Visitez la Meta Business Suite.
Recherchez votre compte professionnel dans le menu déroulant en haut à gauche et cliquez sur son icône Paramètres (engrenage).
Cliquez sur Paramètres professionnels.

Accédez à Utilisateurs > Utilisateurs système.

Ajoutez un utilisateur système administrateur.

2. Ajoutez des actifs.

Après avoir créé l'utilisateur système, cliquez sur Ajouter des actifs.

Accédez à Applications > « Nom de votre application ».
Sélectionnez votre application et accordez un contrôle total pour gérer l'application.

3. Générez des jetons d'accès utilisateur système.

Cliquez sur le bouton Générer un nouveau jeton sur l'utilisateur du système.

Choisissez l'application qui utilisera le jeton et définissez l'expiration du jeton sur Jamais.

Sélectionnez les autorisations « whatsapp_business_messaging » et « whatsapp_business_management ».

Générez le jeton.
Copiez le jeton d'accès et stockez-le en toute sécurité.

4. Ajoutez un nouveau numéro professionnel pour WhatsApp

Vous pouvez utiliser votre propre numéro professionnel ou utiliser le numéro de test fourni pour votre chatbot WhatsApp.
Dans le tableau de bord du développeur WhatsApp, accédez à WhatsApp > Configuration de l'API dans la barre latérale.

Passez à « Étape 5 : Ajouter un numéro de téléphone », cliquez sur Ajouter un numéro de téléphone.

Fournissez les détails requis dans le formulaire suivant.

Vérifiez votre numéro à l'aide du code reçu.
Une fois ajouté avec succès, sélectionnez votre numéro de téléphone à l'étape 1 de la configuration de l'API.

5. Ajouter un mode de paiement

Pour envoyer des messages via WhatsApp, vous avez besoin d'un mode de paiement valide. Visitez ici pour plus de détails.
Après avoir ajouté votre numéro de téléphone professionnel, cliquez sur « Ajouter un mode de paiement » pour répondre à l'alerte « Mode de paiement valide manquant ».

Vous serez dirigé vers les paramètres de votre compte WhatsApp. Cliquez sur « Modes de paiement » > « Ajouter un mode de paiement professionnel » et suivez les instructions pour ajouter les informations de votre carte.

6. Testez votre nouveau numéro d'entreprise pour WhatsApp

Revenez au tableau de bord du développeur WhatsApp, accédez à la configuration de l'API
Entrez un numéro de test « À ».
Cliquez sur « Envoyer un message » pour vérifier que le message a bien été envoyé.

Étape 4 : Configurer les paramètres du Webhook de l'API WhatsApp

1. Vérifiez le rappel WhatsApp Webhook.

Dans le tableau de bord du développeur WhatsApp, accédez à Configuration.
Sous Webhook, cliquez sur Modifier

Maintenant, nous devons fournir une URL de webhook en direct et un jeton à WhatsApp. L'URL en direct est l'URL de votre application et le jeton est également généré de votre côté. Dans l'image ci-dessous, j'ai ajouté mon URL Ngrok car mon application Node.js s'exécute sur Ngrok et j'ai utilisé un UUID comme jeton.

Lors du processus de vérification, WhatsApp envoie une requête GET à l'URL de rappel pour valider le jeton du hub. Le code suivant, écrit en Next.js (un framework Node.js), gère ce processus de vérification. La vérification ne réussira que si votre code envoie un code d'état 200 en réponse, comme indiqué ci-dessous.

exporter la fonction asynchrone GET (req : NextRequest) {

laissez hubMode = req.nextUrl.searchParams.get("hub.mode");

laissez hubChallenge = req.nextUrl.searchParams.get("hub.challenge");

laissez hubToken = req.nextUrl.searchParams.get("hub.verify_token");

//trouver le jeton dans la base de données

si (

hubMode === "s'abonner" &&

hubToken === "<valeur de .env OU de la base de données>"

) {

console.log("vérification réussie");

renvoyer une nouvelle réponse (hubChallenge);

}

return new Response("Invalid Credentials", { status: 400 });

}

Recherchez le champ « messages » et abonnez-vous en cochant la case.

Nous avons maintenant besoin du jeton d'accès WhatsApp et du secret de l'application Facebook que nous obtenons du même compte professionnel WhatsApp.

Dans l'image ci-dessous, vous voyez l'application Facebook secrète

nous devons également conserver les données mises en évidence suivantes

Dans notre code, nous avons besoin de divers identifiants tels que le jeton d'accès, le secret de l'application, le numéro de test, l'identifiant du numéro de téléphone et l'identifiant du compte professionnel. Ces identifiants nous aident à déterminer de qui nous recevons des messages et à qui nous devons envoyer des messages.

Étape 5 : Envoi et réception de messages via l'API

Dans le code TypeScript fourni, nous avons intégré avec succès l'API WhatsApp pour envoyer et recevoir des messages. De plus, j'ai incorporé OpenAI et un modèle d'IA personnalisé pour répondre aux messages entrants, pour mon objectif.
L'URL de rappel fournie à WhatsApp est utilisée pour les requêtes GET et POST. Lorsqu'un message est envoyé au numéro professionnel, WhatsApp déclenche cette URL de rappel et envoie le message avec les détails de l'utilisateur. Le code suivant lit ce message et répond en fonction de la logique implémentée.
La fonction POST est une fonction asynchrone qui gère les requêtes POST entrantes. Il analyse d'abord la demande entrante vers JSON et extrait le message envoyé par l'utilisateur depuis WhatsApp. Si le message est indéfini ou vide, il renvoie une réponse avec un statut de 200 et ne continue pas.
La fonction récupère ensuite le numéro de téléphone professionnel et le numéro de téléphone de l'expéditeur de la demande.
La fonction prépare ensuite une requête POST pour renvoyer un message à l'utilisateur via WhatsApp. Il construit l'URL de la requête, définit le message à envoyer et définit les options de la requête, notamment la méthode, les en-têtes et le corps.
La fonction envoie ensuite la requête à l'aide de la fonction fetch. Si la requête aboutit, elle renvoie une réponse avec un statut de 200. Si une erreur se produit à un moment donné, elle est enregistrée sur la console.
La fonction getResponseNumber est une fonction d'assistance qui extrait le numéro de téléphone de l'expéditeur de la demande entrante.
Ce code fournit un exemple de base de la façon d'intégrer une application Node.js à l'API WhatsApp Business, permettant l'envoi et la réception automatisés de messages.

// WhatsApp déclenchera cette demande de publication une fois que l'utilisateur aura posé une question au bot et également une réponse à l'utilisateur

exporter la fonction asynchrone POST (req : NextRequest) {

let res : any = wait req.json();

laissez questionFromWhatsapp =

res?.entry?.[0]?.changes?.[0]?.value?.messages?.[0]?.text?.body; // question reçue de WhatsApp

si (

questionFromWhatsapp == non défini ||

questionFromWhatsapp.trim().length <= 0

) {

// si la demande concerne uniquement le statut, n'allez pas plus loin

// renvoie NextResponse.json({ message : "reçu" });

return new Response("reçu", { status: 200 });

}

// récupère l'identifiant du numéro de téléphone à partir de la réponse. ce numéro de téléphone est un numéro professionnel

const phoneNumberId =

res?.entry?.[0]?.changes?.[0]?.value?.metadata["phone_number_id"];

//cette méthode renverra le numéro de téléphone à partir duquel le message a été reçu

const réponseNumber = getResponseNumber(res);

// récupération de l'ID utilisateur de la base de données

essayer {

version const = "v18.0" ;

// vérifie si la limite est atteinte ou non

const numéro de téléphone ;

const destinatairePhoneNumber = "+" + réponseNumber ;

// const accessToken = process.env.WHATSAPPTOKEN

const accessToken = "jeton que vous obtenez de Facebook";

essayer {

//------------------- Ce code sert à envoyer un message au télégramme

const url = `https://graph.facebook.com/${version}/${phoneNumberId}/messages`;

// Définir les données à envoyer dans le corps de la requête

données const = {

produit_messagerie : "Whatsapp",

type_récipiendaire : "individu",

à : `${recipientPhoneNumber}`,

tapez : "texte",

texte: {

aperçu_url : faux,

body : "Bonjour, je suis un chatbot, je suis actuellement occupé, je vous répondrai bientôt.",

} ;

// Définir les options de la requête de récupération

options const = {

méthode : "POST",

en-têtes : {

"Content-Type": "application/json",

Autorisation : `Bearer ${accessToken}`,

corps : JSON.stringify(données),

} ;

// Effectue la requête POST en utilisant fetch

essayer {

const réponse = wait fetch(url, options);

si (!response.ok) {

lancer une nouvelle erreur (`Erreur HTTP ! Statut : ${response.status}`);

}

const data = attendre réponse.json();

// Gérer les données selon les besoins

} attraper (erreur) {

// Gère l'erreur si nécessaire

console.log(erreur);

}

return new Response("reçu", { status: 200 });

} attraper (erreur) {

console.log("erreur", erreur);

}

} catch (erreur : n'importe lequel) {

console.log(erreur);

//conserve le journal des erreurs dans la base de données, en cas d'erreur non gérée

}

const getResponseNumber = (res : any) => {

return res?.entry?.[0]?.changes?.[0]?.value?.contacts[0]?.wa_id;

} ;

Conclusion

Dans ce guide complet, nous avons abordé les subtilités de l'intégration de l'API WhatsApp Business avec une application Node.js. De la configuration des webhooks au traitement des messages entrants et à l'envoi de réponses personnalisées, nous avons couvert les étapes essentielles telles que la gestion des jetons d'accès, des secrets d'application, des numéros de test, des identifiants de numéro de téléphone et des identifiants de compte professionnel.

Cette intégration transparente permet non seulement aux entreprises d'automatiser la communication sur WhatsApp, mais ouvre également une myriade de possibilités, qu'il s'agisse de créer des robots de support client, d'automatiser les efforts de marketing ou de poursuivre des projets personnels. Alors que vous vous lancez dans ce voyage, rappelez-vous qu’il ne s’agit que d’une base. L'API WhatsApp Business offre une multitude de fonctionnalités supplémentaires qui attendent d'être explorées et intégrées à votre application.

Alors que vous continuez à affiner vos efforts de développement de chatbot IA, envisagez de tirer parti de l'expertise d'un Société de développement de chatbots IA . Leurs idées et leur soutien peuvent catalyser vos progrès, garantissant que vos efforts de chatbot atteignent leur plein potentiel. Référez-vous toujours à la documentation officielle de l'API WhatsApp Business pour obtenir des informations complètes et précises à mesure que vous avancez dans votre parcours de développement.