การรวมเข้ากับแอปพลิเคชันของคุณ

แม้ว่าเว็บแอปพลิเคชันของเราจะครอบคลุมกรณีการใช้งานส่วนใหญ่ แต่บางครั้งอาจเป็นที่สนใจที่จะเพิ่มฟังก์ชันการวางแผนโหลดเข้าสู่ระบบ WMS หรือ ERP ที่มีอยู่แล้ว - หรืออาจจะเป็นพอร์ทัลเว็บที่สร้างขึ้นเอง คุณสามารถใช้ฟังก์ชันส่วนใหญ่ได้โดยใช้ Rest API และ JavaScript SDK ของเรา

สามวิธีในการเพิ่ม Cargo-Planner ในแอปพลิเคชันของคุณ

มีสามวิธีในการเพิ่มฟังก์ชันการวางแผนโหลดในแอปพลิเคชันของคุณ วิธีใดที่เหมาะสมที่สุดในกรณีการใช้งานของคุณนั้นเป็นการแลกเปลี่ยนระหว่างความซับซ้อนและคุณสมบัติและการปรับแต่ง

1. ฝังใน iframe - ไม่ต้องใช้โค้ด (เกือบ)

วิธีที่ง่ายที่สุดในการรวมเครื่องมือวางแผนโหลดของเราคือการฝังมุมมองในองค์ประกอบ html iframe

ข้อควรระวังที่ใหญ่ที่สุดกับวิธีนี้คือจะทำในลักษณะที่ไม่ได้รับการยืนยันตัวตน ซึ่งหมายความว่าออบเจ็กต์รายการโหลดจำเป็นต้องถูกสร้าง ล่วงหน้า และเปิดใช้งานการเข้าถึงแบบอ่านและเขียนสำหรับการแชร์สาธารณะ เพื่อทำเช่นนั้นคุณต้อง สร้างแผนโหลดใหม่ (คุณเพียงแค่ต้องสร้างมันขึ้นมา - คุณไม่จำเป็นต้องกรอกข้อมูลใด ๆ) และจากนั้น เปิดใช้งานการแชร์

เมื่อเสร็จแล้ว ให้คัดลอกลิงก์การแชร์และฝังใน iframe ดังนี้:

<iframe
  src="https://app.cargo-planner.com/loadlist/10405cacde654075kjf53bd1f78520/workspace/0?length_dim=IN&weight_dim=LB&primary=1e3a8a"></iframe>

สังเกตว่าคุณสามารถเพิ่มพารามิเตอร์การค้นหาหลักด้วยสีเฮกซ์ได้ ให้สีธีมของคุณและมันจะผสมผสานเข้ากับสภาพแวดล้อมของคุณได้มากขึ้น

คุณยังสามารถตั้งค่าพารามิเตอร์การค้นหา hide_navigation เป็น true เพื่อซ่อนแถบนำทาง ซึ่งอาจมีประโยชน์หากคุณต้องการแสดงเฉพาะมุมมองแผนโหลด

2. อัปโหลดข้อมูลโดยใช้ API - แสดงผลลัพธ์ใน iframe

แม้ว่าวิธีการข้างต้นจะทำให้สามารถแนบฟังก์ชันการวางแผนโหลดเข้ากับไซต์ของคุณได้อย่างรวดเร็ว ข้อเสียหลักคือคุณต้องสร้างแต่ละรายการด้วยตนเอง หากคุณมีผู้ใช้หลายคนที่ใช้แอปพลิเคชันของคุณอาจทำให้เกิดพฤติกรรมแปลก ๆ เนื่องจากรายการโหลดเดียวกันอาจถูกอัปเดตพร้อมกัน

ข้อเสียอีกประการหนึ่งคือข้อมูลสินค้าจำเป็นต้องถูกเพิ่มด้วยตนเอง (อย่างไรก็ตามคุณยังสามารถใช้ฟังก์ชันการนำเข้าต่าง ๆ ได้) แอปพลิเคชันของคุณอาจมีข้อมูลนี้อยู่แล้ว - ดังนั้นจะดีมากถ้าสามารถอัปโหลดข้อมูลนี้โดยอัตโนมัติ

วิธีแก้ปัญหาคือการใช้ API ของเรา

สมมติว่าแอปพลิเคชันของคุณมี endpoint ด้านล่าง:

# /calculate endpoint ที่เซิร์ฟเวอร์ของคุณที่ตั้งอยู่ที่ 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 endpoint ที่เซิร์ฟเวอร์ของคุณที่ตั้งอยู่ที่ 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) {

            // ขณะนี้การคำนวณแต่ละครั้งให้วิธีแก้ปัญหาหนึ่งวิธี (ในอนาคตเราอาจให้มากกว่านี้)
            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>

ตัวอย่างข้างต้นจะสร้างแผนโหลดด้านล่าง: