Utilizando as APIs da Vonage com o MongoDB Atlas – Parte 3

Nesta série:

• Parte 1 - O que é o MongoDB Atlas?

• Parte 2 - Como usar o Vonage Verify com logins

• Parte 3 - Como usar o Vonage para interações com os clientes

• Parte 4 - Como usar o Atlas para autenticação de usuários

• Parte 5 - Como usar o In-App Messaging no aplicativo da Vonage para notificações

Continuamos a nos aprofundar no MongoDB Atlas e em seu uso com várias APIs da Vonage. Na Parte 1, vimos exatamente o que é o MongoDB Atlas e alguns dos serviços que ele oferece. Na Parte 2, nos aprofundamos no aplicativo de exemplo para ver como usar o MongoDB para dar suporte ao nosso processo de cadastro e integrar o Vonage Verify para oferecer segurança adicional aos usuários. Agora, na Parte 3, vamos ver como entrar em contato com o cliente a respeito do pedido e o que podemos fazer quando os clientes precisarem falar com o restaurante.

Como faremos isso?

A Vonage oferece uma ampla variedade de maneiras para que os desenvolvedores se conectem aos seus clientes, e uma das formas mais simples é por meio da nossa Messages API. Essa API permite que os desenvolvedores enviem mensagens aos usuários finais por meio de diversos canais. No momento da redação deste artigo, a Vonage oferece suporte a SMS, MMS, WhatsApp, Facebook Messenger e Viber, mas está trabalhando continuamente para adicionar mais canais. Este tutorial abordará o envio de um SMS, que geralmente é a maneira mais fácil de enviar uma mensagem a um cliente. Outros canais exigem mais configuração e podem ter restrições adicionais.

Para a demonstração, assim que um usuário fizer um pedido, enviaremos a ele uma notificação por SMS informando que o pedido foi recebido. No futuro, você poderá ampliar essa funcionalidade para enviar também notificações sobre o status de um pedido ou até mesmo notificações de entrega em tempo real. Por enquanto, enviaremos uma mensagem para que você possa ver como isso funciona.

Em um mundo perfeito, essa seria a última interação com o cliente, mas todos sabemos como o mundo funciona. E se o cliente tiver algum problema com a entrega? Nós poderíamos pedir que ele nos ligue ou até mesmo que envie uma mensagem de texto explicando o problema, mas e se ele pudesse nos mostrar o problema? A Meetings API do Vonage é uma maneira rápida de configurar um chat de vídeo individual sem precisar desenvolver um aplicativo de vídeo. Podemos usá-la para enviar um link ao cliente e direcioná-lo para uma interface pré-configurada, e quase não precisamos escrever nenhum código para isso.

Envio da mensagem de texto

Assim que o usuário fizer login, ele deverá ver um hambúrguer e um refrigerante à venda. Não há nada de mágico nisso. Temos um endpoint de API no servidor que consulta todo o estoque disponível e o retorna como um blob JSON. Em seguida, vamos adicionar esses dados a uma variável do VueJS para que sejam exibidos.

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

Quando o usuário seleciona uma opção do menu, salvamos essa escolha em um store do VueJS implementado com Pinia. O Pinia é um plugin para o VueJS que facilita o compartilhamento de informações entre diferentes visualizações; por isso, armazenaremos nosso carrinho aqui à medida que passarmos da página do menu para a página de pedidos. Se você tiver se aprofundado no código de autenticação da parte 2, também perceberá que o utilizamos para armazenar a informação de que o usuário está autenticado.

Depois de selecionar um pedido e clicar em “Finalizar compra”, você verá uma página de confirmação. Mais uma vez, não há nada de especial aqui, pois buscamos as informações do carrinho e as exibimos na página. A mágica acontece quando clicamos em “Enviar pedido”.

O código do VueJS enviará o conteúdo do carrinho para nossa API de back-end por meio de uma chamada para fetch(). O código do lado do servidor receberá nosso pedido e o salvará no MongoDB como um novo documento na orders coleção.

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

Se você tem experiência com bancos de dados relacionais, talvez perceba que pegamos os items que foram enviadas no pedido e simplesmente as colocamos no novo order documento. Estamos armazenando todas as informações relevantes sobre o item e o pedido nesse documento, em vez de desnormalizar os dados (onde, em vez disso, armazenaríamos apenas o ID do item para vinculá-lo à inventory coleção). Bancos de dados baseados em documentos mantêm todas as informações necessárias dentro do próprio documento, em vez de usar chaves estrangeiras para fazer referência a outros documentos e coleções. Você pode, já que cada documento tem um ID, mas isso é comum.

Essa é uma das principais vantagens dos bancos de dados baseados em documentos. Todas as informações relativas a um documento podem ser armazenadas diretamente no próprio documento, reduzindo assim o número de consultas externas necessárias. É possível usar uma série de JOIN operandos em um banco de dados relacional para montar uma linha de informações a partir de várias tabelas. No entanto, no MongoDB, isso é feito por meio de pipelines de agregação.

Os pipelines de agregação permitem selecionar e manipular documentos por meio de uma série de consultas e encaminhar esses resultados para outras consultas de agregação. Embora não os estejamos utilizando neste exemplo — já que estamos apenas armazenando as informações de estoque no documento do pedido —, é possível realizar manipulações de dados bastante complexas com agregações.

Assim que o pedido for salvo, enviamos uma mensagem SMS por meio da Messages API. Como estamos usando nosso SDK do Node.js , basta uma única chamada para vonage.messages.send(). Passamos um objeto SMS com a mensagem de texto, o número de destino e o número que vinculamos ao nosso aplicativo (que configuramos na Parte 1 e está em nosso .env arquivo).

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

É só isso que basta para enviar um SMS por meio da nossa Messages API! O usuário deve receber uma mensagem de texto em seu celular em apenas alguns minutos.

Messages API da Vonage x SMS API da Vonage

Se você já deu uma olhada na nossa documentação para desenvolvedores, talvez tenha percebido que temos duas APIs para o envio de mensagens SMS. Uma é a Messages API, sobre a qual acabamos de falar, e a outra é a nossa SMS API. Por que temos duas APIs para a mesma coisa?

A SMS API é uma das APIs originais fornecidas pela Vonage e foi desenvolvida quando o SMS era a única opção de mensagem de texto. Por isso, ela foi projetada especificamente não apenas para a função básica de “enviar um SMS por meio de uma API HTTP”, mas também para interações mais avançadas com SMS, como o protocolo SMPP , ou Protocolo de Mensagens Curtas Peer-to-Peer. O SMPP é um protocolo do setor de telecomunicações que permite uma troca de mensagens mais direta entre aplicativos e provedores como a Vonage.

A Messages API foi projetada para usuários comuns. Ela mantém a facilidade de uso da SMS API original e a amplia para outros canais, como MMS e WhatsApp. Como se destina a um uso mais geral, ela não oferece acesso SMPP.

Recomendamos o uso da Messages API para quaisquer novos projetos. As mensagens SMS e as mensagens devem continuar a respeitar restrições específicas de cada país para SMS , como o 10DLC nos EUA; portanto, a menos que você precise especificamente de um envio de SMS de nível muito baixo, como o SMPP, a Messages API é a melhor opção.

Houston, temos um problema

Assim que o usuário envia seu pedido, ele é direcionado para uma tela de Status do Pedido. Essa tela exibe o número do pedido, obtido do registro do MongoDB que adicionamos, e poderia ser ampliada para mostrar os próprios itens do pedido. Queremos nos concentrar agora no botão “Chamada de vídeo”, pois essa é uma forma do cliente entrar em contato com o restaurante.

Do ponto de vista do usuário final, basta clicar nesse botão para que uma nova janela se abra, iniciando uma videochamada. Ele entrará em uma sala de reunião com um tema visual agradável, a possibilidade de ligar e desligar a câmera e o microfone, além de todo o conforto que se poderia desejar para uma videochamada. O melhor de tudo é que isso funciona com todos os principais navegadores, tanto em computadores quanto em dispositivos móveis.

Meeting Login Meeting Interface

A Meetings API ainda está em fase beta no momento da publicação deste artigo, mas configurá-la é incrivelmente fácil. A primeira coisa que vamos fazer é definir um tema. Isso pode ser feito antes e precisa ser feito apenas uma vez, mas você pode criar um tema com o logotipo, o esquema de cores e a identidade visual da sua empresa. Para configurar um novo tema, basta uma única chamada à 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))

Como não estamos usando o SDK, vamos utilizar o tokenGenerate() método de @vonage/jwt para criar um token JWT para nos comunicarmos com a API. Em seguida, faremos uma POST chamada à Meetings API com o nome do nosso tema, a cor e outras informações. Confira a Referência da Meetings API para ver todas as opções. Essa chamada à API retornará um ID de tema que usaremos mais adiante na demonstração.

Assim que obtivermos o ID da reunião, o enviamos de volta ao cliente para que ele possa ser usado para abrir uma nova janela.

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

Basta uma única chamada de API para adicionarmos a funcionalidade de videoconferência ao nosso aplicativo. Não precisamos fazer nada para configurar a interface do usuário da sala de vídeo, e tudo funciona com base no padrão WebRTC, sendo compatível com praticamente qualquer dispositivo.

Conclusão

Assim como no Verify, podemos adicionar recursos de SMS ao nosso aplicativo com uma única linha de código. Se você já tem um aplicativo, é igualmente fácil. Basta instalar o @vonage/server-sdk pacote, configurar um novo cliente e adicionar a linha para chamar a Messages API sempre que quiser enviar um SMS.

Também adicionamos a videoconferência de forma igualmente fácil. Basta uma única chamada de API para criar uma nova sala; agora, temos uma videochamada com todos os recursos sem precisar escrever uma única linha de código de front-end.

Como o restaurante sabe que deve participar da videochamada? Abordaremos isso em um artigo futuro. A seguir, veremos como usar a autenticação de usuários do MongoDB Atlas, o que nos permitirá transferir a autenticação de usuários para o Atlas em nosso back-end administrativo.

• Parte 1 - O que é o MongoDB Atlas?

• Parte 2 - Como usar o Vonage Verify com logins

• Parte 3 - Como usar o Vonage para interações com os clientes

• Parte 4 - Como usar o Atlas para autenticação de usuários

• Parte 5 - Como usar o In-App Messaging no aplicativo da Vonage para notificações