Uygulamanıza dahil etme

Web uygulamamız çoğu kullanım senaryosunu kapsamalı, ancak 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. Çoğu işlevselliği Rest API ve JavaScript SDK’mızı kullanarak değerlendirebilirsiniz.

Uygulamanıza Cargo-Planner eklemenin üç yolu

Uygulamanıza yük planlama işlevselliği eklemenin üç yolu vardır. Hangi yolun sizin kullanım senaryonuza en uygun olduğu, karmaşıklık, ö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 elemanına 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 bir iframe içinde aşağıdaki gibi 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 daha fazla uyum sağlaması için bir hex renk ile bir birincil sorgu parametresi ekleyebilirsiniz.

Gezinme çubuğunu gizlemek için 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ızla eklemenizi sağlarken, ana dezavantajları her listeyi manuel olarak oluşturmanız gerektiğidir. Uygulamanızı kullanan birden fazla kullanıcı varsa, aynı yük listesinin eşzamanlı olarak güncellenmesi nedeniyle bazı garip davranışlar ortaya çıkabilir.

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

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

Diyelim ki uygulamanızın aşağıdaki uç noktası var:

# 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 geliyor
    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:
        # iframe 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ızı kullanarak 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.es.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çirin
                solution.containers.forEach((container, index) => {

                    // Tuvali render edin
                    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: