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

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

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

يمكنك أيضًا إرفاق معامل استعلام 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:
        # إرجاع الرابط إلى صفحتك للإطار
        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>بوابة عملائي</title>
<script src="https://usermedia.cargoplanner.net/sdk/cargoPlannerSDK.umd.min.js"></script>

<body>
    <h1>خطة الحمولة</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>

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