Einführung in den Laravel Vonage Helpdesk

Die größte Veränderung, die wir bei Web Applications beobachten, ist die Forderung nach einer Multi-Channel-Kommunikation. Es reicht nicht mehr aus, wenn Ihre E-Commerce-Website nur Es reicht nicht mehr aus, dass Ihre E-Commerce-Website nur eine "Kontakt"-Seite hat, an die Sie eine E-Mail senden können, und gleichzeitig einen Popup-Sofortnachrichtendienst wie Hotjar anbietet. Jetzt können Sie der Zeit voraus sein, indem Sie das Medium, über das Sie mit Ihren Kunden kommunizieren, ändern oder fördern. Ein Beispiel dafür ist, dass eine E-Mail-Konversation in einen Live-Chat über WhatsApp oder in automatisierte Voice-Call-Warteschlangen umgewandelt werden kann, die mit echten (menschlichen) Agenten verbunden sind.

Es ist an der Zeit, dass wir zeigen, wie diese Kanäle funktionieren, also möchte ich Ihnen ohne weiteres (für meine PHP-Entwickler) Folgendes vorstellen Der Vonage-Helpdesk. In diesem Artikel zeige ich Ihnen, wie Sie ihn lokal starten können, und gehe dann darauf ein, wie der SMS-Aspekt der App funktioniert, um den Anfang zu machen.

Was ist der Vonage Helpdesk?

Vor einiger Zeit hatten wir eine Konzept-Webanwendung namens Deskmo. Dies ist eine Neuinterpretation davon: eine Webanwendung, die nach und nach aufgebaut wird und bewährte Praktiken für die Arbeit mit Vonage-APIs und Demonstrationen von modernem PHP-Code enthält.

In welcher Sprache ist sie geschrieben?

Vonage Helpdesk ist eine PHP-Webanwendung, die in Laravel 9. Sie verwendet Laravel's Sail für die Portabilität, so dass Sie eine vollständig Dockerisierte Anwendung haben (auf Wiedersehen, Abhängigkeiten auf Systemebene!), die MySQL als Datenbank verwendet.

Installation von

Anforderungen

• Ein Windows-, Linux- oder Mac-Rechner, auf dem Docker v20+ (die aktuelle Version) ausgeführt werden kann

• PHP v8.0+

• NodeJS v17+

• npm v8.5+

• Komponist v2+

• Git installiert

• Ein Vonage Account mit Guthaben

Als Erstes müssen wir das Repository herunterladen. Geben Sie das Folgende in die Befehlszeile ein:

Jetzt sollte sich die Anwendung in einem neuen Ordner befinden. Als Nächstes installieren wir die PHP-Abhängigkeiten. Navigieren Sie dazu in den Ordner (d.h., cd sample-messages_voice-php-helpdesk) und Composer ausführen:

Laravel Sail sollte in den Ordner vendor hinzugefügt werden. Wenn Sie also Docker installiert haben, können Sie den folgenden Befehl ausführen, um die Anwendung zu starten:

Migrationen, Sämaschinen und Vite

Als Nächstes müssen wir die Datenbankmigrationen durchführen:

Unsere Anwendung benötigt einen Superuser, um sich anzumelden, also starten wir den Datenbank-Seeder:

Da die Anwendung das Laravel Breeze-Gerüst für die Authentifizierung verwendet, müssen wir die Vite Entwicklungsserver außerhalb Ihres Docker-Containers ausführen, um Ihr JavaScript zu kompilieren (Laravel ist bereits vorkonfiguriert). Um Vite auszuführen, öffnen Sie ein neues Terminal in Ihrem Anwendungsordner und führen Sie Folgendes aus:

Vonage API-Konto

Um dieses Tutorial durchzuführen, benötigen Sie ein Vonage API-Konto. Wenn Sie noch keines haben, können Sie sich noch heute anmelden und mit einem kostenlosen Guthaben beginnen. Sobald Sie ein Konto haben, finden Sie Ihren API-Schlüssel und Ihr API-Geheimnis oben auf dem Vonage-API-Dashboard.

Sind Sie bereit, mit dem Bau zu beginnen?

Erleben Sie nahtlose Konnektivität, Echtzeit-Messaging und kristallklare Sprach- und Videoanrufe - alles auf Knopfdruck.

Verbinden Sie die App über. Ngrok

Um die Anwendung mit den Servern von Vonage zu verbinden, benötigen wir einen Tunnel zu unserer Anwendung. Dies können Sie mit Hilfe von ngrokverwenden, einem netten kleinen Tool, das genau das tut. Es ist auch erwähnenswert, dass es tatsächlich ein in PHP geschriebenes Tool von Beyond Code namens Expose das das Gleiche tut, also einen Blick wert.

Starten Sie den Ngrok-Prozess wie folgt:

Sie sollten eine neue URL zurückerhalten, um sich in Ihre Anwendung zu tunneln. Als Letztes müssen Sie nun Ihre Schlüssel einrichten - gehen Sie zu Ihrem Vonage-Dashboard, erstellen Sie eine neue Anwendung und aktivieren Sie SMS. Danach können Sie Vonage mitteilen, wohin eingehende Daten weitergeleitet werden sollen: in diesem Fall zurück zu unserer lokalen Anwendung. Bearbeiten Sie Ihre Anwendung im Dashboard, damit Sie die Rückrufadresse für Ihre lokale Anwendung hinzufügen können. Das Formular sollte wie folgt aussehen:

Wichtig ist hier, dass Sie Ihre Ngrok-URL verwenden, gefolgt von tickets/webhookdie eine in der Laravel-Anwendung definierte Route ist. Sie müssen auch eine Vonage-Nummer erwerben, um sie mit der neu erstellten Anwendung zu verbinden.

OK, wir sollten alle bereit sein. Öffnen Sie einen Browser und navigieren Sie zu localhost und hoffentlich sollten Sie den Startbildschirm sehen:

Das Ticket-System

Also, was haben wir? Der Vonage Helpdesk emuliert ein Ticket-System, bei dem alle Kunden einen Account haben und ein Ticket erstellen können, indem sie ein Kommunikationsmedium ihrer Wahl wählen. Die Administratoren können dann die Tickets einsehen und darauf antworten. Die Anwendung übernimmt die von den Benutzern angegebene Telefonnummer und verwendet diese für die Beantwortung von Anfragen durch den Administrator auf der Seite der Webanwendung.

Wie macht sie das? Teil 1: SMS

Sie können sich jetzt als Superuser anmelden (der gesetzte Benutzer ist admin@vonage.com und das Passwort lautet password - Hey, es ist eine Konzeptanwendung, also ändern Sie es unbedingt in ein nicht allzu schlechtes Passwort!). Jetzt brauchen wir einen neuen "Kunden"-Benutzer.

Navigieren Sie auf dem Startbildschirm zum Link oben rechts, um sich zu registrieren. Da wir uns mit SMS-Interaktionen befassen werden, wählen wir "SMS" als Kommunikationsmethode. Stellen Sie sicher, dass Sie eine funktionierende Telefonnummer auswählen.

Melden Sie sich nun mit Ihren neuen Daten an, und Sie sollten das Dashboard sehen:

OK! Es ist Zeit, ein neues Ticket zu erstellen. Klicken Sie auf "Neues Ticket" und geben Sie die Details wie folgt ein:

Als Referenz, In-App Messaging ist für die Verwendung der Conversation API für Echtzeit-Nachrichten zu verwenden, was wir in diesem Artikel nicht tun, also lassen Sie das Häkchen weg. Sobald Sie das Ticket erstellt haben und auf "Senden" klicken, werden Sie zu dem neuen Ticket weitergeleitet:

Erfolg! Über den Kommunikationskanal ist nichts passiert, da Sie das Ticket erstellt haben. Aber wenn Sie sich als Administrator anmelden, um auf das Ticket zu antworten, kommt die Magie ins Spiel. Sie werden feststellen, dass der Ticketeingang mit web steht: Hier kommt unsere Multichannel-Kommunikation ins Spiel. Bei diesem SMS-Chat wird die Antwort des Administrators per SMS an den Benutzer gesendet, der daraufhin mit seinem Telefon antworten kann. Der Benutzer kann aber auch auch auch über die Webanwendung antworten. Wir sind also bereits mehrkanalig.

Wir können auf das Ticket antworten, wenn wir uns abmelden und erneut als Administrator anmelden.

An dieser Stelle wird es interessant. Sobald Sie antworten, prüft die Anwendung, welcher Benachrichtigungskanal für dieses Ticket ausgewählt wurde, und benachrichtigt dann den Benutzer über die Antwort. Der Benutzer hat dann die Möglichkeit, per SMS zu antworten. Und schon haben wir es geschafft: eine Multikanal-Konversation über Web und SMS!

Unter der Haube

Was macht der Code also? Datenbanktechnisch haben wir Tabellen für tickets, users, und ticket_entries, die alle miteinander verdrahtet sind. Jede ticket_entry enthält eine Benutzer- und Ticketreferenz. Bei jeder lokal erstellten Aktualisierung wird zunächst geprüft, ob eine Benachrichtigung verschickt werden soll:

        $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);
            }

Wichtig ist hier der Vergleich: Ich muss eine Benachrichtigung verschicken, wenn es nicht mein Ticket ist. Die Benachrichtigungsmethode wird aus dem Ticketeintrag entnommen. Wenn es eine SMS ist, verwendet es die native PHP Vonage SDK-Integration mit Laravel um einen neuen, automatisch konfigurierten Client zu starten. Dann wird die Messages API verwendet, um eine SMS-Benachrichtigung abzufeuern.

Am anderen Ende, wenn der Kunde auf den Text antwortet, sendet Vonage einen Webhook an unsere App und die IncomingSmsController bearbeitet ihn:

        $ticket = $user->latestTicket();

        $entry = new TicketEntry([
            'content' => $request->text,
            'channel' => 'sms',
        ]);

        $entry->user()->associate($user);
        $entry->ticket()->associate($ticket);
        $entry->save();
        

Es hat eine Einschränkung für jetzt, in dem es die eingehende Telefonnummer, um den Benutzer herausziehen, dann bekommt das letzte Ticket. Aber, die Freude an dieser App ist, was ist...

Nächstes Mal...

Wir sind noch lange nicht fertig! Halten Sie Ausschau nach weiteren Artikeln in dieser Serie, wenn wir die App erweitern, einschließlich Voice-Funktionen mit Deepgram, Echtzeit-Updates mit Laravel Livewire und dem Aufbau der Test-Suite mit PEST.