top of page
Foto do escritorLarissa Rodrigues

Um mundo de possibilidades - Use o VTAP API Designer e conecte-se a aplicativos externos



Com os dados sendo um elemento essencial de nossas vidas diárias, o Vtiger visa tornar os dados facilmente acessíveis, mesmo fora do CRM.

Uma das características mais significativas da Vtiger Application Platform (VTAP) é sua capacidade de transferir os dados necessários do CRM para qualquer lugar e vice-versa. E a combinação da ferramenta Module Designer do VTAP , que permite a personalização da IU, com um API Designer que pode se conectar com aplicativos externos abriu um mundo de possibilidades. Só para lembrar, falamos sobre a plataforma VTAP em nossos blogs anteriores.

  • A ferramenta Module Designer ajuda a personalizar sua IU

  • A ferramenta API Designer ajuda a criar APIs REST personalizadas

Neste blog, discutiremos como podemos nos conectar a outros aplicativos que suportam APIs REST e mostrar os dados dentro da IU do Vtiger. Para isso, usaremos:

  • O API Designer para conectar e buscar dados de aplicativos externos

  • A ferramenta Module Designer para adicionar UI de widget


Estudo de caso: obtendo os detalhes do clima para a localização de um contato e exibindo os detalhes no registro do contato.

Vamos dar uma olhada em como podemos obter os detalhes do clima de um contato e mostrá-los dentro de um widget na página de detalhes do contato . openweathermap.org fornece uma API de clima gratuita. Você pode se inscrever e obter a chave API para acessar os detalhes de mais de 200.000 cidades.


É assim que ficaria no registro de contato no Vtiger CRM depois de conectar-se ao OpenWeatherMap.


Vamos agora começar com o API Designer.


Etapa 1: Usando o API Designer para conectar e buscar dados em openweathermap.org .

Nesta etapa, iremos:

  • Crie uma API usando o API Designer

  • Definir endpoints baseados em HTTP


  • Como criar uma API usando o API Designer? Primeiro, vamos criar uma API para buscar informações meteorológicas de openweathermap.org no API Designer. Siga esses passos:

    • Vá para Menu> Plataforma> Designer de API.

    • Clique em Adicionar API.

    • Adicione um nome, por exemplo, 'get_weather'. Aqui, a convenção de nomenclatura é crucial, pois a usaremos para nos conectar a partir de nossas APIs javascript.

    • Selecione o módulo Contatos, pois é onde estamos construindo o widget de clima.



  • Definição de endpoints baseados em HTTP

Todas as nossas APIs dependem de VADL ( Vtiger Application Definition Language), que é vagamente baseado em XML e permite que você invoque qualquer ponto de extremidade baseado em HTTP. Precisamos definir a estrutura de um endpoint HTTP, que normalmente envolve um tipo de solicitação como GET, POST, PUT, DELETE, endpoint de URL, cabeçalhos de solicitação e autenticação como autenticação básica, etc. Para acessar os detalhes do clima de uma cidade a partir do openweathermap. org eles definiram uma solicitação GET com o endpoint abaixo.

OBTER api.openweathermap.org/ data /2.5/weather?q= { city name } & appid = { API key }

Precisamos mapear isso para VADL, e seria algo como o exemplo abaixo:



Deixe-me explicar esse processo passo a passo:

  • Qualquer API HTTP é colocada em um nó de descanso com um atributo de método obrigatório que define o tipo de solicitação HTTP (GET, POST, etc.).

  • Dentro disso, usamos a URL para atingir o endpoint da API.

  • Observe que há atributos com um nó de URL . Esses atributos são uma parte dinâmica do terminal e são usados ​​para substituí-los por valores no tempo de execução.

  • Qualquer atributo com um valor dinâmico (prefixar com @) será aceito quando passado na solicitação; usamos @city aqui.

  • Para a chave de API, você pode colar o valor de openweathermap. Para qualquer atributo, certifique-se de incluir $ antes do nome do atributo para substituí-los no tempo de execução.

  • A seção CDATA dentro do URL é usada. Caracteres especiais como & são mantidos.

Depois de salvo e publicado, você pode acessar a API de aplicativos externos, assim como nossas outras APIs REST com terminais. Olhe para o URL abaixo. Chamamos a API com o nome de API get_weather . Você também pode acessar o xml final aqui .

https://xxxx.odx.vtiger.com/restapi/vtap/api/get_weather?city=London

Uma observação importante é que você deve colocar na lista de permissões todos os domínios de API em Configurações de API.



Você também pode acessar esta API a partir de APIs Javascript do Vtiger, e diremos como você pode fazer isso. Antes disso, queremos criar um widget na página de detalhes para mostrar as informações do tempo. Para isso, iremos ao Module Designer, selecionaremos Contatos e adicionaremos um script TAP.

Etapa 2: Adicionar um novo widget de clima usando o Module Designer

Nesta etapa, vamos,

  1. Adicione o widget na página de detalhes

  2. Adicione um componente visual para o widget - Mapa

  3. Adicionar um modelo de pop-up e configurações de administrador

Comecemos.

Adicionando o widget



Para adicionar um widget na página de detalhes, expusemos as APIs javascript VTAP.Component.Register . Isso o ajudará a definir o tipo de botão, widget ou ícone que você pode adicionar a uma página específica.

Por exemplo:

  • Para adicionar um botão na página Lista, use “ LIST_BASIC_BUTTON

  • Para adicionar um widget na página de detalhes, use “ DETAIL_SUMMARY_WIDGET

Para obter uma lista completa desses ganchos, clique aqui .

Para definir a aparência do widget, precisamos adicionar um componente que terá o HTML necessário. Nesse caso, vamos para o componente WeatherWidgetContents. No Vtiger, um componente é a base para qualquer interface de IU como widgets, botões, etc. O esqueleto básico de um componente é definido aqui .



O componente WeatherWidgetContents fará o seguinte:

  • Chame a API openweathermap get_weather, que criamos no API Designer.

  • Carregue alguns detalhes básicos como hora atual, hora do nascer e pôr do sol, temperatura e previsão geral.

  • Carregue Open Street e mostre a cidade no mapa.

Para entender a estrutura de um componente Vtiger, você precisa de um pouco de conhecimento do componente Vue, pois nossa plataforma VTAP é construída nele. Considere o exemplo abaixo. Aqui chamamos a API get_weather , que adicionamos no API Designer (dentro da função criada). A API Javascript VTAP.Detail.Record () fornece os detalhes do registro. Iremos acessar as informações do campo da cidade de correspondência dos Contatos para acessar os detalhes do clima.

Uma vez que os dados são recebidos, usamos os dados meteorológicos no modelo para renderizá-los com a ajuda de funções específicas do componente definidas dentro dos métodos.

Usamos a API VTAP.CustomApi.Get para buscar dados de openweathermap.org chamando get_weather API escrita no API Designer. Atribua a resposta a uma variável de dados para que ela possa ser acessada por:

  • Um método de componente para processamento

  • Modelo para exibição.

Muitas funções auxiliares são escritas em métodos para ajudar a exibir o tempo e a temperatura em um formato legível. Você pode ver o código aqui .

É assim que ficaria depois de salvar e publicar o script e abrir um contato que tem uma cidade de correspondência. Mas você não acha que isso parece um pouco chato? Por que não adicionar um mapa?


  • Adicionando o Componente Visual - Mapa

Neste exemplo, vamos adicionar um mapa do OpenStreet e mostrar a cidade de correspondência no mapa. Para adicionar o mapa Open Street, primeiro precisamos incluir seu arquivo de biblioteca. A biblioteca Javascript no VTAP permite a inclusão de qualquer biblioteca no tempo de execução usando a API VTAP.Resource.Require . Você pode incluir essas bibliotecas ao registrar o próprio widget de detalhes.



Agora precisamos mostrar o mapa em WeatherWidgetContent. Comece adicionando um espaço reservado no modelo e carregando-o depois de obter os dados da API get_weather com as coordenadas. Você pode obter o script completo de nossos exemplos aqui e vê-lo em ação.


Agora, digamos que você deseja liberar isso como um módulo de extensão, e cada cliente deseja instalá-lo e usar sua própria chave de API openweathermap.org. Para isso, podemos armazenar dados do cliente usando nossas APIs de armazenamento javascript, que podem ser acessadas no API Designer usando variáveis ​​de espaço reservado .

  • Adicionar um modelo de pop-up e configurações de administrador

Vamos criar um pequeno pop-up modal que apenas administradores podem acessar e armazenar a chave de API em nosso armazenamento de dados. Primeiro, registre um componente para mostrar as configurações na página de lista.


É assim que ficaria na página da lista.


  • Armazenamento de dados no Vtiger

Usaremos VTAP.AppData API de armazenar e recuperar a sua chave de API. Observe que estamos usando weather_apikey como uma chave para armazenar, e isso pode ser acessado no API Designer usando $ apps. $ App.Contacts.weather_apikey.


Você pode acessar o código WeatherSettings inteiro a partir daqui .

Depois de usar a API de dados de armazenamento do VTAP para armazenar a chave da API, podemos modificar a definição get_weather do API Designer conforme mostrado abaixo. Estamos substituindo o valor da chave direta por $ apps. $ App.Contacts.weather_apikey


Agora você está no estado em que pode publicar sua extensão em nosso mercado, pois tornou a chave API configurável para cada cliente.

Para qualquer outra dúvida, envie um e-mail para platform@vtiger.com . Inscreva-se para a edição do desenvolvedor aqui .

20 visualizações0 comentário

Comments


bottom of page