Cargo-Planner Docs

Cargo-Planner 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 använda det mesta av funktionaliteten genom att använda vårt Rest API och JavaScript SDK.

Server sida

Även om du faktiskt inte behöver använda en server, är det ett bra sätt att använda som en mellanhand mellan Cargo-Planner och klienten. Om du har ett sätt att säkert publicera API-token till klienten (kom ihåg att det inte är bra praxis att lagra nycklar i localStorage eller i koden) - kan du anropa vårt API direkt från klienten.

# /calculate endpoint på din server som finns på 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()
    #...

Klient

Hämta vårt SDK här. Exemplet nedan kommer att anropa ovanstående endpoint som i sin tur kommer att anropa vårt API och returnera en lastplan / lösning för dina beräkningsdata, och sedan visa en 3D-bild av varje container.

<meta charset="utf-8">
<title>Min kundportal</title>
<script src="./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",
        "items": [
            {
                "label": "Artikel 1",
                "l": 1.2,
                "w": 0.8,
                "h": 0.5,
                "wt": 300,
                "qty": 20,
                "layers": 2,
                "color":"#48c9b0"
            },
            {
                "label": "Artikel 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 => {
        // 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 ge fler)
            data.solutions.forEach((solution) => {

                // Gå igenom varje container
                solution.containers.forEach((container, index) => {

                    // Rendera canvasen
                    cargoPlannerSDK.SceneManager.createScene(
                        container,  // containerdata
                        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}`)
                        containerDiv.appendChild(label);
                        containerDiv.appendChild(canvas);

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

                });
            });
        }
    });
}

</script>

Exemplet ovan kommer att generera lastplanen nedan:

Lastplan från API