Cargo-Planner Docs
Cargo-Planner en tu Aplicación
Aunque nuestra aplicación web debería cubrir la mayoría de los casos de uso, a veces podría ser de interés añadir la funcionalidad de planificación de carga a un sistema WMS o ERP existente, o quizás a tu propio portal web personalizado. Puedes utilizar la mayoría de las funcionalidades usando nuestra Rest API y el SDK de JavaScript.
Lado del servidor
Aunque realmente no necesitas usar un servidor, es una buena manera de usarlo como intermediario entre Cargo-Planner y el cliente. Si tienes una manera de publicar de forma segura el token de la API al cliente (recuerda que almacenar claves en localStorage o en el código no es una buena práctica), puedes llamar a nuestra API directamente desde el cliente.
# /calculate endpoint at your server located at https://api.acme.com
import requests
import json
CARGO_PLANNER_TOKEN = 'Token your-token'
def calculate(request):
response = requests.post(
url="https://api.cargo-planner.com/api/2/calculate/",
data=json.dumps(request.data),
headers={
'Content-type': 'application/json',
'Authorization': CARGO_PLANNER_TOKEN
})
if response.status_code == 200:
return response.json()
#...Cliente
Descarga nuestro SDK aquí. El ejemplo a continuación llamará al endpoint mencionado, que a su vez llamará a nuestra API y devolverá un plan de carga / solución para tus datos de cálculo, y luego mostrará una imagen 3D de cada contenedor.
<meta charset="utf-8">
<title>Mi portal de clientes</title>
<script src="./cargoPlannerSDK.umd.min.js"></script>
<body>
<h1>Plan de carga</h1>
</body>
<script>
calculate();
async function calculate() {
// Inicializar motor 3D
await cargoPlannerSDK.SceneManager.init();
// Consulta la documentación de la API para más opciones
let calculationData = {
length_dim: "M",
weight_dim: "KG",
"items": [
{
"label": "Cargo 1",
"l": 1.2,
"w": 0.8,
"h": 0.5,
"wt": 300,
"qty": 20,
"layers": 2,
"color":"#48c9b0"
},
{
"label": "Cargo 2",
"l": 1.2,
"w": 1.0,
"h": 0.9,
"wt": 300,
"qty": 20,
"layers": 2,
"color":"#ec7063"
},
],
"settings": {
"group_items": true
},
"container_types": [
{
"name": "40ft DV",
"L": 12,
"W": 2.33,
"H": 2.38,
"payload": 22000,
"door": {
H: 2.33,
W: 2.28
}
}
]
}
fetch('/calculate/', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(calculationData),
})
.then(response => response.json())
.then(data => {
// Si recibimos alguna solución
if(data.solutions) {
// Por el momento, cada cálculo da una solución (en el futuro podríamos proporcionar más)
data.solutions.forEach((solution) => {
// Recorre cada contenedor
solution.containers.forEach((container, index) => {
// Renderiza el lienzo
cargoPlannerSDK.SceneManager.createScene(
container, // datos del contenedor
null, // Modo interactivo (establecer en null cuando se muestran múltiples contenedores)
400, // Ancho en píxeles
200 // Alto en píxeles
).then((canvas) => {
const containerDiv = document.createElement("div");
const label = document.createTextNode(`Contenedor ${index+1}: ${container.name}`)
containerDiv.appendChild(label);
containerDiv.appendChild(canvas);
document.body.appendChild(containerDiv);
});
});
});
}
});
}
</script>
El ejemplo anterior generará el plan de carga a continuación:
