164 lines
6.3 KiB
Markdown
164 lines
6.3 KiB
Markdown
# JSON Studio & MariaDB Workbench
|
|
|
|
Zwei JSON-Editoren nebeneinander, die komplett im Browser laufen. Gedacht für
|
|
den Alltag mit Daten aus Shops, Schnittstellen und Tabellen: importieren,
|
|
vergleichen, umformen, wieder ausgeben.
|
|
|
|
**Live nutzen:** [https://git.obraasch.de/olli1986/JSON-Studio](https://git.obraasch.de/olli1986/JSON-Studio)
|
|
|
|
---
|
|
|
|
## Funktionen
|
|
|
|
**Import**
|
|
JSON · CSV · Excel (xlsx/xls, auch mehrere Blätter) · YAML (auch mehrere
|
|
Dokumente) · XML · SQL-Dump (liest `INSERT`-Anweisungen zurück, auch mit
|
|
mehreren Tabellen) · direkt von einer URL · aus einer Datenbank über eine
|
|
HTTP-Brücke
|
|
|
|
**Export**
|
|
JSON · CSV · Excel · YAML · XML · JSON-Schema (Draft 2020-12) · an einen
|
|
Webhook senden · in eine Datenbank schreiben (anhängen, ersetzen oder
|
|
aktualisieren)
|
|
|
|
**MariaDB-Skript-Generator**
|
|
`CREATE TABLE` + `INSERT` aus den vorhandenen Daten, mit:
|
|
- automatischer Typerkennung inklusive Unterscheidung zwischen `INT` und dem
|
|
größeren `BIGINT` bei sehr großen Zahlen
|
|
- manueller Korrektur jedes Spaltentyps (mit Längenangabe und Erklärung, wofür
|
|
welcher Typ gedacht ist)
|
|
- wählbarem Primärschlüssel: automatische `id`-Spalte, eine vorhandene Spalte,
|
|
oder mehrere zusammen als zusammengesetzter Schlüssel
|
|
- Umbenennung einzelner Spalten für den SQL-Namen, unabhängig vom JSON-Feldnamen
|
|
- Einstellungen werden pro Dokument gemerkt, bis der Editor geleert wird
|
|
|
|
**Arbeiten mit zwei Dokumenten**
|
|
Inhalt hin- und herkopieren · Verschachtelungen auflösen („Flatten“, nötig für
|
|
CSV/Excel/Datenbank) · Feld-für-Feld-Vergleich mit Bericht als Markdown oder
|
|
CSV · Pfad eines Feldes kopieren (z. B. für n8n-Ausdrücke)
|
|
|
|
**Komfort**
|
|
Hell- und Dunkelmodus · Dateiname wird beim Öffnen automatisch zum
|
|
Dokumentnamen · Liste der letzten 5 geöffneten Dateien pro Editor ·
|
|
Snippet-Bibliothek für wiederkehrende Vorlagen · optionale automatische
|
|
Sicherung als Download in festem Abstand (standardmäßig aus) ·
|
|
Tastaturkürzel · integrierte Anleitung mit Tooltips · Sicherung aller
|
|
Einstellungen, Snippets und Datenbank-Profile als JSON-Datei für den Umzug
|
|
auf einen anderen Rechner
|
|
|
|
---
|
|
|
|
## Installation
|
|
|
|
Es genügt, `json-workbench.html` auf einen Webserver zu legen. Die Datei ist
|
|
in sich abgeschlossen und braucht keinen Build-Schritt.
|
|
|
|
### Bibliotheken lokal ablegen (empfohlen)
|
|
|
|
Ohne lokale Kopien lädt die Anwendung ihre Bibliotheken von einem öffentlichen
|
|
CDN. Das funktioniert, überträgt aber die IP-Adressen deiner Nutzerinnen und
|
|
Nutzer an einen Dritten — in Deutschland ein datenschutzrechtliches Thema, das
|
|
du dir sparen kannst. Lege stattdessen an:
|
|
|
|
```
|
|
json-workbench.html
|
|
lib/
|
|
papaparse.min.js
|
|
xlsx.full.min.js
|
|
js-yaml.min.js
|
|
jsoneditor/
|
|
standalone.js
|
|
```
|
|
|
|
Die Quelladressen (mit fest angegebener Version, um unangekündigte Änderungen
|
|
zu vermeiden) stehen als Kommentar im Kopf der HTML-Datei. Der JSON-Editor
|
|
bringt seine Stile seit Version 3 direkt im Skript mit — eine separate
|
|
CSS-Datei ist dafür nicht mehr nötig. Lege die `LICENSE`-Dateien der
|
|
Bibliotheken gleich mit in `lib/` ab.
|
|
|
|
Die Anwendung sucht immer zuerst lokal und geht nur ins Netz, wenn sie dort
|
|
nichts findet. Welche Quelle benutzt wurde, zeigt die Anleitung unter
|
|
„Offline-Betrieb“ an.
|
|
|
|
**Wichtig:** Der JSON-Editor ist ein ES-Modul. Browser verbieten das Laden
|
|
solcher Module über `file://`. Per Doppelklick geöffnet, holt die Seite den
|
|
Editor deshalb weiterhin aus dem Netz. Für echten Offline-Betrieb muss der
|
|
Ordner über einen Webserver ausgeliefert werden — `python3 -m http.server`
|
|
im Ordner genügt zum Ausprobieren.
|
|
|
|
---
|
|
|
|
## Datenbankanbindung (optional)
|
|
|
|
Ein Browser kann sich nicht direkt mit MariaDB oder MySQL verbinden. Dafür
|
|
liegt `db-bridge.php` bei: ein kleines Serverskript, das die Anfragen
|
|
entgegennimmt und an die Datenbank weiterreicht.
|
|
|
|
1. `db-bridge.php` auf den Server legen und im Kopf der Datei Zugangsdaten,
|
|
API-Schlüssel und erlaubte Herkunft eintragen
|
|
2. In der Anwendung oben rechts auf das Datenbank-Symbol, Profil anlegen
|
|
3. Auf „Testen“ klicken — erscheint die Tabellenliste, steht die Verbindung
|
|
|
|
### Bitte beachten
|
|
|
|
- Lege einen **eigenen Datenbankbenutzer** mit genau den nötigen Rechten an.
|
|
Niemals `root` verwenden.
|
|
- Betreibe die Brücke **ausschließlich über HTTPS**.
|
|
- Die Aktion `query` lässt bewusst nur lesende Abfragen zu. Alle Werte gehen
|
|
über vorbereitete Statements; Tabellennamen werden gegen ein striktes Muster
|
|
geprüft, weil sie sich nicht als Parameter binden lassen.
|
|
- Schreibzugriffe lassen sich über `WRITES_ALLOWED` komplett abschalten.
|
|
- Der API-Schlüssel wird im Browser-Speicher der Nutzer abgelegt. Behandle ihn
|
|
wie ein Passwort und tausche ihn aus, wenn ein Gerät abhandenkommt.
|
|
- Der Schreibmodus „Ersetzen“ führt ein `TRUNCATE` aus und löscht damit alle
|
|
bestehenden Zeilen der Zieltabelle.
|
|
|
|
---
|
|
|
|
## Datenschutz & Datenhaltung
|
|
|
|
Alles, was hier bearbeitet wird, bleibt im Browser. Es wird nichts an den
|
|
Server übertragen, von dem die Seite geladen wurde — außer bewusst über
|
|
URL-Import, Webhook-Versand oder Datenbankanbindung, jeweils an eine selbst
|
|
angegebene Adresse. Inhalte, Namen, Einstellungen, Snippets und
|
|
Datenbank-Profile liegen im lokalen Speicher (`localStorage`) des jeweiligen
|
|
Browsers.
|
|
|
|
---
|
|
|
|
## Auf der eigenen Domain veröffentlichen
|
|
|
|
Eine kleine Übersichtsseite, die dieses und weitere Werkzeuge automatisch
|
|
auflistet, liegt in einem eigenen Repository:
|
|
https://git.obraasch.de/olli1986/software-obraasch-de-overview
|
|
|
|
Dort finden sich außerdem Vorlagen für Impressum und Datenschutzerklärung
|
|
sowie Hinweise zur Absicherung des Webservers.
|
|
|
|
---
|
|
|
|
## Lizenz
|
|
|
|
Dieses Projekt steht unter der MIT-Lizenz, siehe [LICENSE](LICENSE).
|
|
|
|
Eingebundene Bibliotheken und ihre Lizenzen:
|
|
|
|
| Bibliothek | Lizenz | Projekt |
|
|
|---|---|---|
|
|
| vanilla-jsoneditor | ISC | https://github.com/josdejong/svelte-jsoneditor |
|
|
| PapaParse | MIT | https://github.com/mholt/PapaParse |
|
|
| js-yaml | MIT | https://github.com/nodeca/js-yaml |
|
|
| SheetJS (xlsx) | Apache-2.0 | https://github.com/SheetJS/sheetjs |
|
|
|
|
SheetJS steht unter Apache-2.0. Bei Weitergabe muss der Lizenztext beiliegen
|
|
und es müssen Änderungen an den Dateien kenntlich gemacht werden — am
|
|
einfachsten, indem du die unveränderte Datei samt ihrer `LICENSE` in `lib/`
|
|
ablegst.
|
|
|
|
---
|
|
|
|
## Hinweis
|
|
|
|
Entstanden als Projekt von Oliver Braasch, mit Unterstützung von Claude
|
|
(Anthropic) bei Entwurf, Umsetzung und Dokumentation.
|