Verwendung von Vonage-APIs mit MongoDB Atlas - Teil 3

In dieser Serie:

• Teil 1 - Was ist MongoDB Atlas?

• Teil 2 - Verwendung von Vonage Verify mit Logins

• Teil 3 - Verwendung von Vonage für Kundeninteraktionen

• Teil 4 - Verwendung von Atlas für die Benutzerauthentifizierung

• Teil 5 - Verwendung von Vonage In-App Messaging für Benachrichtigungen

Wir fahren fort mit der Erforschung von MongoDB Atlas und seiner Verwendung mit verschiedenen Vonage-APIs. Unter Teil 1haben wir einen Blick darauf geworfen, was MongoDB Atlas genau ist und welche Dienste es bietet. Unter Teil 2haben wir uns mit der Beispielanwendung befasst, um zu sehen, wie wir MongoDB zur Unterstützung unseres Registrierungsprozesses verwenden und Vonage Verify für zusätzliche Benutzersicherheit einbinden können. In Teil 3 sehen wir uns an, wie wir den Kunden für seine Bestellung kontaktieren und was wir tun können, wenn Kunden mit dem Restaurant sprechen müssen.

Wie werden wir dies tun?

Vonage bietet Entwicklern eine Vielzahl von Möglichkeiten, sich mit ihren Kunden zu verbinden, und eine der einfachsten Möglichkeiten ist unsere Messages API. Diese API ermöglicht es Entwicklern, Endbenutzern über eine Vielzahl von Kanälen Nachrichten zu senden. Zum Zeitpunkt der Erstellung dieses Artikels unterstützt Vonage SMS, MMS, WhatsApp, Facebook Messenger und Viber, aber Vonage arbeitet kontinuierlich daran, weitere Kanäle hinzuzufügen. In diesem Tutorial geht es um das Senden einer SMS, die in der Regel der einfachste Weg ist, einem Kunden eine Nachricht zu senden. Andere Kanäle erfordern mehr Einstellungen und können zusätzliche Einschränkungen haben.

In der Demo senden wir dem Nutzer nach der Bestellung eine SMS-Benachrichtigung, dass seine Bestellung eingegangen ist. Sie könnten dies in Zukunft erweitern, um auch Benachrichtigungen über den Status einer Bestellung oder sogar Benachrichtigungen über die rechtzeitige Lieferung zu senden. Im Moment werden wir eine Nachricht senden, damit Sie sehen können, wie es gemacht wird.

In einer perfekten Welt wäre dies die letzte Interaktion mit einem Kunden, aber wir alle wissen, wie die Welt funktioniert. Was passiert, wenn der Kunde ein Problem mit der Lieferung hat? Wir könnten uns anrufen oder sogar eine SMS mit dem Problem schicken, aber was wäre, wenn er uns das Problem zeigen könnte? Die Vonage Meetings API ist eine schnelle Möglichkeit, einen Eins-zu-Eins-Videochat einzurichten, ohne eine Videoanwendung erstellen zu müssen. Wir können damit einen Link an den Kunden senden und ihn in eine vorgefertigte Schnittstelle einbinden, und wir müssen kaum Code dafür schreiben.

Versenden des Textes

Sobald sich ein Benutzer anmeldet, sollte er einen Hamburger und eine Soda zum Verkauf sehen. Dies hat nichts mit Magie zu tun. Wir haben einen API-Endpunkt auf dem Server, der das gesamte verfügbare Inventar abfragt und es als JSON-Blob zurückgibt. Diesen fügen wir dann in eine VueJS-Variable ein, damit er angezeigt wird.

let inventory = ref(Array());

async function getInventory() {
    await fetch(import.meta.env.VITE_API_URL + '/api/inventory')
        .then(resp => resp.json())
        .then(data => {
            inventory.value = []
            data.forEach((dish: {name: string, price: string}) => {
                inventory.value.push(dish)
            })
        })
        .catch(err => console.log(err));
}

Wenn der Benutzer etwas aus dem Menü auswählt, speichern wir das in einem VueJS-Speicher, der von Pinia. Pinia ist ein Plugin für VueJS, das die gemeinsame Nutzung von Informationen über verschiedene Ansichten hinweg vereinfacht, so dass wir unseren Einkaufswagen hier speichern, wenn wir von der Menüseite zur Bestellseite wechseln. Wenn Sie sich den Authentifizierungscode in Teil 2 angesehen haben, werden Sie auch sehen, dass wir ihn verwendet haben, um die Tatsache zu speichern, dass der Benutzer authentifiziert ist.

Sobald Sie eine Bestellung auswählen und auf "Zur Kasse gehen" klicken, erhalten Sie eine Bestätigungsseite. Auch hier ist nichts Besonderes, denn wir ziehen die Informationen aus dem Warenkorb und zeigen sie auf der Seite an. Der Clou passiert, wenn wir auf "Bestellung abschicken" klicken.

Der VueJS-Code übermittelt den Inhalt des Warenkorbs an unsere Backend-API durch einen Aufruf von fetch(). Der Server-seitige Code nimmt unsere Bestellung und speichert sie in MongoDB als neues Dokument in der orders Sammlung.

const { items } = req.body
const bearerToken = req.header('authorization').split(' ')[1]
const decodedToken = jwt.decode(bearerToken);
const userRecord = await client.db('restaurant_pos_demo').collection('users').findOne({ _id: new ObjectId(decodedToken.user_id) });

const orderTime = new Date().toISOString()
const result = await client.db('restaurant_pos_demo').collection('orders').insertOne({
    items, orderTime, status: 0, lastUpdated: orderTime, user_id: userRecord._id
});

Wenn Sie aus einer relationalen Datenbank kommen, werden Sie feststellen, dass wir die items die aus der Bestellung gesendet wurden, einfach in das neue order Dokument. Wir speichern alle relevanten Artikel- und Auftragsinformationen in diesem Dokument, anstatt die Daten zu denormalisieren (wo wir lieber nur die Artikel-ID speichern würden, um sie mit der inventory Sammlung zu verknüpfen). In dokumentenbasierten Datenbanken werden alle benötigten Informationen innerhalb des Dokuments gespeichert, anstatt Fremdschlüssel zu verwenden, die auf andere Dokumente und Sammlungen verweisen. Das ist zwar möglich, da jedes Dokument eine ID hat, aber es ist üblich.

Dies ist einer der wesentlichen Vorteile von dokumentenbasierten Datenbanken. Alle Informationen zu einem Dokument können innerhalb des Dokuments gespeichert werden, wodurch die Anzahl der erforderlichen externen Abfragen reduziert wird. Sie können eine Reihe von JOIN Operanden in einer relationalen Datenbank verwenden, um eine Zeile mit Informationen aus verschiedenen Tabellen zusammenzustellen. In MongoDB wird dies jedoch durch Aggregat-Pipelines.

Mit Aggregatpipelines können Sie Dokumente durch eine Reihe von Abfragen auswählen und bearbeiten und diese Ergebnisse in andere Aggregatabfragen leiten. Obwohl wir sie in diesem Beispiel nicht verwenden, da wir nur die Bestandsinformationen im Bestelldokument speichern, können Sie mit Aggregaten recht komplexe Datenmanipulationen vornehmen.

Sobald die Bestellung gespeichert ist, wird eine SMS-Nachricht über die Messages API verschickt. Da wir unser Node.js SDK verwenden, ist nur ein einziger Aufruf von vonage.messages.send(). Wir übergeben ein SMS-Objekt mit der Textnachricht, der Nummer, an die gesendet werden soll, und der Nummer, die wir mit unserer Anwendung verknüpft haben (die wir in Teil 1 eingerichtet haben und die in unserer .env Datei).

await vonage.messages.send(
    new SMS(
        'Your order has been submitted',
        userRecord.phone,
        process.env.VONAGE_FROM
    )
);

Das ist alles, was es braucht, um eine SMS über unsere Messages API zu versenden! Der Benutzer sollte in wenigen Minuten eine Textnachricht auf seinem mobilen Gerät erhalten.

Vonage Messages API vs. Vonage SMS API

Wenn Sie sich in unserer Entwicklerdokumentationnachgeschaut haben, werden Sie feststellen, dass wir zwei APIs für den Versand von SMS-Nachrichten haben. Die eine ist die Messages API, die wir gerade besprochen haben, und die andere ist unsere SMS API. Warum haben wir zwei APIs für dieselbe Sache?

Die SMS API ist eine der ursprünglichen APIs von Vonage und wurde entwickelt, als SMS die einzige Option für Textnachrichten war. Als solche ist sie nicht nur für das einfache "Senden einer SMS über eine HTTP-API" geeignet, sondern auch für fortgeschrittenere SMS-Interaktionen wie das SMPP Protokoll oder das Short Message Peer-to-Peer Protokoll. SMPP ist ein Protokoll der Telekommunikationsbranche, das einen direkteren Nachrichtenaustausch zwischen Applications und Anbietern wie Vonage ermöglicht.

Die Messages API ist für alltäglichere Nutzer gedacht. Sie übernimmt die Benutzerfreundlichkeit der ursprünglichen SMS API und erweitert sie auf weitere Kanäle wie MMS und WhatsApp. Da sie sich auf eine allgemeinere Nutzung konzentriert, hat sie keinen SMPP-Zugang.

Wir empfehlen die Verwendung der Messages API für alle neuen Projekte. SMS und Messages müssen weiterhin folgende Bedingungen erfüllen länderspezifische SMS-Beschränkungen wie z. B. 10DLC in den USA einhalten. Wenn Sie also nicht speziell den Versand von SMS auf sehr niedriger Ebene wie SMPP benötigen, ist die Messages API die bessere Wahl.

Houston, wir haben ein Problem

Sobald der Benutzer seine Bestellung aufgegeben hat, wird er zu einem Bildschirm mit dem Bestellstatus weitergeleitet. Hier wird die Bestellnummer angezeigt, die aus dem von uns hinzugefügten MongoDB-Datensatz zurückgegeben wird, und kann erweitert werden, um die Bestellpositionen selbst anzuzeigen. Jetzt wollen wir uns die Schaltfläche "Video Call" ansehen, mit der der Kunde das Restaurant kontaktieren kann.

Der Endbenutzer kann auf diese Schaltfläche klicken, woraufhin sich ein neues Fenster mit einem Videoanruf öffnet. Sie betreten einen Besprechungsraum mit einem schönen visuellen Thema, der Möglichkeit, ihre Kamera und ihr Mikrofon ein- und auszuschalten, und allen Annehmlichkeiten, die Sie sich für einen Videoanruf wünschen würden. Das Beste daran ist, dass dies mit allen gängigen Browsern sowohl auf dem Desktop als auch auf mobilen Geräten funktioniert.

Meeting Login Meeting Interface

Die Meetings API befindet sich zum Zeitpunkt dieses Artikels noch in der Beta-Phase, aber die Einrichtung ist denkbar einfach. Als Erstes werden wir ein Thema einrichten. Dies kann schon vorher geschehen und muss nur einmal gemacht werden, aber Sie können ein Thema erstellen mit Ihrem Firmenlogo, Farbschema und Branding erstellen. Um ein neues Thema einzurichten, ist ein einziger API-Aufruf erforderlich.

const privateKey = readFileSync(process.env.VONAGE_PRIVATE_KEY);
const token = tokenGenerate(process.env.VONAGE_APPLICATION_ID, privateKey);
await fetch('https://api-eu.vonage.com/beta/meetings/themes', {
    method: 'POST',
    body: JSON.stringify({
        theme_name: 'Restaurant Theme',
        main_color: '#a05683',
        brand_text: 'Vonage Restaurant',
        short_company_url: 'my-restaurant'
    }),
    headers: {
        'Authorization': 'Bearer ' + token,
        'Content-Type': 'application/json'
    }
})
    .then(resp => resp.json())
    .then((data: any) => {
        res.json(data)
    })
    .catch(err => console.error(err))

Da wir das SDK nicht verwenden, benutzen wir die tokenGenerate() Methode von @vonage/jwt um ein JWT-Token für die Kommunikation mit der API zu erstellen. Wir machen dann einen POST Aufruf an die Meetings API mit unserem Themennamen, der Farbe und anderen Informationen. Sehen Sie sich die Meetings API-Referenz für alle Optionen. Dieser API-Aufruf gibt eine Themen-ID zurück, die wir später in der Demo verwenden werden.

Sobald wir die Besprechungs-ID haben, senden wir sie an den Kunden zurück, damit er sie zum Öffnen eines neuen Fensters verwenden kann.

app.post('/api/website/video-call', async (req, res) => {
    const { orderNumber } = req.body;
    const privateKey = readFileSync(process.env.VONAGE_PRIVATE_KEY);
    const token = tokenGenerate(process.env.VONAGE_APPLICATION_ID, privateKey);

    fetch('https://api-eu.vonage.com/beta/meetings/rooms', {
        method: 'POST',
        body: JSON.stringify({
            display_name: 'Restaurant Demo',
            type: 'instant',
            theme_id: '6ba90e1b-c27a-45e8-9e49-877634c315b0'
        }),
        headers: {
            'Authorization': 'Bearer ' + token,
            'Content-Type': 'application/json'
        }
    })
        .then(resp => resp.json())
        .then(async (data: any) => {
            console.log('guest url: ' + data._links.guest_url.href)
            console.log('host url: ' + data._links.host_url.href)
            const orderRecord = await client.db('restaurant_pos_demo').collection('orders').updateOne({ _id: new ObjectId(orderNumber) }, { $set: { meetingUrl: data._links.host_url.href}})
                .then(async (document) => {
                    res.json({
                        guest_url: data._links.guest_url.href
                    })
                });
        })
        .catch(err => console.error(err))
});

Ein einziger API-Aufruf ist alles, was wir unserer Anwendung hinzufügen müssen, um Videokonferenzen in unsere Anwendung zu integrieren. Wir mussten nichts tun, um die Benutzeroberfläche für den Videoraum einzurichten, und das Ganze nutzt den WebRTC-Standard, um auf fast jedem Gerät zu funktionieren.

Schlussfolgerung

Genau wie bei Verify können wir unserer Anwendung mit einer einzigen Codezeile SMS-Funktionen hinzufügen. Wenn Sie eine bestehende Anwendung haben, ist es genauso einfach. Alles, was Sie brauchen, ist die Installation des @vonage/server-sdk Paket zu installieren, einen neuen Client zu konfigurieren und die Zeile für den Aufruf der Messages API hinzuzufügen, wenn Sie eine SMS senden möchten.

Wir haben auch Videokonferenzen hinzugefügt, die genauso einfach sind. Das Erstellen eines neuen Raums ist ein einziger API-Aufruf; jetzt haben wir einen voll funktionsfähigen Videoanruf, ohne eine einzige Zeile Front-End-Code schreiben zu müssen.

Woher weiß das Restaurant, dass es an dem Videoanruf teilnehmen soll? Das werden wir in einem späteren Artikel behandeln. Als Nächstes werden wir uns mit der Benutzerauthentifizierung von MongoDB Atlas beschäftigen, die es uns ermöglicht, die Benutzerauthentifizierung für unser administratives Backend an Atlas auszulagern.

• Teil 1 - Was ist MongoDB Atlas?

• Teil 2 - Verwendung von Vonage Verify mit Logins

• Teil 3 - Verwendung von Vonage für Kundeninteraktionen

• Teil 4 - Verwendung von Atlas für die Benutzerauthentifizierung

• Teil 5 - Verwendung von Vonage In-App Messaging für Benachrichtigungen