Captura de pantalla y guarda un chatlog con Conversation API y Cloudinary

Imagina que en un momento de brillantez, tras colaborar con compañeros de equipo en línea, has creado y diseñado algo bastante impresionante y ahora, antes de que se esfume de tu memoria, ¡necesitas guardar rápidamente la idea!

O imagina que estás chateando con un agente de atención al cliente o un bot de tu empresa favorita. No sería útil poder mostrarles EXACTAMENTE lo que ocurre en tu pantalla?

¿Te suenan estas situaciones? Pues está de suerte. Porque la API de Cloudinary te permite subir rápidamente una captura de pantalla a la nube, anotar la imagen para incluir detalles clave importantes, así como organizar el archivo en carpetas etiquetadas.

Combinación con Nexmo Conversation APIque ofrece comunicación multicanal, puedes compartir rápidamente tus capturas de pantalla de Cloudinary a través de chat, vídeo o mensajería con tus compañeros o con un agente de atención al cliente.

Construyamos una aplicación

Hoy, en colaboración con la API Cloudinary, crearemos una aplicación que te permitirá hacer una captura de pantalla de tu escritorio y de un chatlog de Nexmo Conversation, anotar la imagen con importantes detalles contextuales de la conversación, y guardar y organizar esa imagen en la nube para facilitar el acceso en el futuro.

El flujo de la aplicación

Dentro de un chatlog abierto, si el cliente o el agente introducen la palabra "captura de pantalla" en el registro, se realiza una captura de pantalla. Esa imagen se anota con información clave disponible en la Conversation API de Nexmo y posteriormente es etiquetada por Cloudinary y cargada en una carpeta dentro de su portal para un acceso rápido y fácil desde cualquier lugar.

Requisitos previos

• Account Cloudinary

  Vonage API Account

  To complete this tutorial, you will need a Vonage API account. If you don’t have one already, you can sign up today and start building with free credit. Once you have an account, you can find your API Key and API Secret at the top of the Vonage API Dashboard.

  

  Ready to start building?

  Experience seamless connectivity, real-time messaging, and crystal-clear voice and video calls—all at your fingertips.

Este tutorial amplía una reciente entrada de blog sobre cómo crear una aplicación de chat en vivo en la página. Vamos a añadir al código que se puede remezclar en Glitch aquí.

Si desea ejecutarlo localmente en lugar de utilizar Glitch, clone este repositorio y utiliza Ngrok para ejecutar tu webhook localmente.

Si no está familiarizado con Ngrok, consulte nuestro tutorial de Ngrok antes de continuar.

Basándose en el tutorial anterior, su archivo .env ya debería contener sus credenciales de Nexmo (clave API, secreto, ID de aplicación, clave privada e ID de usuario del agente de soporte). Pero si no es así, siga las instrucciones detalladas aquí.

Añade tus credenciales de Cloudinary

Navegue hasta Cloudinary y regístrese para obtener una Account gratuita. Guarde el nombre, la clave API y el secreto de Cloudinary y añádalos a su archivo .env.

CLOUD_NAME="YourCloudName"
CLOUD_API_KEY="1234567890"
CLOUD_API_SECRET="abCdeFghIjkLmnOpqrsTuvWxyZ"

Alternativamente: puede utilizar la variable de entorno CLOUDINARY_URL que se encuentra debajo de tu API Secret en la consola.

Añadir Cloudinary al código

Para empezar, instale Cloudinary como dependencia, así como una biblioteca npm llamada desktop-screenshot.

En la parte superior de su archivo server.js llame a estos dos:

var cloudinary = require("cloudinary").v2;
var screenshot = require("desktop-screenshot");

A continuación, configure Cloudinary haciendo referencia a las credenciales que acaba de añadir a su archivo .env archivo:

cloudinary.config({
  cloud_name: process.env.CLOUD_NAME,
  api_key: process.env.CLOUD_API_KEY,
  api_secret: process.env.CLOUD_API_SECRET
});

Todos los gestores del archivo server.js serán los mismos excepto "/webhooks/event". Llamaremos a la API Cloudinary dentro de este manejador.

Hacer la captura de pantalla

El escenario ahora es imaginar que cuando un usuario introduce el texto 'captura de pantalla' en el chat, se toma una imagen del escritorio. A continuación, se sube a Cloudinary y se organiza dentro de una carpeta etiquetada dentro del portal de Cloudinary.

Dentro del app.route("/webhooks/event").post handler, se utiliza un simple if statement para poner en marcha esa lógica:

if (req.body.body.text == "screenshot") {
  screenshot("screenshot.png", function(error, complete) {
    if (error) console.log("Screenshot failed", error);
    else console.log("Screenshot succeeded");
  });
}

Aquí, la biblioteca npm desktop-screenshot y la imagen se guarda localmente como "screenshot.png".

A continuación if statementvamos a subir esa imagen a tu portal Cloudinary:

cloudinary.uploader.upload(
  "screenshot.png",
  {
    tags: "screenshot",
    overlay: {
      font_family: "Arial",
      font_size: 50,
      text:
        "Conversation: " +
        req.body.conversation_id +
        "Timestamp: " +
        req.body.timestamp
    }
  },
  function(error, result) {
    console.log(result, error);
  }
);

El identificador de referencia y la marca de tiempo están disponibles a través de la Conversation API de Nexmo y se almacenan contextualmente en la aplicación y en el historial del usuario.

El archivo de captura de pantalla también se modifica con una superposición añadida sobre él para incluir el ID de la conversación, así como una marca de tiempo antes de subirlo a Cloudinary. La etiqueta añadida organiza el archivo en una carpeta concreta llamada "captura de pantalla".

cloudinary files

Avanzar desde aquí

Este tutorial cubre sólo unos pocos casos de uso para Cloudinary y Nexmo. Realmente hay mucho que se puede hacer tanto a la imagen y dentro de la conversación. Hoy hemos cubierto cómo tomar una captura de pantalla de su escritorio y un chatlog Conversación Nexmo, anotar la imagen con detalles contextuales importantes de la conversación, y guardar y organizar esa imagen en la nube para facilitar el acceso futuro.

Con Cloudinary, puedes hacer mucho más con la imagen; puedes manipularla recortándola, mejorándola o combinando varias imágenes en una sola. Echa un vistazo a los documentos y comparte con nosotros tus creaciones.

Y con la Nexmo Conversation APIpuedes combinar todos los estilos de comunicación, como chat, Voice, Video y mensajería entre múltiples miembros, todo para ser guardado contextualmente dentro de un único evento de comunicación. Animamos a los lectores a jugar, explorar y crear con la Conversation API y a compartir con nosotros sus inventos y descubrimientos.

Consulte este repositorio de GitHub para ver la versión final de esta aplicación Cloudinary/Nexmo.

Agradecimientos especiales a 🌟Tessa Mero🌟 de Cloudinary ¡por colaborar en este tutorial!