Cargo-Planner Docs

Cargo-Planner dans votre application

Bien que notre application web couvre la plupart des cas d’utilisation, il peut parfois être intéressant d’ajouter des fonctionnalités de planification de charge à un système WMS ou ERP existant - ou peut-être à votre propre portail web personnalisé. Vous pouvez utiliser la plupart des fonctionnalités en utilisant notre API Rest et le SDK JavaScript.

Côté serveur

Bien que vous n’ayez pas réellement besoin d’utiliser un serveur, c’est un bon moyen de l’utiliser comme intermédiaire entre Cargo-Planner et le client. Si vous avez un moyen de publier en toute sécurité le jeton API au client (rappelez-vous que stocker des clés dans localStorage ou dans le code n’est pas une bonne pratique) - vous pouvez appeler notre API directement depuis le client.

# Point de terminaison /calculate sur votre serveur situé à https://api.acme.com

import requests
import json

CARGO_PLANNER_TOKEN = 'Token votre-jeton'

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()
    #...

Client

Récupérez notre SDK ici. L’exemple ci-dessous appellera le point de terminaison ci-dessus qui à son tour appellera notre API et renverra un plan de charge / solution pour vos données de calcul, puis affichera une image 3D de chaque conteneur.

<meta charset="utf-8">
<title>Mon portail client</title>
<script src="./cargoPlannerSDK.umd.min.js"></script>

<body>
    <h1>Plan de charge</h1>
</body>

<script>

calculate();

async function calculate() {

    // Initialiser le moteur 3D
    await cargoPlannerSDK.SceneManager.init();

    // Référez-vous à la documentation de l'API pour plus d'options
    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"
            },

        ],
        "settings": {
          "group_items": true
        },
        "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 => {
        // Si nous avons reçu des solutions
        if(data.solutions) {

            // Pour le moment, chaque calcul donne une solution (à l'avenir, nous pourrions en fournir plus)
            data.solutions.forEach((solution) => {

                // Parcourir chaque conteneur
                solution.containers.forEach((container, index) => {

                    // Rendre le canvas
                    cargoPlannerSDK.SceneManager.createScene(
                        container,  // données du conteneur
                        null,       // Mode interactif (mettre à null lors de l'affichage de plusieurs conteneurs)
                        400,        // Largeur en pixels
                        200         // Hauteur en pixels
                    ).then((canvas) => {

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

                        const label = document.createTextNode(`Conteneur ${index+1}: ${container.name}`)
                        containerDiv.appendChild(label);
                        containerDiv.appendChild(canvas);

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

                });
            });
        }
    });
}

</script>

L’exemple ci-dessus générera le plan de charge ci-dessous :

Plan de charge depuis l'API