Cargo-Planner Docs
アプリケーションへの組み込み
私たちのウェブアプリケーションはほとんどのユースケースをカバーするはずですが、既存のWMSやERPシステム、または独自に構築したウェブポータルに荷積み計画機能を追加することが興味深い場合があります。私たちのRest APIとJavaScript SDKを使用することで、ほとんどの機能を利用できます。
アプリケーションにCargo-Plannerを追加する3つの方法
アプリケーションに荷積み計画機能を追加するには3つの方法があります。どの方法が最も適しているかは、複雑さと機能、カスタマイズのトレードオフです。
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 エンドポイントが https://example.com にあるサーバー
import requests
import json
CARGO_PLANNER_TOKEN = 'Token your-token'
def calculate(request):
# このデータはおそらくフロントエンドのウェブサイトや内部データソースから来るものです
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
}
],
}
}
# 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:
# iframe用のリンクをページに返す
return "https://app.cargo-planner.com/loadlist/{}/".format(response.data["id"])
#...
3. APIを使用してデータをアップロード - SDKを使用して結果を表示
外観と操作感を完全にカスタマイズし、iframeを使用する必要をなくすために、私たちのJavascript SDKを使用できます。
この方法では、各コンテナの3Dレイアウトを表示し、最も重要と思われるメトリクスを提示することができます。
以下は、Pythonでのサーバーサイドの簡単なスニペットと、フロントエンドアプリケーション用のJavascriptスニペットです:
# /calculate エンドポイントが 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() {
// 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"
},
],
"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} Max used space: ${container.items_bb.max.x}, Weight used: ${container.WT} `)
containerDiv.appendChild(label);
containerDiv.appendChild(canvas);
document.body.appendChild(containerDiv);
});
});
});
}
});
}
</script>
上記の例では、以下のような荷積み計画が生成されます:
