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) {
// 現在、各計算は1つのソリューションを提供します（将来的にはもっと提供するかもしれません）
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>
上記の例は以下のような荷物計画を生成します:
