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.
Presentación del servicio de asistencia de Laravel Vonage
El mayor cambio que estamos observando en las aplicaciones web es la necesidad de comunicaciones multicanal. Ya no basta con que su sitio de comercio electrónico tenga sólo una página de "Contacto", en la que se puede enviar un correo electrónico y, al mismo tiempo, disponer de un mensajero semiinstantáneo emergente como Hotjar. Ahora, puede optar por adelantarse cambiando o promoviendo el medio por el que se comunica con los clientes; un ejemplo es que una conversación por correo electrónico puede cambiarse a un chat de WhatsApp en directo, o colas de llamadas de voz automatizadas que conectan con agentes reales (humanos).
Es hora de que demostremos cómo funcionan estos canales, así que sin más preámbulos (para mis desarrolladores de PHP), me gustaría presentarles a El servicio de asistencia de Vonage. En este artículo, te mostraré cómo iniciarlo localmente y luego cómo funciona el aspecto SMS de la aplicación para comenzar.
Hace algún tiempo, tuvimos una aplicación web conceptual llamada Deskmo. Esta es una nueva reinterpretación de eso: una aplicación web que se construirá lentamente con el tiempo para incluir las mejores prácticas para trabajar con las API de Vonage y demostraciones de código PHP moderno.
Vonage Helpdesk es una aplicación web PHP creada en Laravel 9. Utiliza la tecnología Sail para la portabilidad, por lo que tiene una aplicación totalmente Dockerizada (¡adiós, dependencias a nivel de sistema!) que utiliza MySQL como base de datos.
Un equipo Windows, Linux o Mac que pueda ejecutar Docker v20+ (la versión actual)
PHP v8.0+
npm v8.5+
En primer lugar, tenemos que descargar el repositorio. Escriba lo siguiente en la línea de comandos:
Ahora, deberíamos tener la aplicación en una nueva carpeta. A continuación, instalamos las dependencias de PHP. Para ello, navegar en la carpeta (es decir, cd sample-messages_voice-php-helpdesk) y ejecutando Composer:
Laravel Sail debería haberse añadido a la carpeta vendor por lo que, si tienes Docker instalado, puedes ejecutar el siguiente comando para arrancar la aplicación:
A continuación, tenemos que ejecutar las migraciones de bases de datos:
Nuestra aplicación necesita un superusuario para iniciar sesión, así que ejecutamos el seeder de la base de datos:
Debido a que la aplicación utiliza Laravel Breeze scaffolding para la autenticación, tendremos que ejecutar el comando Vite fuera de tus contenedores Docker para compilar tu JavaScript (ahora viene con Laravel preconfigurado). Para ejecutar Vite, abra un nuevo terminal en su carpeta de aplicaciones y ejecute lo siguiente:
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.
Para conectar la aplicación a los servidores de Vonage, necesitaremos un túnel para nuestra aplicación. Puedes hacer esto usando ngrokuna pequeña herramienta para hacer esto. También vale la pena señalar que en realidad hay una herramienta escrita en PHP de Beyond Code llamada Expose que hace lo mismo, así que vale la pena echarle un vistazo.
Inicie el proceso Ngrok así:
Deberías obtener una nueva URL para acceder a tu aplicación. Lo último que debes hacer aquí es configurar tus claves: ve a tu panel de Vonage, crea una nueva aplicación y habilita SMS. Una vez hecho esto, puedes indicarle a Vonage hacia dónde deben dirigirse los datos entrantes: en este caso, de vuelta a nuestra aplicación local. Edita tu aplicación en el panel para poder agregar la dirección de devolución de llamada para tu aplicación local. El formulario debería verse así:
La parte importante aquí es utilizar su URL Ngrok, seguido de tickets/webhookque es una ruta definida en la aplicación Laravel. También necesitarás comprar un número de Vonage para conectarlo a la aplicación recién creada.
Bien, ya deberíamos estar preparados. Abra un navegador y vaya a localhost y, con suerte, deberías ver la pantalla de inicio:
Entonces, ¿qué tenemos? El servicio de asistencia de Vonage emula un sistema de tickets en el que todos los clientes tienen una Account y pueden crear un ticket, eligiendo el medio de comunicación que prefieran. Luego, los administradores pueden ver los tickets y responderlos. La aplicación tomará el número de teléfono proporcionado por los usuarios y lo usará para responder a los tickets desde el administrador en el lado de la aplicación web.
Ya puedes conectarte como superusuario (el usuario sembrado es admin@vonage.com y la contraseña es password - Oye, es una aplicación conceptual, así que cámbiala por una contraseña que no sea horrible). Ahora necesitamos un nuevo usuario "cliente".
En la pantalla de inicio, dirígete al enlace superior derecho para registrarte. Vamos a estudiar las interacciones por SMS, así que elegiremos "SMS" como método de comunicación. Asegúrate de seleccionar un número de teléfono que funcione.
Ahora inicia sesión con tus nuevos datos y deberías ver el panel de control:
DE ACUERDO. Es hora de crear un nuevo ticket. Pulsa "Nuevo billete" y rellena los datos así:
Como referencia, In-App Messaging es para utilizar la Conversation API para mensajería en tiempo real, lo que no haremos en este artículo, así que no marque esta opción. Una vez creado el ticket, después de pulsar enviar se le llevará al nuevo ticket:
Éxito. No ha pasado nada por el canal de comunicación, ya que usted es el creador del ticket. Pero al entrar como administrador para responder al ticket es donde entra la magia. Observará que la entrada del ticket tiene web en ella: aquí es donde entran en juego nuestras comunicaciones multicanal. En el caso de este chat por SMS, si el administrador responde, se enviará al usuario por SMS, al que podrá responder utilizando su teléfono. Sin embargo, el usuario podría también responder a través de la aplicación web. Por lo tanto, ya somos multicanal.
Podemos responder al ticket si cerramos la sesión y volvemos a entrar como administrador.
Aquí es donde las cosas se ponen interesantes. Una vez que respondes, la aplicación comprueba qué canal de notificación se ha seleccionado para este ticket y notifica la respuesta al usuario. A continuación, el usuario puede responder por SMS. Y ya está: ¡una conversación multicanal por Internet y SMS!
¿Qué hace el código? En cuanto a la base de datos, tenemos tablas para tickets, usersy ticket_entriestodas conectadas entre sí. Cada ticket_entry contiene una referencia a un usuario y a un ticket. Cada actualización creada localmente determina primero si se debe enviar una notificación:
$validatedRequestData = $request->validate([
'content' => 'required',
'channel' => 'required'
]);
$ticketEntry = new TicketEntry([
'content' => $validatedRequestData['content'],
'channel' => $validatedRequestData['channel'],
]);
$ticketEntry->user()->associate(Auth::user());
$ticketEntry->ticket()->associate($ticket);
$ticketEntry->save();
$userTicket = $ticket->user()->get()->first();
// If this is not my ticket, I need to notify its creator
if ($userTicket->id !== Auth::id()) {
if ($userTicket->notification_method === 'sms') {
$sms = new SMSText(
$userTicket->phone_number,
config('vonage.sms_from'),
$ticketEntry->content
);
$client = app(Client::class);
$client->messages()->send($sms);
}
La línea importante aquí es la comparación: Necesito enviar una notificación si no es mi ticket. Extrae el método de notificación de la entrada del ticket. Si es SMS, utiliza la integración nativa PHP Vonage SDK con Laravel para iniciar un nuevo cliente, autoconfigurado. Luego utiliza la Messages API para enviar una notificación por SMS.
En el otro extremo, cuando el cliente responde al texto, Vonage envía un webhook a nuestra app y la IncomingSmsController lo maneja:
$ticket = $user->latestTicket();
$entry = new TicketEntry([
'content' => $request->text,
'channel' => 'sms',
]);
$entry->user()->associate($user);
$entry->ticket()->associate($ticket);
$entry->save();
Tiene una limitación por ahora, en que coincide con el número de teléfono entrante para sacar el usuario, a continuación, obtiene el último billete. Pero, la alegría de esta aplicación es lo que es...
Aún no hemos terminado, ¡ni mucho menos! Manténgase atento a más artículos de la serie a medida que añadimos a la aplicación, incluyendo las capacidades de Voice utilizando Deepgram, actualizaciones en tiempo real utilizando Laravel Livewire, y la construcción de la suite de pruebas con PEST.
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.