Cargo-Planner Docs
Einbindung in Ihre Anwendung
Während unsere Webanwendung die meisten Anwendungsfälle abdecken sollte, kann es manchmal von Interesse sein, die Ladeplanungsfunktionalität in ein bestehendes WMS- oder ERP-System oder vielleicht in Ihr eigenes benutzerdefiniertes Webportal zu integrieren. Sie können die meisten Funktionen nutzen, indem Sie unsere Rest-API und das JavaScript-SDK verwenden.
Drei Wege, um Cargo-Planner in Ihre Anwendung zu integrieren
Es gibt drei Möglichkeiten, die Ladeplanungsfunktionalität in Ihre Anwendung zu integrieren. Welche in Ihrem Anwendungsfall am besten geeignet ist, ist ein Kompromiss zwischen Komplexität, Funktionen und Anpassung.
1. Einbetten in ein iframe - fast ohne Code
Der einfachste Weg, unser Ladeplanungstool zu integrieren, besteht darin, die Ansicht in ein iframe-HTML-Element einzubetten.
Der größte Nachteil bei diesem Ansatz ist, dass er auf nicht authentifizierte Weise durchgeführt wird, was bedeutet, dass die Ladeobjekte vorher erstellt werden müssen und dann Lese- und Schreibzugriff für die öffentliche Freigabe aktiviert werden muss. Um dies zu tun, müssen Sie einen neuen Ladeplan erstellen (Sie müssen ihn nur erstellen - Sie müssen keine Daten ausfüllen) und dann die Freigabe aktivieren.
Sobald dies erledigt ist, kopieren Sie den Freigabelink und betten ihn in ein iframe wie folgt ein:
<iframe
src="https://app.cargo-planner.com/loadlist/10405cacde654075kjf53bd1f78520/workspace/0?length_dim=IN&weight_dim=LB&primary=1e3a8a"></iframe>
Beachten Sie, dass Sie einen primären Abfrageparameter mit einer Hex-Farbe hinzufügen können. Geben Sie Ihre Themenfarbe an und sie wird sich besser in Ihre Umgebung einfügen.
Sie können auch den Abfrageparameter hide_navigation auf true setzen, um die Navigationsleiste auszublenden. Dies könnte nützlich sein, wenn Sie beispielsweise nur die Ladeplanansicht anzeigen möchten.
2. Daten über die API hochladen - Ergebnis in einem iframe anzeigen
Während die obige Lösung schnell ermöglicht, die Ladeplanungsfunktionalität an Ihre Website anzuhängen, sind die Hauptnachteile, dass Sie jede Liste manuell erstellen müssen. Wenn mehrere Benutzer Ihre Anwendung verwenden, kann dies zu seltsamem Verhalten führen, da dieselbe Ladeliste gleichzeitig aktualisiert werden könnte.
Ein weiterer Nachteil ist, dass die Frachtinformationen manuell hinzugefügt werden müssen (nun, Sie könnten immer noch die verschiedenen Importfunktionen verwenden). Ihre Anwendung hat diese Informationen wahrscheinlich bereits verfügbar - daher wäre es großartig, wenn man diese Informationen automatisch hochladen könnte.
Die Lösung ist, unsere API zu verwenden.
Angenommen, Ihre Anwendung hat folgenden Endpunkt:
# /calculate-Endpunkt auf Ihrem Server unter https://example.com
import requests
import json
CARGO_PLANNER_TOKEN = 'Token your-token'
def calculate(request):
# Diese Daten kommen möglicherweise von Ihrer öffentlich zugänglichen Website oder aus Ihrer internen Datenquelle
data = {
"loadlist": {
"name": "Bestellung 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
}
],
}
}
# Unsere API aufrufen
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:
# Den Link zu Ihrer Seite für das iframe zurückgeben
return "https://app.cargo-planner.com/loadlist/{}/".format(response.data["id"])
#...
3. Daten über die API hochladen - Ergebnis mit unserem SDK anzeigen
Um eine vollständige Anpassung des Aussehens und der Bedienung zu erreichen und gleichzeitig die Notwendigkeit eines iframes zu beseitigen, können Sie unser Javascript-SDK verwenden.
Auf diese Weise können Sie die 3D-Layouts jedes Containers anzeigen und auch die Metriken präsentieren, die Ihnen am wichtigsten erscheinen.
Nachfolgend ein einfaches serverseitiges Snippet in Python und ein Javascript-Snippet für Ihre öffentlich zugängliche Anwendung:
# /calculate-Endpunkt auf Ihrem Server unter 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>Mein Kundenportal</title>
<script src="https://usermedia.cargoplanner.net/sdk/cargoPlannerSDK.umd.min.js"></script>
<body>
<h1>Ladeplan</h1>
</body>
<script>
calculate();
async function calculate() {
// 3D-Engine initialisieren
await cargoPlannerSDK.SceneManager.init();
// Weitere Optionen finden Sie in der API-Dokumentation
let calculationData = {
length_dim: "M",
weight_dim: "KG",
// Vielleicht werden die Frachtabmessungen über ein interaktives Formular eingegeben?
"items": [
{
"label": "Fracht 1",
"l": 1.2,
"w": 0.8,
"h": 0.5,
"wt": 300,
"qty": 20,
"layers": 2,
"color":"#48c9b0"
},
{
"label": "Fracht 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 => {
// Wenn wir Lösungen erhalten haben
if(data.solutions) {
// Im Moment gibt jede Berechnung eine Lösung (in Zukunft könnten wir mehr bereitstellen)
data.solutions.forEach((solution) => {
// Jeden Container durchgehen
solution.containers.forEach((container, index) => {
// Das Canvas rendern
cargoPlannerSDK.SceneManager.createScene(
[container], // Container-Daten, Sie können mehrere Container in eine Szene senden und ihre Position angeben
null, // Interaktiver Modus (auf null setzen, wenn mehrere Container angezeigt werden)
400, // Breite in Pixel
200 // Höhe in Pixel
).then((canvas) => {
const containerDiv = document.createElement("div");
const label = document.createTextNode(`Container ${index+1}: ${container.name} Maximal genutzter Raum: ${container.items_bb.max.x}, Genutztes Gewicht: ${container.WT} `)
containerDiv.appendChild(label);
containerDiv.appendChild(canvas);
document.body.appendChild(containerDiv);
});
});
});
}
});
}
</script>
Das obige Beispiel wird den folgenden Ladeplan generieren:
