Utiliser les API de Vonage avec MongoDB Atlas - Partie 3

Dans cette série :

• Partie 1 - Qu'est-ce que MongoDB Atlas ?

• Partie 2 - Utilisation de Vonage Verify avec les ouvertures de session

• Partie 3 - Utilisation de Vonage pour les interactions avec les clients

• Partie 4 - Utilisation d'Atlas pour l'authentification des utilisateurs

• Partie 5 - Utiliser In-App Messaging de Vonage pour les notifications

Nous continuons à nous plonger dans MongoDB Atlas et son utilisation avec diverses API de Vonage. Dans la partie 1nous avons examiné ce qu'est exactement MongoDB Atlas et certains des services qu'il offre. Dans la partie 2nous nous sommes plongés dans l'exemple d'application pour voir comment utiliser MongoDB pour soutenir notre processus d'enregistrement et connecter Vonage Verify pour une sécurité supplémentaire de l'utilisateur. Dans la troisième partie, nous avons abordé la question du contact avec le client pour sa commande et ce que nous pouvons faire lorsque les clients ont besoin de parler au restaurant.

Comment allons-nous procéder ?

Vonage offre aux développeurs une grande variété de moyens de se connecter à leurs clients, et l'un des moyens les plus simples est notre Messages API. Cette API permet aux développeurs d'envoyer des messages aux utilisateurs finaux par le biais de divers canaux. Au moment de la rédaction de cet article, Vonage prend en charge les SMS, les MMS, WhatsApp, Facebook Messenger et Viber, mais Vonage travaille continuellement à l'ajout de nouveaux canaux. Ce tutoriel portera sur l'envoi d'un SMS, qui est généralement le moyen le plus simple d'envoyer un message à un client. Les autres canaux nécessitent plus de configuration et peuvent avoir des restrictions supplémentaires.

Pour la démo, une fois qu'un utilisateur a passé une commande, nous lui envoyons une notification par SMS pour l'informer que sa commande a été reçue. À l'avenir, vous pourriez étendre ce système pour envoyer des notifications sur l'état d'une commande ou même des notifications de livraison à temps. Pour l'instant, nous allons envoyer un message pour que vous puissiez voir comment cela se passe.

Dans un monde parfait, ce serait la dernière interaction avec un client, mais nous savons tous comment fonctionne le monde. Que se passe-t-il si le client a un problème avec la livraison ? Nous pourrions Nous pourrions lui demander de nous appeler ou même de nous envoyer un message texte pour nous informer de son problème. Nous pourrions lui demander de nous appeler ou même de nous envoyer un SMS pour nous faire part du problème, mais que se passerait-il s'il pouvait nous montrer le problème ? L'API Meetings API de Vonage de Vonage est un moyen rapide de mettre en place une discussion vidéo individuelle sans créer d'application vidéo. Nous pouvons l'utiliser pour envoyer un lien au client et le faire entrer dans une interface préconstruite, et nous n'avons pratiquement pas besoin d'écrire de code pour cela.

Envoi du texte

Une fois que l'utilisateur s'est connecté, il devrait voir un hamburger et un soda à vendre. Il n'y a rien de magique à cela. Nous avons un point de terminaison API sur le serveur qui interroge tout l'inventaire disponible et le renvoie sous la forme d'un blob JSON. Nous l'ajouterons ensuite à une variable VueJS pour qu'il s'affiche.

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));
}

Lorsque l'utilisateur sélectionne quelque chose dans le menu, nous l'enregistrons dans un magasin VueJS alimenté par Pinia. Pinia est un plugin pour VueJS qui facilite le partage d'informations entre différentes vues. Nous stockerons donc notre panier ici lorsque nous passerons de la page de menu à la page de commande. Si vous avez creusé dans le code d'authentification de la partie 2, vous verrez que nous l'avons utilisé pour stocker le fait que l'utilisateur est authentifié.

Une fois que vous avez sélectionné une commande et que vous avez cliqué sur "Commander", vous obtenez une page de confirmation. Là encore, rien de particulier : nous extrayons les informations du panier et les affichons sur la page. La magie opère lorsque nous cliquons sur "Soumettre la commande".

Le code VueJS soumettra le contenu du panier à notre API backend par le biais d'un appel à fetch(). Le code côté serveur prendra notre commande et l'enregistrera dans MongoDB en tant que nouveau document dans la collection orders collection.

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
});

Si vous venez d'une base de données relationnelle, vous remarquerez peut-être que nous prenons les données de la commande et que nous les plaçons dans le nouveau fichier. items qui ont été envoyés à partir de la commande et les plaçons dans le nouveau order document. Nous stockons toutes les informations pertinentes relatives à l'article et à la commande dans ce document au lieu de dénormaliser les données (où nous préférerions stocker uniquement l'identifiant de l'article pour le relier à la collection). inventory collection). Les bases de données basées sur des documents conservent toutes les informations nécessaires dans le document au lieu d'utiliser des clés étrangères pour faire référence à d'autres documents et collections. Vous pouvez le faire, car chaque document possède un identifiant, mais c'est une pratique courante.

C'est l'un des principaux avantages des bases de données documentaires. Toutes les informations relatives à un document peuvent être stockées dans le document lui-même, ce qui réduit le nombre de recherches externes à effectuer. Vous pouvez utiliser une série d'opérandes JOIN dans une base de données relationnelle pour rassembler une ligne d'informations provenant de différentes tables. Toutefois, dans MongoDB, cette opération est réalisée par le biais de pipelines d'agrégation.

Les pipelines d'agrégats vous permettent de sélectionner et de manipuler des documents à l'aide d'une série de requêtes et d'acheminer ces résultats vers d'autres requêtes d'agrégats. Bien que nous ne les utilisions pas dans cet exemple, puisque nous nous contentons de stocker les informations relatives à l'inventaire dans le document de commande, vous pouvez effectuer des manipulations de données assez complexes avec les agrégats.

Une fois la commande enregistrée, nous envoyons un SMS via l'API Messages. Puisque nous utilisons notre Node.js SDK il suffit d'un seul appel à vonage.messages.send(). Nous passons un objet SMS avec le message texte, le numéro à envoyer, et le numéro que nous avons lié à notre application (que nous avons configuré dans la partie 1 et que nous avons dans notre fichier .env ).

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

C'est tout ce qu'il faut pour envoyer un SMS via notre Messages API ! L'utilisateur devrait recevoir un message texte sur son appareil mobile en quelques minutes seulement.

Vonage Messages API vs Vonage SMS API

Si vous avez creusé dans notre documentation pour les développeursvous avez peut-être remarqué que nous disposons de deux API pour l'envoi de SMS. L'une est l'API Messages dont nous venons de parler, et l'autre est notre API SMS. Pourquoi avons-nous deux API pour la même chose ?

L'API SMS est l'une des API originales fournies par Vonage et a été créée lorsque le SMS était la seule option de message texte. En tant que telle, elle est conçue non seulement pour l'envoi d'un SMS par le biais d'une API HTTP, mais aussi pour des interactions SMS plus avancées telles que l'API SMPP ou protocole Short Message Peer-to-Peer. Le SMPP est un protocole de l'industrie des télécommunications qui permet un échange de messages plus direct entre les Applications et les fournisseurs comme Vonage.

L'API Messages est conçue pour les utilisateurs plus quotidiens. Elle reprend la facilité d'utilisation de l'API SMS d'origine et l'étend à d'autres canaux comme les MMS et WhatsApp. Étant donné qu'elle se concentre sur une utilisation plus générale, elle n'a pas accès au SMPP.

Nous recommandons d'utiliser l'API Messages pour tout nouveau projet. SMS et Messages doivent toujours respecter restrictions SMS spécifiques à chaque pays comme 10DLC aux États-Unis, donc à moins que vous n'ayez spécifiquement besoin d'un envoi de SMS de très bas niveau comme SMPP, l'API Messages est un meilleur choix.

Houston, nous avons un problème

Une fois que l'utilisateur a soumis sa commande, il accède à un écran d'état de la commande. Celui-ci affiche le numéro de commande renvoyé par l'enregistrement MongoDB que nous avons ajouté et pourrait être étendu pour afficher les éléments de la commande eux-mêmes. Nous allons maintenant nous intéresser au bouton "Video Call", qui permet au client de contacter le restaurant.

Du point de vue de l'utilisateur final, il peut cliquer sur ce bouton et une nouvelle fenêtre s'ouvrira sur un appel vidéo. Ils entreront dans une salle de réunion avec un thème visuel agréable, la possibilité d'activer et de désactiver leur caméra et leur micro, et tout le confort que vous souhaitez pour un appel vidéo. Le plus beau, c'est que cela fonctionne avec tous les principaux navigateurs, aussi bien sur les ordinateurs de bureau que sur les appareils mobiles.

Meeting Login Meeting Interface

L'API Meetings est encore en version bêta au moment de la rédaction de cet article, mais sa mise en place est incroyablement simple. La première chose à faire est de configurer un thème. Cela peut être fait avant et n'a besoin d'être fait qu'une seule fois, mais vous pouvez créer un thème avec le logo, les couleurs et la marque de votre entreprise. Pour configurer un nouveau thème, il suffit d'un seul appel à l'API.

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))

Comme nous n'utilisons pas le SDK, nous utiliserons la méthode tokenGenerate() de @vonage/jwt pour créer un jeton JWT afin de communiquer avec l'API. Nous lançons ensuite un appel à l'API POST à l'API Meetings avec notre nom de thème, notre couleur et d'autres informations. Consultez la Référence de l'API Meetings pour connaître toutes les options. Cet appel à l'API renvoie un identifiant de thème que nous utiliserons plus tard dans la démo.

Une fois que nous avons l'identifiant de la réunion, nous le renvoyons au client afin qu'il puisse l'utiliser pour ouvrir une nouvelle fenêtre.

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))
});

Un seul appel d'API est tout ce que nous avons besoin d'ajouter à notre application pour ajouter la vidéoconférence à notre application. Nous n'avons rien eu à faire pour configurer l'interface utilisateur de la salle vidéo, et tout cela utilise la norme WebRTC pour fonctionner sur presque tous les appareils.

Conclusion

Tout comme avec Verify, nous pouvons ajouter des fonctionnalités SMS à notre application avec une seule ligne de code. Si vous avez une application existante, c'est tout aussi facile. Il vous suffit d'installer le paquetage @vonage/server-sdk de configurer un nouveau client et d'ajouter la ligne permettant d'appeler l'API Messages à chaque fois que vous souhaitez envoyer un SMS.

Nous avons également ajouté la vidéoconférence tout aussi facilement. La création d'une nouvelle salle se fait par un simple appel à l'API ; désormais, nous disposons d'un appel vidéo complet sans avoir à écrire une seule ligne de code frontale.

Comment le restaurant sait-il qu'il peut participer à l'appel vidéo ? Nous aborderons cette question dans un prochain article. Ensuite, nous verrons comment utiliser l'authentification des utilisateurs de MongoDB Atlas, ce qui nous permettra de décharger notre authentification des utilisateurs vers Atlas pour notre backend administratif.

• Partie 1 - Qu'est-ce que MongoDB Atlas ?

• Partie 2 - Utilisation de Vonage Verify avec les ouvertures de session

• Partie 3 - Utilisation de Vonage pour les interactions avec les clients

• Partie 4 - Utilisation d'Atlas pour l'authentification des utilisateurs

• Partie 5 - Utiliser In-App Messaging de Vonage pour les notifications