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 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 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 funcionalidad de planificación de carga a su aplicación. Cuál es la más adecuada en su caso de uso es un compromiso 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 crearse previamente 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 adjuntar un conjunto del parámetro de consulta hide_navigation a 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 permite rápidamente adjuntar funcionalidad de planificación de carga a su sitio, los principales inconvenientes son que necesita crear cada lista manualmente. Si tiene múltiples usuarios utilizando 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). Es probable que su aplicación ya tenga esta información disponible, por lo tanto, 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 at your server located at https://example.com
import requests
import json
CARGO_PLANNER_TOKEN = 'Token your-token'
def calculate(request):
# Estos datos quizás provengan de su sitio web 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 parecen ser 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 pública:
# /calculate endpoint at your server located at 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 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) {
// En este momento, cada cálculo da una solución (en el futuro podríamos proporcionar más)
data.solutions.forEach((solution) => {
// Revisar 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 al mostrar 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:
