Bachelorarbeit Gestaltung - Michael Kippmichaelkipp.de/student/Rummelsberger2017.pdf · 5 1...

Verfasser der Bachelorarbeit:

Philipp Rummelsberger

Firnhaberstraße 31

86159 Augsburg

[email protected]

Fakultät für

Gestaltung Bachelorarbeit

Studienrichtung

Interaktive Medien


PeerActivate –

innovative Forumstechnologie im Bereich

E-Learning

Prüfer: Prof. Dr. Michael Kipp

Zweitprüfer: Prof. Robert Rose

Abgabe der Arbeit am: 01.02.2017

Studienrichtung

Interaktive Medien


2

Abstract

PeerActivate ist ein Webforum, das gezielt für Studenten, Dozenten und Professoren

entwickelt wurde. Es soll den Studierenden als Anlaufstelle für offene Fragen,

Anregungen und zur Kommunikation dienen. Hierfür können Lehrende gezielt Foren zu

bestimmten Kursinhalten einrichten und diese von Studenten durch Diskussion befüllen

lassen. Die Anwendung verfolgt den Lernansatz des PeerLearning beziehungsweise des

Learning by Teaching. Ein weiterer großer Bestandteil der Plattform ist die

Administrationsoberfläche, in der Kurse und Studenten verwaltet und editiert werden

können. Außerdem können mithilfe von PeerActivate Daten zur Nutzeraktivität erfasst

und gezielt zur Steigerung der Kursqualität eingesetzt werden oder sogar in die

Notengebung miteinfließen kann. Die Umsetzung meiner Anwendung als Single Page

Application (Einzelseiten-Webanwendung), das heißt eine Webanwendung, die aus einer

einzelnen HTML Seite besteht und deren Inhalte dynamisch geladen werden, erfolgte

mithilfe des MEAN-Stacks. Dies bedeutet, dass hauptsächlich die JavaScript Frameworks

MongoDB, ExpressJS, AngularJS sowie NodeJS verwendet wurden. PeerActivate soll als

Open-Source Applikation zukünftig von möglichst vielen Menschen weiterentwickelt und

an allen Universitäten und Hochschulen, die Interesse daran haben, kostenfrei zum

Einsatz kommen können.

3

Inhaltsverzeichnis

Abbildungsverzeichnis ........................................................................................................ 4

1 Einleitung .................................................................................................................... 5

1.1 Motivation und Zielsetzung ................................................................................ 5

1.2 Funktionsweise .................................................................................................... 6

2 Hintergrund zur Forentechnologie .............................................................................. 7

2.1 Foren: Definition, Zweck und Hintergrund ......................................................... 7

2.2 Verschiedene Umsetzungen des Webforums ...................................................... 7

3 Konzept eines Forums zum Zweck des E-Learning .................................................... 9

3.1 Interfacedesign .................................................................................................... 9

3.2 Frontend ............................................................................................................ 13

3.3 Backend ............................................................................................................. 17

3.4 Datenbank ......................................................................................................... 18

3.5 Analyse .............................................................................................................. 19

4 Technische Realisierung ........................................................................................... 21

4.1 Benutzeroberfläche............................................................................................ 21

4.1.1 Design ....................................................................................................... 21

4.1.2 Frontend: Angular 2 .................................................................................. 25

4.1.3 Datenbank: MongoDB .............................................................................. 30

4.1.4 Backend: RESTful API ............................................................................. 35

4.2 Tracking von Nutzeraktivität ............................................................................ 36

4.2.1 Daten Monitoring ...................................................................................... 36

4.2.2 Datenvisualisierung ................................................................................... 38

5 Fazit und Ausblick .................................................................................................... 42

5.1 Bewertung ......................................................................................................... 42

5.2 Zukünftige Optimierungsmöglichkeiten ........................................................... 42

4

Abbildungsverzeichnis

Abbildung 1: Lernen durch Lehren – Vereinfachter Ablauf einer Diskussion ................... 6

Abbildung 2: StackOverflow – Forumsview....................................................................... 8

Abbildung 3: Material Design Card – Einfache Verwendung .......................................... 10

Abbildung 4: Material Design Card – Farbumstellung durch Variablenänderung ........... 11

Abbildung 5: Syntatically Awesome Stylesheet – Beispiel für SASS Syntax .................. 12

Abbildung 6: Selbsterklärende und Erlernte Bedeutung von Icons .................................. 13

Abbildung 7: Verwendung von Icons in PeerActivate ...................................................... 13

Abbildung 8: JavaScript web frameworks – Benchmarks zu Performance ...................... 15

Abbildung 9: Typangabe in TypeScript im Vergleich zu JavaScript ................................ 17

Abbildung 10: Backend/Frontend – Vereinfachte Darstellung der Beziehung ................. 18

Abbildung 11: Simples Tin Can Statement – Notation im JSON-Format ........................ 20

Abbildung 12: Verwendete Schriftart Roboto................................................................... 21

Abbildung 13: Verwendete Farbpalette ............................................................................ 22

Abbildung 14: Ansicht in einer gestellten Frage ............................................................... 23

Abbildung 15: Logo von PeerActivate – Schrittweise Entwicklung zum finalen Stand... 24

Abbildung 16: Übersicht der verwendeten Icons .............................................................. 24

Abbildung 17: Modularer Aufbau – Aufteilung in Module und Komponenten ............... 25

Abbildung 18: Ordnerstruktur und Aufteilung des Admin-Moduls von PeerActivate ..... 26

Abbildung 19: Angular 2 HTML-Template ...................................................................... 27

Abbildung 20: SASS-Stylesheet ....................................................................................... 28

Abbildung 21: Angular dependency injection – Performance durch modularen Aufbau . 28

Abbildung 22: @component declarator – Definition einer Komponenten Direktive ....... 29

Abbildung 23: ToolbarComponent – Definition der Klasse ToolbarComponent ............. 30

Abbildung 24: Datenbankeintrag – Mongo Dokument eines Dummy Users .................... 31

Abbildung 25: Datenbankschema User ............................................................................. 31

Abbildung 26: Finales Schema User ................................................................................. 32

Abbildung 27: Komplettes Datenbankschema PeerActivate ............................................ 33

Abbildung 28: Robomongo - Paralect ............................................................................... 34

Abbildung 29: Mongo Chef Core - 3T Software Labs ..................................................... 34

Abbildung 30: Serverfunktion – Erstellung einer Kursinstanz ......................................... 36

Abbildung 31: Mongoose Aggregationsquery – Komplexe Datenbankabfrage ............... 37

Abbildung 32: ChartJS – Beispiel zur Nutzung ................................................................ 38

Abbildung 33: D3 Grafik -Anordnung nach Benutzer ...................................................... 39

Abbildung 34: D3 Grafik – Analyse nach einstellbarem Zeitrahmen ............................... 41

Abbildung 35: D3 Grafik – Gruppiertes Säulendiagramm ............................................... 41

Abbildung 36: Komplettes Datenbankschema PeerActivate ............................................ 45

5

1 Einleitung

1.1 Motivation und Zielsetzung

PeerActivate entstand als Idee von Professor Dr. Michael Kipp, welcher an der Fakultät

für Informatik der Hochschule Augsburg lehrt, und wurde im Rahmen eines

Projektantrags als „PeerActivate for IT: PeerLearning und Online-Mentoring für

berufsbegleitende, ausbildungsbegleitende und virtuelle Lernangebote“ vorgestellt.

Nachdem der Antrag zur Entwicklung einer solchen Anwendung zum damaligen

Zeitpunkt abgelehnt wurde, bot sich mir die Gelegenheit die Idee des PeerActivate als

praktischen Teil meiner Bachelorarbeit umzusetzen.

Die Möglichkeit ein Webforum für Lehrende und Studierende, das einen Beitrag zur

Kommunikation, Interaktion und Lernqualität beitragen kann, umzusetzen, begeisterte

mich sofort. Neben diesen Aspekten soll die Plattform außerdem die üblichen Probleme

von Foren im Bereich der Lehre, wie beispielsweise eine niedrige Nutzeraktivität durch

eine mögliche Anonymisierung, sowie die gezielte Moderation durch Lehrende wie

Dozenten, Professoren und Tutoren gegeben sein. Es ist jedoch nicht angedacht

Musterlösungen bereitzustellen, sondern Antworten und Lösungen durch

Zusammenarbeit und Diskussion zu finden. Um die Kommunikation weiter zu

unterstützen sind Mechanismen, wie die Option zur Bewertung von Beiträgen und die

Aufzeichnung von Nutzeraktivität von großem Wert. Diese erlauben das Monitoring

sowie die Analyse von Aktivität und damit individuelle oder gruppenbezogene

Unterstützung.

PeerActivate hat es sich zum Ziel gesetzt vorhandene Foren im Bereich der Lehre zu

ergänzen und versucht deren Prinzipien zu optimieren. Da die Anwendung von Anfang an

als Open-Source Projekt angedacht war, soll sie allen Bildungseinrichtungen kostenfrei

zur Verfügung stehen. Außerdem ist der Code frei verfügbar und kann jederzeit durch

(professionelle) Programmierung weiterentwickelt werden (Repository zu finden unter:

https://github.com/leChuckles/PeerActivate). Dadurch soll PeerActivate schrittweise an

die Bedürfnisse der Nutzer angepasst werden, um so eine ideale Plattform für Lehrende

und Studierende zu schaffen. Insgesamt ist es hierbei von besonders großer Bedeutung,

dass sich Studierende auf der Plattform wohl fühlen, damit keine Hemmung der

Interaktion auftritt.

6

1.2 Funktionsweise

Der Ansatz, den PeerActivate verfolgt ist der des partizipativen Unterrichts. Dies

bedeutet, dass Studierende durch Konzepte wie Learning by Teaching, Peer Instruction

und Social Learning lernen. Die Gemeinsamkeit dieser Methoden ist die Zusammenarbeit

sowie die Vernetzung der Studenten untereinander und die intensive Beschäftigung mit

einer Thematik, die in der Regel über die Möglichkeiten des Frontalunterrichts

hinausgehen. Durch gezieltes Eingreifen, wie das Erstellen von themenbezogenen Foren

oder relevanten Fragen, können Dozenten zudem direkt in die Diskussion eingreifen. Der

grundlegende Gedanke hierbei ist allerdings, dass Studenten sich selbst helfen und durch

Interaktion sowie Diskussion auf Lösungsansätze und daraufhin auf die richtige Antwort

kommen (s. Abbildung 1). Dementsprechend ist die Bereitstellung von Musterlösungen in

jeglicher Form im Rahmen dieses Konzepts nicht vorgesehen. Um die Aktivität innerhalb

der Plattform und damit den Lernerfolg zu gewährleisten werden Nutzeraktionen

aufgezeichnet. Die Kursleitung hat damit die Möglichkeit zur Auswertung der erhobenen

Datensätze und können je nach Situation, seien dies individuelle Lernschwächen, offene

Fragen oder fehlende Partizipation des ganzen Kurses, reagieren. Des Weiteren erlaubt

die Datenanalyse die Einführung von Belohnungsmechanismen, wie zum Beispiel einem

System von Auszeichnungen im Sinne der Gamification oder als Einflussfaktor auf die

Notengebung.

Abbildung 1: Lernen durch Lehren – Vereinfachter Ablauf einer Diskussion

Quelle: Eigene Darstellung.

7

2 Hintergrund zur Forentechnologie

2.1 Foren: Definition, Zweck und Hintergrund

Der Begriff Forum stammt ursprünglich aus dem lateinischen (lat. forum) und war das

politische, juristische, ökonomische und religiöse Zentrum eines Ortes. Heute wird das

Forum durch den Duden zum einen als „geeigneter Personenkreis, der eine

sachverständige Erörterung von Problemen und Fragen garantiert“ und zum anderen als

„öffentliche Diskussion, Aussprache“ definiert. 1

Von den Anfängen des Usenet, über Mailinglisten und Telnet-Foren hat sich das

Webforum als klarer Sieger im Bereich der modernen Forensysteme herauskristallisiert.

Obwohl diese Plattformen jeweils unterschiedliche Aspekten dienen, haben alle den

grundlegenden Gedanken der Kommunikation und des Austauschs miteinander.

Im Bereich der Webforen wird grundsätzlich zwischen Support- und Diskussionsforen

unterschieden. PeerActivate fällt unter die Kategorie der Diskussionsforen und erfüllt

damit einhergehende Aspekte wie die Möglichkeit zum Posten von Beiträgen in

sogenannten Threads (themenverwandte Bereiche), die Bearbeitung erfordern. Ein

weiterer Faktor, der Foren in ihrer derzeitigen Form auszeichnet, ist die Moderation.

Inhalte werden von oftmals Freiwilligen, die sich durch besonderes Engagement in der

Community herausgetan haben, verwaltet. Dies umfasst das Löschen unpassender oder

schlechter Beiträge sowie die Umsetzung von Strafen, falls Forumsregeln verletzt

wurden. In der Hierarchie werden diese dann nur noch von Administratoren übertroffen,

die im Gegensatz zu Moderatoren auch Konfigurationen an der Plattform sowie

technischen Support anbieten können. Die Finanzierung der meisten Foren erfolgt über

Werbung oder wie im Fall von Bewertungsportalen, die auch in den Bereich der Foren

fallen und meist kommerziell orientiert sind, durch Sponsoring.

2.2 Verschiedene Umsetzungen des Webforums

Die Entwicklung von PeerActivate hat sich hauptsächlich an zwei Anwendungen

orientiert. Dies ist zum einen die Lernplattform Moodle, die von vielen

Bildungseinrichtungen unter anderem zur Verwaltung von Kursen, dem Einstellen von

Terminen und Ankündigungen und zur Abgabe von Studienarbeiten genutzt wird.

Moodle bietet eine Forumsfunktion, die allerdings sehr allgemein und schwierig zu

moderieren und administrieren ist. Des Weiteren sind die angebotenen Foren oft wenig

übersichtlich, da sie nur nach der zeitlichen Abfolge sortiert sind. Dies macht das Finden

1 http://www.duden.de/node/656736/revisions/1353182/view

8

von guten oder richtigen Antworten schwierig, weshalb die dort angebotenen Foren

wenig genutzt werden und kaum einen Mehrwert zur Lehre bieten können.

Die zweite Plattform, die PeerActivate als Vorbild nutzt ist StackOverflow, eine

Forumsplattform für informatikbezogene Thematiken. Diese löst das Problem der

Unübersichtlichkeit mit einem Bewertungssystem für Beiträge. Sowohl die gestellten

Fragen, als auch gegebene Antworten werden nach deren Qualität und Richtigkeit

angezeigt (s. Abbildung 2). So steht beispielsweise beim Aufruf einer Frage die richtige

Antwort immer an erster Stelle und wird auch als solche markiert. Außerdem gibt es

innerhalb der StackOverflow Community ein Belohnungssystem im Sinne von

Gamification. Durch das Einstellen von Fragen, deren Beantwortung oder sonstige

Leistungen innerhalb des Forums werden Abzeichen ausgegeben die als

Anreizmechanismus dienen und zu einer Mehrnutzung der Plattform führen sollen.

Abbildung 2: StackOverflow – Forumsview

Quelle: http://www.stackoverflow.com.

9

PeerActivate versucht die Vorteile beider Plattformen zu vereinen; unter anderem umfasst

dies die Aufteilung in Kurse, die Möglichkeit zur Einstellung von Terminen und neben

der zeitorientierten Darstellung von Beiträgen, auch die Sortierung nach Relevanz und

Richtigkeit. Dadurch, dass neben der Bewertung der Beiträge auch die Bewertung zum

Nutzer, der die Frage beziehungsweise Antwort gepostet hat, möglich ist, können sogar

Annahmen zur Qualität der Beiträge des Nutzers getroffen werden. Zukünftige Versionen

von PeerActivate sollen Beiträge dann auch nach diesem Bewertungsfaktor sortiert

anzeigen können.

3 Konzept eines Forums zum Zweck des E-Learning

3.1 Interfacedesign

Unter dem Begriff Interface versteht man die Benutzeroberfläche, welchem dem

Endnutzer zur Navigation, Interaktion und zum Verständnis zur Verfügung steht. Eine

optimale Bedienbarkeit erfordert, dass ein Interface in sich schlüssig und in seiner

Aufteilung sinnvoll und zweckgemäß ist. Eine solche Darstellung erlaubt dem Nutzer

eine Verwendung der Applikation ohne sich großartig damit zu beschäftigen oder

angeleitet werden zu müssen. Aus diesem Grund ist es wichtig ein Interface einheitlich zu

deklinieren, um erlernte Funktionalitäten auf andere Bestandteile der Anwendung

übertragen zu können.

Material Design

Dies ist unter anderem ein grundlegendes Paradigma für die Designvorgaben von

Googles Material Design 2. Dieses gibt festgelegte Gestaltungsrichtlinien vor, die in

Design und Funktion an moderne Internetnutzer und

-nutzung angepasst sind. Material Design ist ein vereinheitlichendes System von

Gestaltung, Animation und Interaktion, das zusammenhängend für verschiedene

Endgeräte und Bildschirmgrößen funktioniert. Mit dem UI Framework Angular Material

liefert Google eine zusammenfassende Komponentensammlung, die den Richtlinien des

Material Design entspricht und einfache Komponenten wie Textfelder, Buttons sowie

Toolbars aber auch komplexe Systeme wie Tab- oder Navigationselemente enthält. Diese

können ohne größere Anpassungen direkt innerhalb der Applikation verwendet werden.

Aus diesem Grund müssen keine umfangreichen Stylesheets angefertigt werden. Es fallen

nur noch komponenten– und anwendungsbezogene Anpassungen an. Diese Faktoren

erlauben die unkomplizierte und rapide Entwicklung von Interfaces beziehungsweise

2 Jitkoff N. (2016): Design Is Never Done. https://design.google.com/articles/design-is-never-

done/ (30.01.2016).

10

Benutzeroberflächen; ein Aspekt der beim Umfang von PeerActivate nicht zu

vernachlässigen ist.

Angular Material

Der Vergleich von Abbildung 3 und Abbildung 4 ist ein gutes Beispiel für die

Flexibilität, die das Angular Material Framework dem Entwickler bietet. Durch minimale

Änderungen kann zum Beispiel das Farbdesign oder die Inhaltsaufteilung angepasst

werden. Inline-Attribute erlauben eine vielfältige Verwendung einer einzelnen

Komponente, wie md-card, innerhalb der gesamten Plattform. Mithilfe von Angular

Material können des Weiteren Themes (Leitfäden für das Farbdesign) erstellt werden, die

unter anderem die Primär-, Sekundär- und Akzentfarben beinhalten. Dies ermöglicht

neben den bereits erwähnten dynamischen Farbeinstellungen eine einheitliche Gestaltung

innerhalb der Anwendung. Im konkreten Fall von PeerActivate kann das Farbspektrum

der Corporate Identity (CI) der Hochschule Augsburg für andere Hochschulen oder

Universitäten angepasst werden. Dies gewährt eine Identifikation mit der eigenen

Einrichtung und kann ohne Eingriffe am eigentlichen System umgesetzt werden.

Abbildung 3: Material Design Card – Einfache Verwendung

Quelle: https://material.angularjs.org/latest/demo/card. (Screenshot)

11

Styling

Für die Gestaltung von Webseiten ist man normalerweise auf die Stylesheet Sprache CSS

(Cascading Styles Sheets) angewiesen. Im Laufe der Zeit haben sich jedoch einige

Alternativen entwickelt, die das Schreiben von CSS-Code optimieren und vereinfachen

soll. Diese Systeme funktionieren meist als Präprozessor zum schlussendlich

ausgegebenen CSS und bieten eine Vielfalt von Funktionalität. Zwei große Beispiele für

solche alternative Stylesheet Sprachen sind LESS (Anspielung auf „less code“) und SASS

(Akronym für: Syntatically Awesome Stylesheet). Die herausragende Eigenschaft, die

beide Systeme gemeinsam haben, ist die Möglichkeit zur Verschachtelung von CSS-Code

in einer hierarchischen Form (s. Abbildung 5). Des Weiteren wird das Einbinden von

erweiternden bzw. ergänzenden Stylesheets erleichtert, da diese direkt angegeben werden

Abbildung 4: Material Design Card – Farbumstellung durch Variablenänderung

Quelle: https://material.angularjs.org/latest/demo/card. (Screenshot)

12

und somit durch den Kompilierungsprozess eingebunden werden können 3.

Dementsprechend ist es nicht mehr notwendig mehrere Stylesheets in seiner Anwendung

einzubinden, sondern das Endprodukt kann aus nur noch einem kompilierten,

verkleinerten Stylesheet bestehen. Diese Aspekte erlauben einen vereinfachten Workflow

und verbessern die Performance einer Applikation. In meiner Anwendung verwende ich

die Stylesheet Sprache SASS, da diese mittlerweile eine größere Unterstützung durch

Entwickler findet und allgemein öfters benützt wird. Außerdem steht dies im Einklang

mit der Komponentensammlung Angular Material, da diese auch SASS verwendet.

Icons

Icons und Piktogramme bieten, wenn richtig eingesetzt eine einfache, direkte und

unmissverständliche Identifikation von Funktionalität. Dies ist zum einen durch das an

sich Dargestellte (s. Abbildung 6, oben) und zum anderen durch erlernte Zusammenhänge

(s. Abbildung 6, unten). Aufgrund dieser relativ anspruchslosen Kommunikation

zwischen Nutzer und Inhalt sind Icons aus modernen Webanwendungen nicht mehr

wegzudenken. Im Fall von PeerActivate können Icons für sich selbst (s. Abbildung 7,

links) oder in Verbindung mit einer Beschreibung stehen, die diese unterstützen (s.

Abbildung 7, rechts).

3 http://sass-lang.com/ (31.01.2017)

Abbildung 5: Syntatically Awesome Stylesheet – Beispiel für SASS Syntax

Quelle: http://sass-lang.com/guide.

13

3.2 Frontend

Der Begriff Frontend kann vielseitig angewendet werden. Er steht in Abhängigkeit mit

der Umgebung beziehungsweise dem Kontext, in dem er sich befindet. So kann im

Bereich von Datenbanken die grafische Benutzeroberfläche zur Bearbeitung von

Datensätzen als Frontend bezeichnet werden, wohingegen bei einem Client-Server-

Abbildung 6: Selbsterklärende und Erlernte Bedeutung von Icons


Abbildung 7: Verwendung von Icons in PeerActivate


14

System der clientseitige Teil der Anwendung als Frontend bezeichnet wird. Im Fall von

PeerActivate ist diese zweite Definition zutreffend. Im Folgenden wird der Begriff

dementsprechend auf jegliche clientseitige Interaktion des Users mit der Applikation

verwendet.

Frameworks

Um die Erstellung von Webanwendungen zu erleichtern kann man als Entwickler auf

Programmiergerüste, sogenannte Frameworks zurückgreifen. Diese sind zumeist eine

umfangreiche Sammlung von Funktionalitäten und Ordnungsinstanzen, welche die

Programmierung erleichtern und ihr gleichzeitig Struktur geben.

Meine Arbeit am Projekt begann dementsprechend mit der Recherche von verfügbaren

Frameworks, die mich in meiner Entwicklung eines Webforums unterstützen können.

Hier zeichnete sich am Anfang MeteorJS als das vermeintlich ideale Framework zur

Umsetzung einer solchen Diskussionsplattform ab. Meteor bietet eine

Programmierumgebung, die sowohl das Front- als auch das Backend überspannt und eine

direkte Anbindung der Datenbank vom Server an den Client ermöglicht. Dies wird durch

das Erstellen einer Datenbankinstanz auf Seiten des Nutzers ermöglicht und erlaubt

schnellere Zugriffe zu serverseitigen Funktionen und sorgt damit für eine bessere

Performance4. Zu Beginn meines Projektes war die weitere Entwicklung von Meteor

allerdings unsicher und es war nicht absehbar wie lange das Framework noch aktiv

unterstützt, d.h. weiterentwickelt und angepasst wird. Dementsprechend kam es für eine

neue Anwendung, die für einen möglichst langen Zeitraum betrieben werden sollte, nicht

in Frage. Daher entschied ich mich für ein Framework, mit dem ich schon einige

Erfahrung sammeln konnte und von dem ich wusste, dass es die Anforderungen für ein so

umfangreiches Projekt erfüllt: AngularJS. Von da an stand nur noch die Frage im Raum,

ob die Plattform mit Angular 1 oder dessen relativ aktuelle entstandenem Nachfolger

Angular 2 umgesetzt werden soll.

Angular 2

Angular 2 ist die Weiterentwicklung des bekannten Google Frameworks AngularJS und

ist seit etwa einem halben Jahr in einem stabilen Stadium. Zu Beginn der Arbeit an dem

Projekt im Oktober befand sich Angular 2 gerade in der Version 2.1 und wurde vor

kurzem aus der Betaphase entlassen. Mittlerweile befindet es sich in Version 2.4 und hat

kleine, aber keine gravierenden, Änderungen durchlaufen. Angular 2 ist keine

4 Lienau M. (2013): Meteor: Einblick in die Full-Stack-JavaScript-Plattform für das Echtzeit Web.

http://t3n.de/magazin/meteor-full-stack-javascript-plattform-fuer-echtzeit-web-234154/

15

überarbeitete Angular 1 Version, sondern wurde von Grund auf neu geschrieben und kann

dementsprechend in Syntax sowie Semantik nicht mit seinem Vorgänger verglichen

werden. Der Nachfolger schneidet in seiner Performance um einiges besser ab (s.

Abbildung 8), was unter anderem durch das dynamische Laden von Modulen

(dependency injection) und dem damit verbundenen reduzierten Kern ermöglicht wird.

Dieser Punkt erstreckt sich so weit, dass Komponenten und Module vorab oder parallel

geladen werden können. Umfangreiche Module, die zum Beispiel viele Anfragen stellen

müssen oder aus einem anderen Grund normalerweise lange Ladezeiten benötigen,

können im Hintergrund ausgeführt und vorbereitet werden. Des Weiteren bietet die neue

Version eine noch breitere Unterstützung für alle denkbaren Endgeräte. Dies umfasst

Web, mobile Web, native mobile und native Desktop. Angular kann für jedes

Betriebssystem und Gerät verwendet werden. Vor allem im Bereich der mobilen

Webentwicklung wurde Angular extrem optimiert, was sich in schnelleren Ladezeiten im

Vergleich zum Vorgänger äußert. Außerdem ist durch die Entwicklung durch Google

gewährleistet, dass es eine lange und ausführliche Unterstützung des Frameworks geben

wird.

Abbildung 8: JavaScript web frameworks – Benchmarks zu Performance

Quelle: http://www.stefankrause.net/wp/?p=191 (modifizierter Screenshot).

16

TypeScript

TypeScript ist eine 2012 von Microsoft ins Leben gerufene Programmiersprache, welche

die selbe Semantik und Syntax wie JavaScript nutzt 5. Der unterscheidende Faktor ist,

dass TypeScript ähnlich wie anderer Programmcode vor Benutzung kompiliert werden

muss. In diesem Fall wird der TypeScript Code zu JavaScript umgewandelt, welches von

allen geläufigen Browsern unterstützt wird. Der Sinn dieser Präprozession ist es durch die

durch TypeScript eingeführte Ordnungsstruktur das bisher gegebene System von

JavaScript zu optimieren und für große Projekte nutzbarer zu machen. Dieser

Ordnungsrahmen erlaubt zum Beispiel das Anlegen von Typen oder Interfaces, durch die

sichergestellt werden kann, dass angelegte Variablen sich in ihrem Verwendungszweck

nicht unterscheiden können (s. Abbildung 9). Normalerweise wird JavaScript „on the fly“

vom Browser interpretiert und solche Fehlerquellen ignoriert. Das heißt zum Bespiel,

dass wenn eine Variable eine Zahl enthalten sollte und dies nicht der Fall ist wird dies in

den meisten Fällen ignoriert. Mit der Angabe eines Typs kann jedoch sichergestellt

werden, dass die Variable in jeder Verwendung innerhalb des Gesamtcodes den selben

Typ und damit vermutlich die gleiche Bedeutung hat. Dies erlaubt größeren Gruppen

unkomplizierter am selben Code zu schreiben und vermindert das Risiko von Fehlern

erheblich.

Im Fall von PeerActivate ist es angedacht die Applikation als Open-Source Software

weiter zu betreiben. Das heißt es werden viele Leute daran arbeiten können und

TypeScript ist eine Möglichkeit die Integrität des Codes insgesamt sicherzustellen. So ist

es nicht zwingend notwendig eine bestimmte Person zu haben, die den Code auf seine

Richtigkeit überwacht. Des Weiteren ist es bei diesem doch relativ großen Projekt von

Vorteil zusätzliche Funktionalitäten wie Textergänzung, statische Codeprüfung und

Refaktorisierung nutzen zu können. Vor allem der letzte Punkt erhöht Lesbarkeit,

Übersichtlichkeit, Verständlichkeit, Erweiterbarkeit und Testbarkeit.

5 Ninja Squad (2016): Become a ninja with Angular (s. Seite 28)

17

3.3 Backend

Der Begriff Backend beschreibt im Kontext zum Frontend den dem Nutzer nicht

zugreifbaren, externen Bereich in Form einer Serveranwendung (s. Abbildung 10). Bis

vor einigen Jahren war die Frontendentwicklung in den meisten Fällen strikt von der

Backendprogrammierung abgetrennt. Diese Trennung war Folge der verschiedenen

Programmiersprachen, die benötigt wurden. So bedurfte man für die Umsetzung des

Frontend Kenntnisse in JavaScript und für die des Backend zum Beispiel Erfahrung mit

PHP sowie für die Einrichtung der Datenbank mit SQL. Mit der Entstehung von NodeJS,

einem System, das schlicht gesagt die Kommunikation von JavaScript mit dem Computer

erlaubt, war es allerdings möglich Backendfunktionalität wie das Aufrufen und Ablegen

von Dateien vom System zu nutzen. Dies erlaubt eine Entwicklung von Front – sowie

Backend durch einen Entwickler in einer Programmierumgebung.

Für die Erstellung meiner Plattform war es notwendig auf Backend-Seite eine

Serveranwendung zu schreiben, die als Mediator zwischen Client und Datenbank dient.

Des Weiteren werden hier Funktionen wie Authentifizierung, Upload und das Tracking

von Daten geregelt. Das hier verwendete Framework heißt ExpressJS und ist ein

minimalistisches und flexibles NodeJS Programmiergerüst 6. Ein weiterer Bestandteil,

den dieser Teil meiner Arbeit leisten muss, ist die Bereitstellung von Dateien. Dies

umfasst unter anderem das Hosting der Applikation selbst, hochgeladener Bilder und wie

bereits erwähnt Inhalte der Datenbank.

6 http://expressjs.com/de/. (30.01.2016).

Abbildung 9: Typangabe in TypeScript im Vergleich zu JavaScript


18

3.4 Datenbank

Die Wahl der Datenbank fiel nach einiger Überlegung auf das Framework MongoDB.

MongoDB, vom englischen huMONGOus zeichnet sich in der Möglichkeit zur agilen

Programmierung, der hohen Skalierbarkeit von Projekten beziehungsweise Anwendungen

aus 7. Es beinhaltet außerdem ein dynamisches Dokumentendatenmodell mit flexiblen

Schemata. Das heißt, dass die angelegten Modelle zur Darstellung von Tabellen

individuell auf das Einsatzgebiet angepasst werden können. Insgesamt erlaubt das System

eine schnelle und unkomplizierte Umsetzung von Projekten ohne dabei an Mächtigkeit in

seinem Anwendungsbereich zu verlieren. Komplexe Anfragen (Queries) und

Aggregationspipelines sind kein Problem in MongoDB. Ein weiterer Aspekt, der für mich

gegen die Verwendung von SQL-Datenbanken, wie MySQL oder PostgreSQL, sprach,

war die Möglichkeit serverseitig in nativem Code, d.h. in meinem Fall JavaScript

schreiben zu können. Alle Anfragen, die an die Datenbank gestellt werden, sind in

JavaScript geschrieben und es muss keine Schnittstelle zur Verknüpfung einer SQL-

Datenbank mehr geschaffen werden. Dies vereinfacht zum einen die Entwicklung und

senkt zum anderen das Fehlerpotential, das durch mehr Anlaufstellen geschaffen wird.

Ein weiterer Aspekt, der in meinem Fall für die Verwendung von MongoDB spricht, ist

die Möglichkeit der Verschachtelung von Dokumenten bzw. Dokumentmodellen. Dies

bedeutet, dass man anders als bei normalen Relationen in SQL-Datenbanksystemen keine

7 https://www.mongodb.com/de. (30.01.2016).

Abbildung 10: Backend/Frontend – Vereinfachte Darstellung der Beziehung


19

Keys zur Referenz nutzen muss, sondern ein Dokument direkt als Kind-Dokument des

Eltern-Elements einnisten kann. Des Weiteren erlaubt das Framework das Anlegen von

Funktionen bzw. Methoden, die zu bestimmten Zeitpunkten, wie z.B. beim Einfügen

eines neuen Eintrags, ausgeführt werden können. Dies erlaubt es Werte innerhalb der

Datenbank automatisiert zu erstellen oder zu editieren.

3.5 Analyse

Ein essentieller Teil der Plattform sollte eine Funktion zum Aufzeichnen bzw. Tracking

von Nutzer- sowie Lernaktivität sein. Hierfür ist es notwendig eine Methode zu

integrieren, die dies ermöglicht. Üblicherweise werden im Bereich E-Learning zwei

Systeme zum Überwachen des Lernfortschrittes des Nutzers verwendet. Dies ist zum

einen SCORM (Sharable Content Object Reference Model) und zum anderen die Tin Can

API oder Experience API (xapi). Im Folgenden will ich kurz Vor- und Nachteile beider

Systeme gegenüberstellen und meine Entscheidung für die Verwendung von xAPI

erörtern 8. SCORM ist abhängig von einigen Faktoren, die dessen Einsatzbereich

limitieren. Diese Aspekte umfassen unter anderem die Notwendigkeit der Einbindung

einer Anwendung in ein Learning Management System (LMS). Dieses sorgt für die

Bereitstellung und Organisation von (Lern-)Inhalten und deren Aufzeichnung. Da diese

Systeme auf einen Browser angewiesen sind, sind sie zum Beispiel für die Verwendung

in Kombination mit mobilen Endgeräten nicht geeignet. Ein weiterer limitierender Punkt

ist der Umfang der Daten der aufgezeichnet werden kann. Bestimmte Vorgänge innerhalb

der Anwendung können nicht aufgezeichnet und damit nicht ausgewertet werden. Aus

unter anderem diesen Gründen hat sich ein Nachfolgesystem entwickelt, das sich von

diesen Begrenzungen löst und eine dynamische und unabhängige Erhebung von Daten

erlaubt. Im Vergleich zu SCORM gewährt die Tin Can API das Aufzeichnen von Daten

unabhängig vom verwendeten System. Das heißt es ist nicht von Bedeutung ob der

Lernende online bzw. offline oder an einem Mobilgerät bzw. PC lernt. Dies wird zum

einen durch das einfache Vokabular, das die API verwendet, ermöglicht. Ein simples Tin

Can Statement ist aufgeteilt in die Bereiche „actor“, „verb“ und „object“ und ist damit

vergleichbar mit einem normalen Satzaufbau. Die Statements werden außerdem im JSON

(JavaScript Object Notation) Format notiert, was meinen Bestrebungen den Code

komplett in einer Sprache zu halten, entgegenkommt.

8 http://tincanapi.com/developer-overview/. (30.01.2016).

20

Tin Can Statements

Das Statement in Abbildung 11 kann als „Philipp Rummelsberger“ „experienced“ „Solo

Hang Gliding“ interpretiert und verständlich gelesen werden 9. Die Tin Can API erlaubt

außerdem die Erweiterung dieser Statements mit zum Beispiel dem Resultat einer

bearbeiteten Aufgabe, einem Kontext oder einer Datumsangabe. Dies ermöglicht eine

effiziente und verständliche Aufzeichnung von Datenzusammenhängen und kann ohne

größere Bearbeitung der Datensätze ausgewertet werden. Diese Analyse geschieht bei der

Experience API im Regelfall durch einen sogenannten Learning Record Store (LRS),

einer Software, die speziell für das Tracking und die Auswertung von Tin Can Statements

entwickelt wurde. In meinem konkreten Fall wäre aber die Einbindung eines solchen

System zum einen ein übertrieben großer Aufwand für wenig Mehrgewinn und zum

anderen sollte die Auswertung der Daten direkt in meiner Anwendung möglich sein.

Daher entschied ich mich dafür selbst ein kleines LRS zu schreiben, das die

Aufzeichnung und Auswertung in gewünschtem Umfang erlaubt. Dieses besteht zum

einen aus einem Dokumentenmodell innerhalb der Datenbank, in der die Statements

aufgezeichnet werden, und einer Komponente zur Analyse der Datensätze innerhalb der

Plattform.

9 http://tincanapi.com/statements-101/. (30.01.2016).

Abbildung 11: Simples Tin Can Statement – Notation im JSON-Format


21

4 Technische Realisierung

4.1 Benutzeroberfläche

4.1.1 Design

Schrift

Innerhalb der gesamten Anwendung wird die Schriftart Roboto in verschieden Größen

und Stärken verwendet. Roboto ist eine der bekanntesten Google-Fonts und wird

mittlerweile als Standard Schrift für Android Applikationen verwendet. Sie zeichnet sich

durch fehlende Serifen und ihre sehr gute Lesbarkeit auf Bildschirmen aus (s. Abbildung

12).

Farbe

Die Farbgebung ist ein wichtiger Bestandteil eines jeden Designs. Sie dient unter

anderem zur Wiedererkennung, Identifikation von Funktionalität und zur Aufteilung in

sinnvolle Instanzen. Das Farbkonzept von PeerActivate orientiert sich aufgrund seiner

Verbindung zur Hochschule Augsburg an dessen CI. Es ist jedoch angedacht das

Farbdesign je nach Hochschule bzw. Universität anzupassen. Dies lässt sich durch das

verwendete Framework Angular Material leicht bewerkstelligen. Innerhalb der Plattform

wurden für flächige Elemente hauptsächlich Orangetöne in zwei Varianten verwendet.

Für Unterteilungen, Icons und Schriften werden zwei harmonierende Grautöne

angewendet (s. Abbildung 13).

Abbildung 12: Verwendete Schriftart Roboto


22

Die hier abgebildete Ansicht (s. Abbildung 14) ist die eines Benutzers, der sich innerhalb

einer Frage befindet. Der obere Bereich wird von einer Toolbar eingenommen, die

Breadcrumbs, d.h. Verlinkungen zu vorhergehenden Bereichen, beinhaltet. Darunter

befinden sich einige Informationen zum Fragensteller. In diesem Fall ist die gestellte

Frage ein Ausschnitt Code, der automatisch gehighlighted und formatiert wird. Das

darunterliegende Element ist das Behältnis für eine gegebene Antwort. Hier werden unter

anderem Randangaben zu Datum, deren Bewertung und Antwortgeber bereitgestellt. Der

Hauptbereich ist reserviert für die Antwort, die aus Text, Code oder auch Bildern

bestehen kann. Der untere Bereich bietet einige Elemente, die das Editieren, Löschen,

Kommentieren und die Bewertung ermöglichen.

Die Sidebar dient zur Navigation innerhalb der kompletten Plattform. In ihr sind die

wichtigsten Anlaufstellen untergebracht. Sie ist aufgebaut aus dem oberen Bereich, der

Informationen zum gerade angemeldeten User zeigt und einem Listenelement. Dieses

Listenelement enthält Navigationspunkte und weitere Unterlisten wie Benachrichtigungen

und Bookmarks.

Abbildung 13: Verwendete Farbpalette


23

Ein Logo ist neben dem Schriftzug maßgeblich dafür verantwortlich wie hoch der

Wiedererkennungswert einer Marke ist. Aus diesem Grund ist ein gutes Logo wichtig.

Von vornherein wollte ich für das Logo gerne die Anfangsbuchstaben von PeerActivate

verwenden und diese in Kontext mit ihrem Anwendungsbereich stellen. Das Ergebnis ist

ein Logo, das zum einen die Initialen der Plattform enthält und zum anderen als Symbol

für Lernen (Brille, Eule) stehen kann (s. Abbildung 15).

Abbildung 14: Ansicht in einer gestellten Frage


24

Abbildung 16 zeigt die in der Plattform verwendeten Icons aus der Sammlung von

Material Design.

Abbildung 15: Logo von PeerActivate – Schrittweise Entwicklung zum finalen Stand


Abbildung 16: Übersicht der verwendeten Icons


25

4.1.2 Frontend: Angular 2

Komponentenbasierte Programmierung

Unter dem Begriff komponentenbasierte Entwicklung versteht sich ein

Programmierparadigma, dessen Grundlage die objektorientierte Programmierung bildet.

Der Ansatz dieser Methode beläuft sich auf die Entwicklung von einzelnen

Komponenten, die als Bausteine fundieren und auf diese Weise die Anwendung

zusammensetzen. Dieses System kann, neben der erhöhten Wiederverwendbarkeit, die

Qualität der einzelnen Bestandteile erhöhen. Eine auf diese Art programmierte Plattform

kann demnach modular erweitert bzw. optimiert werden und hat damit weniger Probleme

über einen langen Zeitraum betrieben zu werden. Grundlage für diesen Anspruch ist eine

sinnvolle Aufteilung der Bestandteile in Komponenten. Abbildung 17 zeigt die ungefähre

Aufteilung von PeerActivate in solche modularen Bausteine und deren ungefähre

Relationen und Hierarchieverhältnisse.

Angular 2 Komponenten

Eine Komponente kann im Kontext von Angular 2 aus vielen Dokumenten bestehen, die

je nach Komplexität variieren. Die meisten einfachen Komponenten bestehen jedoch aus

einem Template, d.h. dem HTML-Grundgerüst, einem Stylesheet, dem Controller und

einem Modul. Des Weiteren kann eine Index-Datei angelegt werden, die den Import bzw.

den Export innerhalb der Anwendung vereinfachen kann. Komplexere Komponenten

können noch Services, Routendeklarationen, Konfigurationsdateien oder ganze

Abbildung 17: Modularer Aufbau – Aufteilung in Module und Komponenten


26

Subkomponenten enthalten. Als Beispiel für eine solche komplexere Komponente kann

das Admin Modul der Plattform verwendet werden (s. Abbildung 18). Um die einzelnen

Bestandteile besser zu verstehen werden sie im Folgenden am Beispiel einer

Toolbarkomponente besprochen.

Templates

Die Templates der Anwendung sind in normalem HTML formuliert. Jedoch lässt sich in

Abbildung 19 schon erkennen, dass man sich in einer Angular Applikation befindet. Die

Elemente, die das HTML deklinieren, sogenannte Tags, sind normalerweise in ihrer

Verwendung und Funktion relativ fest vorgeschrieben. Angular erlaubt jedoch die

Definition eigener Tags bzw. Komponenten, die dieses System nutzen. In diesem Beispiel

zeichnet der Tag md-toolbar eine Komponente aus der Sammlung von Angular Material

Abbildung 18: Ordnerstruktur und Aufteilung des Admin-Moduls von PeerActivate


27

aus und beinhaltet sowohl Styling als auch Funktionsinhalte. Das Attribut *ngFor erlaubt

die Injektion von Daten des Controllers in die geschweiften Klammern des Template,

falls diese sich in einem Array oder Objekt befinden. Diese Art der Dateninduktion

erlaubt es, dass Komponenten nicht hart codiert, sondern je nach Anwendungsbereich mit

Inhalt befüllt werden können. Des Weiteren erlaubt AngularJS den Zugriff auf native

HTML Events wie onclick. Diese sogenannten Event-Listener horchen auf Aktivität und

reagieren sobald diese erfolgt. Im Fall dieses Listeners wird die im Element enthaltene

URL an den Controller als Teil eines Events, das zur Navigation dient, weitergereicht.

Syntatically Awesome Stylesheet - SASS

Für das Styling der Komponenten wird, wie bereits erwähnt, die Stylesheetsprache SASS

verwendet. Diese erlaubt neben der Verschachtelung von Elementen den Import von

anderen Stylesheets (s. Abbildung 20). Diese Aspekte harmonieren gut mit dem

Gedanken der Modularität und sorgen für eine geordnete Arbeitsstruktur.

Abbildung 19: Angular 2 HTML-Template


28

„ a directive with a template “

Der Kern einer Komponente ist der Controller, der als funktionsgebende Instanz wirkt.

Innerhalb dieser Controller wird zu Beginn deklariert, von welchen Modulen die

Komponente abhängig sein wird, d.h. welche Funktionalitäten sie erhalten muss, um zu

funktionieren (s. Abbildung 21). Diese Form der dependency injection ist eine Art der

Performanceoptimierung von modernen Webseiten. Ein großes Problem, das das erste

Angular Framework hatte war der große, sehr starre Kern an Funktionalität, den man

komplett annehmen musste, ohne sich aussuchen zu können, was davon benötigt wird. Da

so zu jedem Zeitpunkt alles geladen werden musste, führte diese Einrichtung zu langen

Ladezeiten. Jetzt kann ich Parameter wie Input, Output oder EventEmitter nach Bedarf

einspielen und so die Performance optimieren (s. Abbildung 21).

Abbildung 20: SASS-Stylesheet


Abbildung 21: Angular dependency injection – Performance durch modularen Aufbau


29

Der nächste Punkt gilt als deklarierender Aspekt der Komponente und weist ihr

bestimmte Eigenschaften zu. Dies umfasst die Dateien, die zur Darstellung benötigt

werden, wie Template und Stylesheet, und außerdem können hier die Eigenschaften wie

View Encapsulation, Input und Service-Provider deklariert werden (s. Abbildung 22).

Des Weiteren wird im Feld selector der spätere Tagname zugeordnet, mit dem die

Komponente in der Plattform verwendet werden kann.

Daraufhin folgt die eigentliche Deklaration der Klasse, welche die Funktionalität enthält.

In diesem Fall wird die Klasse ToolbarComponent definiert (s. Abbildung 23). Diese

Klasse enthält neben einem Konstruktor unter anderem Angaben zu den verwendeten

Modulen, Services oder anderen Klassen. Des Weiteren können Input- und Outputfelder

notiert werden, die später innerhalb des Templates mit Variablen befüllt und so im

Controller verwendet werden können. Die definierte Komponente Toolbar kann später

innerhalb der Plattform zum Beispiel als

<toolbar[items]=“breadcrumbs“[enableBreadcrumbs]=“true“></toolbar>

in ein Template integriert werden.

Abbildung 22: @component declarator – Definition einer Komponenten Direktive


30

Um die Komponente anderen Teilen der Anwendung zugänglich zu machen muss diese

jedoch deklariert werden. Dies erfolgt durch das Schreiben eines Moduls, das zum einen

die Bestandteile importiert, welche die Komponente zum Funktionieren benötigt, und

zum anderen die „fertige“ Komponente exportiert. Auf diese Art ist die Komponente als

Modul festgelegt, das in anderen Modulen importiert und somit global verwendet werden

kann.

4.1.3 Datenbank: MongoDB

Für das Ablegen und Speichern von Daten wird, wie bereits erwähnt, das NoSQL

Datenbanksystem MongoDB eingesetzt. Als Schnittstelle zwischen Server und Datenbank

wird das Framework Mongoose verwendet. Mongoose ist eine Sammlung von

Funktionalitäten, welche die Anbindung von Datenbank an Server erleichtern und

Anfragen an diese strukturieren.

Für das Anlegen von Tabellen innerhalb der Datenbank ist es nicht zwingend notwendig,

aber sinnvoll Schemata zu definieren, die als Vorgabe und Kontrollinstanz dienen und

somit zur Überprüfung der Richtigkeit der eingetragenen Werte und folglich zur

Fehlervermeidung beitragen.

Dies umfasst die Angabe von Hierarchieverhältnissen, Typenangaben oder

Standardwerten. Im Weiteren sollen kurz einige angelegte Dokumentenmodelle bzw.

Schemata aufgezeigt und erklärt werden. Das Schema, das für eine userbasierte

Webanwendung wohl am wichtigsten ist, ist das des Benutzers (s. Abbildung 24).

Abbildung 23: ToolbarComponent – Definition der Klasse ToolbarComponent


31

Dieses Modell hat sich im Laufe der Entwicklung von PeerActivate verändert und wurde

den Anforderungen entsprechend erweitert. Am Anfang bestand das Model nur aus den

notwendigsten Feldern (s. Abbildung 25).

Abbildung 24: Datenbankeintrag – Mongo Dokument eines Dummy Users


Abbildung 25: Datenbankschema User


32

Die Schemata für MongoDB werden im JSON-Format geschrieben und können

dementsprechend auch genestete Inhalte enthalten. Dies lässt sich zum Beispiel am Feld

„local“ erkennen (s. Abbildung 25). Dieses Feld beinhaltet die für eine Authentifizierung

benötigten Inhalte und es werden neben dem eigentlichen Namen des Feldes sowohl der

Typ (in diesem Fall String) und zum Beispiel Werte wie die Einzigartigkeit („unique“),

das heißt ob der Wert öfter als einmal vorkommen darf, angegeben. Bei den beiden

Felder „date“ und „role“ die für das Registrierungsdatum und die Rolle des Benutzers

stehen lässt sich erkennen, dass sogenannte „default“-Werte, d.h. Standardwerte die

automatisch bei der Erzeugung des Elements, falls nicht anders vorgegeben, angelegt

werden. Das Feld „role“ ist ausschlaggebend für die spätere Authorisationsebene, die ein

Nutzer hat. Bislang gibt es vier Kategorien von Nutzern. Diese umfassen Administratoren

(„admin“), Dozenten und Professoren („trainer“), Tutoren und Assistenten („assistant“)

und normale Endnutzer wie Studenten („user“).

Wie an Abbildung 26 gut erkennbar ist, sind noch einige Felder hinzugekommen, die sich

im Laufe der Entwicklung als notwendig erwiesen haben. Darunter Felder, die als

Typangabe „mongoose.Schema.Types.ObjectId“ haben. Dies ist ein spezieller Typ,

dessen Angabe wie z.B. beim Feld „courses“ dazu führt, dass nicht das ganze Modell in

die Tabelle eingetragen, sondern nur die ID des Dokuments als eine Art Foreign-Key

fungiert.

Abbildung 26: Finales Schema User


33

Durch eine solche Verschachtelung sind die Hierarchieverhältnisse direkt geregelt und

können zu keinem Zeitpunkt falsch interpretiert werden. Um die Relationen genauer

darzustellen, sind sie in Abbildung 27 in einem Datenbankschema aufgeführt.

Die eckigen Klammern um die Felddefinition bedeuten, dass das Feld aus einem Array,

d.h. nicht aus einem Wert, sondern potentiell aus vielen Modellen des gleichen Typs

besteht. Diese referierten Dokumente werden innerhalb der Modelldefinition definiert

und können so quasi fremd verwendet werden. Des Weiteren erlaubt das MongoDB

Modellschema die Definition von Funktionen, die zu bestimmten Zeitpunkten, wie zum

Beispiel vor oder nach dem Anlegen eines Eintrags ausgeführt werden. Ein Beispiel für

eine solche Funktion ist das Erzeugen eines Webtokens, dass zur Authentifikation von

Benutzern benötigt wird. Diese Funktion bewirkt, dass ein Token, d.h. ein einzigartiger,

verschlüsselter Wertecontainer erzeugt und mit einigen Daten zum Nutzer an den Client

gesendet wird. Diese Funktion muss jedes Mal aufgerufen werden, wenn ein User sich

authentifizieren will.

Datenbankadministration

Für die Administration einer Mongo - Datenbank stehen verschiedene offline oder online

Tools zur Verfügung. Im Laufe der Entwicklung habe ich auf zwei verschiedene

Administrationssysteme zurückgegriffen. Das erste System war Robomongo (s.

Abbildung 29) eine einfache Datenbankverwaltungssoftware, von der ich jedoch nach

einiger Zeit zu MongoChef Core der Firma 3T Software Labs (s. Abbildung 29)

Abbildung 27: Komplettes Datenbankschema PeerActivate

Quelle: Eigene Darstellung. (große Abbildung im Anhang)

34

gewechselt habe, da diese in ihrem Umfang größer ist und Funktionen wie z.B. die

Erstellung von Backups erlaubt.

Abbildung 28: Robomongo - Paralect


Abbildung 29: Mongo Chef Core - 3T Software Labs


35

4.1.4 Backend: RESTful API

Das Backend besteht aus einer Representational State Transfer (REST) - API. Diese

Bezeichnung bezieht sich auf die Veränderung des Zustands vom aktuellen zum nächsten,

durch den Transfer von Daten. Wie bereits erwähnt besteht meine Anwendung aus einem

Client-Server-System in dem der Client die Partei ist, die angewiesen ist auf Daten und

damit verbundene Statuswechsel.

Ein solcher Austausch von Daten erfolgt über URL-Adressen hinter denen bestimmte

Funktionalitäten stehen. Um genau zu sein, stellt der clientseitige Teil meiner

Anwendung Anfragen an den Server (die API) und erhält je nachdem wie er fragt

verschiedene Antworten. Die Art und Weise wie er fragt, bezieht sich auf die

verschiedenen Arten von Requests (Anfragen), die zur Auswahl stehen. Diese umfassen

unter anderem GET, POST und DELETE.

Ein gutes Beispiel für eine solche Interaktion ist der Loginvorgang bei Webseiten.

Hierbei handelt es sich in der Regel um ein POST-Request, da dem Server bzw. der API

Zugangsdaten wie Email/Username und Passwort zugesendet werden. Dieser hat dann

verschiedene Antwortmöglichkeiten, je nachdem ob die Person, die versucht sich

anzumelden autorisiert ist oder nicht. Im Fall einer korrekten Authentifikation sendet der

Server ein Authorisationstoken und den Statuscode 200 zurück. Wenn allerdings etwas

schiefläuft, durchläuft die Anfrage einige Anlaufstellen, die den Request auf seine

Fehlerquelle prüfen. Dies umfasst die Möglichkeiten wie „falsches Passwort“, „zu kurzes

Passwort“ und „falscher Benutzername“. Der ausschlagende Fehler wird in der Antwort

des Servers repräsentiert und kann in der Anwendung dargestellt werden.

Ein weiterer Punkt, für den die API verwendet wird, ist die Kommunikation mit der

Datenbank. Ein Beispiel für eine solche Anfrage ist die Erstellung einer neuen

Kursinstanz innerhalb der Datenbank. Dieses Beispiel zeigt, was passiert, wenn die

Applikation eine POST-Anfrage an die URL „course/create/:id“ stellt (s.

Abbildung 30). Am konkreten Fall übermittle ich Werte, wie beispielsweise den Titel des

Kurses, dessen Zusammenfassung oder den Namen des leitenden Dozenten. Alle diese

Variablen werden im Request-body (req.body) abgelegt und können auf dem Server

zur Erstellung des Datenbankeintrags verwendet werden. Hier wird zum einen der Kurs

erstellt und im Callback wird in die Tabelle Institution der neue Kurs eingetragen. Als

Antwort erhält meine Applikation dann alle Angaben zum neuen Eintrag in der

Datenbank (res.json(course)).

36

4.2 Tracking von Nutzeraktivität

4.2.1 Daten Monitoring

Die Aufzeichnung beziehungsweise das Tracking von Nutzeraktivität war von Anfang an

als essentieller Bestandteil der Plattform angedacht und sollte als Unterscheidungsfaktor

zu anderen Anwendungen stehen. Der Zweck dieser Datenerhebungen ist die Möglichkeit

zur Feststellung von Aktivität von Benutzern innerhalb der Kurse. Hohe oder niedrige

Aktivität kann ausgewertet werden und erlaubt Rückschlüsse auf Kursqualität,

unbeantwortete Fragen oder sonstige Unklarheiten. Des Weiteren bietet eine derartige

Aufzeichnung Bewertungsfaktoren, die ein Dozent beziehungsweise Professor für seine

Notengebung miteinbeziehen und wohlwollend berücksichtigen kann. Um eine

zielgemäße Analyse der Datensätze zu erlauben werden diese nach verschiedenen

Kriterien unterschieden. Diese Kriterien umfassen die aktive Anteilnahme der Benutzer in

Form von gestellten oder beantworteten Fragen, gegebenen Antworten und

Kommentaren. Passive Analysefaktoren sind die Qualität der gestellten Fragen und

gegebenen Antworten und die Bewertung dieser durch die User, wodurch auch diese

einen Teil dazu beitragen können.

Abbildung 30: Serverfunktion – Erstellung einer Kursinstanz


37

Bislang werden Faktoren wie Verweildauer und das Lesen von Beiträgen noch nicht

berücksichtigt. Eine solche Auswertung soll in Zukunft aber noch geprüft und getestet

werden.

Durch das System der Tin Can Statements und deren Aufteilung in Actor, Verb und

Object können diese direkt auf ihren Inhaltsgehalt in Bezug auf das bearbeitete Thema

ausgewertet werden.

Die Vorbereitung der Datensätze auf die Weiterverwendung innerhalb der Anwendung

geschieht dementsprechend auf dem Server und kann fast vollständig durch

Aggregationsqueries an die Datenbank erledigt werden. Unter solchen

Aggregationsanfragen versteht man relativ komplexe Anfragen an die Datenbank, die

zum Beispiel eine Gruppierung, Sortierung, Anpassung und Kalkulation innerhalb der

Datensätze erlauben. Ein Beispiel für eine solche Anfrage können sie in Abbildung 31

sehen. Diese werden an die Applikation übermittelt und dort graphisch aufbereitet und

schließlich auf verschiedene Arten dargestellt. Es wurde versucht für alle bemessenen

Faktoren eine optimale graphische Darstellungsmethode zu finden, um den Dozenten die

Auswertung dieser zu erleichtern. Hierfür wurden zwei Frameworks verwendet, die eine

solche Darstellung innerhalb der Anwendung erlauben.

Abbildung 31: Mongoose Aggregationsquery – Komplexe Datenbankabfrage


38

4.2.2 Datenvisualisierung

Zum Erstellen der Diagramme wurden zwei Bibliotheken verwendet. Das out-of-the-box

System ChartJS und das um einiges umfangreichere sowie komplexere Framework D3.

Beide sind gut zur Erfüllung ihres Zwecks geeignet, unterscheiden sich aber ihrem

Einsatz komplett. Das Framework ChartJS enthält komplette Funktionen und Methoden

zur Erstellung von Diagrammen. Dies bedeutet man kann damit Grafiken erstellen, die in

ihrem Aussehen und ihrer Funktion relativ fest definiert sind und wenig Spielraum für

eigene Anpassungen bieten. Dafür ist die Erstellung dieser Diagramme sehr schnell und

einfach. So kann man als Entwickler zwischen verschiedenen Diagrammtypen wie

Balken-, Säulen- oder Kuchendiagramm auswählen und diese mit Daten befüllen. Als

Ergebnis erhält man dann ein gut aussehendes Diagramm (s. Abbildung 32).

Der Nachteil hierbei ist jedoch, dass man diese Diagrammarten kaum auf spezielle

Umstände anpassen kann und an die Methoden von ChartJS gebunden ist.

Hierzu im Kontrast steht die Bibliothek D3: diese umfasst Methoden und Funktionen,

welche die Analyse von Daten erlauben, aber an sich nicht das Erstellen von bestimmten

Diagrammtypen ermöglicht. Diese graphische Darstellung funktioniert über direkte

Abbildung 32: ChartJS – Beispiel zur Nutzung

Quelle: http://www.chartjs.org/docs/. (Screenshot)

39

Definition von Elementen und Bestandteilen der Grafik, die in einen SVG-Container

gerendert werden. Somit kann ich dem Diagramm direkt mitteilen wie es zum einen

Aussehen soll und zum anderen welche Funktionen es beinhaltet. Eine solche Darstellung

ist allerdings um einiges zeitaufwändiger und Diagramme müssen mehr oder weniger von

Null entwickelt werden.

Da mein Hauptdiagramm bestimmte Aspekte erfüllen müsste, um die Datensätze genau

auf die Art und Weise darzustellen, wie ich es wollte, musste ich daher auch auf dieses

komplexere Framework zurückgreifen.

Ein entscheidender Teil zur unkomplizierten Auswertung der Datensätze durch die

Kursleitung ist die graphische Darstellung. Daher ist es wichtig sinngemäße Faktoren zu

definieren nach denen die Daten angeordnet, gegliedert und bemessen werden sollen. Die

für mich entscheidenden Kriterien, für eine solche Auswertung, waren neben der

Aufteilung in die oben benannten Gruppen eine Möglichkeit zur zeitlichen Analyse der

Aktivität. Für einen Dozenten oder Professor kann es durchaus von Interesse sein das

Lernverhalten, das sich über Aktivität auf der Plattform abzeichnen kann, zu evaluieren.

Dies erlaubt zum Beispiel die Intervention zu bestimmten Zeitpunkten des Semesters und

kann das Lernverhalten der Studenten sowie die Qualität der Ausbildung steigern. Dies

kann wiederum zu besseren Ergebnissen beim Abschneiden des Kurses führen

Abbildung 33: D3 Grafik -Anordnung nach Benutzer


40

Um diese Faktoren zu bemessen, habe ich eine Grafik entwickelt, die sowohl das

Gesamtergebnis der Aktivität summiert, als auch eine Analyse in Relation zu einer

Zeitachse erlaubt.

Das entwickelte Diagramm ist zu Beginn ein einfaches gestapeltes Säulendiagramm,

dessen Werte durch die Farbgebung gegliedert ist (s. Abbildung 33). Die Höhe der

Achsen, beziehungsweise die Breite der Säulen, wird hier automatisch auf den

verfügbaren Bereich angepasst. Durch Klick auf die Säulen wählt man den Studenten aus,

dessen zeitliche Anteilnahme am Kurs von näherem Interesse ist. Der Diagrammtyp

wechselt dann von einem Säulen- zu einem Liniendiagramm und die x-Achse verändert

ihre Domäne von Usern zu dem ausgewählten zeitlichen Rahmen, der analysiert werden

soll (s. Abbildung 34). Dieser zeitliche Rahmen kann über die Einstellungsleiste bestimmt

werden und erlaubt eine zeitgebundene Auswertung der Daten. Es können zum Beispiel

Prüfungszeiträume genauer untersucht werden oder auch die Korrelation zwischen den

vom Dozenten eingetragenen Terminen bzw. Events die durch die roten Längslinien

repräsentiert werden. So ist zum Beispiel das Eintragen von einer Prüfung im Kalender

des Kurses möglich, welches dann als Zeitfaktor in der Grafik auftaucht. Weitere

Einstellmöglichkeiten zur Grafik sind die Untersuchung der definierten Faktoren

Beitragsquantität und -qualität sowie der passiven Teilnahme durch Bewertung von

Fragen und Antworten. Bislang werden diese noch gleichmäßig mit dem Faktor 1

bewertet. Dies kann aber in zukünftigen Versionen noch abgeändert und eine prozentuale

Bewertung zur Wichtigkeit des Beitrags eingeführt werden. Des Weiteren kann man

Grafiken auf - und absteigend anzeigen lassen. Neben der Darstellung als gestapeltes

Säulendiagramm, kann man die Daten auch als gruppiertes Säulendiagramm anzeigen

lassen. Dies erlaubt einen besseren direkten Vergleich zwischen zwei Datensätzen (s.

Abbildung 35).

41

Abbildung 34: D3 Grafik – Analyse nach einstellbarem Zeitrahmen


Abbildung 35: D3 Grafik – Gruppiertes Säulendiagramm


42

5 Fazit und Ausblick

5.1 Bewertung

Zum Zeitpunkt der Abgabe befindet sich PeerActivate in einem Beta Stadium. Alle

grundlegenden Funktionen wie die Authentifikation, die Administration und die

Forumsfunktion sind implementiert und auf einem funktionstüchtigen Stand. Es können

demnach Benutzer registriert, Kurse und Foren erstellt und Fragen gestellt werden. Die

Erfassung sowie die Auswertung der Daten ist zum jetzigen Zeitpunkt auch möglich,

weist aber noch einige kleine Fehlerquellen auf, die jedoch mit dem nächsten Update

behoben werden sollen. Es stehen auch noch ausführliche Tests zur Usability und zur

Performance auf verschiedenen Endgeräten sowie Browsern aus. Nach dem Abschluss

dieser Tests kann über eine Anwendung der Plattform als Pilotprojekt an der Hochschule

Augsburg nachgedacht werden. Eventuelle Fehlerquellen und

Verbesserungsmöglichkeiten können dann behoben und umgesetzt werden. Da

PeerActivate ein Open-Source Projekt ist und der Code damit frei zugänglich ist, wird

diese Entwicklung idealerweise durch die Community stattfinden. Das Projekt hat im

Moment auf Heroku unter http://peeractivate.herokuapp.com/ ein Zuhause gefunden

(diese Adresse kann sich ändern). Die aktuelle Adresse sowie das Git-Repository finden

Sie unter https://github.com/leChuckles/PeerActivate. Dort können Sie Feedback

und/oder Vorschläge auf Codeänderungen hinterlassen.

5.2 Zukünftige Optimierungsmöglichkeiten

Interface

Das Interface muss noch auf Usability getestet werden. Bisheriges Feedback von

Freunden und Familie war jedoch durchweg positiv zu Verständlichkeit und

Übersichtlichkeit. Da sich das Angular Material Framework zum Zeitpunkt der Abgabe

noch in einem Beta Stadium befindet und noch nicht alle Komponenten des Angular 1

Vorgängers implementiert wurden sind einige HTML-Elemente noch nicht mit diesem

sondern mit normalen HTML umgesetzt. Beispiel hierfür sind Select-Felder, Slider und

Textarea-Felder. Die Entwicklung dieser Elemente durch Google sollte jedoch demnächst

abgeschlossen sein und für die Einbindung PeerActivate zur Verfügung stehen.

Frontend

Im Bereich des Frontend gibt es noch einige Optimierungsmöglichkeiten mit Bezug auf

die Performance. An manchen Stellen kommt es noch zu unnötigen Serveranfragen, die

durch die Vermeidung von Boiler Plates verhindert werden können. Da ich die

43

Skriptsprache TypeScript erst im Laufe des Projektes richtig erlernt habe, gibt es auch

hier noch Stellen die unzureichend typisiert und umgesetzt sind.

Ein weiterer essentieller Teil, der noch nicht umgesetzt werden muss, die die

Authentifikation über die Plattformen LDAP beziehungsweise Shibboleth. Über den

Login durch eines dieser Systeme können Aspekte wie die Benutzerrolle, die

Bildungseinrichtung und sonstige Informationen wie Email, richtiger Name und

Matrikelnummer abgefragt werden. Diese Nutzerdaten sind im derzeitigen Stand noch

eine freiwillige Angabe. Shibboleth und LDAP würden die mögliche Fehlerquelle von

Falschangaben auf ein Minimum reduzieren und auf ein Risiko absenken, das z.B. die

Notengebung auf Grundlage von Trackingdaten erlaubt.

Backend

Das Backend kann auf sinnvolle Codereduzierung geprüft werden. Theoretisch besteht

die Möglichkeit für jede Art der Datenbankanfrage eine universelle Funktion

bereitzustellen, die dann allerdings auf mehrere Parameter aus dem Frontend angewiesen

ist. Des Weiteren besteht die Option vom bisherigen System der asynchronen Callback

Funktionen auf ein Promise-System umzustellen, um mögliche Fehlerquellen weiter zu

reduzieren.

Tracking

Der Bereich des Monitorings von Nutzeraktivität kann noch um einige Faktoren erweitert

werden: es gibt einige pädagogische und soziologische Ansätze, die nahe legen neben der

individuellen Aktivität von Nutzern, auch Gruppendynamiken aufzuzeichnen und zu

analysieren. Des Weiteren sollen die bisher überwachten Faktoren von Qualität, Aktivität

und passiver Aktivität durch eine sehr passive Benutzung der Plattform wie dem Lesen

von Beiträgen und durch ein Querschnittsfeld, das aus den oben genannten Faktoren

erstellt wird ergänzt werden.

44

Danksagung

Vielen Dank an Professor Doktor Michael Kipp, für das Thema und die Betreuung dieser

Bachelorarbeit.

Außerdem den größten Dank an die Liebe meines (bisherigen) Lebens für Unterstützung

in allen Lebenslagen und natürlich das Korrekturlesen dieser Arbeit.

45

Anhang

Abbildung 36: Komplettes Datenbankschema PeerActivate


Bachelorarbeit Gestaltung - Michael Kippmichaelkipp.de/student/Rummelsberger2017.pdf · 5 1...

Documents

Transcript of Bachelorarbeit Gestaltung - Michael Kippmichaelkipp.de/student/Rummelsberger2017.pdf · 5 1...