){kind=small}
Einführung in die Client SDK UI-Webkomponenten
Lesedauer: 1 Minute
Seit einiger Zeit gibt es eine Reihe von Web-Komponenten-bezogene Beiträge auf dieser Website erstellt, von der Erstellung einer Webkomponente bis zur Verwendung derselben Komponente in verschiedenen Frameworks und Bibliotheken. All das hat zur Ankündigung der Vonage Client SDK UI-Webkomponenten!
Wir haben Webkomponenten entwickelt, die in das Vonage Client SDK integriert sind, die mit oder ohne JavaScript-Frameworks oder -Bibliotheken verwendet werden können. Die wachsende Liste der Komponenten finden Sie im GitHub-Repository.
Das Ziel der Vonage Client SDK UI Web Components ist es, die Arbeit, die ein Entwickler zur Integration unseres Client SDK in seine Anwendung benötigt, zu abstrahieren oder zumindest zu minimieren. Stellen Sie sich vor, Sie erstellen eine voll funktionsfähige Chat-Anwendung, indem Sie UI-Komponenten in dem von Ihnen gewählten Layout platzieren. Geben Sie einfach die Konversation ein und jede Webkomponente übernimmt ihre Aufgaben. Sie können es sich nicht vorstellen, keine Sorge, hier ist ein aktuelles Bild:
Sample Chat Application built with the Vonage Client SDK UI Web Components
Um zum Beispiel eine eigene Beispiel-Chat-App zu erstellen, verwenden Sie dieses Glitch-Projekt.
Da die Vonage Voice API allgemein verfügbar geworden ist, können wir die Keypad-Webkomponente in unser bestehendes Tutorial zum Herstellen eines In-App Voice-Anrufs - Die einzige Änderung besteht in der Erstellen einer clientseitigen Anwendung Schritt.
Ersetzen Sie den aktuellen Code für die client_js.html Datei durch diesen:
<!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>
Hinweis: Vergessen Sie nicht, die generierte Benutzer-JWT erneut hinzuzufügen.
Die Client-Webseite sollte in etwa so aussehen:
Using the Vonage keypad Web Component in the Making an in-app voice call tutorial
Eine React-Implementierung der Keypad-Webkomponente finden Sie in diesem Blog-Beitrag.
Eine erste Arbeitsversion ist jetzt in einem Vonage Community GitHub-Repository. Wir freuen uns über Beiträge, Ideen und Feedback, also schauen Sie doch mal rein.