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 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.
Trois façons d’ajouter Cargo-Planner à votre application
Il existe trois façons d’ajouter des fonctionnalités de planification de charge à votre application. La plus adaptée à votre cas d’utilisation est un compromis entre complexité, fonctionnalités et personnalisation.
1. Intégrer dans un iframe - pas de code (ou presque)
La façon la plus simple d’intégrer notre outil de planification de charge est d’intégrer la vue dans un élément html iframe.
Le plus gros 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 charge doivent être créés au préalable et ensuite activer l’accès en lecture et écriture pour le partage public. Pour ce faire, vous devez créer un nouveau plan de charge (vous devez simplement le créer - vous n’avez pas besoin de remplir de données) et ensuite 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 à votre environnement.
Vous pouvez également ajouter un paramètre de requête hide_navigation à true pour masquer la barre de navigation. Cela pourrait être utile si, par exemple, vous souhaitez uniquement afficher la vue du plan de charge.
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 charge à 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 charge pourrait être mise à jour simultanément.
Un autre inconvénient est que les données de cargaison 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.
Supposons que votre application ait 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 votre-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
Pour obtenir une personnalisation complète de l’apparence et de la convivialité, tout en se débarrassant de la nécessité 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 qui vous semblent 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 votre-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.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",
// Peut-être que les dimensions de la cargaison pourraient être saisies à partir d'un formulaire interactif ?
"items": [
{
"label": "Cargaison 1",
"l": 1.2,
"w": 0.8,
"h": 0.5,
"wt": 300,
"qty": 20,
"layers": 2,
"color":"#48c9b0"
},
{
"label": "Cargaison 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 charge ci-dessous :
