#### Mitglieder > [time=Wed, Jun 29, 2023] > [name=Lucas Colaço][name=Lukas Bühler][name=Linus Schönbächler][name=Martin Smidrkal][color=#fa52e4] ## DOR - Lernportal & Journal für die WISS ![](https://hackmd.io/_uploads/Bk-ghJsdh.jpg) --- ## **<u>Inhaltsverzeichnis</u>** 1. [Allgemeine Infos](#Allgemeine-Infos) 2. [Informieren](#Informieren) 2.1. [Projektidee](#Projektidee) 2.2. [Risikoanalyse](#Risikoanalyse) 2.3. [Risiken](#Risiken) 2.4. [Was ist HedgeDoc?](#Was-ist-HedgeDoc) 2.5. [Was ist Markdown?](#Was-ist-Markdown) 2.6. [Arbeitsjournal-System](#Arbeitsjournal-System) 2.7. [Zentrales File Management](#Zentrales-File-Management) 2.8. [HedgeDoc 2](#HedgeDoc-2) 3. [Planen](#Planen) 3.1. [Zeitplan](#Zeitplan) 3.2. [Notwendige Komponente / Anforderungen](#Notwendige-Komponente--Anforderungen) 3.3. [Konzept Design](#Konzept-Design) 3.4. [Konzept Datenbank](#Konzept-Datenbank) 3.5. [Konzept Template Hedgedoc](#Konzept-Template-Hedgedoc) 4. [Entscheiden](#Entscheiden) 5. [Realisieren](#Realisieren) 5.1. [Umsetzung Hedgedoc & Oauth](#Umsetzung-Hedgedoc-amp-Oauth) - 5.1.1 [Aufsetzen](#Aufsetzen) - 5.1.2. [Setup HedgeDoc](#Setup-HedgeDoc) - 5.1.3. [Setup OAuth2 for Microsoft using AAD](#Setup-OAuth2-for-Microsoft-using-AAD) - 5.1.4. [Hedgedoc vom Source Code Builden](#Hedgedoc-vom-Source-Code-Builden) 5.2. [Umsetzung Datenbank](#Umsetzung-Datenbank) 5.3. [Umsetzung API Calls](#Umsetzung-API-Calls) - 5.3.1. [API Call](#API-Call) 5.4. [Umsetzung Design](#Umsetzung-Design) - 5.4.1. [WireFrame](#WireFrame) - 5.4.2. [Design Prototyp 1.0](#Design-Prototyp-1) - 5.4.3. [Erkentnisse](#Erkentnisse) - 5.4.4. [Design Prototyp 2.0](#Design-Prototyp-2) - 5.4.5. [Weitere Erkentnisse 2 & Entscheidungen](#Weitere-Erkentnisse-2-&-Entscheidungen) - 5.4.6. [Design Änderungen Visualisiert | Änderungen Prototyp 2.0 zu Prototyp 3.0](#Design-Änderungen-Visualisiert-|-Änderungen-Prototyp-2-zu-Prototyp-3) - 5.4.7. [Weitere Erkentnisse 3.0](#Weitere-Erkentnisse-3) - 5.4.8 [Finales Design | Prototyp 4.0](#Finales-Design-|-Prototyp-4.0) 6. [Testen](#-Testen-) 6.1. [Testumgebung](#Testumgebung) - 6.1.1 [Figma Test Prototyp](#Figma-Test-Prototyp) 6.2. [Usability Test NR 1. | Prototyp 2.0](#Usability-Test-NR-1--Prototyp-20) - 6.2.1 [Tests](#Tests) - 6.2.2 [Tester + Feedback](#Tester--Feedback) 6.3. [Usability Test NR 2. | Prototyp 3.0](#Usability-Test-NR-2--Prototyp-30) - 6.3.1 [Tests](#Tests1) - 6.3.2 [Tester + Feedback](#Tester--Feedback1) 7. [Präsentieren](#-Präsentieren-) 7.1 [Präsentations Inhalt](#Präsentations-Inhalt) 7.2 [Projekt Name](#Projekt-Name) 7.3 [Team vorstellung](#Team-vorstellung) 7.4 [Kurze Zusammenfassung](#Kurze-Zusammenfassung) 7.5 [Einzigartigkeiten](#Einzigartigkeiten) 7.6 [Erreichen in der Schule](#Erreichen-in-der-Schule) 7.7 [Vorführung des Produktes.](#Vorführung-des-Produktes) 7.8 [Kosten für Einführung des Produktes](#Kosten-für-Einführung-des-Produktes) --- ## **<u>Allgemeine Infos</u>** **Projektname** DOR **Modul** 245 - Innovative ICT-Lösungen realisieren **Klasse** IFZ-2124-012 **Bearbeitungzeit** 11.05.2021 - 29.06.2023 **Status** In Bearbeitung **Lehrperson** Patrick Venizin --- ## **<u>Informieren</u>** ### <u>**Projektidee**</u> In diesem Modul wird das Projekt aus dem Modul "241 - Innovative ICT-Lösungen realisieren" konkretisiert und umgesetzt. Unsere Aufgabe ist es, einen Prototypen zu erstellen und diesen dann in einer Präsentation vorzuführen. **Brainstorming**: - Bestehende Fullstack App die eine Markdown loesung bieten: - Stackedit - (https://github.com/benweet/stackedit/) - CodiMD (HackMD) - (https://github.com/hackmdio/codimd) - HedgeDoc ( Dies ist die Community Driven version von CodiMD, mit hat mehr features und ist besser erweiterbar) - (https://github.com/hedgedoc/hedgedoc) **Konkrete Idee**: Ein Portal zu erstellen wo... - ...Schüler einen Direkten weg zu ihrem Arbeitsjournal und denn Sidequests haben und diese Abgegen können. - ...Lehrer die Abgaben der Schüler bewerten können und ein Feedback zurück geben können. - ...Lehrer sidequests Aufschalten/Freigeben können. Unser Ziel ist es **nicht**, die aktuelle Software zu ersetzen, sondern das Bestehende zusammenzuführen und zu verbessern, indem wir Arbeitswerkzeuge bereitstellen, die vorhandene Lücken schließen. ### <u>**Risikoanalyse**</u> ![](https://hackmd.io/_uploads/BJJ1DOc42.png) ### <u>**Risiken**</u> - **Zeitliche Risiken:** - Verzögerungen bei der Entwicklung aufgrund unvorhergesehener Komplexität oder technischer Herausforderungen. - Enger Zeitplan mit wenig Pufferzeit für Fehlerbehebung oder Anpassungen. - Mangel an Ressourcen oder Personal, um das Projekt rechtzeitig abzuschließen. - Abhängigkeit von externen Partnern oder Dienstleistern, die Verzögerungen verursachen könnten. - **Finanzielle Risiken:** - Überschreitung des Budgets aufgrund unvorhergesehener Kostensteigerungen. - Mangelnde Rentabilität oder niedrige Nutzerzahl, die die Einnahmen aus der App beeinflussen. - Schwankungen der Wechselkurse oder steuerliche Auswirkungen, die das finanzielle Ergebnis beeinträchtigen könnten. - Investitionen in teure Technologien oder Infrastrukturen, die nicht den erwarteten Nutzen bringen. - **Technische Risiken:** - Inkompatibilität mit verschiedenen Betriebssystemen und Geräten. - Leistungsprobleme wie Langsamkeit, Abstürze oder schlechte Benutzererfahrung. - Sicherheitslücken oder Datenschutzprobleme, die die Integrität der App gefährden. - Schwierigkeiten bei der Integration externer APIs oder Drittanbieterkomponenten. - Fehlende Skalierbarkeit, um mit einem Anstieg der Nutzerzahl umgehen zu können. - **Personalrisiken:** - Mangel an qualifizierten Entwicklern oder Fachkräften mit relevanten Fähigkeiten. - Fluktuation oder Abwesenheit von Schlüsselpersonen im Team. - Kommunikationsprobleme oder Konflikte innerhalb des Teams. - Überlastung oder Burnout der Mitarbeiter aufgrund eines zu hohen Arbeitsaufkommens. - Unzureichende Verfügbarkeit von Mitarbeite ### <u>**Was ist HedgeDoc?**</u> HedgeDoc ist eine kostenlose, Open-Source-Webanwendung, die es Benutzern ermöglicht, gemeinsam an Dokumenten zu arbeiten und diese zu bearbeiten. Ähnlich wie HackMD bietet HedgeDoc eine einfache und intuitive Schnittstelle, die speziell für die Zusammenarbeit entwickelt wurde. Durch die kontinuierliche Beteiligung der Community wurde HedgeDoc zu einer benutzerfreundlichen Plattform mit einer Vielzahl nützlicher Funktionen. ### <u>**Was ist Markdown?**</u> Markdown ist eine leicht zu erlernende Markup-Sprache, die von HedgeDoc verwendet wird. Sie ermöglicht Benutzern das Schreiben von strukturierten Texten mit minimalem Aufwand. Mit Markdown können Benutzer Texte formatieren, Überschriften erstellen, Aufzählungen und nummerierte Listen verwenden sowie Links und Bilder einfügen. HedgeDoc erweitert Markdown um unglaubliche Tools für Diagramme, wie zum Beispiel Mermaid, was die Visualisierung von Informationen erleichtert. ### <u>**Arbeitsjournal-System:**</u> Das leistungsstarke Arbeitsjournal-System mit HedgeDoc ermöglicht es den Benutzern, ihre Lernfortschritte zu dokumentieren und ihre Gedanken strukturiert festzuhalten. Es bietet eine effektive Möglichkeit, Ideen, Erkenntnisse und Erfahrungen zu erfassen. Das Arbeitsjournal kann sowohl individuell genutzt werden, um das persönliche Lernen zu vertiefen, als auch in Gruppen, um den Wissensaustausch und die Zusammenarbeit zu fördern. Mit HedgeDoc können Benutzer ihre Fortschritte nachvollziehen und ihre Arbeitsprozesse optimieren. ### <u>**Zentrales File Management:**</u> HedgeDoc bietet ein herausragendes zentrales File Management, das die Organisation und Verwaltung von Dokumenten erleichtert. Durch die Verwendung von Tags können Benutzer ihre Dokumente einfach kategorisieren und thematisch sortieren. Dies ermöglicht eine übersichtliche Strukturierung der Dateien und erleichtert das Auffinden von Inhalten. Darüber hinaus unterstützt HedgeDoc Gruppen, was es Benutzern ermöglicht, in Klassen oder Teams zusammenzuarbeiten. Durch diese Funktion können Projekte und Aufgaben effizient verwaltet werden, wodurch die Zusammenarbeit verbessert wird. ### <u>**HedgeDoc 2**</u> **HedgeDoc2** stellt eine aufregende Weiterentwicklung der Webanwendung dar. Das gesamte System wurde komplett neu geschrieben und umprogrammiert, um den Benutzern eine noch bessere Erfahrung zu bieten. Sowohl Endnutzer als auch Programmierer profitieren von den zahlreichen Verbesserungen. HedgeDoc2 zeichnet sich durch eine verbesserte Benutzerfreundlichkeit, erweiterte Funktionen und die Möglichkeit der einfachen Erweiterung durch Plugins aus. Darüber hinaus verfügt es über ein integriertes, dynamisches Backend, das eine nahtlose Integration und effizientes Arbeiten ermöglicht. HedgeDoc2 setzt neue Maßstäbe für kollaborative Dokumentation und fördert die Zusammenarbeit in verschiedenen Umgebungen. --- ## **<u> Planen <a name="planen"></a></u>** ### <u>**Zeitplan**</u> ```mermaid gantt dateFormat YYYY-MM-DD title Project Timeline excludes weekends section Vorbereitung Informieren :done , 2023-05-25, 2d Planen :done, 2023-05-28, 4d Entscheiden :done, 2023-06-01, 1d section Durchführung Realisieren :active, 2023-06-02, 19d section Review Kontrollieren :2023-06-29, 2d %% Specify project start and end dates section Timeline ` :2023-05-25, 2023-07-13 ``` ```mermaid gantt dateFormat YYYY-MM-DD title Realisierungs Phase excludes weekends section Design Design FrontEnd Planung :done, 2023-05-29, 2d Design FrontEnd Prototyp :done, 2023-06-01, 3d User Driven Tests :done, 2023-06-05, 5d section CodiMD HedgeDoc aufsetzen :active, 2023-05-29, 8d section Development BackEnd-Development :2023-06-08, 10d FrontEnd-Development :2023-06-09, 9d section Application-<br>Testing Unit Testing :2023-06-20, 5d System Testing :2023-06-20, 5d section Deployment Deployment :2023-06-27, 2d section Docu-<br>mentation Documentation :active, 2023-05-25, 2023-07-13 ``` ### <u>**Notwendige Komponente / Anforderungen**</u> - Dokumentenmanagement - Markdown editor - Authentifizierung und Authorisierung ### <u>**Konzept Design**</u> - **Menu Bar** Logo Navigations Icons - **Home Page** Title Modul Indentifikationen Icons/Cards mit modul namen + beschreibung - **Modul Page** Modul Titel Fileablage inkl. link zu HedgeDoc maybe schüler aufgaben/vorschläge Lehrperson anzeigen Name *Lehrer features* - Schüler aufträge bewerten - **Software Kiosk** Verschiedene Module Sortierbar - **Edit Modul** List mit modulen (form) - **Admin** Form zum Module hinzufügen Liste mit Modulen zum Editieren/Löschen ### <u>**Konzept Datenbank**</u> ```mermaid classDiagram module --|> Class user --|> Class class_module --|> module class_module --|> Class class_module --|> user sidequest --|> module sidequest --|> user Class --|> handout sidequest --|> handout class module { +id: int +name: string +titel: string +description: string +pdf: string } class user { +id: long +name: string +email: string +class_id: long } class Class { +id: long +name: string +date_begin: date +date_end: date } class class_module { +module_id: int +class_id: long +teacher_id: long } class sidequest { +id: long +module_id: int +author_id: long +titel: string +link: string } class handout { +id: long +class_id: long +sidequest_id: long +block: enum +isActive: bool +date: date (optional) } ``` ### <u>**Konzept Template Hedgedoc**</u> ``` [name={user.name}] tags:{modulname} --- ``` --- ## **<u> Entscheiden <a name="entscheiden"></a></u>** Im Zuge unserer Planung, über eine Verbesserung im Lernsystem, welches für viele Lernenden unübersichtlich, unnötig komplexiv und uneinheitlich ist, kamen wir zur einer wichtige Entscheidung. Angesichts dieser Tatsachen, haben wir uns dafür entschieden, ein Portal zu entwickeln, dass als Hauptarbeitsmittel dienen soll und eine Verbindung zwischen allen bisherigen System darstellt. Unser Hauptziel ist es, über dieses Portal, die Schülern dabei unterstützt, ihr Wissen gezielter zu erweitern und festigen, und gleichzeitig ihre Lernfortschritte besser nachvollziehen zu können. Das führen eines Lernjounals soll sinvoll und einfach sein, und nicht eher störren als helfen. Damit das Portal flexibel und leicht erweiterbar ist, haben wir uns für einen modularen Aufbau entschieden. Dies ermöglicht eine schnelle und unkomplizierte Erweiterungen und vereinfacht die Anpassung and die Bedürfnisse der Lernenden und Dozenten. Bei der Auswahl der technologischen Grundlage für unser Projekt haben wir uns intensiv mit verschiedenen Optionen auseinandergesetzt. Letzendlich kamen wir zum Entschluss, das "HedgeDoc - Community Fork von HackMD" die beste Option ist als Markdown Editor und Arbeitsmittel, da es optimal zu unseren Anforderungen passt. Neben den zahlreichen Erweiterungsmöglichkeiten bietet es eine breite Formatierungsumgebung. Dazu soll das Portal mit NodeJS programmiert werden, da es uns ermöglicht, das Portal auf ansprechende und interaktive Weise zu gestalten. Weitere Gründe für unsere Entscheidung zugunsten von HedgeDoc ist aktive Entwicklergemeinschaft, eine benutzerfreundliche Schnittstelle, hohe Skalierbarkeit. dass es Open-Source ist und dass es ermöglicht zusammen als Team an einem Document zu arbeiten. Mit dieser Entscheidung sind wir zuversichtlich, dass wir ein interaktives Portal schaffen werden, dass Schülern dabei hilft, ihre Lernziele effektiv zu erreichen, ihre Lernerfahrung zu verbessern und Ordnung & Einheit in ihr Lernen bringen. --- ## **<u>Realisieren<a name="re"></a></u>** ### <u>**Umsetzung Hedgedoc & Oauth**</u> #### <u>**Aufsetzen**:</u> -> [Github](https://github.com/hedgedoc/hedgedoc) -> [Config Dokumentation](https://docs.hedgedoc.org/configuration) -> [Features von Hedgedoc](https://demo.hedgedoc.org/features) #### <u>**Setup HedgeDoc:**</u> **Docker Compose**: HedgeDoc kann einfach in einem Dockercontainer gestarted werden. Dazu folgendes Compose File: ```dockerfile version: '3' services: database: image: postgres:13.4-alpine environment: - POSTGRES_USER=hedgedoc - POSTGRES_PASSWORD=password - POSTGRES_DB=hedgedoc volumes: - database:/var/lib/postgresql/data restart: always app: # Make sure to use the latest release from https://hedgedoc.org/latest-release image: quay.io/hedgedoc/hedgedoc:1.9.7 environment: - CMD_DB_URL=postgres://hedgedoc:password@database:5432/hedgedoc - CMD_DOMAIN=localhost - CMD_URL_ADDPORT=true - allowEmailRegister=false - CMD_ALLOW_FREEURL=true - CMD_ALLOW_ANONYMOUS_EDITS=false - CMD_ALLOW_ANONYMOUS=false - CMD_AUTHENTICATION_PROVIDERS=oauth2 - CMD_OAUTH2_PROVIDER_NAME=Office365 - CMD_OAUTH2_AUTHORIZATION_URL=https://login.microsoftonline.com/'Directory (tenant) ID'/oauth2/v2.0/authorize - CMD_OAUTH2_TOKEN_URL=https://login.microsoftonline.com/'Directory (tenant) ID'/oauth2/v2.0/token - CMD_OAUTH2_CLIENT_ID='Application (client) ID' - CMD_OAUTH2_CLIENT_SECRET='Client Secret Value' - CMD_OAUTH2_SCOPE=openid profile email - CMD_OAUTH2_USER_PROFILE_URL=https://graph.microsoft.com/v1.0/me - CMD_OAUTH2_USER_PROFILE_USERNAME_ATTR=userPrincipalName - CMD_OAUTH2_USER_PROFILE_DISPLAY_NAME_ATTR=displayName - CMD_OAUTH2_USER_PROFILE_EMAIL_ATTR=mail volumes: - uploads:/hedgedoc/public/uploads ports: - "3000:3000" restart: always depends_on: - database volumes: database: uploads: ``` #### <u>**Setup OAuth2 for Microsoft using *AAD*:**</u> Voraussetzung: Anlegen eines Microsoft Account -> portal.azure.com. 1. Im Menu auf "Azure Active Directory"![](https://hackmd.io/_uploads/ryv_XLJDn.png) 2. Navigiere auf "App registration" ![](https://hackmd.io/_uploads/B1WlE81vn.png) 3. Nun auf "+ New registration" ![](https://hackmd.io/_uploads/BkAmEIJwh.png) 4. Die Benötigten felder ausfüllen und Supported account types entsprechend anpassen. Bei der App Registrierung muss folgende Redirect-URL als Callback angegeben werden: `https://{url}/auth/oauth2/callback)` ![](https://hackmd.io/_uploads/ryFTEIyP2.png) 5. Die Benötigten Informationen des **"Application (client) ID"** und **"Directory (tenant) ID"** findet man auf der darauf folgenden seite. ![](https://hackmd.io/_uploads/H1qyxQL83.png) 5. Nun muss noch das Secret erstellt werden unter "Certificates & secrets". **"Value"** muss hier für die Config files verwendet werden. ![](https://hackmd.io/_uploads/Bybj881P3.png) ![](https://hackmd.io/_uploads/B1LaUIkvh.png) 6. Zum Schluss muss nur noch die API permission angepasst werden. 1. Dazu "Add persmission" -> "Microsoft Graph" -> "Delegated permissions" Folgende permissions geben: ![](https://hackmd.io/_uploads/r1Tfu8kv3.png) #### <u>**Hedgedoc vom Source Code Builden**</u> Es bietet sich an die Markdown Applikation von Source zu Builden womit man mehr Konfigurationsmöglichkeiten hat und direkten zugang zum funktionalen sowie visuellen Code hat. Ein weiterer Punk ist dass, beide Applikationen ein Session Cookie erstellen und wenn beides auf dem selben Server überschriben sich diese Cookies. Daher sollte unbeding `SessionName` geändert werden. -> [Source Code V1.9.8](https://github.com/hedgedoc/hedgedoc/releases/tag/1.9.8) -> [Manual Installation](https://docs.hedgedoc.org/setup/manual-setup/) > Pre-Requirements: > - node v16+, npm und yarn installiert > Empfohlen: Linux config.json: ```json { "test": { "db": { "dialect": "sqlite", "storage": ":memory:" }, "linkifyHeaderStyle": "gfm" }, "development": { "loglevel": "debug", "db": { "dialect": "sqlite", "storage": "./db.hedgedoc.sqlite" }, "domain": "localhost", "urlAddPort": true }, "production": { "urlAddPort": true, "allowEmailRegister": false, "allowAnonymousEdits": false, "allowAnonymous": false, "allowFreeURL": true, "allowGravatar": true, "sessionName": "connect2.sid", "oauth2": { "providerName": "Office365", "authorizationURL": "https://login.microsoftonline.com/'Directory (tenant) ID'/oauth2/v2.0/authorize", "tokenURL": "https://login.microsoftonline.com/'Directory (tenant) ID'/oauth2/v2.0/token", "clientID": "'Application (client) ID'", "clientSecret": "'Client Secret Value'", "scope": "openid profile email", "userProfileURL": "https://graph.microsoft.com/v1.0/me", "userProfileUsernameAttr": "userPrincipalName", "userProfileDisplayNameAttr": "displayName", "userProfileEmailAttr": "mail" }, "domain": "localhost", "loglevel": "info", "hsts": { "enable": true, "maxAgeSeconds": 31536000, "includeSubdomains": true, "preload": true }, "csp": { "enable": true, "directives": { }, "upgradeInsecureRequests": "auto", "addDefaults": true, "addDisqus": true, "addGoogleAnalytics": true }, "cookiePolicy": "lax", "db": { "username": "hedgedoc", "password": "password", "database": "hedgedoc", "host": "localhost", "port": "5432", "dialect": "postgres" } } } ``` Das Config File muss im root directory erstellt werden. #### Weitere anpassungen Bei API calls von der DOR App wird es zu Cross-origin resource sharing (CORS) error kommen. Deshal sollte folgende Files angepasst werden: - /lib/web/baseRouter.js ```javascript const allowedOrigins = ['http://localhost:3001', 'http://localhost:3002', 'http://localhost:3003']; const allowCrossDomain = function(req, res, next) { const origin = req.headers.origin; if (allowedOrigins.includes(origin)) { res.header('Access-Control-Allow-Origin', origin); res.header('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE'); res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept'); res.header('Access-Control-Allow-Credentials', 'true'); } next(); } baseRouter.use(allowCrossDomain); ``` - /lib/web/userRouter.js ```javascript const allowCrossDomain = function(req, res, next) { const origin = req.headers.origin; if (allowedOrigins.includes(origin)) { res.header('Access-Control-Allow-Origin', origin); res.header('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE'); res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept'); res.header('Access-Control-Allow-Credentials', 'true'); } next(); } UserRouter.use(allowCrossDomain); ``` - /lib/web/historyRouter.js ```javascript const allowCrossDomain = function(req, res, next) { res.header('Access-Control-Allow-Origin', 'http://localhost:3001') res.header('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE') res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept') res.header('Access-Control-Allow-Credentials', 'true') // Add this line next() } historyRouter.use(allowCrossDomain) ``` #### Build & Start Befehle ```bash yarn install --immutable yarn build NODE_ENV=production yarn start ``` ### <u>**Umsetzung Datenbank von Hedgedoc**</u> ```dockerfile version: '3' services: database: image: postgres:13.4-alpine environment: - POSTGRES_USER=hedgedoc - POSTGRES_PASSWORD=password - POSTGRES_DB=hedgedoc volumes: - database:/var/lib/postgresql/data restart: always ports: - "5432:5432" volumes: database: ``` ### <u>**Umsetzung API Calls**</u> [API Dokumentation](https://docs.hedgedoc.org/dev/api/) #### <u>**API Call** </u> - /history :GET - /new :POST Header: ```header Content-Type: text/markdown Data: { --- tags: {modul_name} --- } ``` - redirect to (HTTP 302) Location Value + ?both - example: ```header < HTTP/1.1 302 Found < X-Powered-By: Express < Strict-Transport-Security: max-age=31536000; includeSubDomains; preload < Referrer-Policy: same-origin < Content-Security-Policy: default-src 'none';base-uri 'self';connect-src 'self' ws://localhost:3000;font-src 'self' https://*.disquscdn.com;manifest-src 'self';frame-src 'self' https://player.vimeo.com https://www.slideshare.net/slideshow/embed_code/key/ https://www.youtube.com *;img-src *;script-src http://localhost:3000/build/ http://localhost:3000/js/ http://localhost:3000/config https://gist.github.com/ https://vimeo.com/api/oembed.json https://www.slideshare.net/api/oembed/2 'unsafe-inline' https://disqus.com https://*.disqus.com https://*.disquscdn.com https://www.google-analytics.com 'nonce-c248cc5b-e150-4511-b067-ffd76203351a' 'sha256-81acLZNZISnyGYZrSuoYhpzwDTTxi7vC1YM4uNxqWaM=';style-src http://localhost:3000/build/ http://localhost:3000/css/ 'unsafe-inline' https://github.githubassets.com https://*.disquscdn.com;object-src * *;form-action 'self';media-src * < HedgeDoc-Version: 1.9.8 < Location: http://localhost:3000/5fa7P9TaSIO1aAlESesdmw < Vary: Accept, Accept-Encoding < Content-Type: text/plain; charset=utf-8 < Content-Length: 66 ``` Result bsp: `http://localhost:3000/5fa7P9TaSIO1aAlESesdmw?both` (Redirect ist Wichtig damit neben dem laden auch die History erweitert wird). Ansonsten muss /history als POST verwendet werden wobei die komplette liste der Notizen als json mitgeliefert werden muss. - /history/<NOTE_ID>:DELETE ### <u>**Umsetzung Design**</u> #### <u>**WireFrame**</u> Bei *Version 1* wird ein Popout Menu dargestellt. Das wurde aber entfert da es für diesen keinen Sinn hat für nur 2 item ein ganzes Menu zu erstellen. Deshalb wurde in der *Version 2* das Menu ganz einfach in die Top Bar eingebaut. ##### Version 1 ![](https://hackmd.io/_uploads/ByA1KrXL3.png) ___ ##### Version 2 ![](https://hackmd.io/_uploads/rycGtrm82.png) #### <u>**Design Prototyp 1**</u> #### **Mobile Design** **Home Screen**: ***Home V1*** <img src="https://hackmd.io/_uploads/HJRZKCH82.png" style="border:1.5px solid black; filter:drop-shadow(0px 0px 5px black); "/> <br> ***Home V2*** <img src="https://hackmd.io/_uploads/S1_3gDXLh.png" style="border:1.5px solid black; filter:drop-shadow(0px 0px 5px black);"/> <br> <br> #### **Module** <img src="https://hackmd.io/_uploads/SJAURCB8h.png" style="border:1.5px solid black; filter:drop-shadow(0px 0px 5px black);"/> <br> <br> #### **Software Kiosk** <img src="https://hackmd.io/_uploads/SyYoFCSU3.png" style="border:1.5px solid black; filter:drop-shadow(0px 0px 5px black);"/> <br> <br> #### Modulidentifikation <img src="https://hackmd.io/_uploads/Syibh0BU2.png " style="border:1.5px solid black; filter:drop-shadow(0px 0px 5px black);"/> <br> <br> #### ZP&LB Info <img src="https://hackmd.io/_uploads/rJLGn0HUh.png" style="border:1.5px solid black; filter:drop-shadow(0px 0px 5px black);"/> #### **Desktop Design** #### Home Screen <img src="https://hackmd.io/_uploads/HJSM6CH83.png" style="border:1.5px solid black; filter:drop-shadow(0px 0px 5px black);"/> <br> <br> #### Modul <img src="https://hackmd.io/_uploads/rJ2GaASIn.png" style="border:1.5px solid black; filter:drop-shadow(0px 0px 5px black);"/> <br> <br> #### Software Kiosk <img src="https://hackmd.io/_uploads/r1olRCrLh.png" style="border:1.5px solid black; filter:drop-shadow(0px 0px 5px black);"/> <br> <br> #### Modulidentifikation <img src="https://hackmd.io/_uploads/rk9bA0HUn.png" style="border:1.5px solid black; filter:drop-shadow(0px 0px 5px black);"/> <br> <br> #### ZP&LB Info <img src="https://hackmd.io/_uploads/Bk0ZRRBIn.png" style="border:1.5px solid black; filter:drop-shadow(0px 0px 5px black); "/> #### <u>**Figma Prototyp 1**</u> <iframe style="border: 1px solid rgba(0, 0, 0, 0.1);" width="800" height="450" src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2F3ZHcEQ4WTk8uQHYo7Xcak1%2FDesign-Prototyp%3Ftype%3Ddesign%26node-id%3D0%253A1%26t%3DHM9Fd4ztCAvZNmdM-1" allowfullscreen></iframe> #### <u>**Erkentnisse**</u> Nach der Durchführung von Usability- und weiteren Tests, sind wir zur Erkentniss gekommen, dass die Module sortierbar sein sollten. Auch sollten die Texte unter "Modulidentifikation" & "ZP & LB Info" vergrössert werden. Es wurde ein neuer Protyp erstellt: Prototyp 2.0 #### <u>**Design Prototyp 2.0**</u> #### Verbesserte "Home" Page Wie zu sehen ist, wurde eine "Sort by" spalte hinzugefügt. <img src="https://hackmd.io/_uploads/SJhT9M8U2.png" style="border:1.5px solid black; filter:drop-shadow(0px 0px 5px black);"/> #### <u>**Weitere Erkentnisse 2 & Entscheidungen**</u> #### **Design Anpassungen** Wir haben beschlossen, das allgemeine Layout des Designs so beizubehalten, wie es in den Prototypen festgelegt wurde. Um das Lernportal jedoch ansprechender und interessanter zu gestalten, haben wir uns für ein einfacheres und angenehmeres Farb- und Layout-Design entschieden. Die generelle Idee besteht darin, eine Seite zu gestalten, die sowohl für den Endnutzer ansprechend ist als auch alle notwendigen Funktionalitäten enthält. Gleichzeitig soll sie jedoch sehr benutzerfreundlich sein, sodass der Nutzer sie gerne und ohne Bedenken häufiger verwenden möchte. #### <u>**Design Änderungen Visualisiert | Änderungen Prototyp 2 zu Prototyp 3**</u> #### **Home Page** ***Altes Design | Prototyp 2.0*** <img src="https://hackmd.io/_uploads/HJSM6CH83.png" style="border:1.5px solid black; filter:drop-shadow(0px 0px 5px black);"/> <br> ***Updated Design | Prototyp 3.0*** <img src="https://hackmd.io/_uploads/H1VLr_uD3.png" style="border:1.5px solid black; filter:drop-shadow(0px 0px 5px black);"/> <br> ___ #### **Modul Page** ***Altes Design | Prototyp 2.0*** <img src="https://hackmd.io/_uploads/rJ2GaASIn.png" style="border:1.5px solid black; filter:drop-shadow(0px 0px 5px black);"/> <br> <br> ***Updated Design | Prototyp 3.0*** <img src="https://hackmd.io/_uploads/B1UMIdOPh.png" style="border:1.5px solid black; filter:drop-shadow(0px 0px 5px black);"/> <br> <br> ___ #### **Software Kiosk** ***Altes Design | Prototyp 2.0*** <img src="https://hackmd.io/_uploads/r1olRCrLh.png" style="border:1.5px solid black; filter:drop-shadow(0px 0px 5px black);"/> <br> <br> ***Updated Design | Prototyp 3.0*** <img src="https://hackmd.io/_uploads/H11xw__w2.png" style="border:1.5px solid black; filter:drop-shadow(0px 0px 5px black);"/> <br> <br> #### <u>**Weitere Erkentnisse 3**</u> Nach weiteren Durchführungen von Usability- und weiteren Tests des Prototyps 3.0 sind wir zu der Erkenntnis gelangt, dass ein "Home" Button eingefügt werden muss. Zudem ist es erforderlich, Untertitel hinzuzufügen. #### <u>**Finales Design | Prototyp 4.0**</u> #### **Idee** Basierend auf den Erkenntnissen des zweiten Unity-Tests wurden die Seiten überarbeitet. Hauptsächlich wurden dabei nur minimale Anpassungen vorgenommen, wie zum Beispiel Änderungen an der Schriftgröße und Farbanpassungen. Zusätzlich dazu haben wir eine Admin-Seite sowie eine Seite zum Bearbeiten der Module und Sidequests erstellt. Diese neuen Seiten ermöglichen es Administratoren, die Inhalte effizient zu verwalten und anzupassen. Durch diese Erweiterungen wird die Benutzererfahrung verbessert und die Flexibilität des Systems erhöht. #### **Home Page** ***Finales Design | Prototyp 4.0*** <img src="https://hackmd.io/_uploads/rk4Xkh5dn.png " style="border:1.5px solid black; filter:drop-shadow(0px 0px 5px black);"/> --- #### **Modul Page** ***Finales Design | Prototyp 4.0*** *Admin und Lehrer View* <img src="https://hackmd.io/_uploads/H1naAj5_3.png" style="border:1.5px solid black; filter:drop-shadow(0px 0px 5px black);"/> <br> <br> <img src="https://hackmd.io/_uploads/r1Bcvp3dn.png" style="border:1.5px solid black; filter:drop-shadow(0px 0px 5px black);"/> <br> <br> *Schüler/User View* <img src="https://hackmd.io/_uploads/Sku1W2qd3.png" style="border:1.5px solid black; filter:drop-shadow(0px 0px 5px black);"/> --- #### **Software Kiosk** ***Finales Design | Prototyp 4.0*** <img src="https://hackmd.io/_uploads/HyO_J39u3.png" style="border:1.5px solid black; filter:drop-shadow(0px 0px 5px black);"/> --- #### **Admin Page** ***Finales Design | Prototyp 4.0*** <img src="https://hackmd.io/_uploads/HkTR129_h.png" style="border:1.5px solid black; filter:drop-shadow(0px 0px 5px black);"/> --- ## **<u> Testen </u>** ### **<u>Testumgebung</u>** ### Figma Test Prototyp <iframe style="border: 1px solid rgba(0, 0, 0, 0.1);" width="800" height="450" src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Fproto%2F3ZHcEQ4WTk8uQHYo7Xcak1%2FDesign-Prototyp%3Fpage-id%3D46%253A2106%26type%3Ddesign%26node-id%3D46-2141%26viewport%3D413%252C1761%252C0.31%26scaling%3Dscale-down%26starting-point-node-id%3D46%253A2141" allowfullscreen></iframe> ### **<u>Usability Test NR 1. | Prototyp 2.0</u>** ### Tests 1. User soll sich via GitHub anmelden 2. User soll in das Modul 245 hineingehen, und die Modulidentifikation anschauen. 3. User soll File XY aus dem Block 2 in Modul 245 runterladen. 4. User soll auf sein Arbeitsjournal gehen 5. User soll im Software Kiosk, unter Modul 245, VSCode runterladen. (2 Möglichkeiten) ### Tester + Feedback - Ethan (Student) (1:04 min) - Kein Feedback - Matthias (Student) (2:05 min) - Untertittel für jeweilige Buttons - Sy Viet (Student) (2:18 min) - Module im Homescreen sortieren. - Patrick Venzin (Dozent) (4:28 min) - Texte in "Modulidentifikation" & "ZP & LB Info" vergrössern. ### **<u>Usability Test NR 2. | Prototyp 3.0</u>** ### Tests Tests 1. Der Benutzer soll sich mit seinem Microsoft-Konto anmelden können. 2. Der Benutzer soll das Modul 117 aufrufen und sich die Modulidentifikation anzeigen lassen können. 3. Der Benutzer soll die Sidequest "Installation eines neuen lokalen Netzwerks" aus Block 2 im Modul 117 öffnen können. 4. Der Benutzer soll auf sein Arbeitsjournal zugreifen und sich mit OAuth (Microsoft) einloggen können. 5. Der Benutzer soll sein Lieblingsmodul anheften (anpinnen) können. 6. Der Benutzer soll in den Software-Kiosk gehen und die Module für Modul 216 sortieren können. ***Test Ethan*** <iframe src="https://www.veed.io/embed/0a16ac68-b307-4921-bed4-6ac9c972fae4" width="744" height="504" frameborder="0" title="Mozilla Firefox 2023-06-15 14-14-03.mp4" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> ### Tester + Feedback - Ethan (Student) (- min) (+) Viel übersichtlicher als Letztes Mal - Matthias (Student) (- min) (-) Button untertitel - Sy Viet (Student) (- min) (-) Zurück Button (+) Schönes Design - Patrick Venzin (Dozent) (- min) (+) Viel übersichtlicher als Letztes Mal ## **<u> Präsentieren </u>** ### **<u>Präsentations Inhalt</u>** - Projekt Name vorstellen - Team Vorstellen - Kurze Zusammenfassung (das es jeder versteht) - Was sind die USPs des Produktes (Einzigartigkeit) - Was kann mit diesem Produkt an der Schule erreicht werden (vor/nachteile) - Vorführung des Produktes am Beamer mit einem Beispiel - Kosten für die Einführung des Produktes (realistisch) ### **<u>Projekt Name</u>** DOR ### **<u>Team vorstellung</u>** - Linus - Lukas - Martin - Lucas ### **<u>Kurze Zusammenfassung</u>** ![](https://hackmd.io/_uploads/BJPWZ-jOn.png) ### **<u>Einzigartigkeiten</u>** - Enjoyable Workspace - Simplified School Experience - Fun to Work with - Modular expandable - Centralized Task Management - Journaling System - Seamless Collaboration ### **<u>Erreichen in der Schule</u>** - Arbeitsjournal wird besser durchgeführt - Aufgaben-verteilung simple gemacht (alles an einem Ort) - Hauptarbeitsmittel - Verbindung von allen WISS Platformen ### **<u>Vorführung des Produktes.</u>** - Login von Student, zeigen wie Sidequest ausgesucht wird, und ein neues HedgeDoc file erstellt wird - Student zeigt Sidequest -> HedgeDoc History(arbeitsjournal führung), -> lösen der Aufgabe im Team?(second Browser window als "person") - Login von Lehrer, um sidequest Hochzuladen/aktiv zu schalten? ### **<u>Kosten für Einführung des Produktes</u>** - **Anpassungen und Erweiterungen**: Auch wenn die App bereits modular erweiterbar ist, kann es sein, dass Sie dennoch spezifische Anpassungen oder Erweiterungen benötigen, um Ihre Anforderungen zu erfüllen. Die Kosten für die Entwicklung und Implementierung dieser Anpassungen sollten berücksichtigt werden. *Unteschiedlich je nach feature.* 35.-CHF/h - **Hosting- und Infrastrukturkosten**: Überlegen Sie, welche Art von Hosting und Infrastruktur für die App erforderlich ist. Es könnten Kosten für den Server, Speicherplatz, Bandbreite und andere Hosting-Ressourcen anfallen. Stellen Sie sicher, dass Sie diese Kosten in Ihre Berechnungen einbeziehen. - **Azure:** Estimated-Users: 1000 Number of md files per user: 50 md file max size: 1 mb ... Total: 1000 * 100 * 1 mb = 100'000 mb -> 100 GB Storage: 10 x Premium SSD 32 GB -> ~52.-CHF Container Hosting: 2 VMs x 4 Cores; 8 GB RAM -> ~153.-CHF Montly: 205.-CHF - **Support und Wartung**: Obwohl die App bereits sorgfältig entwickelt wurde, kann es dennoch erforderlich sein, Support- und Wartungsarbeiten durchzuführen, um eventuelle Fehler zu beheben und die App auf dem neuesten Stand zu halten. Kalkulieren Sie die Kosten für den Zeitaufwand und möglicherweise zusätzliche Ressourcen, die dafür benötigt werden. 100 Fr/Monat - **Rechtliche Aspekte**: Stellen Sie sicher, dass Sie alle rechtlichen Anforderungen erfüllen, insbesondere in Bezug auf Datenschutzbestimmungen und den Umgang mit personenbezogenen Daten. Überprüfen Sie, ob zusätzliche Kosten für die Einhaltung dieser Bestimmungen anfallen. Keine Kosten