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

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

    # قد تأتي هذه البيانات من موقعك الأمامي أو من مصدر بياناتك الداخلي
    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 الخاص بنا.

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

فيما يلي مقتطف بسيط من جانب الخادم في 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() {

    // تهيئة محرك ثلاثي الأبعاد
    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>

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