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

แม้ว่าเว็บแอปพลิเคชันของเราจะครอบคลุมการใช้งานส่วนใหญ่ แต่บางครั้งอาจน่าสนใจที่จะเพิ่มฟังก์ชันการวางแผนโหลดไปยังระบบ 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>

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

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

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

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

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

ทางออกคือการใช้ API ของเรา

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

# /calculate endpoint at your server located at 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 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() {

    // เริ่มต้นเครื่องยนต์ 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>

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