Cargo-Planner Docs
Incluyendo en su 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 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ía de las funcionalidades 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 más adecuada en su caso de uso es un equilibrio entre la complejidad, las características y la 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.
La mayor advertencia con este enfoque es que se hará 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>
Note que puede agregar un parámetro de consulta primary 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 true 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
Aunque la solución anterior rápidamente hace posible 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 ser actualizada simultáneamente.
Otro inconveniente es que los datos de carga necesitan ser agregados 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.
Digamos 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:
# Devolver el enlace a su 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, al mismo tiempo que 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.umd.min.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 ser ingresadas 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) => {
// Recorrer cada contenedor
solution.containers.forEach((container, index) => {
// Renderizar 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 usado: ${container.items_bb.max.x}, Peso usado: ${container.WT} `)
containerDiv.appendChild(label);
containerDiv.appendChild(canvas);
document.body.appendChild(containerDiv);
});
});
});
}
});
}
</script>
El ejemplo anterior generará el plan de carga a continuación:
