Uygulamanıza dahil etme

Web uygulamamız çoğu kullanım senaryosunu kapsasa da, bazen yük planlama işlevselliğini mevcut bir WMS veya ERP sistemine - ya da belki kendi özel web portalınıza - eklemek ilginç olabilir. Rest API ve JavaScript SDK’mızı kullanarak çoğu işlevselliği kullanabilirsiniz.

Uygulamanıza Cargo-Planner eklemenin üç yolu

Uygulamanıza yük planlama işlevselliği eklemenin üç yolu vardır. Hangi yöntemin kullanım senaryonuzda en uygun olduğu, karmaşıklık ile özellikler ve özelleştirme arasında bir denge meselesidir.

1. Bir iframe içinde göm - neredeyse hiç kod yok

Yük planlama aracımızı entegre etmenin en kolay yolu, görünümü bir iframe html öğesi içinde gömmektir.

Bu yaklaşımın en büyük dezavantajı, kimlik doğrulaması yapılmadan yapılacak olmasıdır, bu da yük listesi nesnelerinin önceden oluşturulması ve ardından genel paylaşım için Okuma ve Yazma erişiminin etkinleştirilmesi gerektiği anlamına gelir. Bunu yapmak için yeni bir yük planı oluşturmanız (sadece oluşturmanız yeterlidir - herhangi bir veri doldurmanıza gerek yoktur) ve ardından paylaşımı etkinleştirmeniz gerekir.

Bu yapıldıktan sonra, paylaşım bağlantısını kopyalayın ve aşağıdaki gibi bir iframe içinde gömün:

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

Tema renginizi sağlayarak, ortamınızla daha iyi uyum sağlaması için bir hex renk ile birincil sorgu parametresi ekleyebilirsiniz.

Gezinme çubuğunu gizlemek istiyorsanız, hide_navigation sorgu parametresini true olarak ayarlayabilirsiniz. Bu, örneğin sadece yük planı görünümünü göstermek istediğinizde yararlı olabilir.

2. API kullanarak veri yükleyin - sonucu bir iframe içinde gösterin

Yukarıdaki çözüm, yük planlama işlevselliğini sitenize hızlıca eklemenizi sağlarken, ana dezavantajı her listeyi manuel olarak oluşturmanız gerektiğidir. Uygulamanızı birden fazla kullanıcı kullanıyorsa, aynı yük listesinin eşzamanlı olarak güncellenmesi nedeniyle bazı garip davranışlar ortaya çıkabilir.

Bir diğer dezavantaj ise, yük verilerinin manuel olarak eklenmesi gerektiğidir (yine de çeşitli içe aktarma işlevlerini kullanabilirsiniz). Uygulamanız muhtemelen bu bilgileri zaten içeriyor olacak - bu nedenle bu bilgilerin otomatik olarak yüklenebilmesi harika olurdu.

Çözüm, API’mizi kullanmaktır.

Diyelim ki uygulamanız aşağıdaki uç noktaya sahip:

# Sunucunuzda bulunan /calculate uç noktası https://example.com

import requests
import json

CARGO_PLANNER_TOKEN = 'Token your-token'

def calculate(request):

    # Bu veri belki ön yüz web sitenizden veya dahili veri kaynağınızdan gelir
    data = {
        "loadlist": {
            "name": "Satın alma siparişi 1234",
            "public_access": "RW"
        },
        "calculation": {
            "length_dim": "CM",
            "weight_dim": "KG"
            "container_types": [
                {
                    "id": 1,
                    "payload": 20000
                }
            ],
            "items": [
                {
                    "label": "ürün 1",
                    "l": 30,
                    "w": 80,
                    "h": 90,
                    "wt": 70,
                    "qty": 2
                },
                {
                    "label": "ürün 2",
                    "l": 50,
                    "w": 40,
                    "h": 50,
                    "wt": 40,
                    "qty": 3
                }
            ],
        }
    }

    # API'mizi çağırın
    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:
        # İframe için sayfanıza bağlantıyı döndürün
        return "https://app.cargo-planner.com/loadlist/{}/".format(response.data["id"])
    #...

3. API kullanarak veri yükleyin - sonucu SDK’mızla gösterin

Görünüm ve his üzerinde tam özelleştirme sağlamak ve bir iframe kullanma ihtiyacını ortadan kaldırmak için Javascript SDK’mızı kullanabilirsiniz.

Bu şekilde her konteynerin 3D düzenlerini gösterebilir ve en önemli olduğunu düşündüğünüz metrikleri sunabilirsiniz.

Aşağıda, Python’da basit bir sunucu tarafı kod parçası ve ön yüz uygulamanız için bir Javascript kod parçası bulunmaktadır:

# Sunucunuzda bulunan /calculate uç noktası 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>Müşteri portalım</title>
<script src="https://usermedia.cargoplanner.net/sdk/cargoPlannerSDK.umd.min.js"></script>

<body>
    <h1>Yük planı</h1>
</body>

<script>

calculate();

async function calculate() {

    // 3D motoru başlat
    await cargoPlannerSDK.SceneManager.init();

    // Daha fazla seçenek için API belgelerine bakın
    let calculationData = {
        length_dim: "M",
        weight_dim: "KG",
        // Belki yük boyutları etkileşimli bir formdan girilebilir?
        "items": [
            {
                "label": "Yük 1",
                "l": 1.2,
                "w": 0.8,
                "h": 0.5,
                "wt": 300,
                "qty": 20,
                "layers": 2,
                "color":"#48c9b0"
            },
            {
                "label": "Yük 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 => {
        // Eğer herhangi bir çözüm aldıysak
        if(data.solutions) {

            // Şu anda her hesaplama bir çözüm verir (gelecekte daha fazlasını sağlayabiliriz)
            data.solutions.forEach((solution) => {

                // Her konteyneri gözden geçir
                solution.containers.forEach((container, index) => {

                    // Tuvali oluştur
                    cargoPlannerSDK.SceneManager.createScene(
                        [container],  // konteyner verisi, bir sahneye birden fazla konteyner gönderebilir ve konumlarını belirtebilirsiniz
                        null,       // Etkileşimli mod (birden fazla konteyner gösterirken null olarak ayarlayın)
                        400,        // Piksel cinsinden genişlik
                        200         // Piksel cinsinden yükseklik
                    ).then((canvas) => {

                        const containerDiv = document.createElement("div");

                        const label = document.createTextNode(`Konteyner ${index+1}: ${container.name} Maksimum kullanılan alan: ${container.items_bb.max.x}, Kullanılan ağırlık: ${container.WT}  `)
                        containerDiv.appendChild(label);
                        containerDiv.appendChild(canvas);

                        document.body.appendChild(containerDiv);
                    });

                });
            });
        }
    });
}

</script>

Yukarıdaki örnek aşağıdaki yük planını oluşturacaktır: