diff --git a/goofy-client/README.md b/goofy-client/README.md index ecc37cd8adf181ad518b62d2bee4f86d0da7692f..19cfd867ef08a00ed5dc9f5f659505a9bf223264 100644 --- a/goofy-client/README.md +++ b/goofy-client/README.md @@ -2,7 +2,9 @@ ## Client starten -Um den Client zum laufen zu bekommen, muss zunächst ein `npm install` ausgeführt werden. +_Vorbedingungen: Jeweils aktuelle Versionen von Node 16 sowie NPM 8._ + +Um den Client zum Laufen zu bekommen, muss zunächst ein `npm install` ausgeführt werden. -> nach dem Ausführen sollte sich ein `node_modules` Ordner im Verzeichnis befinden. @@ -57,6 +59,60 @@ to generate a new component. nx g @nrwl/workspace:remove 'library-name' ``` +## Beispiel für Libraries und anderes anlegen + +Libraries usw. werden durch das [Nx Plugin for Angular](https://nx.dev/packages/angular) erzeugt. + +Anlegen einer Library am Beispiel des Historie-Tab auf der Vorgangdetail-Seite: + +* historie: UI +* historie-shared: Services, State (NgRX) + +``` +npx nx g @nrwl/angular:lib historie +npx nx g @nrwl/angular:lib historie-shared +``` + +Libraries enthalten: + +- Services +- Container-Komponenten: + - Bereitstellen von Daten durch Services + - Einbinden von Child-Komponenten +- Child-Komponenten + - Darstellen von Daten, via @Input() übergeben + - Zurückgeben von Daten, via @Output() / Emitter + +Container-Komponente anlegen: + +``` +npx nx g @nrwl/angular:component historie-container --project=historie --export +``` + +Child-Komponente anlegen - soll in anderen Komponenten eingebunden werden können: + +``` +npx nx g @nrwl/angular:component historie-list --project=historie --path=libs/historie/src/lib/historie-container --export +``` + +Service anlegen: + +``` +npx nx g service historie --project=historie-shared --flat +``` + +Repository anlegen: + +_Kein Nx generator vorhanden - muss manuell getan werden._ + +Dateien für NgRx state management anlegen: + +``` +npx nx g @nrwl/angular:ngrx --name=historie --directory=+state --module=libs/historie-shared/src/lib/historie-shared.module.ts --facade=true --root=false +``` + +Hinweis: Die Datei _libs/historie/tsconfig.json_ enthält möglicherweise zu restriktive Compiler-Optionen. Hinzufügen von `"strictPropertyInitialization": true` beruhigt die IDE, jedoch nicht die Unit Tests. Geholfen hat, alle _compilerOptions_ sowie _angularCompilerOptions_ zu entfernen. + ## Allgemein Man kann mit Hilfe von `nx --help` eine Liste von Befehlen mit kurzen Erläuterung bekommen. @@ -144,3 +200,58 @@ Für Mehr Info: <https://github.com/ReactiveX/rxjs/blob/master/docs_app/content/ | `'-'` | frame: 1 "frame" of virtual time passing (see above description of frames). | `'\|'` | complete: The successful completion of an observable. This is the observable producer signaling `complete()`. | `'#'` | error: An error terminating the observable. This is the observable producer signaling `error()`. + +Das Frontend wird als Mono Repository via [Nx](https://nx.dev/getting-started/intro) organisiert. + +Voneinander trennbare funktionale Bereiche innerhalb einer Anwendung sind in Libaries unterteilt. + +## HTTP-Fehler simulieren + +1. `netcat` in einer Bash simuliert einen HTTP-Server auf Port 8081, der auf jeden Request einen 500er Fehler zurück gibt. + +```bash +while true; do + { echo -e "HTTP/1.1 500 Internal Server Error\r\nContent-Length: 25\r\nContent-Type: text/plain\r\nDate: $(date)\r\n"; \ + echo '500 Internal Server Error'; \ + } | nc -l 8081; +done +``` + +2. Test in einem Terminal mit `curl -IL localhost:8081` + +3. _proxy.conf.json_ so konfigurieren, dass für den zu testenden HTTP-Pfad auf den netcat-Server umgeleitet wird. Anschließend `npm start` neu starten. Beispiel für _/api/histories_: + +```json +{ + "/api/histories": { + "target": { + "host": "localhost", + "port": 8081, + "protocol": "http:" + }, + "secure": false, + "logLevel": "debug" + }, + "/api": { + "target": { + "host": "localhost", + "port": 8080, + "protocol": "http:" + }, + "secure": false, + "logLevel": "debug" + } +} +``` + +## Library umbenennen + +Beispiel: `settings` nach `user-settings` + +1. `nx g @nrwl/workspace:move --projectName settings --destination user-settings` +2. `find user-settings/* -depth -execdir rename 's/settings/user-settings/g' {} \;` +3. `git add --all` (Git Historie umbenannter Dateien bleibt erhalten) +4. Globales Suchen/Ersetzen im Code, Großschreibung beachten + - /settings => /user-settings + - Settings => UserSettings + - goofy-client-settings => goofy-client-user-settings