Cargo-Planner Docs

애플리케이션에서 Cargo-Planner 사용하기

웹 애플리케이션이 대부분의 사용 사례를 커버할 수 있지만, 기존 WMS 또는 ERP 시스템에 적재 계획 기능을 추가하거나 자체 구축한 웹 포털에 추가하는 것이 관심이 있을 수 있습니다. Rest API와 JavaScript SDK를 사용하여 대부분의 기능을 활용할 수 있습니다.

서버 측

사실 서버를 사용할 필요는 없지만, Cargo-Planner와 클라이언트 간의 중개자로 사용하는 것이 좋은 방법입니다. 클라이언트에게 API 토큰을 안전하게 공개할 방법이 있다면 (localStorage에 키를 저장하거나 코드에 포함하는 것은 좋은 방법이 아닙니다) - 클라이언트에서 직접 API를 호출할 수 있습니다.

# /calculate 엔드포인트는 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()
    #...

클라이언트

우리의 SDK를 여기에서 가져오세요. 아래 예제는 위의 엔드포인트를 호출하고, 그 결과로 API를 호출하여 계산 데이터에 대한 적재 계획/해결책을 반환하며, 각 컨테이너의 3D 이미지를 보여줍니다.

<meta charset="utf-8">
<title>My customer portal</title>
<script src="./cargoPlannerSDK.umd.min.js"></script>

<body>
    <h1>Load plan</h1>
</body>

<script>

calculate();

async function calculate() {

    // 3D 엔진 초기화
    await cargoPlannerSDK.SceneManager.init();

    // API 문서를 참조하여 더 많은 옵션을 확인하세요
    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 => {
        // 해결책을 받았을 경우
        if(data.solutions) {

            // 현재 각 계산은 하나의 해결책을 제공합니다 (미래에는 더 많은 해결책을 제공할 수 있습니다)
            data.solutions.forEach((solution) => {

                // 각 컨테이너를 순회합니다
                solution.containers.forEach((container, index) => {

                    // 캔버스를 렌더링합니다
                    cargoPlannerSDK.SceneManager.createScene(
                        container,  // 컨테이너 데이터
                        null,       // 인터랙티브 모드 (여러 컨테이너를 표시할 때는 null로 설정)
                        400,        // 픽셀 단위의 너비
                        200         // 픽셀 단위의 높이
                    ).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>

위의 예제는 아래와 같은 적재 계획을 생성합니다:

Load plan from API