Capture d'écran et sauvegarde d'un journal de bord avec Conversation API et Cloudinary

Imaginez que, dans un moment de génie, après avoir collaboré en ligne avec des coéquipiers, vous ayez créé et conçu quelque chose d'assez impressionnant et que, avant qu'il ne disparaisse de votre mémoire, vous ayez besoin de sauvegarder rapidement l'idée !

Imaginez que vous discutez avec un agent du service clientèle ou un robot de votre entreprise préférée. Ne serait-il pas utile de pouvoir lui montrer EXACTEMENT ce qui se passe sur votre écran ?

Ces scénarios vous semblent-ils familiers ? Eh bien, vous avez de la chance ! L'API Cloudinary API Cloudinary vous permet de télécharger rapidement une capture d'écran dans le nuage, d'annoter l'image pour y inclure des détails importants, ainsi que d'organiser le fichier dans des dossiers étiquetés.

Combinaison avec le Nexmo Conversation API, qui offre une communication multicanal, vous pouvez rapidement partager vos captures d'écran Cloudinary par chat, vidéo ou messagerie avec vos collègues ou votre agent du service client !

Construisons une application

Aujourd'hui, en collaboration avec l'API Cloudinary, nous allons créer une application qui vous permettra de prendre une capture d'écran de votre bureau et d'un journal de conversation de Nexmo Conversation, d'annoter l'image avec des détails contextuels importants de la conversation, et d'enregistrer et d'organiser cette image dans le nuage pour y accéder facilement à l'avenir !

Le flux de l'application

Dans un journal de discussion ouvert, si le client ou l'agent saisit le mot "capture d'écran" dans le journal, une capture d'écran est réalisée. Cette image est ensuite annotée avec des informations clés disponibles dans l'API de conversation de Nexmo Conversation API puis étiquetée par Cloudinary et téléchargée dans un dossier de votre portail pour un accès rapide et facile où que vous soyez !

Conditions préalables

• Compte 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.

Ce tutoriel développe un article de blog récent sur comment créer une application de chat en direct sur la page. Nous ajouterons au code qui peut être remixé sur Glitch ici.

Si vous souhaitez l'exécuter localement plutôt que d'utiliser Glitch, clonez ce repo et utilisez Ngrok pour lancer votre webhook localement.

Si vous n'êtes pas familier avec Ngrok, veuillez vous référer à notre tutoriel Ngrok avant de poursuivre.

En se basant sur le tutoriel précédent, votre fichier .env devrait déjà contenir vos informations d'identification Nexmo (clé API, secret, identifiant de l'application, clé privée et identifiant de l'agent d'assistance). Si ce n'est pas le cas, suivez les instructions détaillées ici.

Ajoutez vos informations d'identification Cloudinary

Naviguer vers Cloudinary et ouvrez un compte gratuit. Enregistrez votre nom de Cloud, votre clé API et votre secret et ajoutez-les à votre fichier .env.

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

Alternativement : vous pouvez utiliser la variable d'environnement CLOUDINARY_URL qui se trouve sous votre secret API dans la console.

Ajouter Cloudinary au code

Pour commencer, installez Cloudinary comme dépendance ainsi qu'une bibliothèque npm appelée desktop-screenshot.

Au début de votre fichier server.js appelez ces deux-là :

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

Ensuite, configurez Cloudinary en référençant les informations d'identification que vous venez d'ajouter à votre fichier .env fichier

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

Tous les gestionnaires du fichier server.js resteront identiques, à l'exception de "/webhooks/event". Nous appellerons l'API Cloudinary dans ce handler.

Prendre une capture d'écran

Le scénario consiste maintenant à imaginer que lorsqu'un utilisateur saisit le texte "capture d'écran" dans le chat, une image du bureau est prise. Elle est ensuite téléchargée sur Cloudinary et organisée dans un dossier étiqueté dans le portail de Cloudinary.

Dans le app.route("/webhooks/event").post un simple if statement est utilisé pour lancer cette logique :

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

Ici, la bibliothèque npm desktop-screenshot est appelée, et l'image est enregistrée localement sous le nom de "screenshot.png".

Ensuite, à l'intérieur de ce if statementtéléchargeons cette image sur votre portail 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);
  }
);

L'identifiant et l'horodatage référencés sont mis à disposition via la Conversation API de Nexmo et sont stockés de manière contextuelle dans l'application et l'historique de l'utilisateur.

Le fichier de capture d'écran est également modifié par l'ajout d'une superposition pour inclure l'identifiant de la conversation ainsi qu'un horodatage avant d'être téléchargé sur Cloudinary. L'étiquette ajoutée organise le fichier dans un dossier particulier appelé "screenshot".

cloudinary files

Aller de l'avant à partir d'ici

Ce tutoriel ne couvre que quelques cas d'utilisation de Cloudinary et Nexmo. Il y a vraiment beaucoup de choses qui peuvent être faites à la fois sur l'image et dans la conversation. Aujourd'hui, nous avons vu comment faire une capture d'écran de votre bureau et d'un journal de conversation Nexmo, comment annoter l'image avec des détails contextuels importants de la conversation, et comment sauvegarder et organiser cette image dans le nuage pour y accéder facilement à l'avenir.

Avec Cloudinary, vous pouvez faire beaucoup plus avec l'image ; vous pouvez la manipuler en la recadrant, en l'améliorant ou en rassemblant plusieurs images en une seule. Allez voir les documents et partagez avec nous vos idées créatives !

Et avec l'API Nexmo Conversation APIvous pouvez combiner tous les styles de communication, tels que le chat, la Voice, la Video et la messagerie entre plusieurs membres, le tout étant sauvegardé de manière contextuelle dans un seul événement de communication. Nous encourageons les lecteurs à jouer, explorer et créer avec la Conversation API et à nous faire part de leurs inventions et découvertes !

Consultez ce GitHub repo pour voir la version finale de cette application Cloudinary/Nexmo !

Remerciements particuliers à 🌟Tessa Mero🌟 chez Cloudinary pour avoir collaboré à ce tutoriel !