Cargo-Planner Docs
Cargo-Planner na sua Aplicação
Embora nossa aplicação web deva cobrir a maioria dos casos de uso, pode ser interessante adicionar a funcionalidade de planejamento de carga a um sistema WMS ou ERP existente - ou talvez ao seu próprio portal web personalizado. Você pode utilizar a maior parte da funcionalidade usando nossa API Rest e SDK JavaScript.
Lado do Servidor
Embora você não precise realmente usar um servidor, é uma boa maneira de usar como intermediário entre o Cargo-Planner e o cliente. Se você tiver uma maneira de publicar o token da API de forma segura para o cliente (lembre-se de que armazenar chaves no localStorage ou no código não é uma boa prática) - você pode chamar nossa API diretamente do cliente.
# endpoint /calculate no seu servidor localizado em https://api.acme.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()
#...Cliente
Baixe nosso SDK aqui. O exemplo abaixo chamará o endpoint acima que, por sua vez, chamará nossa API e retornará um plano de carga/solução para seus dados de cálculo, e então mostrará uma imagem 3D de cada contêiner.
<meta charset="utf-8">
<title>Meu portal do cliente</title>
<script src="./cargoPlannerSDK.umd.min.js"></script>
<body>
<h1>Plano de carga</h1>
</body>
<script>
calculate();
async function calculate() {
// Inicializar motor 3D
await cargoPlannerSDK.SceneManager.init();
// Consulte a documentação da API para mais opções
let calculationData = {
length_dim: "M",
weight_dim: "KG",
"items": [
{
"label": "Carga 1",
"l": 1.2,
"w": 0.8,
"h": 0.5,
"wt": 300,
"qty": 20,
"layers": 2,
"color":"#48c9b0"
},
{
"label": "Carga 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 => {
// Se recebemos alguma solução
if(data.solutions) {
// No momento, cada cálculo fornece uma solução (no futuro, podemos fornecer mais)
data.solutions.forEach((solution) => {
// Percorrer cada contêiner
solution.containers.forEach((container, index) => {
// Renderizar o canvas
cargoPlannerSDK.SceneManager.createScene(
container, // dados do contêiner
null, // Modo interativo (defina como null ao mostrar vários contêineres)
400, // Largura em pixels
200 // Altura em pixels
).then((canvas) => {
const containerDiv = document.createElement("div");
const label = document.createTextNode(`Contêiner ${index+1}: ${container.name}`)
containerDiv.appendChild(label);
containerDiv.appendChild(canvas);
document.body.appendChild(containerDiv);
});
});
});
}
});
}
</script>
O exemplo acima gerará o plano de carga abaixo:
