Ejemplo de plataforma
En esta sección del libro, les mostraremos un ejemplo para poder crear una plataforma personalizada en el cual ahorrarán varios pasos en el proceso y podrán comenzar a trabajar las necesidades de sus clientes.
1. Ejemplo de plataforma sin mapa.
Para crear tu primer plataforma solo debes copiar y pegar este código HTML y JS dentro de tu servidor donde se encuentra la URL destino que configuraste al crear la plataforma y solo haciendo esto, nuestro código se encargará de autenticar al usuario por medio del token y ademas ya tendrás algunos elementos en Javascript listo para utilizar.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://gpsresources.sfo3.cdn.digitaloceanspaces.com/js/jquery-1.11.3.min.js"></script>
<script src="https://qa.service24gps.com/commons/js/axios.min.js"></script>
<script src="https://qa.service24gps.com/commons/js/commons_new.js?22"></script>
<title>my platform</title>
</head>
<body class="customPlatform">
<!--Header nuevo-->
<header class="header-custom fix-t" id="header-platform"></header>
<!---->
<section class="wrap-base wc40-60">
<div class="wb-aside">
<div id="listado_generico" class="dt-new-style"></div>
</div>
<div class="wb-content">
<div id="div-map"></div>
</div>
</section>
<script type="text/javascript">
menu_elements = [
{ name: "Activos", icon: "i-vehicle", function: "_gpsApiv2.getAssets"},
{ name: "Conductores", icon: "i-driver", function: "showDrivers" },
{ name: "Lugares", icon: "i-place", function: "showPlaces" },
{ name: "Google", "href":"http://www.google.com"}
];
platform_logo = "https://library.service24gps.com/img/library_icon.svg";
_createComponents.createMenu(menu_elements,platform_logo);
/* Para cargar elementos dentro del systemElements
si no requiere alguno, solo elimina la linea
*/
$(document).ready(function() {
setTimeout(() => {
_gpsApiv2.getAssets()
_gpsApiv2.getPlaces()
_gpsApiv2.getDrivers()
}, 3000);
});
function showDrivers() {
_createComponents.loading();
const data = _gpsApiv2.getSystemElements({ element: 'drivers' });
const columns = {
'nombre' : 'Nombre',
'apellido' : 'Apellido',
'licencia' : 'Licencia',
'nombrevehiculo': 'Vehiculo'
};
let action_buttons = [];
action_buttons.push({
class: "bt xs ico agregar",
icon : 'i-plus',
attr : {
id : 'new_element',
title : "Crear"._t(),
onclick: "_createComponents.showForm('driver');"
}
});
let extra_buttons = []
extra_buttons.push(
{
name: 'Editar'._t(),
icon: 'i-edit',
function: 'editDriver',
class: 'bt xs edit ico',
campos: [ 'id' ],
title: 'Editar'
},
{
name: 'Eliminar'._t(),
icon: 'i-delete',
function: 'deleteDriver',
class: 'bt xs eliminar ico',
campos: [ 'id' ],
title: 'Eliminar'._t()
}
);
if (data !== null && Object.entries(data).length > 0) {
_createComponents.createList({ data, columns, action_buttons, extra_buttons });
} else {
_gpsApiv2.getDrivers({})
.then(data => _createComponents.createList({ data, columns, action_buttons, extra_buttons }))
.catch(console.error);
}
}
function showPlaces() {
_createComponents.loading();
const map_exists = typeof google !== 'undefined';
const data = _gpsApiv2.getSystemElements({ element: 'places' });
const columns = {
'nombre' : 'Nombre',
'grupo' : 'Grupo',
'direccion': 'Direccion'
};
const extra_buttons = [{
name: 'Centrar'._t(),
icon: 'i-place',
function: 'centerPlace',
class: 'bt xs edit ico',
campos: [ 'idLugar' ],
title: 'Centrar'._t()
}];
if (data !== null && Object.entries(data).length > 0) {
_createComponents.createList({ data, columns, action_buttons: [], extra_buttons });
if (map_exists) {
principal.addPlaceMarkers({ data, divId: 'div-map' });
}
} else {
_gpsApiv2.getPlaces({})
.then(data => {
_createComponents.createList({ data, columns, action_buttons: [], extra_buttons });
if (map_exists) {
principal.addPlaceMarkers({ data, divId: 'div-map' });
}
})
.catch(console.error);
}
}
function centerPlace(id) {
const place = _gpsApiv2.getSystemElements({ element: 'places', key: id });
if (place === null) {
return false;
}
const { marker = null } = place;
if (marker !== null) {
principal.centerMap({ marker });
}
}
</script>
</body>
</html>Un vez autenticado en tu plataforma, puedes acceder a información del usuario que ingresó por medio de javascript ya que debes contar con el siguiente Objeto de datos el cual, esta listo para que lo consumas.
//its defined a global object SYSTEMELEMENTS
console.log(systemElements);
//result {assets: {…}, places: {…}, drivers: {…}}
//This onject have elements as "assets, places, drivers" and shi have all elements atributtes
assets:
uid_element: {Address: '', Alto_icono: 50, Ancho_icono: 50, DatosJson: {…}, Equipo: 'uid_element', …}
uid_element: {Address: '', Alto_icono: 50, Ancho_icono: 50, DatosJson: {…}, Equipo: 'uid_element', …}
uid_element: {Address: '', Alto_icono: 50, Ancho_icono: 50, DatosJson: {…}, Equipo: 'uid_element', …}
drivers:
uid: {id: 'uid', numero: '', alias: '', nombre: 'name', apellido: 'lastname', …}
uid: {id: 'uis', numero: '', alias: '', nombre: 'name', apellido: 'lastname', …}
places:
place_uid: {idLugar: 'place_uid', nombre: 'place_name', direccion: '', latitud: '18.98', longitud: '-98.08', …}
place_uid: {idLugar: 'place_uid', nombre: 'place_name', direccion: '', latitud: '19.34', longitud: '-97.78', …}
Como se ve en el ejemplo anterior, en el objeto de systemElements, tendrás a la mano los elementos de la plataforma que el usuario tiene permisos para poder utilizarlos en tu desarrollo.
Así se verá la plataforma utilizando el código que se definió anteriormente en el ejemplo.
La plataforma puede o no contener un mapa, dependiendo de cómo lo definieron en la creación de la misma.
En el ejemplo anterior, definimos la creación de módulo o menús, dentro de la barra de navegación. Es importante que sepas que tu puedes crear todos los módulos o menús que necesites, siguiendo los ejemplos de herramientas que siguen a continuación en este mismos libro.
2. Ejemplo de plataforma con mapa.
A la hora de crear una plataforma con mapa, tenemos la opción de agregar el TOKEN del API de google dentro de la plataforma que creamos desde el menú de la plataforma OnPartners.
Un vez ingresada esta llave en tu plataforma personalizada, puedes utilizar el siguiente código de ejemplo para que inicies con tu plataforma la cual contendrá un mapa de google.