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 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 Skrivrättigheter 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 så här:
<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 det 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 hjälp av API - visa resultat i en iframe
Medan lösningen ovan snabbt gör det möjligt att bifoga 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 måste läggas till manuellt (nåväl, du kan fortfarande använda de olika importfunktionerna). Din applikation kommer troligen 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):
# Denna data kanske kommer från din front facing webbplats eller från din interna datakälla
data = {
"loadlist": {
"name": "Purchase-order 1234",
"public_access": "RW"
},
"calculation": {
"length_dim": "CM",
"weight_dim": "KG"
"container_types": [
{
"id": 1,
"payload": 20000
}
],
"items": [
{
"label": "product 1",
"l": 30,
"w": 80,
"h": 90,
"wt": 70,
"qty": 2
},
{
"label": "product 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 hjälp av API - visa resultatet med vårt SDK
För att uppnå full anpassning av utseendet och känslan, samtidigt som du slipper behovet av att 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 också 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 facing 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.es.js"></script>
<body>
<h1>Lastplan</h1>
</body>
<script>
calculate();
async function calculate() {
// Initiera 3D-motorn
await cargoPlannerSDK.SceneManager.init();
// Se 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": "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"
},
],
"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 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 canvasen
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:
