158 lines
3.2 KiB
Markdown
158 lines
3.2 KiB
Markdown
# 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 :
|