Cargo-Planner Docs
애플리케이션에 포함하기
우리의 웹 애플리케이션은 대부분의 사용 사례를 다룰 수 있지만, 때때로 기존 WMS 또는 ERP 시스템에 적재 계획 기능을 추가하거나, 아마도 자체 맞춤형 웹 포털에 추가하는 것이 관심을 끌 수 있습니다. 우리의 Rest API와 JavaScript SDK를 사용하여 대부분의 기능을 활용할 수 있습니다.
애플리케이션에 Cargo-Planner를 추가하는 세 가지 방법
애플리케이션에 적재 계획 기능을 추가하는 세 가지 방법이 있습니다. 어떤 것이 가장 적합한지는 복잡성과 기능 및 맞춤화 간의 절충입니다.
1. iframe에 포함하기 - 거의 코드 없음
우리의 적재 계획 도구를 통합하는 가장 쉬운 방법은 iframe html 요소에 보기를 포함하는 것입니다.
이 접근 방식의 가장 큰 단점은 인증되지 않은 방식으로 수행된다는 점입니다. 이는 적재 목록 객체가 사전에 생성되어야 하며, 그런 다음 공용 공유를 위해 읽기 및 쓰기 액세스를 활성화해야 함을 의미합니다. 이를 위해 새 적재 계획을 생성해야 하며(데이터를 입력할 필요는 없습니다) 공유를 활성화해야 합니다.
이 작업이 완료되면 공유 링크를 복사하여 다음과 같이 iframe에 포함합니다:
<iframe
src="https://app.cargo-planner.com/loadlist/10405cacde654075kjf53bd1f78520/workspace/0?length_dim=IN&weight_dim=LB&primary=1e3a8a"></iframe>
기본 쿼리 매개변수에 16진수 색상을 추가할 수 있습니다. 테마 색상을 제공하면 환경과 더 잘 어울립니다.
또한 쿼리 매개변수 hide_navigation을 true로 설정하여 탐색 바를 숨길 수 있습니다. 예를 들어 적재 계획 보기만 표시하려는 경우 유용할 수 있습니다.
2. API를 사용하여 데이터 업로드 - iframe에 결과 표시
위의 솔루션은 사이트에 적재 계획 기능을 빠르게 추가할 수 있게 하지만, 주요 단점은 각 목록을 수동으로 생성해야 한다는 점입니다. 애플리케이션을 사용하는 사용자가 여러 명인 경우 동일한 적재 목록이 동시에 업데이트될 수 있어 이상한 동작이 발생할 수 있습니다.
또 다른 단점은 화물 데이터를 수동으로 추가해야 한다는 점입니다(물론 다양한 가져오기 기능을 사용할 수 있습니다). 애플리케이션에는 이미 이 정보가 있을 가능성이 높으므로 이 정보를 자동으로 업로드할 수 있다면 좋을 것입니다.
해결책은 우리의 API를 사용하는 것입니다.
애플리케이션에 아래와 같은 엔드포인트가 있다고 가정해 봅시다:
# /calculate endpoint at your server located at https://example.com
import requests
import json
CARGO_PLANNER_TOKEN = 'Token your-token'
def calculate(request):
# This data perhaps come from your front facing website or from your internal data source
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
}
],
}
}
# Call our 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:
# Return the link to your page for the iframe
return "https://app.cargo-planner.com/loadlist/{}/".format(response.data["id"])
#...
3. API를 사용하여 데이터 업로드 - SDK를 사용하여 결과 표시
외관과 느낌을 완전히 맞춤화하면서 iframe을 사용할 필요가 없도록 하려면 우리의 Javascript SDK를 사용할 수 있습니다.
이 방법으로 각 컨테이너의 3D 레이아웃을 표시하고 가장 중요한 메트릭을 제시할 수 있습니다.
아래는 Python의 간단한 서버 측 코드 조각과 프론트 엔드 애플리케이션을 위한 Javascript 코드 조각입니다:
# /calculate endpoint at your server located at 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>My customer portal</title>
<script src="https://usermedia.cargoplanner.net/sdk/cargoPlannerSDK.umd.min.js"></script>
<body>
<h1>Load plan</h1>
</body>
<script>
calculate();
async function calculate() {
// Initialize 3D engine
await cargoPlannerSDK.SceneManager.init();
// Refer to the API documentation for more options
let calculationData = {
length_dim: "M",
weight_dim: "KG",
// Maybe the cargo dimensions might be entered from an interactive form?
"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 => {
// If we received any solutions
if(data.solutions) {
// At the moment each calculation gives one solution (in the future we might provide more)
data.solutions.forEach((solution) => {
// Go through each container
solution.containers.forEach((container, index) => {
// Render the canvas
cargoPlannerSDK.SceneManager.createScene(
[container], // container data, you can send in multiple containers to a scene, and specify their position
null, // Interactive mode (set to null when showing multiple containers)
400, // Width in pixels
200 // Height in pixels
).then((canvas) => {
const containerDiv = document.createElement("div");
const label = document.createTextNode(`Container ${index+1}: ${container.name} Max used space: ${container.items_bb.max.x}, Weight used: ${container.WT} `)
containerDiv.appendChild(label);
containerDiv.appendChild(canvas);
document.body.appendChild(containerDiv);
});
});
});
}
});
}
</script>
위의 예제는 아래와 같은 적재 계획을 생성합니다:
