Matthias Barde, Dresden, 2020
E-Learning Webanwendung mit
Plone und VueJSMatthias Barde
Plone Tagung 2020Dresden
1
Matthias Barde, Dresden, 2020
Vorstellung
Matthias Barde• Universität Koblenz - Landau, seit 2017• CMS-Team• Digitalisierungsprojekte
2
Matthias Barde, Dresden, 2020
Von Desktop- zur Webanwendung
conText - Universität Würzburg: http://www.psychometrica.de/context.html
3
Matthias Barde, Dresden, 2020
Demo
Matthias Barde, Dresden, 2020
Technologie-Wahl
• Interface:• Intuitiv & einfach• Dynamisch• Sehr individuell
• Backend:• Sicher & verlässlich• Erweiterbar• Von Nicht-Technikern bedienbar• LDAP-Authentifizierung
5
Matthias Barde, Dresden, 2020
Architektur
6
LSA-ServerJavaServlet
REST-API
Backend Plone
WebApp VueJS
Matthias Barde, Dresden, 2020
LSA-Server
Aufgaben:• LSA: Latente Semantische Analyse1
• Zeitintensiv!
• Software von der Universität Würzburg
[1] http://www.psychometrica.de/context_lsa.html
7
LSA-ServerJavaServlet
REST-API
Backend Plone
WebApp VueJS
Matthias Barde, Dresden, 2020
Plone-Backend
Aufgaben:• Sitzungsdaten speichern
• Daten-Export
• Nutzerverwaltung
• Inhalte pflegen (Statische Seiten, Medien, Fragebögen etc.)
8
LSA-ServerJavaServlet
REST-API
Backend Plone
WebApp VueJS
Matthias Barde, Dresden, 2020
Plone-Backend
Setup:• Plone 5.1
•plone.app.ldap•Products.PloneFormGen•plone.restapi• Eigenes Addon für:
• Contenttypen (Sitzung etc.)• Funktionalitäten (Verwaltung)
9
LSA-ServerJavaServlet
REST-API
Backend Plone
WebApp VueJS
Matthias Barde, Dresden, 2020
Webanwendung
Aufgaben:• Studierende durch die Sitzungen führen
• Möglichst einfaches & intuitives Interface
• Feedback visualisieren (hohe Dynamik)
10
LSA-ServerJavaServlet
REST-API
Backend Plone
WebApp VueJS
Matthias Barde, Dresden, 2020
Webanwendung
Setup:• vuecli2: vue create my-project
• Transpiler → Babel• Linter → ESLint• ...
• axios3: Bibliothek für HTTP-Requests
11
[2] https://cli.vuejs.org/ [3] https://github.com/axios/axios
LSA-ServerJavaServlet
REST-API
Backend Plone
WebApp VueJS
https://cli.vuejs.org/https://github.com/axios/axios
Matthias Barde, Dresden, 2020 12
Kommunikation
Matthias Barde, Dresden, 2020 13
Kommunikation
Matthias Barde, Dresden, 2020 14
Kommunikation
Matthias Barde, Dresden, 2020 15
Kommunikation
Matthias Barde, Dresden, 2020 16
Kommunikation
Matthias Barde, Dresden, 2020 17
Kommunikation
Cross-Origin Resource Sharing (CORS)
LSA-ServerJavaServlet
REST-API
Backend Plone
WebApp VueJS
Matthias Barde, Dresden, 2020
PloneFormGen VueJS-Komponenten
18
Matthias Barde, Dresden, 2020
FormFolder
19
Matthias Barde, Dresden, 2020
FormIntegerField
20
Matthias Barde, Dresden, 2020
REST-API erweitern
• Eigene Endpunkte implementieren4
• Statistik: Daten aggregiert ausliefern, statt tausende von einzelnen Abfragen
• Test-Setup: Daten im Backend für automatisierte (acceptance) Tests zurücksetzen
• Kommunikation zwischen Instanzen (siehe E-Klausur)
[4] http://mrtango.planetcrazy.de/writing-a-custom-service-for-plone-rest-api.html
21
Matthias Barde, Dresden, 2020
Erkenntnisse
• Kontinuierliche Verbesserung in den Bereichen
• Inhalt (außer in letzter Sitzung)• Plagiatsvermeidung (viel)• Redundanzvermeidung (moderat)
• Feedback: Gemischt
22
SS2018 109
WS18/19 256
SS2019 141
WS19/20 267
Erfolgreich abgeschlossen:
Matthias Barde, Dresden, 2020
E-Klausur
Anforderungen• Abgespeckte Version der Webanwendung
• Kein Datenverlust
• 100% Verfügbarkeit
• ! Viele (bis zu 200) parallele Zugriffe
Problem:
• Flaschenhals ZODB: ConflictError 😱
23
Matthias Barde, Dresden, 2020
E-Klausur
Instanz 0 ZODB 0
Load
Bal
ance
r
Webanwendung
24
Matthias Barde, Dresden, 2020
E-Klausur
Instanz 0 ZODB 0
Instanz 1 ZODB 1
Instanz X ZODB X
Load
Bal
ance
r
Webanwendung ...
25
Matthias Barde, Dresden, 2020
E-Klausur
Instanz 0 ZODB 0
Instanz 1 ZODB 1
Instanz X ZODB X
...Load B
alan
cer
Webanwendung
26
Matthias Barde, Dresden, 2020
E-Klausur
Instanz 0 ZODB 0
Load
Bal
ance
r
Webanwendung
27
Matthias Barde, Dresden, 2020
E-Klausur
Cluster-Architektur:• "Cluster" aus Instanzen mit eigener Datenbank
• Kommunikation via REST-API
• beliebig skalierbar
• ("klassische" Konfiguration: 1 Instanz mit 1 DB mit deaktiviertem Catalog < 40 User)
28
Matthias Barde, Dresden, 2020
Vielen Dank!
Matthias Barde, Dresden, 2020
Backup
Matthias Barde, Dresden, 2020
Motivation: "Lernapp"
• Forschungsprojekt: Formatives Assessment für das Bearbeiten von Texten im Lehramtsstudium*
• Veronika Barkela• Prof. Dr. Miriam Leuchter
• Christian Schneider• Matthias Barde
• Schulung von Textverständnis und Formulierungskompetenz
• Fachtexte zusammenfassen und Feedback erhalten
[*] https://www.uni-koblenz-landau.de/de/landau/fb5/bildung-kind-jugend/grupaed/projekte/Falb
31
Matthias Barde, Dresden, 2020 32
Motivation
Matthias Barde, Dresden, 2020
Ablauf
1. Login2. Sitzung starten
3. Original-Text lesen
4. Zusammenfassung schreiben
5. Feedback einholen
6. Zusammenfassung überarbeiten
33
Matthias Barde, Dresden, 2020
Ablauf
1. Login2. Sitzung starten
3. Original-Text lesen
4. Zusammenfassung schreiben
5. Feedback einholen
6. Zusammenfassung überarbeitenLSA-ServerJavaServlet
BackendPlone
WebAppVueJS
34
Matthias Barde, Dresden, 2020
Ablauf
1. Login2. Sitzung starten
3. Original-Text lesen
4. Zusammenfassung schreiben
5. Feedback einholen
6. Zusammenfassung überarbeitenLSA-ServerJavaServlet
BackendPlone
WebAppVueJS
35
Matthias Barde, Dresden, 2020
Ablauf
1. Login2. Sitzung starten
3. Original-Text lesen
4. Zusammenfassung schreiben
5. Feedback einholen
6. Zusammenfassung überarbeitenLSA-ServerJavaServlet
BackendPlone
WebAppVueJS
36
Matthias Barde, Dresden, 2020
Ablauf
1. Login2. Sitzung starten
3. Original-Text lesen
4. Zusammenfassung schreiben
5. Feedback einholen
6. Zusammenfassung überarbeitenLSA-ServerJavaServlet
BackendPlone
WebAppVueJS
37
Matthias Barde, Dresden, 2020
Ablauf
1. Login2. Sitzung starten
3. Original-Text lesen
4. Zusammenfassung schreiben
5. Feedback einholen
6. Zusammenfassung überarbeitenLSA-ServerJavaServlet
BackendPlone
WebAppVueJS
38
Matthias Barde, Dresden, 2020
Ablauf
1. Login2. Sitzung starten
3. Original-Text lesen
4. Zusammenfassung schreiben
5. Feedback einholen
6. Zusammenfassung überarbeitenLSA-ServerJavaServlet
BackendPlone
WebAppVueJS
39