Cargo-Planner Docs
Incluir en su aplicación
Aunque nuestra aplicación web debería cubrir la mayoría de los casos de uso, a veces puede ser de interés agregar la funcionalidad de planificación de carga a un sistema WMS o ERP existente, o quizás a su propio portal web personalizado. Puede utilizar la mayor parte de la funcionalidad usando nuestra API Rest y el SDK de JavaScript.
Tres maneras de agregar Cargo-Planner a su aplicación
Hay tres maneras de agregar la funcionalidad de planificación de carga a su aplicación. Cuál es la más adecuada en su caso de uso es un equilibrio entre complejidad, características y personalización.
1. Incrustar en un iframe - sin código (casi)
La forma más fácil de integrar nuestra herramienta de planificación de carga es incrustar la vista en un elemento html iframe.
El mayor inconveniente de este enfoque es que se realizará de una manera no autenticada, lo que significa que los objetos de la lista de carga deben ser creados de antemano y luego habilitar el acceso de Lectura y Escritura para compartir públicamente. Para hacerlo, necesita crear un nuevo plan de carga (solo necesita crearlo, no necesita completar ningún dato) y luego habilitar el compartir.
Una vez hecho esto, copie el enlace para compartir e incrústelo en un iframe como este:
<iframe
src="https://app.cargo-planner.com/loadlist/10405cacde654075kjf53bd1f78520/workspace/0?length_dim=IN&weight_dim=LB&primary=1e3a8a"></iframe> 
Tenga en cuenta que puede agregar un parámetro de consulta primario con un color hexadecimal. Proporcione el color de su tema y se integrará mejor con su entorno.
También puede establecer el parámetro de consulta hide_navigation en verdadero para ocultar la barra de navegación. Esto podría ser útil si, por ejemplo, solo desea mostrar la vista del plan de carga.
2. Subir datos usando la API - mostrar resultado en un iframe
Mientras que la solución anterior permite rápidamente adjuntar la funcionalidad de planificación de carga a su sitio, los principales inconvenientes son que necesita crear cada lista manualmente. Si tiene múltiples usuarios usando su aplicación, puede resultar en un comportamiento extraño ya que la misma lista de carga podría actualizarse simultáneamente.
Otro inconveniente es que los datos de carga deben agregarse manualmente (bueno, aún podría usar las diversas funciones de importación). Su aplicación probablemente ya tendrá esta información disponible, por lo que sería genial si uno pudiera subir esta información automáticamente.
La solución es usar nuestra API.
Supongamos que su aplicación tiene el siguiente endpoint:
# /calculate endpoint en su servidor ubicado en https://example.com
import requests
import json
CARGO_PLANNER_TOKEN = 'Token your-token'
def calculate(request):
# Estos datos quizás provienen de su sitio web de cara al público o de su fuente de datos interna
data = {
"loadlist": {
"name": "Orden de compra 1234",
"public_access": "RW"
},
"calculation": {
"length_dim": "CM",
"weight_dim": "KG"
"container_types": [
{
"id": 1,
"payload": 20000
}
],
"items": [
{
"label": "producto 1",
"l": 30,
"w": 80,
"h": 90,
"wt": 70,
"qty": 2
},
{
"label": "producto 2",
"l": 50,
"w": 40,
"h": 50,
"wt": 40,
"qty": 3
}
],
}
}
# Llamar a nuestra API
response = requests.post(
url="https://api.cargo-planner.com/api/2/create_and_calculate/",
data=json.dumps(data),
headers={
'Content-type': 'application/json',
'Authorization': CARGO_PLANNER_TOKEN
})
if response.status_code == 200:
# Devuelve el enlace a tu página para el iframe
return "https://app.cargo-planner.com/loadlist/{}/".format(response.data["id"])
#...
3. Subir datos usando la API - mostrar el resultado usando nuestro SDK
Para lograr una personalización completa del aspecto y la sensación, mientras también se elimina la necesidad de usar un iframe, puede usar nuestro SDK de Javascript.
De esta manera, puede mostrar los diseños 3D de cada contenedor y también presentar las métricas que considere más importantes.
A continuación se muestra un fragmento simple del lado del servidor en Python y un fragmento de Javascript para su aplicación de cara al público:
# /calculate endpoint en su servidor ubicado en https://example.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()
#...<meta charset="utf-8">
<title>Mi portal de clientes</title>
<script src="https://usermedia.cargoplanner.net/sdk/cargoPlannerSDK.es.js"></script>
<body>
<h1>Plan de carga</h1>
</body>
<script>
calculate();
async function calculate() {
// Inicializar motor 3D
await cargoPlannerSDK.SceneManager.init();
// Consulte la documentación de la API para más opciones
let calculationData = {
length_dim: "M",
weight_dim: "KG",
// Tal vez las dimensiones de la carga podrían ingresarse desde un formulario interactivo?
"items": [
{
"label": "Carga 1",
"l": 1.2,
"w": 0.8,
"h": 0.5,
"wt": 300,
"qty": 20,
"layers": 2,
"color":"#48c9b0"
},
{
"label": "Carga 2",
"l": 1.2,
"w": 1.0,
"h": 0.9,
"wt": 300,
"qty": 20,
"layers": 2,
"color":"#ec7063"
},
],
"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 canvas
cargoPlannerSDK.SceneManager.createScene(
[container], // datos del contenedor, puede enviar múltiples contenedores a una escena y especificar su posición
null, // Modo interactivo (establecer en null cuando se muestran múltiples contenedores)
400, // Ancho en píxeles
200 // Altura en píxeles
).then((canvas) => {
const containerDiv = document.createElement("div");
const label = document.createTextNode(`Contenedor ${index+1}: ${container.name} Espacio máximo utilizado: ${container.items_bb.max.x}, Peso utilizado: ${container.WT} `)
containerDiv.appendChild(label);
containerDiv.appendChild(canvas);
document.body.appendChild(containerDiv);
});
});
});
}
});
}
</script>
El ejemplo anterior generará el plan de carga a continuación:
