Cargo-Planner Docs
Inkludera i din applikation
Medan vår webbapplikation bör täcka de flesta användningsfall, kan det ibland vara av intresse att lägga till lastplaneringsfunktionalitet till ett befintligt WMS- eller ERP-system - eller kanske din egen specialbyggda webbportal. Du kan utnyttja det mesta av funktionaliteten genom att använda vår Rest API och JavaScript SDK.
Tre sätt att lägga till Cargo-Planner i 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 så smälter den bättre in i 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:et - visa resultatet i en iframe
Medan lösningen ovan snabbt gör det möjligt att koppla 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 (nåväl, 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 på din server som finns på https://example.com
import requests
import json
CARGO_PLANNER_TOKEN = 'Token your-token'
def calculate(request):
# Dessa data kanske kommer från din 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:et - 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-layouten för varje container och även presentera de mätvärden du anser vara viktigast.
Nedan är ett enkelt server-side kodexempel i Python och ett Javascript-exempel för din front-end applikation:
# /calculate endpoint på din server som finns på 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 fick några lösningar
if(data.solutions) {
// För tillfället ger varje beräkning en lösning (i framtiden kan vi ge fler)
data.solutions.forEach((solution) => {
// Gå igenom varje container
solution.containers.forEach((container, index) => {
// Rendera duken
cargoPlannerSDK.SceneManager.createScene(
[container], // containerdata, du kan skicka in flera containrar till en scen och specificera deras position
null, // Interaktivt läge (sätt 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:
