Cargo-Planner Docs
Cargo-Planner nella tua Applicazione
Mentre la nostra applicazione web dovrebbe coprire la maggior parte dei casi d’uso, potrebbe a volte essere interessante aggiungere la funzionalità di pianificazione del carico a un sistema WMS o ERP esistente - o forse al tuo portale web personalizzato. Puoi utilizzare la maggior parte delle funzionalità usando la nostra Rest API e il JavaScript SDK.
Lato server
Anche se non è effettivamente necessario utilizzare un server, è un buon modo per usarlo come intermediario tra Cargo-Planner e il client. Se hai un modo per pubblicare in modo sicuro il token API al client (ricorda che memorizzare le chiavi in localStorage o nel codice non è una buona pratica) - puoi chiamare la nostra API direttamente dal client.
# /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()
#...Client
Scarica il nostro SDK qui. L’esempio seguente chiamerà l’endpoint sopra che a sua volta chiamerà la nostra API e restituirà un piano di carico / soluzione per i tuoi dati di calcolo, e poi mostrerà un’immagine 3D di ciascun container.
<meta charset="utf-8">
<title>Il mio portale clienti</title>
<script src="./cargoPlannerSDK.umd.min.js"></script>
<body>
<h1>Piano di carico</h1>
</body>
<script>
calculate();
async function calculate() {
// Inizializza il motore 3D
await cargoPlannerSDK.SceneManager.init();
// Consulta la documentazione API per ulteriori opzioni
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 => {
// Se abbiamo ricevuto delle soluzioni
if(data.solutions) {
// Al momento ogni calcolo fornisce una soluzione (in futuro potremmo fornirne di più)
data.solutions.forEach((solution) => {
// Passa attraverso ogni container
solution.containers.forEach((container, index) => {
// Renderizza il canvas
cargoPlannerSDK.SceneManager.createScene(
container, // dati del container
null, // Modalità interattiva (imposta su null quando si mostrano più container)
400, // Larghezza in pixel
200 // Altezza in pixel
).then((canvas) => {
const containerDiv = document.createElement("div");
const label = document.createTextNode(`Container ${index+1}: ${container.name}`)
containerDiv.appendChild(label);
containerDiv.appendChild(canvas);
document.body.appendChild(containerDiv);
});
});
});
}
});
}
</script>
L’esempio sopra genererà il piano di carico qui sotto:
