Cargo-Planner Docs
Cargo-Planner ในแอปพลิเคชันของคุณ
แม้ว่าเว็บแอปพลิเคชันของเราควรจะครอบคลุมการใช้งานส่วนใหญ่ได้ แต่บางครั้งอาจมีความสนใจที่จะเพิ่มฟังก์ชันการวางแผนการโหลดไปยังระบบ WMS หรือ ERP ที่มีอยู่แล้ว - หรืออาจเป็นเว็บพอร์ทัลที่สร้างขึ้นเอง คุณสามารถใช้ฟังก์ชันส่วนใหญ่ได้โดยใช้ Rest API และ JavaScript SDK ของเรา
ฝั่งเซิร์ฟเวอร์
แม้ว่าคุณจะไม่จำเป็นต้องใช้เซิร์ฟเวอร์จริง ๆ แต่ก็เป็นวิธีที่ดีในการใช้เป็นตัวกลางระหว่าง Cargo-Planner และไคลเอนต์ หากคุณมีวิธีการเผยแพร่ API token ไปยังไคลเอนต์อย่างปลอดภัย (จำไว้ว่าการเก็บกุญแจใน localStorage หรือในโค้ดไม่ใช่วิธีปฏิบัติที่ดี) - คุณสามารถเรียก API ของเราได้ตรงจากไคลเอนต์
# /calculate endpoint ที่เซิร์ฟเวอร์ของคุณตั้งอยู่ที่ 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 ของเราได้ ที่นี่ ตัวอย่างด้านล่างจะเรียก endpoint ข้างต้นซึ่งจะเรียก API ของเราและคืนแผนการโหลด / โซลูชันสำหรับข้อมูลการคำนวณของคุณ และจะแสดงภาพ 3 มิติของแต่ละคอนเทนเนอร์
<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() {
// เริ่มต้นเครื่องยนต์ 3 มิติ
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) => {
// แสดงผล canvas
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>
ตัวอย่างข้างต้นจะสร้างแผนการโหลดด้านล่าง:
