Dado que los datos son un elemento esencial de nuestra vida diaria, Vtiger tiene como objetivo hacer que los datos sean fácilmente accesibles, incluso fuera de CRM.
Una de las características más significativas de la La plataforma de aplicaciones Vtiger (VTAP) es su capacidad para transferir los datos requeridos desde CRM a cualquier lugar y viceversa. Y combinando VTAP's Herramienta de diseñador de módulos, que permite la personalización de la interfaz de usuario, con un API Designer que puede conectarse con aplicaciones externas, ha abierto un mundo de posibilidades.
Solo para recordar, hablamos sobre la plataforma VTAP en nuestros blogs anteriores.
- La herramienta Module Designer te ayuda a personalizar tu interfaz de usuario
- La herramienta API Designer le ayuda a crear API REST personalizadas
En este blog, discutiremos cómo podemos conectarnos a otras aplicaciones que admiten API REST y mostrar los datos dentro de la interfaz de usuario de Vtiger. Para ello usaremos:
- El diseñador de API para conectar y obtener datos de aplicaciones externas
- La herramienta del diseñador de módulos para agregar la interfaz de usuario del widget
Caso de estudio: Obtener los detalles del clima para la ubicación de un contacto y mostrar los detalles en el registro del contacto.
Echemos un vistazo a cómo podemos obtener los detalles meteorológicos de un contacto y mostrarlos dentro de un widget en el página de detalles. openweathermap.org proporciona una API meteorológica gratuita. Puede registrarse y obtener la clave API para acceder al detalles de más de 200,000 ciudades.
Así es como se vería en el registro de contacto en Vtiger CRM después de conectarse con OpenWeatherMap.
Comencemos ahora con el Diseñador de API.
Paso 1: uso del diseñador de API para conectarse y obtener datos de openweathermap.org.
En este paso, haremos lo siguiente:
- Crea una API usando API Designer
- Definir puntos finales basados en HTTP
- ¿Cómo crear una API usando API Designer?
Primero, creemos una API para obtener información meteorológica de openweathermap.org en el Diseñador de API. Sigue estos pasos:- Vaya a Menú> Plataforma> Diseñador de API.
- Haga clic en Agregar API.
- Agregue un nombre, por ejemplo, 'get_weather'. Aquí, la convención de nomenclatura es crucial, ya que la usaremos para conectarnos desde nuestras API de JavaScript.
- Seleccione el módulo Contactos, ya que es allí donde estamos construyendo el widget meteorológico.
- Definición de puntos finales basados en HTTP
Todas nuestras API dependen de VADL(Vtiger Application Definition Language), que se basa libremente en XML y le permite invocar cualquier punto final basado en HTTP.
Necesitamos definir la estructura de un punto final HTTP, que normalmente implica un tipo de solicitud como GET, POST, PUT, DELETE, punto final de URL, encabezados de solicitud y autenticación como autenticación básica, etc. Para acceder a una ciudad detalles del clima de openweathermap.org han definido una solicitud GET con el siguiente punto final.
api.openweathermap.org/datos/2.5/weather?q= {ciudad nombre } & appid = {API clave}
Necesitamos mapear esto a VADL, y le gustaría algo como el siguiente ejemplo:
Déjame explicarte este proceso paso a paso:
- Cualquier HTTP API está sometido a resto nodo con un atributo de método obligatorio que define el tipo de solicitud HTTP (GET, POST, etc.).
- Dentro de eso, usamos el Enlance para llegar al punto final de la API.
- Observe que hay atributos con un Enlance nodo. Estos atributos son una parte dinámica del punto final y se utilizan para reemplazarlos con valores en el tiempo de ejecución.
- Cualquier atributo con un valor dinámico (precedido por @) será aceptado cuando se pase en la solicitud; hemos usado @city aquí.
- Para la clave API, puede pegar el valor de openweathermap. Para cualquier atributo, asegúrese de anteponer $ con el nombre del atributo para reemplazarlos en tiempo de ejecución.
- La CDATA se utiliza la sección dentro de la URL. Se conservan los caracteres especiales como &.
Una vez guardada y publicada, puede acceder a la API desde aplicaciones externas al igual que nuestras otras API REST con puntos finales. Mire la URL a continuación. Llamamos a la API con el nombre de la API obtener_tiempo. Puede acceder al xml final desde esta página .
https://xxxx.odx.vtiger.com/restapi/vtap/api/get_weather?city=London
Una nota importante es que debe incluir en la lista blanca todos los dominios de API en Configuración de API.
También puede acceder a esta API desde las API de Vtiger Javascript, y le diremos cómo puede hacerlo. Antes de eso, queremos crear un widget en la página de detalles para mostrar la información meteorológica.
Para ello, iremos al Diseñador de módulos y seleccionaremos Contactos y agregaremos un script TAP.
Paso 2: agregar un nuevo widget de clima usando el diseñador de módulos
En este paso, lo haremos
- Agregar el widget en la página de detalles
- Agregar un componente visual para el widget - Mapa
- Agregar un modelo emergente y configuraciones de administrador
Comencemos.
Agregar el widget
Para agregar un widget en la página de detalles, hemos expuesto las API de JavaScript VTAP.Componente.Registro.
Esto le ayudará a definir el tipo de botón, widget o icono que puede agregar a una página en particular.
Por ejemplo:
- Para agregar un botón en la página Lista, use "LISTA_BASIC_BUTTON"
- Para agregar un widget en la página de detalles, use "DETALLE_SUMMARY_WIDGET"
Para obtener una lista completa de dichos ganchos, haga clic en esta página.
Para definir cómo debería verse el widget, necesitamos agregar un componente que tendrá el HTML requerido. En este caso, vamos al componente WeatherWidgetContents.
En Vtiger, un componente es la base para cualquier interfaz de IU como widgets, botones, etc. El esqueleto básico de un componente está definido esta página.
El componente WeatherWidgetContents hará lo siguiente:
- Llame a la API de openweathermap get_weather, que creamos en API Designer.
- Cargue algunos detalles básicos como la hora actual, la hora de salida y puesta del sol, la temperatura y el pronóstico general.
- Carga Open Street y muestra la ciudad en el mapa.
Para comprender la estructura de un componente de Vtiger, necesita un poco de conocimiento del Componente Vue ya que nuestra plataforma VTAP está construida sobre ella.
Considere el siguiente ejemplo. Aquí lo llamamos obtener_tiempo API, que agregamos en API Designer (dentro de la función creada). VTAP.Detail.Record () La API de JavaScript proporciona los detalles del registro. Accederemos a la información del campo de la ciudad de envío de contactos para acceder a los detalles meteorológicos.
Una vez que se reciben los datos, usamos los datos meteorológicos en la plantilla para representarlos con la ayuda de funciones específicas de componentes definidas dentro de métodos.
Utilizamos VTAP.CustomApi.Obtener API para recuperar datos de openweathermap.org llamando obtener_tiempo API escrita en API Designer. Asigne la respuesta a una variable de datos para que pueda acceder a ella mediante:
- Un método de componentes para el procesamiento
- Plantilla para mostrar.
Muchas funciones auxiliares están escritas en métodos para ayudar a mostrar la hora y la temperatura en un formato legible.
Puedes ver el código esta página.
Así es como se vería una vez que guarde y publique el script y abra un contacto que tenga una ciudad de correo. ¿Pero no crees que esto parece un poco aburrido? ¿Por qué no agregar un mapa?
- Adición del componente visual: mapa
En este ejemplo, agreguemos un mapa de OpenStreet y mostremos la ciudad de envío en el mapa.
Para agregar el mapa de Open Street, primero debemos incluir su archivo de biblioteca. La biblioteca Javascript en VTAP permite la inclusión de cualquier biblioteca en el tiempo de ejecución usando VTAP.Recurso.Requerir API.
Puede incluir estas bibliotecas al registrar el widget de detalles en sí.
Ahora necesitamos mostrar el mapa en WeatherWidgetContent. Comience agregando un marcador de posición en la plantilla y cárguelo después de obtener los datos de la API get_weather con las coordenadas. Puede obtener el script completo de nuestros ejemplos. esta página y míralo en acción.
Ahora digamos que desea lanzar esto como un módulo de extensión, y cada cliente desea instalarlo y usar su propia clave API de openweathermap.org. Para ello, podemos almacenar los datos de los clientes utilizando las API de nuestra tienda de JavaScript, a las que se puede acceder en API Designer utilizando variables de marcador de posición.
- Agregar un modelo emergente y configuraciones de administración
Creemos una pequeña ventana emergente modal a la que solo los administradores pueden acceder y almacenar la clave API en nuestro almacén de datos. Primero, registre un componente para mostrar la configuración en la página de lista.
Así es como se vería en la página de lista.
- Almacenamiento de datos en Vtiger
Usaremos VTAP.AppData API para almacenar y recuperar su clave API. Tenga en cuenta que estamos usando weather_apikey como clave para almacenar, y se puede acceder a esto en API Designer usando $ apps. $ App.Contacts.weather_apikey.
Puede acceder al código completo de WeatherSettings desde esta página.
Después de usar la API de datos de la tienda VTAP para almacenar la clave API, podemos modificar la definición get_weather de API Designer como se muestra a continuación. Estamos reemplazando el valor de clave directa con $ apps. $ app.Contacts.weather_apikey.
Ahora se encuentra en el estado en el que puede publicar su extensión en nuestro mercado, ya que ha configurado la clave API para cada cliente.
Para cualquier otra consulta, envíe un correo electrónico a [email protected].
Regístrese para la edición para desarrolladores esta página.
