Screenshot und Speichern eines Chatlogs mit Conversation API und Cloudinary

Stellen Sie sich vor, Sie haben in einem Moment der Genialität, nachdem Sie mit Teamkollegen online zusammengearbeitet haben, etwas Beeindruckendes geschaffen und entworfen, und nun müssen Sie die Idee schnell speichern, bevor sie aus Ihrem Gedächtnis verschwindet!

Oder stellen Sie sich vor, Sie chatten mit einem Kundendienstmitarbeiter oder einem Bot Ihres Lieblingsunternehmens. Wäre es nicht hilfreich, wenn Sie ihnen GENAU zeigen könnten, was auf Ihrem Bildschirm passiert?

Kommen Ihnen diese Szenarien bekannt vor? Nun, Sie haben Glück! Denn die Cloudinary API ermöglicht es Ihnen, einen Screenshot schnell in die Cloud hochzuladen, das Bild mit wichtigen Details zu versehen und die Datei in getaggten Ordnern zu organisieren.

Kombiniert mit der Nexmo Conversation APIdie eine Multi-Channel-Kommunikation ermöglicht, können Sie Ihre Cloudinary-Screenshots schnell per Chat, Video oder Messaging mit Ihren Kollegen oder Kundenbetreuern teilen!

Erstellen wir eine App

Heute werden wir in Zusammenarbeit mit der Cloudinary API eine App entwickeln, die es Ihnen ermöglicht, einen Screenshot Ihres Desktops und eines Nexmo Conversation Chatlogs zu machen, das Bild mit wichtigen kontextuellen Details der Konversation zu versehen und dieses Bild in der Cloud zu speichern und zu organisieren, um später einfach darauf zugreifen zu können!

Der Ablauf der App

Wenn in einem offenen Chatprotokoll entweder der Kunde oder der Agent das Wort "Screenshot" eingibt, wird ein Screenshot erstellt. Dieses Bild wird dann mit wichtigen Informationen versehen, die über die Nexmo Conversation API und wird anschließend von Cloudinary getaggt und in einen Ordner innerhalb Ihres Portals hochgeladen, damit Sie überall schnell und einfach darauf zugreifen können!

Voraussetzungen

• Cloudinary-Konto

  Vonage API-Konto

  Um dieses Tutorial durchzuführen, benötigen Sie ein Vonage API-Konto. Wenn Sie noch keines haben, können Sie sich noch heute anmelden und mit einem kostenlosen Guthaben beginnen. Sobald Sie ein Konto haben, finden Sie Ihren API-Schlüssel und Ihr API-Geheimnis oben auf dem Vonage-API-Dashboard.

  

  Sind Sie bereit, mit dem Bau zu beginnen?

  Erleben Sie nahtlose Konnektivität, Echtzeit-Messaging und kristallklare Sprach- und Videoanrufe - alles auf Knopfdruck.

Dieses Tutorial ist eine Erweiterung eines kürzlich erschienenen Blogbeitrags über wie man eine On-Page-Live-Chat-App erstellt. Wir werden den Code ergänzen, der auf Glitch neu gemischt werden kann hier.

Wenn Sie es lokal ausführen möchten, anstatt Glitch zu verwenden, klonen Sie dieses Projektarchiv und verwenden Sie Ngrok zum Ausführen Ihres Webhook Server lokal auszuführen.

Wenn Sie mit Ngrok nicht vertraut sind, lesen Sie bitte unser Ngrok-Anleitung bevor Sie fortfahren.

Aufbauend auf dem vorherigen Tutorial, sollte Ihre .env Datei bereits mit Ihren Nexmo-Anmeldedaten gefüllt sein (API-Schlüssel, Geheimnis, Anwendungs-ID, privater Schlüssel und Benutzer-ID des Support-Agenten). Falls nicht, folgen Sie bitte den Anweisungen hier.

Ihre Cloudinary-Zugangsdaten hinzufügen

Navigieren Sie zu Cloudinary und melden Sie sich für einen kostenlosen Account an. Speichern Sie den angegebenen Cloud-Namen, den API-Schlüssel und das Geheimnis und fügen Sie diese zu Ihrer .env-Datei hinzu.

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

Alternativ können Sie auch die Umgebungsvariable CLOUDINARY_URL verwenden, die Sie unter Ihrem API Secret in der Konsole finden.

Hinzufügen von Cloudinary zum Code

Um zu beginnen, installieren Sie Cloudinary als Abhängigkeit sowie eine npm-Bibliothek namens desktop-screenshot.

Am Anfang Ihrer server.js Datei, rufen Sie diese beiden auf:

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

Richten Sie dann die Konfiguration für Cloudinary ein, indem Sie auf die Anmeldeinformationen verweisen, die Sie soeben zu Ihrer .env Datei hinzugefügt haben:

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

Alle Handler in der Datei server.js Datei bleiben gleich, mit Ausnahme von "/webhooks/event". In diesem Handler wird die Cloudinary-API aufgerufen.

Machen Sie den Screenshot

Wir stellen uns nun vor, dass ein Benutzer, der im Chat den Text "Screenshot" eingibt, ein Bild des Desktops macht. Es wird dann zu Cloudinary hochgeladen und in einem markierten Ordner im Cloudinary-Portal organisiert.

Innerhalb des app.route("/webhooks/event").post Handler, ein einfaches if statement verwendet, um die Logik zu starten:

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

Hier wird die npm-Bibliothek desktop-screenshot aufgerufen, und das Bild wird als "screenshot.png" lokal gespeichert.

Als Nächstes, innerhalb dieser if statementladen wir das Bild in Ihr Cloudinary-Portal hoch:

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

Die referenzierte ID und der Zeitstempel werden über die Conversation API von Nexmo zur Verfügung gestellt und kontextbezogen in der Anwendung und im Verlauf des Nutzers gespeichert.

Die Screenshot-Datei wird ebenfalls geändert und mit einem Overlay versehen, das die Gesprächs-ID sowie einen Zeitstempel enthält, bevor sie auf Cloudinary hochgeladen wird. Durch das hinzugefügte Tag wird die Datei in einem bestimmten Ordner namens "Screenshot" organisiert.

cloudinary files

Von hier aus weitergehen

Dieses Tutorial deckt nur ein paar Anwendungsfälle für Cloudinary und Nexmo ab. Es gibt wirklich so viel, was man sowohl mit dem Bild als auch innerhalb der Konversation machen kann. Heute haben wir uns damit beschäftigt, wie man einen Screenshot von seinem Desktop und einem Nexmo Conversation Chatlog macht, das Bild mit wichtigen kontextuellen Details der Konversation kommentiert und das Bild in der Cloud speichert und organisiert, damit man in Zukunft leicht darauf zugreifen kann.

Mit Cloudinary können Sie so viel mehr mit dem Bild machen: Sie können es zuschneiden, verbessern oder mehrere Bilder zu einem zusammenfügen. Schauen Sie sich die Dokumente und teilen Sie uns mit, welche kreativen Dinge Ihnen einfallen!

Und mit der Nexmo Conversation APIkönnen Sie alle Kommunikationsarten wie Chat, Voice, Video und Messaging zwischen mehreren Mitgliedern kombinieren, die alle in einem einzigen Kommunikationsereignis kontextbezogen gespeichert werden. Wir ermutigen unsere Leser, mit der Conversation API zu spielen, zu erforschen und zu kreieren und uns Ihre Erfindungen und Entdeckungen mitzuteilen!

Schauen Sie sich dieses GitHub-Repositorium um die endgültige Version dieser Cloudinary/Nexmo-Anwendung zu sehen!

Besonderen Dank an 🌟.Tessa Mero🌟 drüben bei Cloudinary für die Mitarbeit an diesem Tutorial!