){kind=small}
Presentación de los componentes web de interfaz de usuario del Client SDK
Tiempo de lectura: 1 minuto
Durante un tiempo, ha habido un montón de posts relacionados con Web Components creados en este sitio, desde la construcción de un Web Component hasta el uso de ese mismo componente en diferentes frameworks y librerías. Todo eso ha llevado al anuncio de los Componentes web de interfaz de usuario de Vonage Client SDK¡!
Hemos estado construyendo Web Components que se integran con el Vonage Client SDK que pueden usarse con o sin frameworks o bibliotecas de JavaScript. La creciente lista de componentes se puede encontrar en el repositorio de GitHub.
El objetivo de los componentes web de la interfaz de usuario del Vonage Client SDK es abstraer o al menos minimizar el trabajo que un desarrollador necesita para integrar nuestro Client SDK en su aplicación. Imagina crear una aplicación de chat completamente funcional colocando los componentes de la interfaz de usuario en el diseño que elijas. Sólo tiene que pasar la Conversación y cada Componente Web se encarga de sus responsabilidades. No te lo imaginas, no te preocupes, aquí tienes una imagen real:
Sample Chat Application built with the Vonage Client SDK UI Web Components
Por ejemplo, para crear tu propia aplicación de chat de muestra, utiliza este proyecto proyecto Glitch.
Desde la Voice API de Vonage ha pasado a ser de disponibilidad general, a continuación te mostramos cómo integrar el componente web de teclado en nuestra aplicación existente. Tutorial para realizar una llamada de voz desde la aplicación - el único cambio se produce en la sección Crear una aplicación del lado del cliente cliente.
Sustituya el código actual del archivo client_js.html con esto:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- import Web Components -->
<script src="https://unpkg.com/@webcomponents/webcomponentsjs@latest/webcomponents-loader.js"></script>
<script type="module" src="https://unpkg.com/@vonage/vc-keypad@latest/vc-keypad.js?module"></script>
<script src="./node_modules/nexmo-client/dist/nexmoClient.js"></script>
<style>
input, button { font-size: 1rem; }
#hangup { display:none; }
</style>
</head>
<body>
<h1>Call Phone from App</h1>
<vc-keypad placeholder="i.e. 14155550100" actionText="Call" cancelText="Hang up"></vc-keypad>
<div id="status"></div>
<script>
const USER_JWT = "PASTE YOUR JWT HERE";
const keypadRef = document.querySelector("vc-keypad");
const statusElement = document.getElementById("status");
new NexmoClient({ debug: true })
.createSession(USER_JWT)
.then(app => {
keypadRef.addEventListener("digits-sent", event => {
console.log(event.detail.digits);
if (event.detail.digits !== ''){
app.callServer(event.detail.digits);
keypadRef.createAction();
} else {
statusElement.innerText = 'Please enter your phone number.';
}
});
app.on("member:call", (member, call) => {
keypadRef.addEventListener("action-ended", event => {
call.hangUp();
});
});
app.on("call:status:changed",(call) => {
statusElement.innerText = `Call status: ${call.status}`;
if (call.status === call.CALL_STATUS.COMPLETED){
keypadRef.cancelAction();
}
});
})
.catch(console.error);
</script>
</body>
</html>
Nota: No olvide volver a añadir el JWT de usuario generado.
La página web del cliente debería tener este aspecto:
Using the Vonage keypad Web Component in the Making an in-app voice call tutorial
Una implementación React del Componente Web de Teclado está cubierta en este entrada de blog.
Ya está disponible una primera versión de trabajo en un repositorio GitHub de la Comunidad de Vonage. Agradecemos las contribuciones, ideas y comentarios, así que échale un vistazo.