Compartilhar:
){kind=small}
Sou ator formado, com uma dissertação sobre stand-up comedy, e comecei a me dedicar ao desenvolvimento em PHP por meio dos encontros da comunidade. Você pode me encontrar dando palestras e escrevendo sobre tecnologia, ou ouvindo e comprando discos curiosos da minha coleção de vinil.
Apresentamos o Helpdesk Laravel Vonage
A maior mudança que estamos observando nas aplicações web é a necessidade de comunicações multicanais. Já não basta que seu site de comércio eletrônico tenha apenas uma página “Fale conosco”, onde é possível enviar e-mails e, ao mesmo tempo, ter um pop-up de mensagens quase instantâneas, como o Hotjar. Agora, você pode optar por estar à frente da concorrência, alterando ou promovendo o meio pelo qual se comunica com os clientes; um exemplo é a possibilidade de transferir uma conversa por e-mail para um chat ao vivo no WhatsApp ou para filas de chamadas de voz automatizadas que conectam o cliente a agentes reais (humanos).
É hora de mostrarmos como esses canais funcionam; então, sem mais delongas (para meus desenvolvedores PHP), gostaria de apresentar o Helpdesk da Vonage. Neste artigo, vou mostrar como executá-lo localmente e, em seguida, aprofundar como funciona a parte de SMS do aplicativo para darmos início ao assunto.
Há algum tempo, tínhamos um aplicativo web conceitual chamado Deskmo. Esta é uma nova reinterpretação desse projeto: um aplicativo web que será desenvolvido gradualmente ao longo do tempo para incluir as melhores práticas para trabalhar com as APIs da Vonage e demonstrações de código PHP moderno.
O Vonage Helpdesk é um aplicativo web em PHP desenvolvido no Laravel 9. Ele utiliza o Sail do Laravel para garantir portabilidade, de modo que você tenha um aplicativo totalmente em Docker (adeus, dependências de nível de sistema!) que usa MySQL como banco de dados.
Um computador com Windows, Linux ou Mac capaz de executar o Docker v20+ (a versão atual)
PHP v8.0 ou superior
npm v8.5 ou superior
Primeiro, precisamos baixar o repositório. Digite o seguinte na linha de comando:
Agora, o aplicativo já deve estar em uma nova pasta. Em seguida, vamos instalar as dependências do PHP. Para isso, acesse a pasta (ou seja, cd sample-messages_voice-php-helpdesk) e executando o Composer:
O Laravel Sail deveria ter sido adicionado à vendor pasta; portanto, desde que você tenha o Docker instalado, pode executar o seguinte comando para iniciar o aplicativo:
Em seguida, precisamos executar as migrações do banco de dados:
Nosso aplicativo precisa que um superusuário faça login, por isso executamos o programa de preenchimento do banco de dados:
Como o aplicativo utiliza o scaffolding do Laravel Breeze para autenticação pronta para uso, precisaremos executar o servidor de desenvolvimento fora dos seus contêineres do Docker para compilar seu JavaScript (isso agora já vem pré-configurado com o Laravel). Para executar o Vite, abra um novo terminal na pasta da sua aplicação e execute o seguinte:
Para conectar o aplicativo aos servidores da Vonage, precisaremos de um túnel para o nosso aplicativo. Você pode fazer isso usando ngrok, uma ferramenta bacana feita exatamente para isso. Também vale a pena mencionar que existe, na verdade, uma ferramenta escrita em PHP da Beyond Code chamada Expose , que faz a mesma coisa; vale muito a pena dar uma olhada.
Inicie o processo do Ngrok da seguinte maneira:
Você deve receber uma nova URL para fazer o tunelamento para o seu aplicativo. A última coisa a fazer aqui é configurar suas chaves — acesse o painel do Vonage, crie um novo aplicativo e habilite o SMS. Depois de fazer isso, você pode informar ao Vonage para onde os dados recebidos devem ser encaminhados: neste caso, de volta para o nosso aplicativo local. Edite seu aplicativo no painel de controle para adicionar o endereço de retorno de chamada do seu aplicativo local. O formulário deve ficar assim:
O importante aqui é usar sua URL do Ngrok, seguida de tickets/webhook, que é uma rota definida na aplicação Laravel. Você também precisará adquirir um número da Vonage para conectá-lo à aplicação recém-criada.
OK, acho que já está tudo pronto. Abra um navegador e acesse localhost e, se tudo correr bem, você deverá ver a tela inicial:
Então, o que temos aqui? O Helpdesk da Vonage funciona como um sistema de tickets, no qual todos os clientes possuem um Account e podem criar um ticket, escolhendo o meio de comunicação de sua preferência. Os administradores podem, então, visualizar os tickets e respondê-los. O aplicativo utilizará o número de telefone fornecido pelos usuários para as respostas aos tickets enviadas pelo administrador no aplicativo web.
Você pode fazer login agora como superusuário (o usuário predefinido é admin@vonage.com e a senha é password — ei, é um aplicativo conceitual, então, por favor, mude-a para uma senha que não seja péssima!). Agora precisamos de um novo usuário “cliente”.
Na tela inicial, clique no link no canto superior direito para se cadastrar. Como vamos analisar interações por SMS, vamos escolher “SMS” como método de comunicação. Certifique-se de selecionar um número de telefone válido.
Agora faça login com seus novos dados e você deverá ver o painel:
OK! É hora de criar um novo ticket. Clique em “Novo Ticket” e preencha os detalhes da seguinte forma:
A título de referência, In-App Messaging é para usar a Conversation API para mensagens em tempo real, o que não faremos neste artigo; portanto, deixe essa opção desmarcada. Depois de criar o ticket, ao clicar em “Enviar”, você será redirecionado para o novo ticket:
Sucesso! Nada aconteceu pelo canal de comunicação, já que você é quem criou o ticket. Mas é ao fazer login como administrador para responder ao ticket que a mágica acontece. Você vai perceber que a entrada do ticket tem web nela: é aí que entra nossa comunicação multicanal. Para esse chat por SMS, se o administrador responder, a resposta será enviada ao usuário por SMS, e ele poderá responder usando o celular. No entanto, o usuário poderia também responder pelo aplicativo web também. Portanto, já estamos operando em múltiplos canais.
Podemos responder ao ticket se sairmos da conta e entrarmos novamente como administrador.
É aqui que as coisas ficam interessantes. Assim que você responder, o aplicativo verifica qual canal de notificação foi selecionado para esse ticket e, em seguida, notifica o usuário sobre a resposta. O usuário pode então responder por SMS. E pronto: uma conversa multicanal pela web e por SMS!
Então, o que esse código está fazendo? No que diz respeito ao banco de dados, temos tabelas para tickets, users, e ticket_entries, todas interligadas. Cada ticket_entry contém uma referência ao usuário e ao ingresso. Cada atualização criada localmente verifica primeiro se deve enviar uma notificação:
$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);
}
O ponto importante aqui é a comparação: preciso enviar uma notificação caso não seja o meu ticket. Ele extrai o método de notificação do registro do ticket. Se for por SMS, ele usa a integração nativa do SDK do Vonage para PHP com o Laravel para iniciar um novo cliente, configurado automaticamente. Em seguida, usa a Messages API para enviar uma notificação por SMS.
Por outro lado, quando o cliente responde à mensagem, a Vonage envia um webhook para nosso aplicativo e o IncomingSmsController aplicativo processa a resposta:
$ticket = $user->latestTicket();
$entry = new TicketEntry([
'content' => $request->text,
'channel' => 'sms',
]);
$entry->user()->associate($user);
$entry->ticket()->associate($ticket);
$entry->save();
Por enquanto, ela tem uma limitação: identifica o usuário com base no número de telefone de quem está ligando e, em seguida, busca o ticket mais recente. Mas o que torna esse aplicativo tão legal é que...
Ainda estamos longe de terminar! Fique de olho nos próximos artigos da série à medida que formos adicionando novos recursos ao aplicativo, incluindo funcionalidades de Voice com o Deepgram, atualizações em tempo real com o Laravel Livewire e a criação do conjunto de testes com o PEST.
Compartilhar:
Sou ator formado, com uma dissertação sobre stand-up comedy, e comecei a me dedicar ao desenvolvimento em PHP por meio dos encontros da comunidade. Você pode me encontrar dando palestras e escrevendo sobre tecnologia, ou ouvindo e comprando discos curiosos da minha coleção de vinil.