Todos os produtos
Search
Central de documentação

DataV:Criar, visualizar e publicar aplicações de visualização

Última atualização: Jun 27, 2026

O DataV permite criar aplicações de visualização para PC e dispositivos móveis usando modelos. Este tópico descreve como criar, visualizar e publicar essas aplicações.

Limite de cota

As cotas de criação variam conforme a edição:

  • Basic Edition: até 5 aplicações de visualização.

  • Enterprise Edition: até 20 aplicações de visualização.

  • Professional Edition: até 40 aplicações de visualização.

Acessar o gerenciamento de aplicações de visualização

  1. Faça login no console do DataV.

  2. Após o login, o console exibe a página Projects por padrão.

Criar aplicações de visualização usando modelos

O DataV suporta a criação de aplicações de visualização para PC e dispositivos móveis com modelos.

  1. Na página Projects, clique em PC Creation na parte superior da página.

    Em All Projects, visualize todas as aplicações criadas e verifique quantas ainda podem ser criadas.

  2. Na lista de modelos, selecione um modelo ou tela em branco e clique em Create Project.

  3. Na caixa de diálogo Create Project, insira o Project Name e clique em Create.

    Após a criação bem-sucedida, você será redirecionado para o editor de aplicações de visualização.

    Nota

    Também é possível selecionar um Project Group na caixa de diálogo Create Project, desde que você já tenha criado um grupo.

  4. Opcional: retorne à página Projects para visualizar a aplicação criada com sucesso.

Visualizar aplicações de visualização

A pré-visualização permite verificar e testar o efeito real da aplicação antes da publicação formal, facilitando ajustes abrangentes para garantir o melhor resultado final.

Visualização para PC

  1. Na página Projects, selecione uma aplicação de visualização para PC e clique no ícone Preview image.png no canto superior direito.

    • Se a aplicação já foi publicada:

      • Caso restrições de acesso tenham sido definidas durante a publicação (como senha ou verificação por Token), entre em contato com o administrador do painel de visualização de dados para obter a chave de pré-visualização.

      • Se nenhuma restrição de acesso foi configurada, faça a pré-visualização diretamente.

    • Se a aplicação ainda não foi publicada, visualize-a diretamente.

  2. Opcional: se a pré-visualização atender às suas expectativas, publique a aplicação no ambiente online para que outros possam visualizá-la.

Publicar e compartilhar aplicações de visualização

As seções a seguir detalham o processo completo de publicação, incluindo publicação de aplicações e snapshots, gerenciamento de snapshots, restrições de acesso, informações de compartilhamento e configurações da página de carregamento. Esses recursos permitem publicar e gerenciar aplicações de visualização com eficácia, garantindo segurança e acessibilidade.

Publicar aplicações

  1. Na página Projects, passe o mouse sobre a área de qualquer aplicação de visualização e clique em Edit.

  2. No editor de tela, clique no ícone Publish image.png no canto superior direito da página.

  3. Na caixa de diálogo Publish, clique em Publish Project.

    Nota

    Se esta for a primeira publicação da aplicação, o sistema exibirá a caixa de diálogo Published. Nela, clique em Go To Snapshots para visualizar os snapshots ou em Cancel para acessar a página de publicação. Se a primeira publicação falhar, alterne a URL do DataV de HTTP para HTTPS e tente novamente.

  4. Após a publicação bem-sucedida, o sistema ativará a opção Published e gerará um link de compartilhamento e um QR code. Clique em QR Code para exibir o QR code da aplicação atual, que pode ser escaneado para acesso online. Para acessar a aplicação pelo navegador, clique no ícone () à direita de Sharing URL{F726A4C0-FA5C-4530-ACFA-1ED70E91BA9A}Copy e cole o link na barra de endereços.

    Nota

    Para alterar o link de compartilhamento após a publicação, clique no ícone 重新生成链接 (Regenerate Link) à esquerda para gerar um novo Share Link. O link antigo se tornará inválido; use o novo link para acessar a aplicação.

  5. Opcional: após compartilhar a aplicação com sucesso, configure os parâmetros de Publicar snapshots, Controle de acesso, Informações de compartilhamento e Configurações da página de carregamento.

Publicar snapshots

Após configurar o link de compartilhamento, defina a opção Publish Snapshots para especificar qual versão da aplicação os visitantes verão (o padrão é a versão do snapshot publicado). O conteúdo da tela ficará bloqueado no momento da criação do snapshot.

Nota

Após o arquivamento, edições e modificações no conteúdo da tela não serão sincronizadas com os snapshots históricos, que servem como backups de versões estáveis para pré-visualização.

Siga as etapas abaixo:

  1. Na caixa de diálogo Publish, selecione um snapshot histórico arquivado na lista Publish Snapshot para concluir a publicação dessa versão.

    • Se a aplicação não tiver snapshots históricos, o sistema publicará o conteúdo atual do editor como o primeiro snapshot.

    • Se houver snapshots históricos, o sistema publicará automaticamente o mais recente.

  2. Clique em Overwrite Published Snapshot para substituir o conteúdo do snapshot publicado pelo conteúdo atual da página de edição.

  3. Clique em Automatically Add Snapshot And Publish para adicionar e selecionar automaticamente um snapshot para publicação imediata.

  4. Clique em Manage Snapshots para gerenciar vários snapshots históricos na interface de gerenciamento.

Gerenciamento de snapshots

Clique em Manage Snapshots na caixa de diálogo Publish ou no ícone Manage Snapshots à direita de Generate Snapshot no canto superior direito do editor. Na caixa de diálogo Snapshot Management, execute as seguintes operações:

Nota

Se ocorrer uma falha ao adicionar ou modificar snapshots, alterne a URL do DataV de HTTP para HTTPS e tente novamente.

  • View Quota: no canto superior direito da caixa de diálogo Snapshot Management, visualize a cota restante para criação de snapshots. Ao atingir o limite, exclua snapshots indesejados para poder adicionar novos.

    Nota

    As cotas de snapshots variam conforme a edição:

    • Enterprise Edition: até 3 snapshots.

    • Professional Edition: até 10 snapshots.

  • Add Snapshot: clique em Add Snapshot na caixa de diálogo Snapshot Management para adicionar um snapshot histórico.

  • Overwrite Published Snapshot: clique em Overwrite Published Snapshot para substituir o conteúdo do snapshot publicado pelo conteúdo do editor, atualizando a página publicada em tempo real. A atualização inclui configurações do editor de tela, da fonte de dados e do editor de blueprint.

  • Publish Or Close Snapshot: selecione um snapshot histórico na barra de gerenciamento e clique no ícone 发布快照 à direita para publicar rapidamente a aplicação ou alternar o snapshot publicado. Após a alternância, o conteúdo da página publicada mudará para o do snapshot correspondente. Clique no ícone novamente para fechar o snapshot.

  • Lock Snapshot: clique no ícone 锁定快照 à direita de um snapshot histórico para bloqueá-lo. Snapshots bloqueados não podem ser excluídos ou substituídos.

  • Batch Delete: selecione vários ou todos os snapshots na interface de gerenciamento e clique no ícone Batch Delete para excluí-los em lote. Essa função não exclui snapshots publicados ou bloqueados.

    Importante
    • Snapshots publicados não podem ser excluídos.

    • Atualmente, apenas a alternância de snapshots é suportada, sem funcionalidade de reversão. Snapshots excluídos não podem ser recuperados; proceda com cautela.

  • Annotate Snapshot: clique no ícone 编辑注释 para adicionar anotações personalizadas ao snapshot.

Controle de acesso

Nota

Somente a Enterprise Edition e versões superiores oferecem suporte ao recurso Access Restrictions.

O recurso de publicação do DataV oferece quatro formas de compartilhar aplicações de visualização:

  • Compartilhamento público (padrão).

  • Compartilhamento com acesso por senha.

  • Compartilhamento com verificação por Token.

  • Compartilhamento com acesso por lista de permissões de IP.

Senha

  1. Na caixa de diálogo Publish, ative a opção Password.

  2. No campo Password, insira sua senha de verificação.

    A senha deve ter pelo menos 6 caracteres e atender a todas as três condições abaixo:

    • Incluir pelo menos uma letra maiúscula (A-Z).

    • Incluir pelo menos uma letra minúscula (a-z).

    • Incluir pelo menos um número (0-9).

    Após definir a senha com sucesso, o sistema exibirá Access control is configured.

  3. Opcional: configure o Verification Validity Period.

    Importante

    Só é possível configurar o Verification Validity Period após definir uma senha com sucesso ou ativar a verificação por Token.

    • Selecione Verification Validity Period para definir a validade da senha (máximo de 32 horas). Após inserir a senha corretamente e acessar a aplicação pela primeira vez, o visitante poderá acessá-la novamente dentro desse período sem precisar reinseri-la.

    • Desmarque Verification Validity Period para exigir a senha em cada acesso.

    Após a configuração bem-sucedida da senha, os visitantes precisarão inseri-la para acessar o link compartilhado.

Token

Integre as permissões de acesso das aplicações de visualização ao seu sistema de permissões usando a verificação por Token.

Na caixa de diálogo Publish, ative a opção Token para habilitar a verificação por Token. Após ativá-la, execute as seguintes operações:

  • Obtenha o código de verificação do Token.

    Ao ativar a opção Token, o DataV gera um Token. Registre-o para uso posterior.

  • (Opcional) Configure o Verification Validity Period.

    • Selecione Verification Validity Period para personalizar a validade da verificação por Token (máximo de 32 horas). Após concluir a verificação e acessar a aplicação pela primeira vez, o visitante poderá acessá-la novamente dentro desse período sem nova verificação.

    • Desmarque Verification Validity Period para exigir verificação em cada acesso.

Com a verificação por Token ativa, ao abrir novamente a página de compartilhamento da aplicação, você receberá a mensagem Access Denied, indicando acesso negado. Para abrir a página, conclua as etapas a seguir.

Importante

Para evitar ataques de replay, certifique-se de que o horário do servidor esteja definido como UTC+8. O DataV permite apenas uma margem de erro de 1 minuto. Se o erro exceder esse limite, a verificação falhará.

  1. Publique a aplicação de visualização e registre o código dela (o último segmento da URL).

  2. Concatene o código à hora atual (em milissegundos), separados por | (BARRA VERTICAL).

  3. Use HMAC-SHA256 base64 com o Token para criptografar o código de verificação obtido na etapa anterior.

  4. Nomeie o tempo e a assinatura criptografada como _datav_time e _datav_signature, respectivamente.

  5. Insira-os na querystring da URL em sequência.

    Importante

    Se precisar passar parâmetros via método GET na URL da aplicação, recomendamos usar a verificação de assinatura de parâmetro Token fornecida pelo DataV por motivos de segurança. Para mais informações, consulte Verificação de assinatura de parâmetro Token da página de compartilhamento do DataV.

    Exemplos de código:

    • PHP:

      <?php
        $token = "kBwoX9rFX9v4zbOT0Gjd_wr65DZ****";
        $screenID = "03d1b68faeb09671046d1ef43f58****";
        $time = time()*1000;
        $stringToSign = $screenID.'|'.$time;
        $signature = urlencode(base64_encode(hash_hmac('sha256', $stringToSign, $token, true)));
        $url = "http://datav.aliyuncs.com/share/".$screenID."?_datav_time=".$time."&_datav_signature=".$signature;
      ?>
      <iframe width=100% height=100% src="<?=$url?>"/>
    • Node.js:

      const crypto = require('crypto');
      var token = "Ev97wOUSAtJusc3Vsd9O2ngr_vfV****";
      var screenID ="14c5448c00ecde02b065c231d165****";
      var time = Date.now();
      var stringToSign = screenID +'|'+ time;
      var signature = crypto.createHmac('sha256', token).update(stringToSign).digest().toString('base64');
      var url="http://datav.aliyuncs.com/share/"+ screenID +"?_datav_time="+time+"&_datav_signature="+ encodeURIComponent(signature);
    • Java:

      package com.company;
      import java.security.*;
      import java.util.Date;
      import javax.crypto.*;
      import javax.crypto.spec.SecretKeySpec;
      import org.apache.commons.codec.binary.Base64;
      import java.net.URLEncoder;
      public class TokenTest {
          public static String getSignedUrl(String screenID, String token){
              Date date = new Date();
              Long time = date.getTime();
              String stringToSign = screenID + "|" + time;
              String signature = HMACSHA256(stringToSign.getBytes(), token.getBytes());
              String url = "http://datav.aliyuncs.com/share/"+ screenID +"?_datav_time="+time+"&_datav_signature="+ signature;
              return url;
          }
          /**
           *  Use Java's native digest implementation for SHA256 encryption.
           * @param str The encrypted message.
           * @return
           */
          public static String HMACSHA256(byte[] data, byte[] key)
          {
              try  {
                  SecretKeySpec signingKey = new SecretKeySpec(key, "HmacSHA256");
                  Mac mac = Mac.getInstance("HmacSHA256");
                  mac.init(signingKey);
                  return URLEncoder.encode(byte2Base64(mac.doFinal(data)));
              } catch (NoSuchAlgorithmException e) {
                  e.printStackTrace();
              } catch (InvalidKeyException e) {
                  e.printStackTrace();
              }
              return null;
          }
          private static String byte2Base64(byte[] bytes){
              return Base64.encodeBase64String(bytes);
          }
          public static void main(String[] args) throws Exception {
              System.out.println(getSignedUrl("screenId", "token"));
          }
      }
    • C#:

      using System;
      using System.Security.Cryptography;
      using System.Text.RegularExpressions;
      using System.Collections.Generic;
      using System.Linq;
      using System.Web;
      using System.Text;
      
      namespace datavToken
      {
          class Program
          {
              static void Main(string[] args)
              {
                  var dic = new Dictionary<string, string>();  // Custom parameters.
                  dic.Add("datav_sign_no", "123998");         // datav_sign_ prefix, needs to be signed.
                  dic.Add("datav_sign_lo", "kk");
                  dic.Add("datav_sign_ao", "xx");
      
                  dic.Add("name", "123");   // Does not need to be signed.
                  // Share page prefix, screen share ID, token, custom parameter dictionary.
                  Console.WriteLine(GenerateUrl("https://datav.aliyun.com/share/", "ca74bea5e45503070d607795e0****", "66DsL2qjrXRHluSJScv_flOUhn****", dic));
              }
              private static string GenerateUrl(string datavBase, string screenId, string token, Dictionary<string, string> customeParams)
              {
                  string pattern = @"^datav_sign_.*";
                  string timestamp = GetTimeStamp();
      
                  // Parameter sorting.
                  Dictionary<string, string>.KeyCollection keyCol = customeParams.Keys;
                  List<string> signKeys = new List<string>();
      
                  foreach (var item in keyCol.ToList())
                  {
                      if (Regex.IsMatch(item, pattern))
                      {
                          signKeys.Add(item);
                      }
                  }
      
                  // Sort by key.
                  signKeys = signKeys.OrderBy(k => k).ToList();
      
                  string paramsSignStr = signKeys.Aggregate("", (total, key) =>
                  {
                      if (total != "")
                      {
                          total += "&";
                      }
                      total += key + "=" + customeParams[key];
                      return total;
                  });
                  //No parameter authentication
                  string signStr = screenId + "|" + timestamp;
                  //Parameter authentication exists
                  //string signStr = screenId + "|" + timestamp + "|" + paramsSignStr;
                  
      
                  var encoding = new System.Text.ASCIIEncoding();
                  byte[] keyByte = encoding.GetBytes(token);
                  byte[] messageBytes = encoding.GetBytes(signStr);
                  string signature;
                  using (var hmacsha256 = new HMACSHA256(keyByte))
                  {
                      byte[] hashmessage = hmacsha256.ComputeHash(messageBytes);
                      signature = Convert.ToBase64String(hashmessage);
                  }
      
                  var paramDic = new Dictionary<string, string>();
                  paramDic.Add("_datav_time", timestamp);
                  paramDic.Add("_datav_signature", signature);
      
                  foreach (var item in customeParams)
                  {
                      paramDic.Add(item.Key, item.Value);
                  }
                  return datavBase + screenId + "?" + ParseToString(paramDic);
              }
              public static string GetTimeStamp()
              {
                  TimeSpan ts = DateTime.UtcNow - new DateTime(1970, 1, 1, 0, 0, 0, 0);
                  return Convert.ToInt64(ts.TotalMilliseconds).ToString();
              }
              static public string ParseToString(IDictionary<string, string> parameters)
              {
                  IDictionary<string, string> sortedParams = new SortedDictionary<string, string>(parameters);
                  IEnumerator<KeyValuePair<string, string>> dem = sortedParams.GetEnumerator();
      
                  StringBuilder query = new StringBuilder("");
                  while (dem.MoveNext())
                  {
                      string key = dem.Current.Key;
                      string value = dem.Current.Value;
                      if (!string.IsNullOrEmpty(key) && !string.IsNullOrEmpty(value))
                      {
                          query.Append(key).Append("=").Append(HttpUtility.UrlEncode(value)).Append("&");
                      }
                  }
                  string content = query.ToString().Substring(0, query.Length - 1);
      
                  return content;
              }
          }
      }

Lista de permissões de endereços IP

Ao ativar a lista de permissões de IP, a aplicação publicada só poderá ser acessada por endereços IP incluídos no intervalo especificado.

  1. Na caixa de diálogo Publish, ative a Lista de Permissões de IP.

  2. No campo IP Address Whitelist abaixo, insira seus endereços IP, separando as entradas por vírgulas.

    Após configurar a lista de permissões com sucesso, qualquer tentativa de acesso ao link compartilhado por um IP não listado resultará em negação de acesso à página da aplicação.

Informações de compartilhamento

As aplicações de visualização do DataV permitem personalizar as informações exibidas ao compartilhar links publicados no cliente DingTalk. Os parâmetros de configuração são:

Parâmetro de configuração

Descrição

Title

Personalize o título do link de compartilhamento da aplicação a ser publicado. Por padrão, exibe o título usado na criação da aplicação.

Description

Forneça uma breve descrição do link de compartilhamento da aplicação a ser publicado.

Image

Defina uma imagem para o link de compartilhamento inserindo uma URL personalizada ou arrastando uma imagem local para o painel de imagens à direita.

Nota

Imagens estáticas e dinâmicas são suportadas, mas serão exibidas como estáticas no link de compartilhamento.

Exemplo de exibição do link de compartilhamento no cliente DingTalk 分享链接样例展示

Nota

Se o cartão compartilhado não estiver atualizado, isso pode ocorrer devido ao mecanismo de cache do cliente DingTalk após múltiplas modificações nas informações. Recomendamos reiniciar o cliente DingTalk antes de compartilhar o link.

Configurações da página de carregamento

As aplicações de visualização do DataV permitem personalizar o conteúdo da página de carregamento ao compartilhar links publicados. Os parâmetros de configuração são:

Nota

Somente a Professional Edition oferecem suporte ao recurso Loading Page Configuration.

Parâmetro de configuração

Descrição

Background

Personalize a cor de fundo da página de carregamento da aplicação a ser publicada. Cores sólidas e gradientes são suportados.

Logo

Defina um logotipo para a página de carregamento inserindo uma URL de imagem personalizada ou arrastando uma imagem local para o painel de imagens à direita.

Nota

Imagens estáticas e dinâmicas são suportadas. Imagens dinâmicas serão reproduzidas na página de carregamento.

Referências

Após criar uma aplicação de visualização, realize o gerenciamento de recursos para otimizar e manter a aplicação.