... | @@ -17,58 +17,58 @@ Es muss sowohl das Backend als auch das Frontend installiert werden. |
... | @@ -17,58 +17,58 @@ Es muss sowohl das Backend als auch das Frontend installiert werden. |
|
**`AMQP_HOSTNAME=rabbitmq`**
|
|
**`AMQP_HOSTNAME=rabbitmq`**
|
|
**`AMQP_USER=meinNutzer`**
|
|
**`AMQP_USER=meinNutzer`**
|
|
**`AMQP_PASSWORD=meinPasswort`**
|
|
**`AMQP_PASSWORD=meinPasswort`**
|
|
in die 'arsnova-click.env' Datei.
|
|
in die **arsnova-click.env** Datei.
|
|
Deine 'arsnova-click.env' Datei sollte so aussehen:
|
|
Deine **arsnova-click.env** Datei sollte so aussehen:
|
|
![image](uploads/80e534b595018d704bc3b61656368043/image.png)
|
|
![image](uploads/80e534b595018d704bc3b61656368043/image.png)
|
|
- Kopiere:
|
|
- Kopiere:
|
|
`MONGO_INITDB_DATABASE=arsnova-click-v2`
|
|
**`MONGO_INITDB_DATABASE=arsnova-click-v2`**
|
|
`MONGO_INITDB_ROOT_USERNAME=`
|
|
**`MONGO_INITDB_ROOT_USERNAME=`**
|
|
`MONGO_INITDB_ROOT_PASSWORD=`
|
|
**`MONGO_INITDB_ROOT_PASSWORD=`**
|
|
in die 'mongo.env' Datei.
|
|
in die **mongo.env** Datei.
|
|
Deine 'mongo.env' Datei sollte so aussehen:
|
|
Deine **mongo.env** Datei sollte so aussehen:
|
|
![image](uploads/e5158693d4f6c06b0e80404cc324ebf7/image.png)
|
|
![image](uploads/e5158693d4f6c06b0e80404cc324ebf7/image.png)
|
|
- Kopiere:
|
|
- Kopiere:
|
|
`db.createUser(`
|
|
**`db.createUser(`**
|
|
`{`
|
|
**`{`**
|
|
` user: "root",`
|
|
**` user: "root",`**
|
|
` pwd: "pass123",`
|
|
**` pwd: "pass123",`**
|
|
` roles: [ { role: "userAdminAnyDatabase",`
|
|
**` roles: [ { role: "userAdminAnyDatabase",`**
|
|
`db: "arsnova-click-v2" }, "readWriteAnyDatabase" ]`
|
|
**`db: "arsnova-click-v2" }, "readWriteAnyDatabase" ]`**
|
|
`}`
|
|
**`}`**
|
|
`)`
|
|
**`)`**
|
|
in die 'init-mongo.js' Datei.
|
|
in die **init-mongo.js** Datei.
|
|
Deine 'mongo.env' Datei sollte so aussehen:
|
|
Deine **mongo.env** Datei sollte so aussehen:
|
|
![image](uploads/c8762037e0544022cc9598723055be69/image.png)
|
|
![image](uploads/c8762037e0544022cc9598723055be69/image.png)
|
|
- Danach musst du nurnoch `docker-compose up -d mongodb rabbitmq` in die Kommandozeile eingeben um die Container von MongoDB und RabbitMQ zu starten.
|
|
- Danach musst du nurnoch **`docker-compose up -d mongodb rabbitmq`** in die Kommandozeile eingeben um die Container von MongoDB und RabbitMQ zu starten.
|
|
- Gib zum überprüfen ob die Docker Container richtig gestartet wurden `docker ps` ein, es sollte ungefähr so aussehen:
|
|
- Gib zum überprüfen ob die Docker Container richtig gestartet wurden **`docker ps`** ein, es sollte ungefähr so aussehen:
|
|
![image](uploads/60117282cc9505e55e14d1b9e0a54fec/image.png)
|
|
![image](uploads/60117282cc9505e55e14d1b9e0a54fec/image.png)
|
|
- Als nächstes erstellen wir uns einen Benutzer für RabbitMQ. Öffne dafür zunächst die Adresse http://localhost:15674/ und dann http://localhost:15672/. Du solltest eine Einlogmaske auffinden:
|
|
- Als nächstes erstellen wir uns einen Benutzer für RabbitMQ. Öffne dafür zunächst die Adresse http://localhost:15674/ und dann http://localhost:15672/. Du solltest eine Einlogmaske auffinden:
|
|
![image](uploads/21d175efd33d560211249d568606d753/image.png)
|
|
![image](uploads/21d175efd33d560211249d568606d753/image.png)
|
|
- Logge dich ein mit Username: `user` und Password: `bitnami`
|
|
- Logge dich ein mit Username: **`user`** und Password: **`bitnami`**.
|
|
- Klicke auf den Tab 'Admin'
|
|
- Klicke auf den Tab **Admin**.
|
|
- Gib nun bei 'Add a user' den Username: `meinNutzer` und das Password: `meinPasswort` ein, klicke ausserdem bei 'set' auf `Admin`, drücke dann auf den Knopf 'Add user'
|
|
- Gib nun bei **Add a user** den Username: **`meinNutzer`** und das Password: **`meinPasswort`** ein, klicke ausserdem bei **set** auf **`Admin`**, drücke dann auf den Knopf **Add user**.
|
|
![image](uploads/224327d456fa2933a55acaf77606b2fc/image.png)
|
|
![image](uploads/224327d456fa2933a55acaf77606b2fc/image.png)
|
|
- Klicke dann im Menü wo die User aufgelistet sind auf 'meinNutzer'
|
|
- Klicke dann im Menü wo die User aufgelistet sind auf **meinNutzer**:
|
|
![image](uploads/9f9baafca087ccb0c0b989d4ae7e4127/image.png)
|
|
![image](uploads/9f9baafca087ccb0c0b989d4ae7e4127/image.png)
|
|
- Klicke jetzt auf 'Set permission'
|
|
- Klicke jetzt auf **Set permission**:
|
|
![image](uploads/60228859a01d5feb39729b36f935f3b1/image.png)
|
|
![image](uploads/60228859a01d5feb39729b36f935f3b1/image.png)
|
|
- Nun musst du das Backend bauen lassen indem du `npm run build:DEV` in die Kommandozeile eingibst, um ein sauberes Build zu erhalten, du kannst während des Programmierens `tsc --watch` nutzen damit die geänderten Dateien direkt transpiliert werden.
|
|
- Nun musst du das Backend bauen lassen indem du **`npm run build:DEV`** in die Kommandozeile eingibst, um ein sauberes Build zu erhalten, du kannst während des Programmierens **`tsc --watch`** nutzen damit die geänderten Dateien direkt transpiliert werden.
|
|
- Als letztes musst du es (nurnoch) starten! Öffne zuerst eine neue Kommandozeile, gehe wieder in den Ordner des Backends, gib dann `cd dist` um in den durch 'build' generierten Ordner zu navigieren und dann `node main.js` ein, um den Server zu starten.
|
|
- Als letztes musst du es (nurnoch) starten! Öffne zuerst eine neue Kommandozeile, gehe wieder in den Ordner des Backends, gib dann **`cd dist`** um in den durch **build** generierten Ordner zu navigieren und dann **`node main.js`** ein, um den Server zu starten.
|
|
- Sieht es so aus wenn du http://localhost:3010/ im Browser aufrufst?
|
|
- Sieht es so aus wenn du http://localhost:3010/ im Browser aufrufst?
|
|
![image](uploads/bc523e78e54c28d4635262184ff25934/image.png)
|
|
![image](uploads/bc523e78e54c28d4635262184ff25934/image.png)
|
|
Falls ja, dann hast du es geschafft!
|
|
Falls ja, dann hast du es geschafft!
|
|
- Wenn dennoch Probleme auftreten lese die Rückmeldungen im Terminal beim ausführen von `node main.js` und `npm run test`.
|
|
- Wenn dennoch Probleme auftreten lese die Rückmeldungen im Terminal beim ausführen von **`node main.js`** und **`npm run test`**.
|
|
- Tipp: Gucke dir die Swagger Dokumentation unter http://localhost:3010/api/v1/api-docs/ an um ein strukturierten Einblick in die Routen des Backends zu bekommen.
|
|
- Tipp: Gucke dir die Swagger Dokumentation unter http://localhost:3010/api/v1/api-docs/ an um ein strukturierten Einblick in die Routen des Backends zu bekommen.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
## Frontend
|
|
## Frontend
|
|
- Downloade dir als erstes Google Chrome, es wird benötigt um die Tests mit Karma auszuführen, falls du es noch nicht hast, oder später auf Probleme stößt, mache eine saubere Installation von Google Chrome indem du `wget https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb` und danach `sudo dpkg -i google-chrome-stable_current_amd64.deb` in die Kommandozeile eingibst.
|
|
- Downloade dir als erstes Google Chrome, es wird benötigt um die Tests mit Karma auszuführen, falls du es noch nicht hast, oder später auf Probleme stößt, mache eine saubere Installation von Google Chrome indem du **`wget https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb`** und danach **`sudo dpkg -i google-chrome-stable_current_amd64.deb`** in die Kommandozeile eingibst.
|
|
- Klone das Project von Git indem du `git clone https://git.thm.de/arsnova/arsnova-click-v2-frontend` in die Kommandozeile eingibst.
|
|
- Klone das Project von Git indem du **`git clone https://git.thm.de/arsnova/arsnova-click-v2-frontend`** in die Kommandozeile eingibst.
|
|
- Navigiere in das Project mit `cd arsnova-click-v2-frontend` und dann in den 'environments' Ordner indem du `cd src && cd environments` in die Kommandozeile eingibst.
|
|
- Navigiere in das Project mit **`cd arsnova-click-v2-frontend`** und dann in den **environments** Ordner indem du **`cd src && cd environments`** in die Kommandozeile eingibst.
|
|
- Öffne die 'environment.ts' Datei und füge bei user: `meinNutzer` ein und bei password: `meinPasswort` ein
|
|
- Öffne die **environment.ts** Datei und füge bei user: **`meinNutzer`** ein und bei password: **`meinPasswort`** ein:
|
|
![image](uploads/9f67aeb86db9e2e9e1f8e69e1701ed57/image.png)
|
|
![image](uploads/9f67aeb86db9e2e9e1f8e69e1701ed57/image.png)
|
|
- Installiere nun mit npm alle dependencies, schreibe dafür `sudo apt-get install --allow-unauthenticated gconf-service libasound2 libatk1.0-0 libatk-bridge2.0-0 libc6 libcairo2 libcups2 libdbus-1-3 libexpat1 libfontconfig1 libgcc1 libgconf-2-4 libgdk-pixbuf2.0-0 libglib2.0-0 libgtk-3-0 libnspr4 libpango-1.0-0 libpangocairo-1.0-0 libstdc++6 libx11-6 libx11-xcb1 libxcb1 libxcomposite1 libxcursor1 libxdamage1 libxext6 libxfixes3 libxi6 libxrandr2 libxrender1 libxss1 libxtst6 ca-certificates fonts-liberation libappindicator1 libnss3 lsb-release xdg-utils wget` in die Kommandozeile.
|
|
- Installiere nun mit npm alle dependencies, schreibe dafür **`sudo apt-get install --allow-unauthenticated gconf-service libasound2 libatk1.0-0 libatk-bridge2.0-0 libc6 libcairo2 libcups2 libdbus-1-3 libexpat1 libfontconfig1 libgcc1 libgconf-2-4 libgdk-pixbuf2.0-0 libglib2.0-0 libgtk-3-0 libnspr4 libpango-1.0-0 libpangocairo-1.0-0 libstdc++6 libx11-6 libx11-xcb1 libxcb1 libxcomposite1 libxcursor1 libxdamage1 libxext6 libxfixes3 libxi6 libxrandr2 libxrender1 libxss1 libxtst6 ca-certificates fonts-liberation libappindicator1 libnss3 lsb-release xdg-utils wget`** in die Kommandozeile.
|
|
- Lass das Programm sich aufbauen indem du `npm run build:STAGING_THM` in die Kommandozeile eingibst, führe es danach mit `ng serve --port 4210` aus.
|
|
- Lass das Programm sich aufbauen indem du **`npm run build:STAGING_THM`** in die Kommandozeile eingibst, führe es danach mit **`ng serve --port 4210`** aus.
|
|
- Öffne http://localhost:4210/ im Browser um es dir anzugucken.
|
|
- Öffne http://localhost:4210/ im Browser um es dir anzugucken.
|
|
- Teste das Frontend indem du `npm test` in die Kommandozeile eingibst |
|
- Teste das Frontend indem du `npm test` in die Kommandozeile eingibst. |
|
\ No newline at end of file |
|
\ No newline at end of file |