Compartir:
){kind=small}
Actor de formación con una disertación sobre la comedia, llegué al desarrollo de PHP a través de la escena de las reuniones. Puedes encontrarme hablando y escribiendo sobre tecnología, o tocando/comprando discos raros de mi colección de vinilos.
Cómo enviar mensajes de WhatsApp con Laravel
Tiempo de lectura: 4 minutos
Si no estás familiarizado con Messages API, puedes enviar texto, imágenes y video a Facebook Messenger, Viber, WhatsApp y el canal SMS más básico. Vonage tiene un entorno de pruebas sandbox para que juegues con estos, así que en este tutorial, vamos a usar eso para jugar con WhatsApp Messaging usando una aplicación Laravel de demostración que ya he configurado.
Vamos a hacerlo lo más sencillo posible. Usted necesitará:
PHP8.1+
git
Una cuenta 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.
Clona el código de la aplicación desde la línea de comandos:
git clone git@github.com:Vonage-Community/blog-messages-laravel.gitCopie el .env.example como .env para crear nuestro archivo de variables de entorno:
cd blog-messages-laravel
cp .env.example .envY por último, instala las dependencias con composer:
composer install
Primero, necesitaremos un ID de aplicación para enviar mensajes. Ve al panel de Vonage y crea una nueva aplicación:
Hit 'create a new Application' to get started
Nombra tu aplicación con un identificador (por ejemplo, laravel-messages) y activa la capacidad de Mensajes. Tendrás que añadir dos webhooks aquí, pero en realidad no los vamos a utilizar, así que puedes poner marcadores de posición ficticios, por ejemplo https://www.example.com
Pulsa "Generar clave pública y privada". Verás que se genera un archivo private.key en el directorio raíz del código de tu aplicación. Toma nota del ID de la aplicación que se crea: lo necesitaremos en breve.
Con esto nos hemos ocupado de la configuración de Applications, así que ahora tenemos que configurar el Sandbox.
Vaya a esta página o navega hasta ella utilizando la barra lateral izquierda bajo Troubleshoot & Learn > Developer Tools > Messages Sandboxy siga las instrucciones para crear un sandbox de WhatsApp escaneando el código QR.
Scan the QR code and follow the instructions to enable the Sandbox
Para una solución completamente integrada en producción, necesitarías una WhatsApp Business Account (WABA) registrada en Meta. Lo que el sandbox te permite hacer es usar una WABA temporal: ahora tendrás tu número en una lista de permitidos, con un número preestablecido que está vinculado a los servidores de Vonage.
Una vez configurado el número, puede desplazarse hacia abajo para ver un ejemplo de código cURL que le indica el número de remitente que debe utilizar:
Take note of the from number in this panel
Cuando creamos el archivo .env te darás cuenta de que hay tres variables que rellenar:
VONAGE_APPLICATION_ID=
VONAGE_PRIVATE_KEY_PATH=
VONAGE_FROM_NUMBER=Ahora deberíamos tener los tres. El número from se creó en el paso anterior, introduzca private.key como nuestra ruta (el código de la aplicación utiliza la función de ayuda de Laravel base_path() para determinar la ruta completa, de modo que si quisieras mover la clave a una estructura de directorios diferente, lo harías en forma relativa desde la raíz). Nuestro ID de aplicación puede pegarse desde el panel de Vonage cuando creamos una aplicación de Vonage.
No hay cosas de lujo como Vela o Rebaño aquí: sólo vamos a utilizar el servidor PHP incorporado que Laravel envuelve:
php artisan serveY deberíamos obtener la encantadora página de aterrizaje navegando a localhost:8000:
A Splash Screen for true Artisans
No tenemos ninguna manera de que los servidores de Vonage nos den webhooks de mensajes entrantes, así que para obtener una URL pública vamos a usar ngrok para mapear a nuestra aplicación Laravel en ejecución:
ngrok http 8000
Ngrok up and running
¡Ahora tienes una URL pública! La última parte de la configuración es crear nuestros webhooks, así que vuelve al Sandbox de mensajes en el panel de Vonage. Toma la URL pública que tenemos y agrega /webhooks/status y /webhooks/inbound a los campos correspondientes:
Configure your Webhooks here
Dirígete a localhost:8000/message y envíe un mensaje.
Hit Submit to watch the magic
Our sandbox is working as expected
Es hora de sumergirse en el código. Toda la lógica está en el archivo routes/web.php en lugar de en los controladores para simplificar las cosas. Dos rutas importantes para mirar conforman las partes esenciales de la aplicación. En primer lugar, la ruta de mensajes salientes:
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');
});
Este es el formulario y la solicitud POST cuando se envía el mensaje inicial. La única tarea de esta ruta es tomar el número ingresado en el formulario y enviar un mensaje de WhatsApp. Si te preguntas cómo enviamos esto a Vonage, la respuesta está en el SDK PHP de Vonage. El objeto SDK Client toma un objeto de credenciales (en este caso, una instancia de Keypair), al cual le pasamos en el constructor las variables de entorno Application ID y Private Key path que creamos anteriormente.
$credentials = new Keypair(file_get_contents(config('vonage.private_key_path')), config('vonage.application_id'));
$client = new Vonage\Client($credentials);Para obtener más información sobre cómo utilizar el SDK de PHP, consulte el Léame que ofrece ejemplos de uso de la Messages API. Para enviar un mensaje, creamos un objeto WhatsAppText, introducimos el número de destino y el número de sandbox from configurado anteriormente.
Antes de enviar el mensaje utilizando el cliente, hay un paso importante que es específico para nuestro caso de uso:
$client->messages()->getAPIResource()->setBaseUrl('https://messages-sandbox.nexmo.com/v1/messages');
Esta línea aquí utiliza la naturaleza desacoplada del SDK de PHP (todas las partes del SDK pueden ser reconfiguradas o intercambiadas) para sacar el objeto APIResource configurado en producción y sobreescribirlo con la URL sandbox. Así, todo lo que el cliente necesita hacer ahora es enviarlo:
$client->messages()->send($message);
La segunda parte consiste en codificar una ruta que escuche los webhooks entrantes provenientes de Vonage, que se activarán cada vez que alguien responda al hilo que creamos en el primer paso. Este es el punto final:
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);
});
Aquí extraemos los detalles que necesitamos para responder al mensaje, es decir, el número de teléfono al que responder y el número que enviaron como parte del mensaje. Con esta información, el número enviado se multiplica por un número aleatorio de entre 1 y 8 y enviamos una respuesta con la misma estructura que el mensaje inicial.
Y ahí lo tenemos: ¡formas de interactuar usando WhatsApp en Vonage! Como puedes imaginar, este tipo de configuración es ideal para chatbots automatizados como una línea de ayuda, pero ¿qué vas a construir tú? Cuéntanoslo en Slack de la comunidad de Vonage, rcada en X, antes conocido como Twitter. o ponte en contacto conmigo en Mastodon.
Compartir:
Actor de formación con una disertación sobre la comedia, llegué al desarrollo de PHP a través de la escena de las reuniones. Puedes encontrarme hablando y escribiendo sobre tecnología, o tocando/comprando discos raros de mi colección de vinilos.