Capture a tela e salve um histórico de bate-papo com a Conversation API e o Cloudinary

Imagine que, em um momento de inspiração, depois de colaborar com seus colegas de equipe online, você criou e projetou algo bastante impressionante e agora, antes que isso se esvaneça da sua memória, precisa salvar rapidamente a ideia!

OU imagine que você esteja conversando com um atendente de atendimento ao cliente ou com um bot da sua empresa favorita. Não seria útil poder mostrar a eles EXATAMENTE o que estava acontecendo na sua tela?

Essas situações lhe parecem familiares? Bem, você está com sorte! Porque a API do Cloudinary permite que você envie rapidamente uma captura de tela para a nuvem, anote a imagem para incluir detalhes importantes, além de organizar o arquivo em pastas com tags.

Em combinação com a API de Conversação da Nexmo Conversation API, que oferece comunicação multicanal, você pode compartilhar rapidamente suas capturas de tela do Cloudinary por chat, Video ou mensagens com seus colegas ou com o agente de atendimento ao cliente!

Vamos criar um aplicativo

Hoje, em colaboração com a API do Cloudinary, vamos criar um aplicativo que permitirá que você faça uma captura de tela da sua área de trabalho e de um histórico de bate-papo do Nexmo Conversation, anote a imagem com detalhes contextuais importantes da conversa e salve e organize essa imagem na nuvem para facilitar o acesso no futuro!

O fluxo do aplicativo

Em um histórico de bate-papo aberto, se o cliente ou o atendente digitar a palavra “captura de tela” no histórico, uma captura de tela é feita. Essa imagem é então anotada com informações importantes disponibilizadas pela Conversation API da Nexmo e, em seguida, é marcada pelo Cloudinary e enviada para uma pasta no seu portal, para que você possa acessá-la de forma rápida e fácil, onde quer que esteja!

Pré-requisitos

• Account no Cloudinary

Este tutorial aprofunda uma postagem recente no blog sobre como criar um aplicativo de chat ao vivo na página. Vamos complementar o código, que pode ser adaptado no Glitch aqui.

Se você quiser executá-lo localmente, em vez de usar o Glitch, clone este repositório e use o Ngrok para executar seu webhook localmente.

Caso você não esteja familiarizado com o Ngrok, consulte nosso tutorial do Ngrok antes de continuar.

Com base no tutorial anterior, seu .env arquivo já deve estar preenchido com suas credenciais da Nexmo (chave de API, segredo, ID do aplicativo, chave privada e ID de usuário do agente de suporte). Mas, caso contrário, siga as instruções detalhadas aqui.

Adicione suas credenciais do Cloudinary

Acesse Cloudinary e crie um Account gratuito. Salve o nome de nuvem, a chave de API e o segredo fornecidos e adicione-os ao seu arquivo .env.

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

Como alternativa: você pode usar a variável de ambiente CLOUDINARY_URL localizada abaixo do seu Segredo da API no console.

Adicionar o Cloudinary ao código

Para começar, instale o Cloudinary como dependência, bem como uma biblioteca do npm chamada desktop-screenshot.

No início do seu server.js arquivo, chame esses dois:

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

Em seguida, configure o Cloudinary usando as credenciais que você acabou de adicionar ao seu .env arquivo:

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

Todos os manipuladores no server.js arquivo permanecerão os mesmos, exceto "/webhooks/event". Chamaremos a API do Cloudinary dentro desse manipulador.

Faça uma captura de tela

O cenário agora é imaginar que, quando um usuário digita o texto “screenshot” no chat, é capturada uma imagem da área de trabalho. Em seguida, ela é enviada para o Cloudinary e organizada em uma pasta com tags no portal do Cloudinary.

Dentro do app.route("/webhooks/event").post handler, um simples if statement é usado para dar início a essa 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");
  });
}

Aqui, a biblioteca npm desktop-screenshot é chamada, e a imagem é salva localmente como “screenshot.png”.

Em seguida, dentro desse if statement, vamos enviar essa imagem para o seu portal do 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);
  }
);

O ID e o carimbo de data/hora referenciados são disponibilizados por meio da Conversation API da Nexmo e são armazenados contextualmente no histórico do aplicativo e do usuário.

O arquivo da captura de tela também é modificado com a adição de uma sobreposição para incluir o ID da conversa e um carimbo de data e hora antes de ser enviado para o Cloudinary. A tag adicionada organiza o arquivo em uma pasta específica chamada “screenshot”.

cloudinary files

Partam daqui

Este tutorial aborda apenas alguns casos de uso tanto do Cloudinary quanto do Nexmo. Na verdade, há muito mais que poderia ser feito tanto com a imagem quanto dentro da conversa. Hoje, abordamos como fazer uma captura de tela da sua área de trabalho e do histórico de bate-papo do Nexmo, anotar a imagem com detalhes contextuais importantes da conversa e salvar e organizar essa imagem na nuvem para facilitar o acesso futuro.

Com o Cloudinary, você pode fazer muito mais com a imagem; é possível manipulá-la recortando, aprimorando ou criando uma colagem com várias imagens em uma só. Dê uma olhada a documentação e compartilhe conosco as ideias criativas que você tiver!

E com a API de Conversação da Nexmo Conversation API, você pode combinar todos os estilos de comunicação, como chat, voz, Video e mensagens entre vários participantes, tudo isso sendo salvo contextualmente em um único evento de comunicação. Incentivamos os leitores a experimentarem, explorarem e criarem com a Conversation API e a compartilharem conosco suas invenções e descobertas!

Dê uma olhada neste repositório do GitHub para ver a versão final desse aplicativo Cloudinary/Nexmo!

Agradecimento especial a 🌟Tessa Mero🌟 do Cloudinary pela colaboração neste tutorial!