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 ilginizi çekebilir. Ç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 kullanım senaryonuzda 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ı içinde gömmektir.

Bu yaklaşımın en büyük dezavantajı, kimlik doğrulaması yapılmadan gerçekleştirilmesidir, 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şturun (sadece oluşturmanız yeterlidir - herhangi bir veri doldurmanız gerekmez) ve ardından paylaşımı etkinleştirin.

Bu işlemler tamamlandıktan sonra, paylaşım bağlantısını kopyalayın ve aşağıdaki gibi bir iframe içine 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 ve birincil sorgu parametresi olarak bir hex rengi ekleyerek ortamınıza daha iyi uyum sağlayabilirsiniz.

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 faydalı 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ı kullanan birden fazla kullanıcınız varsa, aynı yük listesinin eşzamanlı olarak güncellenmesi nedeniyle bazı garip davranışlar ortaya çıkabilir.

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

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

Diyelim ki uygulamanızda aşağıdaki uç nokta var:

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

import requests
import json

CARGO_PLANNER_TOKEN = 'Token your-token'

def calculate(request):

    # Bu veriler belki de ön yüz web sitenizden veya dahili veri kaynağınızdan gelir
    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'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ızın bağlantısını 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 hissiyatın tam özelleştirilmesini sağlamak ve bir iframe kullanma ihtiyacını ortadan kaldırmak için Javascript SDK’mızı kullanabilirsiniz.

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

Aşağıda, sunucu tarafında basit bir Python 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 adresinde

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 kargo boyutları etkileşimli bir formdan girilebilir?
        "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 => {
        // 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 inceleyin
                solution.containers.forEach((container, index) => {

                    // Tuvali render et
                    cargoPlannerSDK.SceneManager.createScene(
                        [container],  // konteyner verileri, 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ğıda gösterilen yük planını oluşturacaktır: