blockly_crumbforest_bridge.md

🧩 Ziel

Eine funktionsfähige Brücke zwischen Blockly (Browser) und dem Crumbforest-Terminal (CakePHP API), um generierten Code per POST an /crumbapi/blockly-terminal zu senden.

✅ Erfolgreiche Endkonfiguration (HTML)

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Blockly to Crumbforest Terminal Bridge</title>
  <script src="https://unpkg.com/blockly/blockly.min.js"></script>
  <style>
    html, body { height: 100%; margin: 0; display: flex; flex-direction: column; }
    #blocklyDiv { height: 60vh; width: 100%; }
    #output { height: 30vh; width: 100%; background: #111; color: #0f0; font-family: monospace; padding: 10px; overflow: auto; }
    button { padding: 1em; background: #222; color: white; border: none; cursor: pointer; }
  </style>
</head>
<body>
  <h2 style="margin: 0.5em">🧁 Blockly Crumbforest Bridge</h2>
  <div id="blocklyDiv"></div>
  <xml id="toolbox" style="display: none">
    <block type="text"></block>
    <block type="text_print"></block>
    <block type="controls_if"></block>
    <block type="logic_compare"></block>
    <block type="math_number"></block>
    <block type="math_arithmetic"></block>
    <block type="variables_set"></block>
    <block type="variables_get"></block>
    <block type="procedures_defnoreturn"></block>
    <block type="procedures_callnoreturn"></block>
  </xml>

  <button onclick="runCode()">🧠 Sende an Crumbforest Terminal</button>
  <pre id="output">🌲 Terminal wartet ...</pre>

  <script>
    const workspace = Blockly.inject('blocklyDiv', { toolbox: document.getElementById('toolbox') });

    function runCode() {
      const generatedCode = Blockly.JavaScript.workspaceToCode(workspace);
      document.getElementById('output').textContent = `📤 Sende an Terminal...\n\n${generatedCode}`;

      fetch("/crumbapi/blockly-terminal", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ blockcode: generatedCode })
      })
      .then(response => response.json())
      .then(data => {
        document.getElementById('output').textContent += `\n\n✅ Antwort:\n${JSON.stringify(data, null, 2)}`;
      })
      .catch(error => {
        document.getElementById('output').textContent += `\n\n❌ Fehler:\n${error}`;
      });
    }
  </script>
</body>
</html>

🐛 Fehlerchronik & Lösungen

❌ Problem: `Method Not Allowed`

Ursache: Route /crumbapi/blockly-terminal nicht korrekt auf POST beschränkt.
Lösung: Routen richtig konfigurieren via connect(..., ['_method' => ['POST']]).

❌ Problem: `Missing or incorrect CSRF cookie type`

Ursache: CSRF-Middleware blockte fetch ohne Cookie.
Lösung: skipCheckCallback in CsrfProtectionMiddleware.

❌ Problem: `The request object does not contain the required authentication attribute`

Ursache: AuthenticationMiddleware griff auf /crumbapi.
Lösung: Manuelles Einfügen eines leeren AuthenticationService in Middleware.

✅ Erfolgreicher Test

curl -X POST http://localhost:8080/crumbapi/blockly-terminal \
  -H "Content-Type: application/json" \
  -d '{"blockcode": "window.alert(42);"}'

# Antwort:
{
  "status": "success",
  "message": "Blockcode received.",
  "received": "window.alert(42);"
}

🕒 Stand: 2025-06-05T19:57:16.383399