Black Friday: crie uma ferramenta automatizada para enviar RCS com PHP

Quer inovar nas estratégias de Black Friday? Saiba como criar uma ferramenta automatizada para enviar RCS usando PHP.

A Black Friday já se consolidou como uma data importante para atrair novos consumidores para os negócios. Por isso, para esse período, é tão relevante pensar em ferramentas que possam agilizar processos. Como é o caso de ferramentas automatizadas. Em outra ocasião, falamos sobre como utilizar bots para decolar as vendas na Black Friday. Aqui, vamos mostrar como é possível criar uma para enviar mensagens RCS com PHP e a API da ZENVIA.

Por meio da plataforma ZENVIA, temos a possibilidade de integrar a API de envio de mensagens RCS, criando grandes possibilidades para o uso neste fim de ano.

A seguir, vamos exemplificar o uso da API de Mensagens RCS da ZENVIA, utilizando PHP e banco de dados MySQL, criando uma ferramenta que permite o envio de mensagens RCS para uma lista de clientes cadastrados. Confira!

Iniciando na plataforma ZENVIA

Para testes em Sandbox na plataforma ZENVIA, crie uma conta. Após o login, o acesso será liberado. Na tela inicial, navegue seguindo este fluxo Solutions > Sandbox. Clique em create a new e seleciona a opção RCS.

Você será redirecionado para uma tela de testes. Adicione seu número e clique em Send mensages. A partir deste momento, será enviada uma mensagem RCS para este número. 

Para criar um canal de conexão através da mensagem enviada, clique em accept. Agora é possível a troca de mensagens utilizando a API da ZENVIA.

Após configurar o canal, volte para o menu de produto e acesse Tokens e Webhooks. Clique em Create New e adicione o token. Logo após, você será redirecionado para a listagem de tokens e webhooks do Sandbox:

Vamos precisar da palavra-chave e do token para integrarmos com a API.

Iniciando o desenvolvimento da aplicação

Neste tutorial, vamos desenvolver uma aplicação que permite o cadastro de clientes em uma base de dados e permitir o envio de mensagens RCS com notificações, utilizando a da API da ZENVIA. Neste exemplo, vamos automatizar o envio de mensagens para uma lista de contatos, notificando sobre novas promoções, cupons de descontos e outros tipos de vantagens e chamativos.

Criando a aplicação em PHP

Para o desenvolvimento desta aplicação será necessário ter instalado o interpretador do PHP, um servidor web (apache, ngnix) e também o banco de dados MySQL.

Configurando o banco de dados

1. Abaixo está disponível o schema de banco de dados. Crie o banco utilizando o nome store_db como o seguinte schema.

-- store_db.customers definition
 
CREATE TABLE `customers` (
 `id` int(11) NOT NULL AUTO_INCREMENT,
 `name` varchar(255) NOT NULL,
 `lastname` varchar(255) NOT NULL,
 `phone` varchar(255) NOT NULL,
 `email` varchar(255) NOT NULL,
 `created_at` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP,
 `updated_at` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP,
 PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=33 DEFAULT CHARSET=latin1;

1.1. Com o banco de dados criado, será necessário fazer a conexão. Crie uma pasta com o nome database e, dentro dela, um arquivo chamado connect.php. Adicione as instruções abaixo, com suas credenciais do banco de dados:


<?php $connect = mysqli_connect("172.17.0.2", "root", "root", "store_db");

Criando as páginas da aplicação

Para criar nossas páginas web, vamos utilizar o Bootstrap 4. Com este framework, podemos simplificar a estilização e também a criação de alguns componentes.

1. Crie uma pasta chamada includes e adicione dois arquivos o header.php e o footer.php. Isolando estes componentes, podemos replicá-los em todas as paginas do projeto. 

Em header.php adicione o seguinte código. No header, os importes para utilizar o Bootstrap 4 já estarão disponíveis!

<!doctype html>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   
<html lang="en">
 <head>
   <!-- Required meta tags -->
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1,
     shrink-to-fit=no">
 
   <!-- Bootstrap CSS -->
   <link rel="stylesheet"
   <!-- importação do CDN do Bootstrap -->
href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
     crossorigin="anonymous">
   <title>Cadastrar Clientes</title>
 </head>
 <body>
   <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    
     <a class="navbar-brand" href="#">ZENVIA STORE</a>
     <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
       <span class="navbar-toggler-icon"></span>
     </button>
    
     <div class="collapse navbar-collapse d-flex flex-row-reverse" id="navbarNav">
       <ul class="nav navbar-nav mr-sm-2">
         <li><a class="nav-link" href="send-messages.php">Enviar Mensagens RCS</a></li>
         <li><a class="nav-link" href="customers.php">Listar Clientes</a></li>
         <li><a class="nav-link" href="index.php">Adicionar Clientes</a></li>
       </ul>
     </div>
   </nav>
   <div class="container">

Em footer.php, adicione o seguinte exemplo de código:

</div>
 
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
 integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
 crossorigin="anonymous"></script>
<script
 src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
 integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
 crossorigin="anonymous"></script>
<script
 src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
 integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
 crossorigin="anonymous"></script>
 <script src=
 "https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
 </script>
 <script src="./js/script.js"></script>
</body>
</html>

Realizando o cadastro e listagem de clientes

1. Vamos criar uma página chamada customers.php. Esta página será o formulário para cadastrar os clientes na base:

<?php include("includes/header.php") ?>
 <div class="row">
   <div class="col-md-12 mt-5">
     <h1 class="text-center">Cadastrar Cliente</h1>
     <br />
   </div>
 </div>
 <div class="row">
   <div class="col-md-5 mx-auto">
     <form action="customer-form.php">
       <div class="form-group"> 
         <label for="">Name</label>
         <input type="name" name="name" class="form-control">
       </div>
       <div class="form-group">
         <label for="">Sobrenome</label>
         <input type="text" name="lastname" class="form-control">
       </div>
       <div class="form-group">
         <label for="">Celular.</label>
         <input type="text" name="phone" class="form-control"
           placeholder="(99) 99999 - 9999">
       </div>
       <div class="form-group">
         <label for="">Email</label>
         <input type="email" name="email" class="form-control">
       </div>
       <div class="form-group">
         <button type="submit" name="submit" class="btn btn-primary">Submit</button>
       </div>
     </form>
   </div>
 </div>
<?php include("includes/footer.php") ?>

1.1. Para receber os dados do formulário, vamos criar uma página chamada customer-form.php, com o seguinte código.

<?php include("includes/header.php") ?>
<?php include("database/connect.php") ?>
<?php
 
//função para cadastrar o cliente no banco
 function createCustomer($connect, $name, $lastname, $phone, $email) {
   $query = "INSERT INTO store_db.customers (name, lastname, phone, email) values ('{$name}', '{$lastname}','{$phone}', '{$email}')";
 
   return mysqli_query($connect, $query);
 };
 
 $name = $_GET["name"];
 $lastname = $_GET["lastname"];
 $phone = $_GET["phone"];
 $email = $_GET["email"];
?>
 
<?php if(createCustomer($connect, $name, $lastname, $phone, $email)) { ?>
 <div class="row">
   <div class="col-md-5 mx-auto p-5">
     <p class="alert-success"> Cliente <?= $name; ?> <?= $lastname; ?> adicionado com sucesso!</p>
   </div>
   <?php } else { ?>
     <div class="col-md-5 mx-auto p-5">
     <p class="alert-danger"> Cliente não cadastrado</p>
   </div>
   <?php } ?>
 </div>
<?php include("includes/footer.php") ?>

1.2. Agora é possível cadastrar os clientes no banco de dados. Adicione mais uma página com o nome customer.php, com o código de exemplo abaixo:

<?php include("includes/header.php") ?>
<?php include("database/connect.php") ?>
 
<div class="row">
 <div class="col-md-12 mt-5">
   <h1 class="text-center">CLIENTES CADASTRADOS</h1>
   <hr style="height: 1px;color: gray;background-color: gray;">
 </div>
</div>
<div class="d-flex flex-row-reverse mb-2">
 <a href="index.php" class="btn btn-success ml-2">Novo cliente</a>
 <a href="send-messages.php" class="btn btn-primary">Enviar Mensagens RCS</a>
</div>
<div class="row">
 <div class="col-md-12">
   <table class="table">
     <thead>
       <tr>
         <th>ID</th>
         <th>Name</th>
         <th>Sobrenome</th>
         <th>Celular</th>
         <th>Email</th>
       </tr>
     </thead>
     <tbody>
 
     <?php
          
       if(isset($_GET['delete']))
       {
         $id=$_GET['delete'];
    
         $sql_query="DELETE FROM store_db.customers WHERE id=".$id;
         mysqli_query($connect, $sql_query);
       }  
 
       $customers = mysqli_query($connect, "SELECT * FROM store_db.customers");
 
       while ($customer = mysqli_fetch_assoc($customers)) {
     ?>
       <tr>
         <td> <?php echo $customer['id'] ?></td>
         <td> <?php echo $customer['name'] ?></td>
         <td> <?php echo $customer['lastname'] ?></td>
         <td> <?php echo $customer['phone'] ?></td>
         <td> <?php echo $customer['email'] ?></td>
         <td>
           <a href="customers.php?delete=<?php echo $customer['id'] ?>"
             class="badge badge-danger">Delete</a>
         </td>
       </tr>
       <?php } ?>
     </tbody>
   </table>
 </div>
</div>
<?php include("includes/footer.php") ?>

1.3. Para cadastrar um cliente, abra a página de cadastro de clientes no navegador, preencha os dados e logo após, clique em submit. Retornando na página listar Clientes é possível visualizar o cliente cadastrado.

Enviando mensagens RCS

1. Vamos criar um arquivo chamado customer-json.php. Nele, vamos listar todos os clientes cadastrados em formato json. Adicione o seguinte código:

1.1. Crie uma pasta chamada js e crie um arquivo chamado script.js, adicionando o exemplo de código abaixo:

$(document).ready(function() {
 $("button").click(function() {
     var x = $("#form-message").serializeArray();
     $.each(x, function(i, field) {
       const URL = "https://api.zenvia.com/v2/channels/rcs/messages"
	
     fetch('customers-json.php').then(res => res.json())
       .then(response => {
           response.forEach(item => {
           const body = JSON.stringify({
             from:"troubled-lemur",
             to: item.phone,
             contents:[{
               type:"text",
               text: field.value
           }]})
          
           fetch(URL, {
             method:"post",
             headers: {
               'Content-Type': 'application/json',
               'X-API-TOKEN':'<seu_token>'
             },
             body: body
           }).catch(function(err){
             console.error("Não foi possível achar a informação", err)
           })
         })
       })
     });
   });
 });

1.2. Vamos criar mais um formulário, que utilizaremos para enviar mensagem RCS:

<?php include("includes/header.php") ?>
<?php include("database/connect.php") ?>
 <div class="row">
   <div class="col-md-12 mt-5">
     <h1 class="text-center">Enviar Mensagem RCS</h1>
     <br />
   </div>
 </div>
 <div class="row">
   <div class="col-md-5 mx-auto">
     <form id="form-message">
       <div class="form-group">
         <label for="">Mensagem</label>
         <textarea name="message" id="" cols="" rows="3"
           class="form-control"></textarea>
       </div>
       <div class="form-group">
         <button type="submit" name="submit" class="btn btn-primary">Submit</button>
       </div>
     </form>
   </div>
 </div>
<div id="output"></div>
<?php include("includes/footer.php") ?>

1.3. Preencha o formulário enviando as mensagens para os clientes cadastrados. Para todos os clientes cadastrados no banco de dados, uma mensagem será enviada. Exemplo abaixo:

Também recomendamos mais leituras e tutoriais que podem trazer insights importantes para a sua Black Friday:

Para finalizar, quer saber mais sobre as possibilidades das mensagens RCS? Conheça mais o potencial do RCS na página da ZENVIA

*Diego Rodrigues Gonçalves é Analista de Integração Sr na ZENVIA | LinkedIn

Categorias:
Escrito por

Diego Rodrigues Gonçalves

Leia também

Fique por dentro e confira as nossas dicas sobre o mercado mobile e interação digital.