Compartir:
){kind=small}
Chris es el director de herramientas de relaciones con los desarrolladores y dirige el equipo que crea sus herramientas favoritas. Lleva más de 15 años programando en varios lenguajes y tipos de proyectos, desde trabajos para clientes hasta sistemas de big data a gran escala. Vive en Ohio, donde pasa el tiempo con su familia y jugando a Video y TTRPG.
Uso de las API de Vonage con MongoDB Atlas - Parte 3
Tiempo de lectura: 8 minutos
En esta serie:
Parte 3 - Uso de Vonage para las interacciones con los clientes
Seguimos sumergiéndonos en MongoDB Atlas y su uso con varias API de Vonage. En Parte 1vimos qué es exactamente MongoDB Atlas y algunos de los servicios que ofrece. En Parte 2nos sumergimos en la aplicación de muestra para ver cómo usar MongoDB para respaldar nuestro proceso de registro e incorporar Vonage Verify para mayor seguridad del usuario. Ahora, en la Parte 3, veremos cómo contactar al cliente para su pedido y qué podemos hacer cuando los clientes necesitan hablar con el restaurante.
Vonage ofrece una amplia variedad de formas para que los desarrolladores se conecten con sus clientes, y una de las formas más simples es a través de nuestra Messages API. Esta API permite a los desarrolladores enviar mensajes a los usuarios finales a través de una variedad de canales. Al momento de escribir este artículo, Vonage admite SMS, MMS, WhatsApp, Facebook Messenger y Viber, pero Vonage trabaja continuamente para agregar más canales. Este tutorial tratará sobre el envío de SMS, que suele ser la manera más fácil de enviar mensajes a un cliente. Otros canales requieren más configuración y pueden tener restricciones adicionales.
En la demo, una vez que un usuario ha realizado un pedido, le enviaremos una notificación por SMS para informarle de que ha recibido su pedido. En el futuro se podría ampliar para enviar notificaciones sobre el estado de un pedido o incluso notificaciones de entrega a tiempo. De momento, enviaremos un mensaje para que veas cómo se hace.
En un mundo perfecto, esa sería la última interacción con un cliente, pero todos sabemos cómo funciona el mundo. ¿Qué ocurre si el cliente tiene un problema con la entrega? En podríamos llamarnos o incluso enviarnos un mensaje de texto con el problema, pero ¿y si nos lo mostrara? La Meetings API de Vonage es una manera rápida de configurar un chat de video individual sin crear una aplicación de video. Podemos usarla para enviar un enlace al cliente y soltarlo en una interfaz prediseñada, y apenas tenemos que escribir código para ello.
Una vez que el usuario inicia sesión, debería ver una hamburguesa y un refresco a la venta. Esto no tiene nada de mágico. Tenemos un punto final API en el servidor que consultará todo el inventario disponible y lo devuelve como un blob JSON. A continuación, vamos a añadir que a una variable VueJS para que se muestren.
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));
}
Cuando el usuario selecciona algo del menú, lo guardamos en un almacén VueJS alimentado por Pinia. Pinia es un plugin para VueJS que facilita el intercambio de información entre diferentes vistas, por lo que almacenaremos nuestro carrito aquí mientras nos movemos entre la página del menú y la página del pedido. Si profundizas en el código de autenticación de la parte 2, también verás que lo usamos para almacenar el hecho de que el usuario está autenticado.
Una vez que seleccione un pedido y haga clic en "Check Out", obtendrá una página de confirmación. Una vez más, aquí no hay nada especial, ya que extraemos la información del carrito de la tienda y la mostramos en la página. La magia sucede cuando hacemos clic en "Enviar pedido".
El código VueJS enviará el contenido del carrito a nuestra API backend a través de una llamada a fetch(). El código del lado del servidor tomará nuestro pedido y lo guardará en MongoDB como un nuevo documento en la colección orders colección.
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 usted viene de una base de datos relacional de fondo, usted puede notar que tomamos la items que fueron enviados desde el pedido y simplemente los ponemos en el nuevo order documento. Estamos almacenando toda la información relevante del artículo y del pedido en este documento en lugar de desnormalizar los datos (donde preferiríamos almacenar sólo el ID del artículo para vincularlo a la colección). inventory colección). Las bases de datos basadas en documentos guardan toda la información necesaria dentro del documento en lugar de utilizar claves externas para hacer referencia a otros documentos y colecciones. Se puede, ya que cada documento tiene un ID, pero es habitual.
Esta es una de las grandes ventajas de las bases de datos documentales. Toda la información de un documento puede almacenarse en el propio documento, lo que reduce el número de consultas externas que hay que realizar. Puede utilizar una serie de JOIN en una base de datos relacional para juntar una fila de información de varias tablas. Sin embargo, en MongoDB, esto se consigue a través de tuberías de agregación.
Las canalizaciones de agregados permiten seleccionar y manipular documentos a través de una serie de consultas y canalizar esos resultados en otras consultas de agregados. Aunque no las estamos utilizando en este ejemplo, ya que solo estamos almacenando la información de inventario en el documento de pedido, se pueden realizar manipulaciones de datos bastante complejas con agregaciones.
Una vez guardado el pedido, lanzamos un mensaje SMS a través de la Messages API. Dado que estamos utilizando nuestro SDK de Node.js es sólo una llamada a vonage.messages.send(). Pasamos un objeto SMS con el mensaje de texto, el número al que enviarlo y el número que hemos vinculado a nuestra aplicación (que configuramos en la Parte 1 y tenemos en nuestro archivo .env ).
await vonage.messages.send(
new SMS(
'Your order has been submitted',
userRecord.phone,
process.env.VONAGE_FROM
)
);¡Eso es todo lo que se necesita para enviar un SMS a través de nuestra Messages API! El usuario debería recibir un mensaje de texto en su dispositivo móvil en tan solo unos minutos.
Si ha indagado en nuestra documentación para desarrolladoreste habrás dado cuenta de que tenemos dos API para enviar mensajes SMS. Una es la Messages API de la que acabamos de hablar, y la otra es nuestra SMS API. ¿Por qué tenemos dos API para lo mismo?
La SMS API es una de las API originales proporcionadas por Vonage y se creó cuando SMS era la única opción de mensajes de texto. Como tal, está diseñada no sólo para la función básica "Enviar un SMS a través de una API HTTP", sino también para interacciones de SMS más avanzadas como la función SMPP o protocolo Short Message Peer-to-Peer. SMPP es un protocolo de la industria de las telecomunicaciones que permite un intercambio de mensajes más directo entre aplicaciones y proveedores como Vonage.
Messages API está pensada para los usuarios más cotidianos. Toma la facilidad de uso de la SMS API original y la amplía a más canales como MMS y WhatsApp. Como se centra en un uso más general, no tiene acceso a SMPP.
Recomendamos utilizar la Messages API para cualquier proyecto nuevo. SMS y Mensajes deben seguir respetando restricciones de SMS específicas de cada país como 10DLC en los EE.UU., por lo que a menos que necesite específicamente el envío de SMS de muy bajo nivel como SMPP el Messages API es una mejor opción.
Una vez que el usuario envía su pedido, se le muestra una pantalla de estado del pedido. En ella se muestra el número de pedido devuelto por el registro MongoDB que hemos añadido y podría ampliarse para mostrar los propios elementos del pedido. Ahora queremos ver el botón "Video Call", ya que es una forma de que el cliente se ponga en contacto con el restaurante.
Desde el punto de vista del usuario final, puede hacer clic en este botón y se abrirá una nueva ventana para realizar una videollamada. Entrarán en una sala de reuniones con un bonito tema visual, la posibilidad de encender y apagar la cámara y el micrófono, y todas las comodidades que desearía para una videollamada. Lo mejor es que funciona con los principales navegadores, tanto en ordenadores de sobremesa como en dispositivos móviles.
Meeting Login 
Meeting Interface
La Meetings API todavía está en fase beta en el momento de escribir este artículo, pero configurarla es increíblemente fácil. Lo primero que vamos a hacer es configurar un tema. Esto se puede hacer antes y sólo hay que hacerlo una vez, pero se puede crear un tema con el logotipo de su empresa, combinación de colores, y la marca. Para configurar un nuevo tema, se necesita una sola llamada a la 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 no estamos utilizando el SDK, utilizaremos el método tokenGenerate() de @vonage/jwt para crear un token JWT para hablar con la API. A continuación, realizaremos una POST a la Meetings API con el nombre de nuestro tema, el color y otra información. Consulte la Referencia de la Meetings API para conocer todas las opciones. Esta llamada a la API devolverá un ID de tema que utilizaremos más adelante en la demostración.
Una vez que tenemos el ID de la reunión, se lo devolvemos al cliente para que lo utilice para abrir una nueva ventana.
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))
});
Una sola llamada a la API es todo lo que necesitamos añadir a nuestra aplicación para añadir videoconferencia a nuestra aplicación. No tuvimos que hacer nada para configurar la interfaz de usuario de la sala de vídeo, y todo utiliza el estándar WebRTC para funcionar en casi cualquier dispositivo.
Al igual que con Verify, podemos añadir funciones de SMS a nuestra aplicación con una sola línea de código. Si ya tienes una aplicación, es igual de fácil. Todo lo que necesitas es instalar el paquete @vonage/server-sdk configurar un nuevo cliente y añadir la línea para llamar a la Messages API siempre que quieras enviar un SMS.
También hemos añadido la videoconferencia con la misma facilidad. Crear una nueva sala es una simple llamada a la API; ahora, tenemos una llamada de Video con todas las funciones sin escribir una sola línea de código front-end.
¿Cómo sabe el restaurante que debe unirse a la videollamada? Abordaremos este tema en un próximo artículo. A continuación, veremos cómo utilizar la autenticación de usuario de MongoDB Atlas, lo que nos permitirá descargar nuestra autenticación de usuario a Atlas para nuestro backend administrativo.
Parte 3 - Uso de Vonage para las interacciones con los clientes
Compartir:
Chris es el director de herramientas de relaciones con los desarrolladores y dirige el equipo que crea sus herramientas favoritas. Lleva más de 15 años programando en varios lenguajes y tipos de proyectos, desde trabajos para clientes hasta sistemas de big data a gran escala. Vive en Ohio, donde pasa el tiempo con su familia y jugando a Video y TTRPG.