Cargo-Planner Docs
Inclusione nella tua applicazione
Mentre la nostra applicazione web dovrebbe coprire la maggior parte dei casi d’uso, potrebbe a volte essere interessante aggiungere 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.
Tre modi per aggiungere Cargo-Planner alla tua applicazione
Ci sono tre modi per aggiungere la funzionalità di pianificazione del carico alla tua applicazione. Quale sia il più adatto al tuo caso d’uso è un compromesso tra complessità, funzionalità e personalizzazione.
1. Includere in un iframe - nessun codice (quasi)
Il modo più semplice per integrare il nostro strumento di pianificazione del carico è includere la vista in un elemento html iframe.
Il più grande svantaggio di questo approccio è che sarà fatto in modo non autenticato, il che significa che gli oggetti della lista di carico devono essere creati in anticipo e poi abilitare l’accesso in lettura e scrittura per la condivisione pubblica. Per fare ciò, è necessario creare un nuovo piano di carico (è sufficiente crearlo - non è necessario inserire alcun dato) e poi abilitare la condivisione.
Una volta fatto ciò, copia il link di condivisione e includilo in un iframe come questo:
<iframe
src="https://app.cargo-planner.com/loadlist/10405cacde654075kjf53bd1f78520/workspace/0?length_dim=IN&weight_dim=LB&primary=1e3a8a"></iframe>
Nota che puoi aggiungere un parametro di query primario con un colore esadecimale. Fornisci il colore del tuo tema e si integrerà meglio con il tuo ambiente.
Puoi anche impostare il parametro di query hide_navigation su true per nascondere la barra di navigazione. Questo potrebbe essere utile se, ad esempio, vuoi solo mostrare la vista del piano di carico.
2. Caricare dati usando l’API - mostrare il risultato in un iframe
Mentre la soluzione sopra rende rapidamente possibile collegare la funzionalità di pianificazione del carico al tuo sito, i principali svantaggi sono che devi creare manualmente ogni lista. Se hai più utenti che utilizzano la tua applicazione, potrebbe risultare in un comportamento strano poiché la stessa lista di carico potrebbe essere aggiornata simultaneamente.
Un altro svantaggio è che i dati del carico devono essere aggiunti manualmente (beh, potresti comunque usare le varie funzioni di importazione). La tua applicazione probabilmente avrà già queste informazioni disponibili - quindi sarebbe fantastico se si potesse caricare queste informazioni automaticamente.
La soluzione è usare la nostra API.
Supponiamo che la tua applicazione abbia il seguente endpoint:
# /calculate endpoint at your server located at https://example.com
import requests
import json
CARGO_PLANNER_TOKEN = 'Token your-token'
def calculate(request):
# Questi dati potrebbero provenire dal tuo sito web frontale o dalla tua fonte di dati interna
data = {
"loadlist": {
"name": "Ordine di acquisto 1234",
"public_access": "RW"
},
"calculation": {
"length_dim": "CM",
"weight_dim": "KG"
"container_types": [
{
"id": 1,
"payload": 20000
}
],
"items": [
{
"label": "prodotto 1",
"l": 30,
"w": 80,
"h": 90,
"wt": 70,
"qty": 2
},
{
"label": "prodotto 2",
"l": 50,
"w": 40,
"h": 50,
"wt": 40,
"qty": 3
}
],
}
}
# Chiama la nostra 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:
# Restituisci il link alla tua pagina per l'iframe
return "https://app.cargo-planner.com/loadlist/{}/".format(response.data["id"])
#...
3. Caricare dati usando l’API - mostrare il risultato usando il nostro SDK
Per ottenere una piena personalizzazione dell’aspetto e della sensazione, eliminando anche la necessità di usare un iframe, puoi usare il nostro JavaScript SDK.
In questo modo puoi mostrare i layout 3D di ogni container e presentare anche le metriche che ritieni più importanti.
Di seguito è riportato un semplice frammento lato server in Python e un frammento JavaScript per la tua applicazione frontale:
# /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>Il mio portale clienti</title>
<script src="https://usermedia.cargoplanner.net/sdk/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",
// Forse le dimensioni del carico potrebbero essere inserite da un modulo interattivo?
"items": [
{
"label": "Carico 1",
"l": 1.2,
"w": 0.8,
"h": 0.5,
"wt": 300,
"qty": 20,
"layers": 2,
"color":"#48c9b0"
},
{
"label": "Carico 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 => {
// 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 in rassegna ogni container
solution.containers.forEach((container, index) => {
// Renderizza il canvas
cargoPlannerSDK.SceneManager.createScene(
[container], // dati del container, puoi inviare più container a una scena e specificarne la posizione
null, // Modalità interattiva (imposta su null quando mostri 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} Spazio massimo utilizzato: ${container.items_bb.max.x}, Peso utilizzato: ${container.WT} `)
containerDiv.appendChild(label);
containerDiv.appendChild(canvas);
document.body.appendChild(containerDiv);
});
});
});
}
});
}
</script>
L’esempio sopra genererà il piano di carico qui sotto:
