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.
Présentation du service d'assistance Laravel Vonage
Le plus grand changement que nous observons dans les applications web est l'exigence de communications multicanaux. Il ne suffit plus que votre site de commerce électronique ait seulement Il ne suffit plus que votre site de commerce électronique dispose d'une page "Contactez-nous", où vous pouvez envoyer un courrier électronique tout en disposant d'une fenêtre contextuelle de messagerie semi-instantanée comme Hotjar. Désormais, vous pouvez choisir d'être en avance sur la courbe en changeant ou en promouvant le moyen par lequel vous communiquez avec vos clients ; par exemple, une conversation par courrier électronique peut être remplacée par un chat WhatsApp en direct, ou par des files d'attente d'appels vocaux automatisés qui se connectent avec de vrais agents (humains).
Il est temps de montrer comment ces canaux fonctionnent, alors sans plus attendre (pour mes développeurs PHP), j'aimerais vous présenter Le service d'assistance de Vonage. Dans cet article, je vous montrerai comment l'activer localement et comment l'aspect SMS de l'application fonctionne pour commencer.
Il y a quelque temps, nous avions une application web conceptuelle appelée Deskmo. Il s'agit d'une nouvelle réinterprétation de ce concept : une application web qui sera lentement construite au fil du temps pour inclure les meilleures pratiques pour travailler avec les API de Vonage et des démonstrations de code PHP moderne.
Vonage Helpdesk est une application web PHP construite en Laravel 9. Elle utilise les fonctionnalités de Laravel Sail de Laravel pour la portabilité, ce qui vous permet d'avoir une application entièrement Dockerisée (adieu les dépendances au niveau du système !) qui utilise les bases de données MySQL comme base de données.
Une machine Windows, Linux ou Mac qui peut exécuter Docker v20+ (la version actuelle)
PHP v8.0+
npm v8.5+
Tout d'abord, nous devons télécharger le dépôt. Tapez ce qui suit dans la ligne de commande :
Maintenant, nous devrions avoir l'application dans un nouveau dossier. Ensuite, nous installons les dépendances PHP. Pour ce faire, naviguez dans le dossier (i.e.., cd sample-messages_voice-php-helpdesk) et en lançant Composer :
Laravel Sail devrait avoir été ajouté dans le dossier vendor Ainsi, à condition que Docker soit installé, vous pouvez exécuter la commande suivante pour démarrer l'application :
Ensuite, nous devons exécuter les migrations de la base de données :
Notre application a besoin d'un super utilisateur pour se connecter, c'est pourquoi nous exécutons l'alimentateur de base de données :
Parce que l'application utilise l'échafaudage Laravel Breeze pour l'authentification, nous aurons besoin d'exécuter l'application Vite en dehors de vos conteneurs Docker pour compiler votre JavaScript (il est maintenant livré avec Laravel préconfiguré). Pour exécuter Vite, ouvrez un nouveau terminal dans votre dossier d'application et exécutez ce qui suit :
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.
Afin de connecter l'application aux serveurs de Vonage, nous aurons besoin d'un tunnel pour notre application. Vous pouvez le faire en utilisant ngrokun petit outil très pratique pour faire cela. Il est également intéressant de noter qu'il existe un outil écrit en PHP par Beyond Code appelé Expose qui fait la même chose, et qui vaut le coup d'œil.
Lancez le processus Ngrok comme suit :
Vous devriez obtenir une nouvelle URL pour accéder à votre application. La dernière chose à faire ici est de configurer vos clés - naviguez vers votre tableau de bord Vonage, créez une nouvelle application et activez les SMS. Une fois cela fait, vous pouvez indiquer à Vonage où les données entrantes doivent être acheminées : dans ce cas, vers notre application locale. Modifiez votre application dans le tableau de bord, afin de pouvoir ajouter l'adresse de rappel pour votre appli locale. Le formulaire doit ressembler à ceci :
L'important ici est d'utiliser votre URL Ngrok, suivie de tickets/webhookqui est une route définie dans l'application Laravel. Vous devrez également acheter un numéro Vonage pour le raccorder à l'application nouvellement créée.
OK, nous devrions tous être prêts. Ouvrez un navigateur et naviguez vers localhost et avec un peu de chance, vous devriez voir l'écran de démarrage :
Alors, qu'avons-nous ? Le service d'assistance de Vonage émule un système de billetterie où les clients ont tous un Account et peuvent créer un ticket, en choisissant le moyen de communication de leur choix. Les administrateurs peuvent ensuite consulter les tickets et y répondre. L'application prend le numéro de téléphone fourni par l'utilisateur et l'utilise pour les réponses de l'administrateur du côté de l'application Web.
Vous pouvez maintenant vous connecter en tant que superutilisateur (l'utilisateur initial est admin@vonage.com et le mot de passe est password - hey, c'est un concept d'application, alors n'hésitez pas à le changer pour un mot de passe pas trop mauvais !) Nous avons maintenant besoin d'un nouvel utilisateur "client".
Sur l'écran de démarrage, cliquez sur le lien en haut à droite pour vous enregistrer. Nous allons étudier les interactions par SMS et nous choisirons donc "SMS" comme méthode de communication. Veillez à sélectionner un numéro de téléphone fonctionnel.
Connectez-vous avec vos nouveaux détails et vous devriez voir le tableau de bord :
OK ! Il est temps de créer un nouveau ticket. Cliquez sur "Nouveau ticket" et remplissez les détails comme suit :
Pour référence, In-App Messaging permet d'utiliser l'API Conversation API pour la messagerie en temps réel, ce que nous ne faisons pas dans cet article, donc ne cochez pas cette case. Une fois que vous avez créé le ticket, après avoir cliqué sur soumettre, vous serez dirigé vers le nouveau ticket :
Succès ! Rien ne s'est passé sur le canal de communication, puisque vous êtes le créateur du ticket. Mais c'est en vous connectant en tant qu'administrateur pour répondre au ticket que la magie opère. Vous remarquerez que l'entrée du ticket comporte web sur l'entrée du ticket : c'est là que nos communications multicanal entrent en jeu. Dans le cas de ce chat par SMS, si l'administrateur répond, la réponse sera envoyée à l'utilisateur par SMS, qui pourra alors y répondre à l'aide de son téléphone. Cependant, l'utilisateur peut également répondre via l'application web. Nous sommes donc déjà en présence d'une communication multicanal.
Nous pouvons répondre au ticket si nous nous déconnectons et nous reconnectons en tant qu'administrateur.
C'est là que les choses deviennent intéressantes. Une fois que vous avez répondu, l'application vérifie quel canal de notification a été sélectionné pour ce ticket, puis notifie la réponse à l'utilisateur. L'utilisateur peut alors répondre par SMS. Et voilà : une conversation multicanal web et SMS !
Que fait donc le code ? Du point de vue de la base de données, nous avons des tables pour tickets, users, et ticket_entries, toutes reliées entre elles. Chaque ticket_entry contient une référence d'utilisateur et de ticket. Chaque mise à jour créée localement détermine d'abord s'il convient d'envoyer une notification :
$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 ligne importante ici est la comparaison : Je dois envoyer une notification s'il ne s'agit pas de mon billet. La méthode de notification est extraite de l'entrée du billet. S'il s'agit d'un SMS, il utilise l'intégration native de PHP Vonage SDK avec Laravel pour démarrer un nouveau client, autoconfiguré. Il utilise ensuite l'API Messages pour envoyer une notification SMS.
De l'autre côté, lorsque le client répond au texte, Vonage envoie un webhook à notre application et celle-ci le gère. IncomingSmsController s'en charge :
$ticket = $user->latestTicket();
$entry = new TicketEntry([
'content' => $request->text,
'channel' => 'sms',
]);
$entry->user()->associate($user);
$entry->ticket()->associate($ticket);
$entry->save();
Il a une limitation pour l'instant, en ce qu'il correspond au numéro de téléphone entrant pour tirer l'utilisateur, puis obtient le dernier billet. Mais la joie de cette application est...
Nous n'avons pas fini, loin s'en faut ! Gardez l'œil ouvert pour d'autres articles de la série au fur et à mesure que nous ajoutons des fonctionnalités Voice à l'aide de Deepgram, des mises à jour en temps réel à l'aide de Laravel Livewire, et l'élaboration de la suite de tests avec PEST.
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.