Configurar el Client
A continuación, configuremos el componente client.
El directorio del client contiene:
- El archivo index.html que contiene el código HTML para la aplicación front-end.
- El archivo main.css que contiene el código CSS para la aplicación front-end.
- El archivo main.js que contiene el código JavaScript.
- El archivo de configuración client-package.json.
Codificaremos index.html, main.css y main.js.
Copia los fragmentos de código proporcionados a continuación y pégalos en los archivos index.html, main.css y main.js respectivamente ubicados en el directorio client usando un IDE, luego guarda el archivo.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Catalyst Dialer App</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
<script src="main.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js">
</script>
<script type="text/javascript" src="//media.twiliocdn.com/sdk/js/client/v1.3/twilio.min.js">
</script>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.19.1/css/mdb.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" 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="main.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
</head>
<body onload="logButton()">
<center>
<h1 class="display-4">Catalyst Dialer App ☏</h1><br><br>
</center>
<div style="width: 200px;float: right; margin-right: 50px;"><label for="switchbutton" id="btntext"
class="btn btn-primary btn-block btn-outlined"></label>
<button id="switchbutton" style="display: none;"></button>
</div>
<center>
<div id="Dialer">
<br><br><br> <br><br>
<div class="form-outline">
<label for="phoneNumber">Customer Phone Number </label>
<input type="text" placeholder="(+91/Country Code)<112233445566>" name="phoneNumber" size="35"
id="phoneNumber">
<br><br><br>
<label for="salesNumber">Your Sales Phone Number </label>
<input type="text" placeholder="(+91/Country Code)<8899773366>" name="salesNumber" size="35"
id="salesNumber">
<br>
</div>
<br><br>
<button type="submit" id='call-customer-button' class="btn btn-success"
onclick="getFormDetails();return false;">Initiate Call</button>
<br><br>
<h2>
<p class="info" id='call-status'></p>
</h2>
</div>
</center>
<div id="CallLogs" style="display: none;">
<h1 class="display-6">Call Logs : </h1><br><br>
<p id="featData"></p>
<div id="loader" style="display: none;">
<div class="spinner-border" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>
</div>
</body>
</html>
body {
padding: 30px;
}
#loader {
width: 100px;
height: 100px;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
#dataTable {
font-family: Arial, Helvetica, sans-serif;
border-collapse: collapse;
width: 100%;
}
#dataTable td,
#dataTable th {
border: 1px solid #ddd;
padding: 8px;
}
#dataTable tr:nth-child(even) {
background-color: #f2f2f2;
}
#dataTable tr:hover {
background-color: #ddd;
}
#dataTable th {
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
background-color: rgb(76, 175, 170);
color: white;
}
//Para obtener números de teléfono del client, validar y realizar una llamada saliente
function getFormDetails() {
let data = {
phoneNumber: $('#phoneNumber').val(),
salesNumber: $('#salesNumber').val()
};
if (!validateData(data)) {
return false;
}
$.ajax({
url: "/server/dialer/makeCall",
method: "post",
dataType: 'json',
data: {
phoneNumber: data.phoneNumber,
salesNumber: data.salesNumber
}
}).done(function (data) {
alert("Call Initiated. You can check the details in Call Logs once the Call is completed");
console.log(data);
}).fail(function (error) {
alert(JSON.stringify(error));
});
}
//Para renderizar la página web de registros de llamadas
function logButton() {
document.getElementById("btntext").innerHTML = "View Call Logs";
document.getElementById('switchbutton').setAttribute('onclick', 'showCallLogs()');
}
//Para mostrar la pestaña de registros de llamadas en la aplicación
function showCallLogs() {
document.getElementById("btntext").innerHTML = "View Dialer";
$("#Dialer").hide();
$("#CallLogs").show();
document.getElementById('switchbutton').setAttribute('onclick', 'showDialer()');
loadLog();
}
//Para mostrar la pestaña del marcador en la aplicación
function showDialer() {
document.getElementById("btntext").innerHTML = "View Call Logs";
$("#Dialer").show();
$("#CallLogs").hide();
document.getElementById('switchbutton').setAttribute('onclick', 'showCallLogs()');
}
//Para validar el número de contacto de ventas y el número de móvil del cliente ingresados por el usuario
function validateData(data) {
var regex = "[+][0-9]+$";
if (data.phoneNumber.length === 0) {
alert('Customer Phone number cannot be empty');
return false;
}
if (!data.phoneNumber.startsWith('+')) {
alert('Customer Phone number must start with country code');
return false;
}
if (data.salesNumber.length === 0) {
alert('Sales Phone number cannot be empty');
return false;
}
if (!data.salesNumber.startsWith('+')) {
alert('Sales Phone number must start with country code');
return false;
}
if (!data.phoneNumber.match(regex)) {
alert('Enter a valid customer number');
return false;
}
if (!data.salesNumber.match(regex)) {
alert('Enter a valid sales number');
return false;
}
return true;
}
//Para renderizar los datos de la tabla en el lado del client
function renderTable(respData) {
console.log("respData");
console.log(respData);
debugger;
var col = [];
for (var i = 0; i < respData.length; i++) {
for (var key in respData[i]) {
if (col.indexOf(key) === -1) {
col.push(key);
}
}
}
var table = document.createElement("table");
table.classList.add("ca-table-view");
table.setAttribute('id', 'dataTable');
var tr = table.insertRow(-1);
for (var i = 0; i < col.length; i++) {
var th = document.createElement("th");
th.innerHTML = col[i];
tr.appendChild(th);
}
for (var i = 0; i < respData.length; i++) {
tr = table.insertRow(-1);
for (var j = 0; j < col.length; j++) {
var tabCell = tr.insertCell(-1);
tabCell.innerHTML = respData[i][col[j]];
}
}
debugger;
var divContainer = document.getElementById("featData");
divContainer.innerHTML = "";
divContainer.appendChild(table);
}
//Para almacenar los datos de registro de llamadas en las columnas apropiadas
function getRequiredData(data) {
var i;
var resp = [];
for (i = 0; i < data.length; i++) {
var gulp = {
"From Number": data[i].fromNumber,
"To Number": data[i].toNumber,
"Call Duration": data[i].callDuration,
"Call Status": data[i].callStatus,
"Time Of Call": data[i].timeOfCall,
"Called Country": data[i].calledCountry
}
resp.push(gulp);
}
console.log(resp);
return resp;
}
//Para obtener registros de llamadas llamando a la ruta /getLogs y renderizar los datos de registro en el client
function loadLog() {
$("#loader").show();
$.ajax({
url: "/server/dialer/getLogs",
method: "get"
}).done(function (data) {
$("#loader").hide();
var arr = [];
for (i = 0; i < data.length; i++) {
arr.push(data[i].CallLog);
}
var data = getRequiredData(arr);
renderTable(data);
}).fail(function (error) {
alert(JSON.stringify(error));
});
}
El directorio del client está ahora configurado. Repasemos rápidamente el funcionamiento de la función Advanced I/O de la aplicación:
-
validateData() - Tanto el número de contacto del equipo de ventas como el número del cliente se validan en esta función. La lógica está definida para verificar que los números de teléfono ingresados no sean una cadena vacía, sigan el formato estándar de número de teléfono que contiene solo números y esté precedido por un símbolo ‘+’.
-
getFormdetails() - Esta función obtiene los detalles del número de teléfono del cliente y el número de la persona de ventas ingresados por el usuario. Los números de teléfono se validan llamando a la función validateData(). Al validar con éxito ambos números de teléfono, se realiza una llamada ajax a la ruta /makeCall. Inicia una llamada saliente desde el número de contacto del equipo de ventas al número de móvil del cliente y devuelve una respuesta al cliente una vez que se inicia la llamada.
-
getRequiredData() - Esta función se utiliza para establecer las columnas de los registros de llamadas con respecto a los datos de llamadas recuperados al consultar el DataStore en la ruta /getLogs.
-
renderTable() - Esta función obtiene los datos de la función getRequiredData() y los devuelve al cliente para mostrar los registros de llamadas.
-
showDialer() - Esta función se ejecuta al hacer clic en el botón ‘View Dialer’.
-
showCallLogs() - Esta función se ejecuta al hacer clic en el botón ‘View Call Logs’ y activa la función loadLog().
-
loadLog() - Esta función realiza una llamada ajax a la ruta /getLogs definida en la función Advanced I/O para recuperar los detalles de los registros de llamadas y mostrarlos en el cliente.
La función Advanced I/O define las siguientes API que realizan varias acciones:
-
/makeCall
Obtiene los datos del número de contacto del equipo de ventas y el número de teléfono del cliente de la función getFormDetails(). Inserta los detalles del número de teléfono en la tabla CallLog() en el DataStore. Se inicia una llamada saliente llamando a la API de voz de Twilio y también enviando las instrucciones TwiML definidas en la ruta /outbound como parte de la solicitud de la API.
-
/outbound/:salesNumber
Define las instrucciones TwiML enviadas a Twilio que se ejecutarán cuando se inicialice una llamada. En nuestra aplicación de marcador hemos utilizado el verbo Dial() de Twilio para enrutar una llamada al número de ventas desde el número de teléfono de Twilio. Y el verbo Say() para especificar el mensaje que se presentará cuando la persona de ventas esté esperando una respuesta del cliente.
-
/statusCheck
Al completar una llamada, esta ruta envía información relevante de la llamada, como la duración de la llamada, el estado de la llamada, el país llamado y la marca de tiempo, a las columnas respectivas en la tabla CallLogs.
-
/getLogs
Ejecuta la consulta ZCQL para recuperar los datos de llamadas de la tabla CallLogs. El resultado de la consulta devuelve el número de contacto del equipo de ventas, el número de móvil del cliente, la duración de la llamada, la marca de tiempo de la llamada, el estado de la llamada y el país desde el cual se inició la llamada.
Última actualización 2026-03-20 21:51:56 +0530 IST