Cargo-Planner Docs
Inkludera i din applikation
Även om vår webbapplikation bör täcka de flesta användningsfall, kan det ibland vara intressant att lägga till lastplaneringsfunktionalitet till ett befintligt WMS- eller ERP-system - eller kanske din egen specialbyggda webbportal. Du kan använda det mesta av funktionaliteten genom att använda vår Rest API och JavaScript SDK.
Tre sätt att lägga till Cargo-Planner till din applikation
Det finns tre sätt att lägga till lastplaneringsfunktionalitet till din applikation. Vilket som är mest lämpligt i ditt användningsfall är en avvägning mellan komplexitet och funktioner och anpassning.
1. Bädda in i en iframe - ingen kod (nästan)
Det enklaste sättet att integrera vårt lastplaneringsverktyg är att bädda in vyn i ett iframe html-element.
Den största nackdelen med detta tillvägagångssätt är att det kommer att göras på ett icke-autentiserat sätt, vilket innebär att lastlistobjekten måste skapas i förväg och sedan aktivera Läs- och Skrivåtkomst för offentlig delning. För att göra detta behöver du skapa en ny lastplan (du behöver bara skapa den - du behöver inte fylla i någon data) och sedan aktivera delning.
När detta är gjort, kopiera delningslänken och bädda in den i en iframe som detta:
<iframe
src="https://app.cargo-planner.com/loadlist/10405cacde654075kjf53bd1f78520/workspace/0?length_dim=IN&weight_dim=LB&primary=1e3a8a"></iframe>
Observera att du kan lägga till en primär frågeparameter med en hex-färg. Ange din temafärg och den kommer att smälta in mer med din miljö
Du kan också ställa in frågeparametern hide_navigation till true för att dölja navigeringsfältet. Detta kan vara användbart om du till exempel bara vill visa lastplanvyn.
2. Ladda upp data med API - visa resultat i en iframe
Medan ovanstående lösning snabbt gör det möjligt att lägga till lastplaneringsfunktionalitet till din webbplats, är de största nackdelarna att du behöver skapa varje lista manuellt. Om du har flera användare som använder din applikation kan det resultera i konstigt beteende eftersom samma lastlista kan uppdateras samtidigt.
En annan nackdel är att lastdata behöver läggas till manuellt (du kan fortfarande använda de olika importfunktionerna). Din applikation kommer sannolikt redan att ha denna information tillgänglig - därför skulle det vara bra om man kunde ladda upp denna information automatiskt.
Lösningen är att använda vårt API.
Låt oss säga att din applikation har nedanstående slutpunkt:
# /calculate endpoint at your server located at https://example.com
import requests
import json
CARGO_PLANNER_TOKEN = 'Token your-token'
def calculate(request):
# Denna data kanske kommer från din front-facing webbplats eller från din interna datakälla
data = {
"loadlist": {
"name": "Inköpsorder 1234",
"public_access": "RW"
},
"calculation": {
"length_dim": "CM",
"weight_dim": "KG"
"container_types": [
{
"id": 1,
"payload": 20000
}
],
"items": [
{
"label": "produkt 1",
"l": 30,
"w": 80,
"h": 90,
"wt": 70,
"qty": 2
},
{
"label": "produkt 2",
"l": 50,
"w": 40,
"h": 50,
"wt": 40,
"qty": 3
}
],
}
}
# Anropa vårt 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:
# Returnera länken till din sida för iframen
return "https://app.cargo-planner.com/loadlist/{}/".format(response.data["id"])
#...
3. Ladda upp data med API - visa resultatet med vårt SDK
För att uppnå full anpassning av utseendet och känslan, samtidigt som du slipper använda en iframe, kan du använda vårt Javascript SDK.
På detta sätt kan du visa 3D-layouts av varje container och även presentera de mätvärden som du verkar tycka är viktigast.
Nedan är ett enkelt server-side kodexempel i Python och ett Javascript-kodexempel för din front-facing applikation:
# /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>Min kundportal</title>
<script src="https://usermedia.cargoplanner.net/sdk/cargoPlannerSDK.umd.min.js"></script>
<body>
<h1>Lastplan</h1>
</body>
<script>
calculate();
async function calculate() {
// Initiera 3D-motorn
await cargoPlannerSDK.SceneManager.init();
// Hänvisa till API-dokumentationen för fler alternativ
let calculationData = {
length_dim: "M",
weight_dim: "KG",
// Kanske kan lastdimensionerna anges från ett interaktivt formulär?
"items": [
{
"label": "Last 1",
"l": 1.2,
"w": 0.8,
"h": 0.5,
"wt": 300,
"qty": 20,
"layers": 2,
"color":"#48c9b0"
},
{
"label": "Last 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 => {
// Om vi mottog några lösningar
if(data.solutions) {
// För närvarande ger varje beräkning en lösning (i framtiden kan vi erbjuda fler)
data.solutions.forEach((solution) => {
// Gå igenom varje container
solution.containers.forEach((container, index) => {
// Rendera canvasen
cargoPlannerSDK.SceneManager.createScene(
[container], // containerdata, du kan skicka in flera containrar till en scen och specificera deras position
null, // Interaktivt läge (ställ in till null när du visar flera containrar)
400, // Bredd i pixlar
200 // Höjd i pixlar
).then((canvas) => {
const containerDiv = document.createElement("div");
const label = document.createTextNode(`Container ${index+1}: ${container.name} Max använd yta: ${container.items_bb.max.x}, Använd vikt: ${container.WT} `)
containerDiv.appendChild(label);
containerDiv.appendChild(canvas);
document.body.appendChild(containerDiv);
});
});
});
}
});
}
</script>
Exemplet ovan kommer att generera lastplanen nedan:
