){kind=small}
Présentation des composants Web de l'interface utilisateur du Client SDK
Temps de lecture : 1 minute
Depuis un certain temps, il y a eu beaucoup d'articles sur les composants Web. Web Component-related posts créés sur ce site, de la construction d'un composant Web à l'utilisation de ce même composant dans différents frameworks et bibliothèques. Tout cela a conduit à l'annonce des Vonage Client SDK UI Web Components!
Nous avons construit des composants Web qui sont intégrés avec le Vonage Client SDK qui peuvent être utilisés avec ou sans cadres ou bibliothèques JavaScript. La liste croissante des composants peut être consultée dans le dépôt dépôt GitHub.
L'objectif des composants Web d'interface utilisateur du Client SDK de Vonage est d'abstraire ou du moins de minimiser le travail dont un développeur a besoin pour intégrer notre Client SDK dans son application. Imaginez que vous puissiez créer une application de chat entièrement fonctionnelle en plaçant les composants d'interface utilisateur dans la disposition de votre choix. Il suffit d'introduire la conversation et chaque composant Web s'occupe de ses responsabilités. Vous n'arrivez pas à l'imaginer, ne vous inquiétez pas, voici une image réelle :
Sample Chat Application built with the Vonage Client SDK UI Web Components
Par exemple, pour créer votre propre application de chat, utilisez le projet suivant projet Glitch.
Depuis que l Voice API de Vonage de Vonage est maintenant disponible, voici comment intégrer le composant Web du clavier à notre système existant de gestion des appels vocaux. Tutoriel sur la réalisation d'un appel vocal In-App Voice - le seul changement se trouve dans la section Créer une application côté client l'étape de création d'une application côté client.
Remplacez le code actuel du fichier client_js.html par celui-ci :
<!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>
Note : N'oubliez pas de réintroduire le JWT de l'utilisateur généré.
La page web du client devrait ressembler à ceci :
Using the Vonage keypad Web Component in the Making an in-app voice call tutorial
Une implémentation React du composant Web Keypad est présentée dans ce billet de blog.
Une première version de travail est maintenant disponible dans un dépôt GitHub de la communauté de Vonage. dépôt GitHub de la communauté Vonage. Nous accueillons volontiers les contributions, les idées et les commentaires, alors n'hésitez pas à y jeter un coup d'œil.