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 do Vtiger Application Platform (VTAP) é sua capacidade de transferir os dados necessários do CRM para qualquer lugar e vice-versa. E combinando VTAP's Ferramenta Module Designer, 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: Obter os detalhes do clima para a localização de um contato e exibir 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 janela do contato página de detalhes. openweathermap.org fornece uma API de clima gratuita. Você pode se inscrever e obter a chave API para acessar o 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 uma cidade detalhes do tempo de openweathermap.org, eles definiram uma solicitação GET com o endpoint abaixo.
ENTRE api.openweathermap.org/dados,/2.5/weather?q= {cidade nome} & appid = {API chave}
Precisamos mapear isso para VADL, e seria algo como o exemplo abaixo:
Deixe-me explicar esse processo passo a passo:
- Qualquer HTTP API é colocado sob a resto nó com um atributo de método obrigatório que define o tipo de solicitação HTTP (GET, POST, etc.).
- Dentro disso, usamos o URL para atingir o endpoint da API.
- Observe que existem atributos com um URL nó. 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 preceder $ com o nome do atributo para substituí-los em tempo de execução.
- A CDATA seção dentro da 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 da API get_weather. Você pode acessar o xml final em SUA PARTICIPAÇÃO FAZ A DIFERENÇA tão bem.
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 Vtiger, e nós 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: Adicionando um novo widget de clima usando o Module Designer
Nesta etapa, vamos,
- Adicione o widget na página de detalhes
- Adicione um componente visual para o widget - Mapa
- Adicionar um modelo de pop-up e configurações de administrador
Vamos começar.
Adicionando o widget
Para adicionar um widget na página de detalhes, expusemos APIs de javascript VTAP.Componente.Registrar.
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 SUA PARTICIPAÇÃO FAZ A DIFERENÇA.
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 SUA PARTICIPAÇÃO FAZ A DIFERENÇA.
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 como nossa plataforma VTAP é construída nele.
Considere o exemplo abaixo. Aqui nós chamamos de get_weather API, que adicionamos no API Designer (dentro da função criada). VTAP.Detail.Record () A API Javascript 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 VTAP.CustomApi.Get API para buscar dados de openweathermap.org chamando get_weather API escrita em 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 SUA PARTICIPAÇÃO FAZ A DIFERENÇA.
É assim que ficaria quando você salvasse e publicasse o script e abrisse um contato que tenha 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 envio 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 VTAP.Recurso.Requerer API.
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 carregue-o depois de obter os dados da API get_weather com as coordenadas. Você pode obter o script completo de nossos exemplos SUA PARTICIPAÇÃO FAZ A DIFERENÇA e veja 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 de clientes 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
Nós vamos usar VTAP.AppData APIs para armazenar e recuperar 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 todo o código WeatherSettings de SUA PARTICIPAÇÃO FAZ A DIFERENÇA.
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 [email protegido].
Inscreva-se para a edição de desenvolvedor SUA PARTICIPAÇÃO FAZ A DIFERENÇA.
