Cargo-Planner Docs
Inclusione nella tua applicazione
Mentre la nostra applicazione web dovrebbe coprire la maggior parte dei casi d’uso, potrebbe talvolta 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à utilizzando la nostra Rest API e il JavaScript SDK.
Tre modi per aggiungere Cargo-Planner alla tua applicazione
Ci sono tre modi per aggiungere 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. Incorpora in un iframe - nessun codice (quasi)
Il modo più semplice per integrare il nostro strumento di pianificazione del carico è incorporare la vista in un elemento html iframe.
Il più grande inconveniente di questo approccio è che verrà 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ò, devi creare un nuovo piano di carico (devi solo crearlo - non è necessario inserire alcun dato) e poi abilitare la condivisione.
Una volta fatto ciò, copia il link di condivisione e incorporalo 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. Carica dati utilizzando l’API - mostra 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 ogni lista manualmente. 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 utilizzare 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 è utilizzare 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. Carica dati utilizzando l’API - mostra il risultato utilizzando il nostro SDK
Per ottenere una personalizzazione completa dell’aspetto e del funzionamento, eliminando anche la necessità di utilizzare un iframe, puoi utilizzare il nostro Javascript SDK.
In questo modo puoi mostrare i layout 3D di ciascun container e anche presentare le metriche che ritieni più importanti.
Di seguito è riportato un semplice snippet lato server in Python e uno snippet 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 attraverso 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 specificare la loro 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 seguente:
