Cargo-Planner Docs
Incluindo em 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.
Três maneiras de adicionar o Cargo-Planner à sua aplicação
Existem três maneiras de adicionar a funcionalidade de planejamento de carga à sua aplicação. Qual delas é mais adequada ao seu caso de uso é um equilíbrio entre complexidade, recursos e personalização.
1. Incorporar em um iframe - sem código (quase)
A maneira mais fácil de integrar nossa ferramenta de planejamento de carga é incorporar a visualização em um elemento html iframe.
A maior ressalva com essa abordagem é que ela será feita de forma não autenticada, o que significa que os objetos da lista de carga precisam ser criados antecipadamente e então habilitar o acesso de Leitura e Escrita para compartilhamento público. Para fazer isso, você precisa criar um novo plano de carga (você só precisa criá-lo - não precisa preencher nenhum dado) e então habilitar o compartilhamento.
Uma vez feito isso, copie o link de compartilhamento e incorpore-o em um iframe assim:
<iframe
src="https://app.cargo-planner.com/loadlist/10405cacde654075kjf53bd1f78520/workspace/0?length_dim=IN&weight_dim=LB&primary=1e3a8a"></iframe>
Observe que você pode adicionar um parâmetro de consulta primário com uma cor hexadecimal. Forneça a cor do seu tema e ela se integrará melhor ao seu ambiente
Você também pode definir o parâmetro de consulta hide_navigation como verdadeiro para ocultar a barra de navegação. Isso pode ser útil se, por exemplo, você quiser apenas mostrar a visualização do plano de carga.
2. Carregar dados usando a API - mostrar resultado em um iframe
Embora a solução acima torne rapidamente possível anexar a funcionalidade de planejamento de carga ao seu site, as principais desvantagens são que você precisa criar cada lista manualmente. Se você tiver vários usuários usando sua aplicação, isso pode resultar em um comportamento estranho, pois a mesma lista de carga pode ser atualizada simultaneamente.
Outra desvantagem é que os dados de carga precisam ser adicionados manualmente (bem, você ainda pode usar as várias funções de importação). Sua aplicação provavelmente já terá essas informações disponíveis - portanto, seria ótimo se fosse possível carregar essas informações automaticamente.
A solução é usar nossa API.
Vamos supor que sua aplicação tenha o endpoint abaixo:
# /calculate endpoint at your server located at https://example.com
import requests
import json
CARGO_PLANNER_TOKEN = 'Token your-token'
def calculate(request):
# Esses dados talvez venham do seu site voltado para o público ou de sua fonte de dados interna
data = {
"loadlist": {
"name": "Pedido de compra 1234",
"public_access": "RW"
},
"calculation": {
"length_dim": "CM",
"weight_dim": "KG"
"container_types": [
{
"id": 1,
"payload": 20000
}
],
"items": [
{
"label": "produto 1",
"l": 30,
"w": 80,
"h": 90,
"wt": 70,
"qty": 2
},
{
"label": "produto 2",
"l": 50,
"w": 40,
"h": 50,
"wt": 40,
"qty": 3
}
],
}
}
# Chame nossa 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:
# Retorne o link para sua página para o iframe
return "https://app.cargo-planner.com/loadlist/{}/".format(response.data["id"])
#...
3. Carregar dados usando a API - mostrar o resultado usando nosso SDK
Para obter total personalização da aparência, enquanto também elimina a necessidade de usar um iframe, você pode usar nosso SDK Javascript.
Dessa forma, você pode mostrar os layouts 3D de cada contêiner e também apresentar as métricas que parecem ser mais importantes.
Abaixo está um trecho simples do lado do servidor em Python e um trecho em Javascript para sua aplicação voltada para o público:
# /calculate endpoint at your server located at 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>Meu portal do cliente</title>
<script src="https://usermedia.cargoplanner.net/sdk/cargoPlannerSDK.umd.min.js"></script>
<body>
<h1>Plano de carga</h1>
</body>
<script>
calculate();
async function calculate() {
// Inicialize o motor 3D
await cargoPlannerSDK.SceneManager.init();
// Consulte a documentação da API para mais opções
let calculationData = {
length_dim: "M",
weight_dim: "KG",
// Talvez as dimensões da carga possam ser inseridas a partir de um formulário interativo?
"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"
},
],
"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) => {
// Percorra cada contêiner
solution.containers.forEach((container, index) => {
// Renderize o canvas
cargoPlannerSDK.SceneManager.createScene(
[container], // dados do contêiner, você pode enviar vários contêineres para uma cena e especificar sua posição
null, // Modo interativo (defina como nulo 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} Espaço máximo usado: ${container.items_bb.max.x}, Peso usado: ${container.WT} `)
containerDiv.appendChild(label);
containerDiv.appendChild(canvas);
document.body.appendChild(containerDiv);
});
});
});
}
});
}
</script>
O exemplo acima gerará o plano de carga abaixo:
