dresden plone tagung 2020 plone und vuejs matthias barde · api backend plone webapp vuejs....

Matthias Barde, Dresden, 2020

E-Learning Webanwendung mit

Plone und VueJSMatthias Barde

Plone Tagung 2020Dresden

1


Vorstellung

Matthias Barde• Universität Koblenz - Landau, seit 2017• CMS-Team• Digitalisierungsprojekte

2


Von Desktop- zur Webanwendung

conText - Universität Würzburg: http://www.psychometrica.de/context.html

3


Demo


Technologie-Wahl

• Interface:• Intuitiv & einfach• Dynamisch• Sehr individuell

• Backend:• Sicher & verlässlich• Erweiterbar• Von Nicht-Technikern bedienbar• LDAP-Authentifizierung

5


Architektur

6

LSA-ServerJavaServlet

REST-API

Backend Plone

WebApp VueJS


LSA-Server

Aufgaben:• LSA: Latente Semantische Analyse1

• Zeitintensiv!

• Software von der Universität Würzburg

[1] http://www.psychometrica.de/context_lsa.html

7


REST-API

Backend Plone

WebApp VueJS


Plone-Backend

Aufgaben:• Sitzungsdaten speichern

• Daten-Export

• Nutzerverwaltung

• Inhalte pflegen (Statische Seiten, Medien, Fragebögen etc.)

8


REST-API

Backend Plone

WebApp VueJS


Plone-Backend

Setup:• Plone 5.1

•plone.app.ldap•Products.PloneFormGen•plone.restapi• Eigenes Addon für:

• Contenttypen (Sitzung etc.)• Funktionalitäten (Verwaltung)

9


REST-API

Backend Plone

WebApp VueJS


Webanwendung

Aufgaben:• Studierende durch die Sitzungen führen

• Möglichst einfaches & intuitives Interface

• Feedback visualisieren (hohe Dynamik)

10


REST-API

Backend Plone

WebApp VueJS


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


REST-API

Backend Plone

WebApp VueJS

https://cli.vuejs.org/https://github.com/axios/axios

Matthias Barde, Dresden, 2020 12

Kommunikation


Kommunikation


Kommunikation

Cross-Origin Resource Sharing (CORS)


REST-API

Backend Plone

WebApp VueJS


PloneFormGen VueJS-Komponenten

18


FormFolder

19


FormIntegerField

20


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


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:


E-Klausur

Anforderungen• Abgespeckte Version der Webanwendung

• Kein Datenverlust

• 100% Verfügbarkeit

• ! Viele (bis zu 200) parallele Zugriffe

Problem:

• Flaschenhals ZODB: ConflictError 😱

23


E-Klausur

Instanz 0 ZODB 0

Load

Bal

ance

r

Webanwendung

24


E-Klausur

Instanz 0 ZODB 0

Instanz 1 ZODB 1

Instanz X ZODB X

Load

Bal

ance

r

Webanwendung ...

25


E-Klausur

Instanz 0 ZODB 0

Instanz 1 ZODB 1

Instanz X ZODB X

...Load B

alan

cer

Webanwendung

26


E-Klausur

Instanz 0 ZODB 0

Load

Bal

ance

r

Webanwendung

27


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


Vielen Dank!


Backup


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


Motivation


Ablauf

1. Login2. Sitzung starten

3. Original-Text lesen

4. Zusammenfassung schreiben

5. Feedback einholen

6. Zusammenfassung überarbeiten

33


Ablauf





6. Zusammenfassung überarbeitenLSA-ServerJavaServlet

BackendPlone

WebAppVueJS

34


Ablauf






BackendPlone

WebAppVueJS

35


Ablauf






BackendPlone

WebAppVueJS

36


Ablauf






BackendPlone

WebAppVueJS

37


Ablauf






BackendPlone

WebAppVueJS

38


Ablauf






BackendPlone

WebAppVueJS

39

dresden plone tagung 2020 plone und vuejs matthias barde · api backend plone webapp vuejs....

Documents