Ejemplo de panel personalizado: Demostración de Etiquetas y Usuarios
Los paneles personalizados en GpsGate son combinaciones que utilizan recursos de la API REST. Puedes mostrar dinámicamente datos de GpsGate y otros sistemas empresariales directamente en las aplicaciones.
Requisitos
- Habilita el Constructor de Aplicaciones como se muestra aquí.
Introducción
GpsGate lanza nuevos recursos de API cada mes. (Para ver una lista de recursos disponibles, por favor visita esta página en tu servidor GpsGate: http://host_name/comGpsGate/api/v.1/test (reemplaza host_name con la dirección IP o el nombre de host de tu servidor real)).
En este ejemplo, utilizamos dos de los recursos de la API REST (Etiquetas y Usuarios) para crear un panel combinado. Recomendamos que alojes todos tus paneles personalizados en la carpeta ”\GpsGateServer\IIS\VehicleTracker\CustomPanels” en tu servidor GpsGate. El código fuente del ejemplo que explicamos en esta publicación del blog se puede descargar al final de la página.
Los paneles personalizados son páginas HTML simples que se alojan en tu servidor GpsGate. Dado que las aplicaciones de seguimiento y los paneles personalizados están alojados en el mismo servidor bajo el mismo dominio, puedes comunicarte con los recursos de la API REST de GpsGate sin autenticación. En la práctica, la autorización se realiza en segundo plano utilizando la información de tu sesión, que está disponible después de iniciar sesión en tu aplicación.
El Panel Personalizado para Usuarios/Etiquetas
En este ejemplo, leemos todas las Etiquetas y Usuarios de una aplicación desde la API REST de GpsGate y los visualizamos en un gráfico generado por una biblioteca de JavaScript de terceros llamada D3. Las operaciones GET de la API REST de GpsGate devuelven objetos JSON en el cuerpo de la respuesta. Para leer y analizar los resultados JSON, utilizamos el lector JSON integrado en la biblioteca D3. Puedes leer más sobre los lectores de datos de D3 aquí. Podemos usar la URL de nuestro panel personalizado para construir una URL al recurso de la API. Nuevamente, esto se debe a que tanto la API como nuestro panel personalizado están bajo el mismo dominio:
var domain = window.location.origin; var apiPath = '/comGpsGate/api/v.1/' ;
var usersResource = domain + apiPath + 'applications/' + applicationid + '/users?pagesize=' + pagesize;
|
En las líneas anteriores, creamos un enlace al recurso de Usuarios utilizando la ubicación actual de la página donde las variables “applicationid” y “pagesize” se analizan desde la cadena de consulta. Esto significa que cuando abrimos esta página HTML desde un script de ventana de VehicleTracker, necesitamos pasar el id de la aplicación y el tamaño de la página como parámetros. Se utilizan comandos similares para crear un enlace al recurso de Etiquetas:
|
var tagResource = domain + apiPath + 'applications/' + applicationid + '/tags'
|
El otro parámetro que nuestro panel personalizado acepta a través de la cadena de consulta es "Usuario". Solo los usuarios con un nombre que incluya el valor de este parámetro son visibles.
El resto de la página trata sobre construir un gráfico y visualizarlo usando la biblioteca D3. Por favor, lea los comentarios en el código fuente para obtener detalles del algoritmo. Tenga en cuenta que, como se mencionó anteriormente, no utilizamos ningún método de autorización en la página ya que el sistema recurre a la autorización de sesión cuando no hay una clave API presente.
Despliegue del panel personalizado
Para desplegar la página de mashup, simplemente copiamos la página HTML y todos sus recursos (archivos css, archivos js y bibliotecas de terceros) en la carpeta ”\GpsGateServer\IIS\VehicleTracker\CustomPanels\TagUserPanel”. Tenga en cuenta que puede abrir esta página directamente usando su URL si tiene una sesión (es decir, si ha iniciado sesión en una pestaña diferente de su navegador).
Uso del panel en la aplicación
En este paso, tenemos una página lista y solo necesitamos abrirla dentro de la aplicación. Hay diferentes formas de abrir una página personalizada dentro de una aplicación. En este ejemplo, utilizamos tanto el script de clic como el script de ventana para abrir nuestro panel personalizado.
Para crear un script de ventana, siga estos pasos:
- En su aplicación, vaya al Constructor de Aplicaciones.
- Elija un nombre para la nueva aplicación y seleccione los Roles como _Administrador.
- En el segundo paso, (Scripts de Clic) presione el botón + Script de Clic.
- Elija WindowsMenu como Tipo y presione el botón Editar para escribir su script.
- Copie y pegue el siguiente script y presione Guardar después.
- Reemplace server_address en el script con la dirección real de su servidor.
ui.iframe( 'myusertags' , 'Tags/Users' , 'http://server_address/gpsgateserver/VehicleTracker/CustomPanels/TagUserPanel/taguser.html?applicationid=4' , 100, 100, 1300, 650); log( "OK" );
|
El script abre la página especificada y tiene el “applicationid” codificado porque los scripts se crean por aplicación.
Ahora tienes un script de ventana que abre nuestro panel personalizado. Para abrir el panel, selecciona el nombre de tu script desde el menú Ventana. Puede integrarse a un espacio de trabajo, cambiarse a una ventana, moverse y guardarse como cualquier otro panel.
Ten en cuenta que no es posible incrustar cualquier URL como un iframe. Por ejemplo, incrustar una página con una URL HTTP en una página HTTPS no funcionará. Para abrir este tipo de página desde Asset Tracker, consulta la sección Abrir una URL en la Nueva Ventana del Navegador a continuación.
Una alternativa para abrir el panel personalizado es usar el “Menú de Clic Derecho del Usuario”. En este enfoque, podemos enviar el nombre del usuario como el valor de búsqueda predeterminado.
Sigue estos pasos para crear un “Menú de Clic Derecho del Usuario”:
- En tu aplicación, ve al Constructor de Aplicaciones.
- Haz clic en el botón + App y elige un nombre para la nueva aplicación.
- En el segundo paso, (Hacer clic en Scripts) presiona el botón + Click Script.
- Elige UserRightClick como Tipo y presiona el botón Editar para escribir tu script.
- Copia y pega el siguiente script y presiona Guardar después.
- Reemplaza server_address en el script con la dirección real de tu servidor.
|
ui.iframe( 'myusertags' , 'Tags/Users' , 'http://server_address/gpsgateserver/VehicleTracker/CustomPanels/TagUserPanel/taguser.html?applicationid=4&user=' + user . name , 100, 100, 1300, 650);
log( "OK" );
|
El script es muy similar al script que escribimos en el script de ventana. La única diferencia es que enviamos un parámetro de usuario adicional. El valor de este parámetro es el nombre del usuario sobre el que hicimos clic derecho.
El parámetro de nombre se utiliza en nuestra página HTML personalizada para propagar el campo de búsqueda. Ahora tenemos un panel personalizado que podemos abrir ya sea eligiendo UserTagsApp desde el menú Ventanas o haciendo clic derecho sobre un usuario:
Abrir una URL en la Nueva Ventana del Navegador
También puedes activar la apertura de una URL específica desde un script en una nueva ventana del navegador. Aquí te mostramos cómo modificar el script en el ejemplo anterior para abrir una nueva ventana del navegador:
|
if (url != null ) {
ui.open(url)
} |