Partager:
){kind=small}
Acteur de formation avec une thèse sur la comédie, je suis venu au développement PHP par le biais de la scène des rencontres. Vous pouvez me trouver en train de parler et d'écrire sur la technologie, ou de jouer/acheter des disques bizarres de ma collection de vinyles.
Comment envoyer des messages WhatsApp avec Laravel
Temps de lecture : 5 minutes
Si vous n'êtes pas familier avec l'API Messages, vous pouvez envoyer du texte, des images et des vidéos à Facebook Messenger, Viber, WhatsApp et au canal SMS plus basique. Vonage dispose d'un environnement de test sandbox pour vous permettre de jouer avec ces derniers, donc dans ce tutoriel, nous allons l'utiliser pour jouer avec WhatsApp Messaging en utilisant une application Laravel de démonstration que j'ai déjà mise en place.
Nous allons faire en sorte que ce soit le plus simple possible. Vous aurez besoin de
PHP8.1+
git
Un Account API de Vonage
To complete this tutorial, you will need a Vonage API account. If you don’t have one already, you can sign up today and start building with free credit. Once you have an account, you can find your API Key and API Secret at the top of the Vonage API Dashboard.
This tutorial also uses a virtual phone number. To purchase one, go to Numbers > Buy Numbers and search for one that meets your needs.
À l'aide de la ligne de commande, clonez le code de l'application :
git clone git@github.com:Vonage-Community/blog-messages-laravel.gitCopier le .env.example en tant que .env pour créer notre fichier de variables d'environnement :
cd blog-messages-laravel
cp .env.example .envEnfin, installez les dépendances avec composer :
composer install
Tout d'abord, nous allons avoir besoin d'un identifiant d'application pour envoyer des messages. Rendez-vous sur le tableau de bord de Vonage et créez une nouvelle application :
Hit 'create a new Application' to get started
Nommez votre application avec un identifiant (par exemple laravel-messages) et activez la fonctionnalité Messages. Vous devrez ajouter deux webhooks ici, mais nous ne les utiliserons pas réellement, vous pouvez donc mettre des placeholders fictifs, comme par exemple https://www.example.com
Cliquez sur "Generate public and private key". Vous remarquerez qu'un fichier private.key est générée : placez-la dans le répertoire racine de votre code d'application. Notez l'identifiant de l'Application qui est créé : nous en aurons besoin prochainement.
Les paramètres de l'Application étant réglés, nous devons maintenant configurer l'Environnement de test.
Accédez à cette page ou naviguez jusqu'à elle en utilisant la barre latérale gauche sous Troubleshoot & Learn > Developer Tools > Messages Sandboxet suivez les instructions pour créer un bac à sable WhatsApp en scannant le code QR.
Scan the QR code and follow the instructions to enable the Sandbox
Pour une solution entièrement intégrée en production, vous auriez besoin d'un WhatsApp Business Account (WABA) enregistré auprès de Meta. Ce que le bac à sable vous permet de faire, c'est d'utiliser un WABA temporaire - vous aurez alors votre numéro sur une liste d'autorisation, avec un numéro prédéfini qui est lié aux serveurs de Vonage.
Une fois le numéro défini, vous pouvez faire défiler vers le bas un exemple de code cURL qui vous donne le numéro d'expéditeur à utiliser :
Take note of the from number in this panel
Lorsque nous avons créé le fichier .env vous remarquerez qu'il y a trois variables à remplir :
VONAGE_APPLICATION_ID=
VONAGE_PRIVATE_KEY_PATH=
VONAGE_FROM_NUMBER=Nous devrions maintenant disposer de ces trois éléments. Le numéro from a été créé à l'étape précédente, entrez private.key comme chemin d'accès (le code de l'application utilise la fonction d'aide Laravel base_path() pour déterminer le chemin d'accès complet, donc si vous voulez déplacer la clé dans une structure de répertoire différente, vous devez le faire par rapport à la racine). Notre identifiant d'application peut être collé depuis le tableau de bord de Vonage lorsque nous avons créé une application Vonage.
Pas de trucs fantaisistes comme Voile ou Herd ici : nous allons juste utiliser le serveur PHP intégré que Laravel enveloppe :
php artisan serveEt nous devrions obtenir la belle page d'atterrissage en naviguant vers localhost:8000:
A Splash Screen for true Artisans
Nous n'avons aucun moyen pour les serveurs Vonage de nous donner des webhooks de messages entrants, donc pour obtenir une URL publique, nous allons utiliser ngrok pour mapper notre application Laravel en cours d'exécution :
ngrok http 8000
Ngrok up and running
Vous avez maintenant une URL publique ! La dernière partie de la configuration consiste à créer nos webhooks, alors retournez à l'Environnement de test des messages sur le tableau de bord de Vonage. Prenez l'URL publique que nous avons, et ajoutez /webhooks/status et /webhooks/inbound aux champs correspondants :
Configure your Webhooks here
Rendez-vous sur localhost:8000/message et envoyez un message !
Hit Submit to watch the magic
Our sandbox is working as expected
Il est temps de se plonger dans le code. Toute la logique se trouve uniquement dans le fichier routes/web.php plutôt que dans les contrôleurs, afin de garder les choses simples. Deux routes importantes constituent les parties essentielles de l'application. Tout d'abord, la route des messages sortants :
Route::post('/message', static function(Request $request) {
$number = $request->input('number');
$fromNumber = config('vonage.from_number');
$text = 'Hello from Vonage and Laravel :) Please reply to this message with a number between 1 and 100';
$message = new Vonage\Messages\Channel\WhatsApp\WhatsAppText($number, $fromNumber, $text);
$credentials = new Keypair(file_get_contents(config('vonage.private_key_path')), config('vonage.application_id'));
$client = new Vonage\Client($credentials);
$client->messages()->getAPIResource()->setBaseUrl('https://messages-sandbox.nexmo.com/v1/messages');
$client->messages()->send($message);
return view('thanks');
});
Il s'agit du formulaire et de la requête POST lors de l'envoi du message initial. La seule tâche de cette route est de prendre le numéro saisi dans le formulaire et d'envoyer un message WhatsApp. Si vous vous demandez comment nous envoyons ce message à Vonage, la réponse se trouve dans le SDK PHP de Vonage. L'objet Client SDK prend un objet d'informations d'identification (dans ce cas, une instance Keypair), que nous passons dans les variables d'environnement Application ID et Private Key path que nous avons créées plus tôt dans le constructeur.
$credentials = new Keypair(file_get_contents(config('vonage.private_key_path')), config('vonage.application_id'));
$client = new Vonage\Client($credentials);Pour plus d'informations sur l'utilisation du SDK PHP, consultez le ReadMe qui donne des exemples d'utilisation de l'API Messages. Pour envoyer un message, nous créons un objet WhatsAppText, nous passons le numéro de destination et le numéro de sandbox from configurés précédemment.
Avant d'envoyer le message à l'aide du client, il y a une étape importante qui est spécifique à notre cas d'utilisation :
$client->messages()->getAPIResource()->setBaseUrl('https://messages-sandbox.nexmo.com/v1/messages');
Cette ligne utilise la nature découplée du SDK PHP (toutes les parties du SDK peuvent être reconfigurées ou remplacées) pour extraire l'objet APIResource configuré pour la production et le remplacer par l'URL du bac à sable. Ainsi, tout ce que le client doit faire maintenant est de l'envoyer :
$client->messages()->send($message);
La deuxième partie consiste à coder une route qui écoute les webhooks entrants provenant de Vonage - ceux-ci seront déclenchés chaque fois que quelqu'un répondra au fil de discussion que nous avons créé dans la première étape. Voici le point de terminaison :
Route::post('/webhooks/inbound', static function(Request $request) {
$data = $request->all();
$number = (int)$data\['text'];
if ($number > 0) {
$randomNumber = random_int(1, 8);
$respondNumber = $number * $randomNumber;
$toNumber = $data\['from'];
$fromNumber = config('vonage.from_number');
$text = "The answer is " . $respondNumber . ", we multiplied by " . $randomNumber . ".";
$message = new Vonage\Messages\Channel\WhatsApp\WhatsAppText($toNumber, $fromNumber, $text);
$credentials = new Keypair(file_get_contents(config('vonage.private_key_path')), config('vonage.application_id'));
$client = new Vonage\Client($credentials);
$client->messages()->getAPIResource()->setBaseUrl('https://messages-sandbox.nexmo.com/v1/messages');
$client->messages()->send($message);
});
Nous en extrayons les informations nécessaires pour répondre au message, à savoir le numéro de téléphone auquel répondre et le numéro envoyé dans le message. Grâce à ces informations, le numéro envoyé est multiplié par un nombre aléatoire compris entre 1 et 8 et nous envoyons une réponse dont la structure est identique à celle du message initial.
Et voilà : des façons d'interagir en utilisant WhatsApp dans Vonage ! Comme vous pouvez l'imaginer, ce type de configuration est idéal pour les chatbots automatisés tels qu'un service d'assistance téléphonique, mais qu'allez-vous construire ? Faites-le nous savoir sur le Slack de la Communauté Vonage Slack, rsur X, anciennement connu sous le nom de Twitter. ou contactez-moi sur Mastodon.
Partager:
Acteur de formation avec une thèse sur la comédie, je suis venu au développement PHP par le biais de la scène des rencontres. Vous pouvez me trouver en train de parler et d'écrire sur la technologie, ou de jouer/acheter des disques bizarres de ma collection de vinyles.