Value Services implementiert Teil 1

2026-08-15 16:58:12 +02:00
parent 8c5ad6ceec
commit 58de339be8
7778 changed files with 868356 additions and 124 deletions
@@ -0,0 +1,157 @@
+# Simply CPQ Buildtime Client
+
+Dieser Ordner enthält alle relevanten Dateien und Informationen zum Simply CPQ Buildtime Client. Dieser dient der Pflege von Produktdaten, Regeln, Konditionen und Administration der Simply CPQ Anwendung.
+
+## Material-Editor
+
+Dieser Editor basiert auf react und der Material UI Bibliothek.
+
+### Zusätzliche Open Source Bibliotheken:
+
+#### Umgebung
+
+Für die Entwicklung wird die Software Node.JS benötigt, hier zu finden:
+https://nodejs.org/
+
+Mit
+
+```bash
+npm create vite@latest material-editor -- --template react-ts
+```
+
+kann dann die Umgebung erzeugt werden.
+
+Mit
+
+```bash
+npm run dev
+```
+
+kann die Entwicklungsumgebung gestartet werden.
+
+
+
+React Router für das Page Routing:
+
+```bash
+npm install react-router
+```
+
+#### UI: Material UI
+
+Material UI ist eine React UI Bibliothek. Der Material-Editor nutzt die Open-Source Komponenten mit der MIT-Lizenz. [MUI: The React component library you always wanted](https://mui.com/)
+Darüber Hinaus wird der "Inter"-Font und der "Roboto"-Font genutzt.
+
+Zur Installation im Root-Verzeichnis des Client-Quellcodes 
+
+```bash
+npm install @mui/material @emotion/react @emotion/styled
+npm install @fontsource-variable/inter
+npm install @mui/icons-material
+npm install @mui/x-data-grid
+```
+
+aufrufen.
+
+### Datenbank Zugriff mit ky
+
+Um auf den Simply CPQ Master-Data Server zuzugreifen wird die Bibliothek *ky* genutzt. [ky - npm](https://www.npmjs.com/package/ky)
+
+Zur Installation im Root-Verzeichnis des Client-Quellcodes 
+
+```bash
+npm install ky
+```
+
+aufrufen.
+
+# Alt
+
+## Genutzte Techologie
+
+Der Client ist eine Web-Applikation, die auf der React-Library aufgebaut ist.
+[React](https://react.dev/)
+
+### Zusätzliche Open Source Bibliotheken:
+
+#### Umgebung
+
+Für die Entwicklung wird die Software Node.JS benötigt, hier zu finden:
+https://nodejs.org/
+
+Mit
+
+```bash
+npm create vite@latest logical-editor --template react
+```
+
+kann dann die Umgebung erzeugt werden.
+
+Mit
+
+```bash
+npm run dev
+```
+
+kann die Entwicklungsumgebung gestartet werden.
+
+Folgende Komponenten müssen noch installiert werden:
+
+##### React Router
+
+```bash
+npm install react-router
+```
+
+#### Tree View Komponente (react-arborist)
+
+Diese Komponente wird zur Anzeige von Bäumen auf der Oberfläche genutzt. Hier zu finden:
+[jameskerr/react-arborist: The complete tree view component for React](https://github.com/jameskerr/react-arborist)
+
+Zur Installation im Root-Verzeichnis des Client-Quellcodes 
+
+```bash
+npm install react-arborist
+```
+
+aufrufen.
+
+#### Icon-Library:
+
+HeroIcon Lib mit der MIT Lizenz ([tailwindlabs/heroicons: A set of free MIT-licensed high-quality SVG icons for UI development.](https://github.com/tailwindlabs/heroicons)
+).
+
+```bash
+npm install @heroicons/react
+```
+
+#### CSS Helper Tailwind CSS
+
+Zur schnellen Erstellung von Layout: [tailwindlabs/tailwindcss: A utility-first CSS framework for rapid UI development.](https://github.com/tailwindlabs/tailwindcss)
+
+```bash
+npm install tailwindcss @tailwindcss/vite
+```
+
+Dann die Datei vite.config.ts editieren
+
+```javascript
+edit vite.config.ts
+
+import { defineConfig } from 'vite'
+import tailwindcss from '@tailwindcss/vite'
+
+export default defineConfig({  
+    plugins: [    
+        tailwindcss(),  
+    ],
+})
+```
+
+In der Scriptdatei:
+
+```javascript
+@import "tailwindcss";
+```
+
+Dokumentation :