Cargo-Planner Docs

Cargo-Planner in Ihrer Anwendung

Obwohl unsere Webanwendung die meisten Anwendungsfälle abdecken sollte, kann es manchmal von Interesse sein, die Ladeplanungsfunktionalität zu einem bestehenden WMS- oder ERP-System hinzuzufügen - oder vielleicht zu Ihrem eigenen maßgeschneiderten Webportal. Sie können die meisten Funktionen nutzen, indem Sie unsere Rest-API und das JavaScript-SDK verwenden.

Serverseite

Obwohl Sie tatsächlich keinen Server verwenden müssen, ist es eine gute Möglichkeit, ihn als Vermittler zwischen Cargo-Planner und dem Client zu nutzen. Wenn Sie eine Möglichkeit haben, das API-Token sicher an den Client zu übermitteln (denken Sie daran, dass das Speichern von Schlüsseln in localStorage oder im Code keine gute Praxis ist) - können Sie unsere API direkt vom Client aus aufrufen.

# /calculate Endpoint auf Ihrem Server unter https://api.acme.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()
    #...

Client

Laden Sie unser SDK hier herunter. Das folgende Beispiel ruft den oben genannten Endpoint auf, der wiederum unsere API aufruft und einen Ladeplan / eine Lösung für Ihre Berechnungsdaten zurückgibt und dann ein 3D-Bild jedes Containers anzeigt.

<meta charset="utf-8">
<title>Mein Kundenportal</title>
<script src="./cargoPlannerSDK.umd.min.js"></script>

<body>
    <h1>Ladeplan</h1>
</body>

<script>

calculate();

async function calculate() {

    // Initialisieren der 3D-Engine
    await cargoPlannerSDK.SceneManager.init();

    // Weitere Optionen finden Sie in der API-Dokumentation
    let calculationData = {
        length_dim: "M",
        weight_dim: "KG",
        "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"
            },

        ],
        "settings": {
          "group_items": true
        },
        "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 => {
        // Falls 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) => {

                // Gehe durch jeden Container
                solution.containers.forEach((container, index) => {

                    // Rendern der Leinwand
                    cargoPlannerSDK.SceneManager.createScene(
                        container,  // Container-Daten
                        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}`)
                        containerDiv.appendChild(label);
                        containerDiv.appendChild(canvas);

                        document.body.appendChild(containerDiv);
                    });

                });
            });
        }
    });
}

</script>

Das obige Beispiel generiert den folgenden Ladeplan:

Ladeplan von API