Cargo-Planner Docs
Inclusion 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 chargement à 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.
Trois façons d’ajouter Cargo-Planner à votre application
Il existe trois façons d’ajouter des fonctionnalités de planification de chargement à votre application. La plus appropriée dans votre cas dépend d’un compromis entre complexité, fonctionnalités et personnalisation.
1. Intégrer dans un iframe - sans code (ou presque)
La façon la plus simple d’intégrer notre outil de planification de chargement est d’intégrer la vue dans un élément html iframe.
Le plus grand inconvénient de cette approche est qu’elle sera réalisée de manière non authentifiée, ce qui signifie que les objets de liste de chargement doivent être créés au préalable et ensuite permettre l’accès en lecture et écriture pour le partage public. Pour ce faire, vous devez créer un nouveau plan de chargement (vous devez simplement le créer - vous n’avez pas besoin de remplir de données) puis activer le partage.
Une fois cela fait, copiez le lien de partage et intégrez-le dans un iframe comme ceci :
<iframe
src="https://app.cargo-planner.com/loadlist/10405cacde654075kjf53bd1f78520/workspace/0?length_dim=IN&weight_dim=LB&primary=1e3a8a"></iframe> 
Notez que vous pouvez ajouter un paramètre de requête primaire avec une couleur hexadécimale. Fournissez la couleur de votre thème et elle s’intégrera mieux dans votre environnement.
Vous pouvez également définir le paramètre de requête hide_navigation sur true pour masquer la barre de navigation. Cela pourrait être utile si, par exemple, vous souhaitez uniquement afficher la vue du plan de chargement.
2. Télécharger des données en utilisant l’API - afficher le résultat dans un iframe
Bien que la solution ci-dessus permette rapidement d’attacher des fonctionnalités de planification de chargement à votre site, les principaux inconvénients sont que vous devez créer chaque liste manuellement. Si vous avez plusieurs utilisateurs utilisant votre application, cela peut entraîner un comportement étrange car la même liste de chargement pourrait être mise à jour simultanément.
Un autre inconvénient est que les données de chargement doivent être ajoutées manuellement (bien que vous puissiez toujours utiliser les différentes fonctions d’importation). Votre application aura probablement déjà ces informations disponibles - il serait donc idéal de pouvoir télécharger ces informations automatiquement.
La solution est d’utiliser notre API.
Disons que votre application a le point de terminaison ci-dessous :
# Point de terminaison /calculate sur votre serveur situé à https://example.com
import requests
import json
CARGO_PLANNER_TOKEN = 'Token your-token'
def calculate(request):
# Ces données proviennent peut-être de votre site web ou de votre source de données interne
data = {
"loadlist": {
"name": "Commande d'achat 1234",
"public_access": "RW"
},
"calculation": {
"length_dim": "CM",
"weight_dim": "KG"
"container_types": [
{
"id": 1,
"payload": 20000
}
],
"items": [
{
"label": "produit 1",
"l": 30,
"w": 80,
"h": 90,
"wt": 70,
"qty": 2
},
{
"label": "produit 2",
"l": 50,
"w": 40,
"h": 50,
"wt": 40,
"qty": 3
}
],
}
}
# Appeler notre 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:
# Retourner le lien vers votre page pour l'iframe
return "https://app.cargo-planner.com/loadlist/{}/".format(response.data["id"])
#...
3. Télécharger des données en utilisant l’API - afficher le résultat en utilisant notre SDK
Afin d’obtenir une personnalisation complète de l’apparence, tout en éliminant le besoin d’utiliser un iframe, vous pouvez utiliser notre SDK Javascript.
De cette manière, vous pouvez afficher les mises en page 3D de chaque conteneur et également présenter les métriques que vous jugez les plus importantes.
Ci-dessous un simple extrait côté serveur en Python et un extrait Javascript pour votre application frontale :
# Point de terminaison /calculate sur votre serveur situé à 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>Mon portail client</title>
<script src="https://usermedia.cargoplanner.net/sdk/cargoPlannerSDK.es.js"></script>
<body>
<h1>Plan de chargement</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",
// Peut-être que les dimensions du chargement pourraient être saisies à partir d'un formulaire interactif ?
"items": [
{
"label": "Chargement 1",
"l": 1.2,
"w": 0.8,
"h": 0.5,
"wt": 300,
"qty": 20,
"layers": 2,
"color":"#48c9b0"
},
{
"label": "Chargement 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 => {
// 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, vous pouvez envoyer plusieurs conteneurs à une scène et spécifier leur position
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} Espace max utilisé : ${container.items_bb.max.x}, Poids utilisé : ${container.WT} `)
containerDiv.appendChild(label);
containerDiv.appendChild(canvas);
document.body.appendChild(containerDiv);
});
});
});
}
});
}
</script>
L’exemple ci-dessus générera le plan de chargement ci-dessous :
