Caso de negócio 3: usar scripts de cliente para buscar dados de aplicativos ou sites de terceiros

Caso de negócio 3: usar scripts de cliente para buscar dados de aplicativos ou sites de terceiros

Ao projetar formulários, às vezes podemos querer exibir dados de outros sites ou aplicativos, como taxas de estoque, status de voo, detalhes de frete, atualizações meteorológicas etc. Para buscar essas informações de sites ou aplicativos de terceiros e exibi-las nos campos durante a criação de cartões, scripts de clientes podem ser usados.
 

Cenário de negócios

Ryan administra uma agência de férias. Ele usa Qntl para automatizar as solicitações de reserva de seus clientes. Ryan deseja exibir a previsão do tempo do destino de férias quando um cliente reservar o pacote de férias. Ele também deseja que a previsão seja atualizada automaticamente se um cliente alterar o destino.
 

Solução

Para conseguir isso, Ryan pode usar a API de qualquer site de previsão do tempo no script do cliente Qntrl e exibir o clima e a temperatura quando o usuário seleciona um destino. 

Configuração de exemplo 

Etapa 1 – criar uma orquestração

Crie uma nova orquestração – Booking Request Orchestration (Orquestração de solicitação de reserva) – e adicione campos para registrar a solicitação do cliente.
  1. Adicione um campo suspenso, Selecione um destino de viagem, e adicione valores no menu suspenso de Estados como Alabama, Alasca, Califórnia, Flórida e assim por diante.
  2. Crie 2 campos de linha única para registar o Tempo e a Temperatura do destino . 


Depois que o formulário for criado, prossiga para projetar o blueprint, definir permissões e publicar a orquestração.

Etapa 2: codificar scripts do cliente

Antes de criar scripts, selecione um site ou aplicativo do qual você gostaria de receber os dados. Usamos API do openweathermap.org no código de exemplo.
  1. Crie um novo script e insira um nome: Atualização do clima.
  2. Escolha a Booking Request Orchestration (Orquestração de solicitação de reserva) no menu suspenso Form (Formulário).
  3. Escolha Add new card (Adicionar novo cartão)  como Execution Location (Local de execução) para executar o script quando um novo cartão for adicionado.
  4. Escolha onChange como o Execution Trigger (Gatilho de execução) para permitir que o script exiba a previsão do tempo quando o destino for escolhido. Ao selecionar essa opção, uma lista suspensa Fields (Campos) será exibida no painel direito, onde você poderá escolher os campos cuja atualização deve acionar o script.
  5. Copie e cole o script abaixo em seu editor de script e substitua os nomes dos parâmetros.
    1. Você pode usar o ícone ? no canto superior direito do editor de script para fazer referência aos nomes dos parâmetros.
  6. Quando o script estiver pronto, Publish (Publique) -o. 
Script de amostra

async function onChange(forpage,oldVal,newVal,executeOnLoad){
    if(executeOnLoad){
        return;
    }
var weatherdata = ZDK.HTTP.GET(' https://api.openweathermap.org/data/2.5/weather?q='  + newVal.display_name + ',US&APPID=86ed5346f446a2975cb8f16e9eec2417');
 
    var msg = weatherdata.weather[0].description;
    current.Job.setValue(current.Layout.Fields.<select-Destination-weather-parameter-here>.id, msg);
    var temp = weatherdata.main.temp - 270;
    var str_a = temp.toString();
    var result = Number(str_a.slice(0, 5));
    var tempmsg = result + " Degree Celsius";
    current.Job.setValue(current.Layout.Fields.<select-Destination-temperature-parameter-here>.id, tempmsg);
}


Etapa 3 - adicionar um cartão

Quando os scripts de formulário, blueprint e cliente estiverem prontos, podemos testar o script criando um novo cartão.
  1. Navegue até Cards (Cartões) e clique em Add Card (Adicionar cartão) .
  2. Selecione Booking Request Orchestration (Orquestração da solicitação de reserva) no menu suspenso Form (Formulário).
  3. Insira o destino da viagem.
    1. O clima e a temperatura do destino são exibidos automaticamente.