تضمين في تطبيقك

في حين أن تطبيق الويب الخاص بنا يجب أن يغطي معظم حالات الاستخدام، قد يكون من المثير للاهتمام أحيانًا إضافة وظيفة تخطيط الحمولة إلى نظام 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>

لاحظ أنه يمكنك إضافة معلمة استعلام أساسية بلون سداسي عشري. قدم لون السمة الخاص بك وسوف يندمج أكثر مع بيئتك

يمكنك أيضًا تعيين معلمة الاستعلام hide_navigation إلى true لإخفاء شريط التنقل. قد يكون هذا مفيدًا إذا كنت ترغب فقط في عرض عرض خطة الحمولة.

2. تحميل البيانات باستخدام API - عرض النتيجة في iframe

بينما الحل أعلاه يجعل من الممكن بسرعة إرفاق وظيفة تخطيط الحمولة بموقعك، فإن العيوب الرئيسية هي أنك تحتاج إلى إنشاء كل قائمة يدويًا. إذا كان لديك مستخدمون متعددون يستخدمون تطبيقك، فقد يؤدي ذلك إلى بعض السلوك الغريب حيث يمكن تحديث نفس قائمة الحمولة في وقت واحد.

عيب آخر هو أن بيانات الحمولة تحتاج إلى إضافتها يدويًا (حسنًا، لا يزال بإمكانك استخدام وظائف الاستيراد المختلفة). من المحتمل أن يكون لديك بالفعل هذه المعلومات متاحة - لذلك سيكون من الرائع إذا كان يمكن تحميل هذه المعلومات تلقائيًا.

الحل هو استخدام API الخاص بنا.

لنفترض أن تطبيقك يحتوي على نقطة النهاية أدناه:

# /calculate endpoint at your server located at https://example.com

import requests
import json

CARGO_PLANNER_TOKEN = 'Token your-token'

def calculate(request):

    # This data perhaps come from your front facing website or from your internal data source
    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
                }
            ],
        }
    }

    # Call our 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:
        # Return the link to your page for the iframe
        return "https://app.cargo-planner.com/loadlist/{}/".format(response.data["id"])
    #...

3. تحميل البيانات باستخدام API - عرض النتيجة باستخدام SDK الخاص بنا

لتحقيق التخصيص الكامل للمظهر والشعور، مع التخلص من الحاجة لاستخدام iframe، يمكنك استخدام JavaScript SDK الخاص بنا.

بهذه الطريقة يمكنك عرض التصاميم ثلاثية الأبعاد لكل حاوية وأيضًا تقديم المقاييس التي تعتبرها الأكثر أهمية.

فيما يلي مقتطف بسيط من جانب الخادم بلغة 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.es.js"></script>

<body>
    <h1>Load plan</h1>
</body>

<script>

calculate();

async function calculate() {

    // Initialize 3D engine
    await cargoPlannerSDK.SceneManager.init();

    // Refer to the API documentation for more options
    let calculationData = {
        length_dim: "M",
        weight_dim: "KG",
        // Maybe the cargo dimensions might be entered from an interactive form?
        "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 we received any solutions
        if(data.solutions) {

            // At the moment each calculation gives one solution (in the future we might provide more)
            data.solutions.forEach((solution) => {

                // Go through each container
                solution.containers.forEach((container, index) => {

                    // Render the canvas
                    cargoPlannerSDK.SceneManager.createScene(
                        [container],  // container data, you can send in multiple containers to a scene, and specify their position
                        null,       // Interactive mode (set to null when showing multiple containers)
                        400,        // Width in pixels
                        200         // Height in pixels
                    ).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>

المثال أعلاه سيولد خطة الحمولة أدناه: