bachelorarbeit gestaltung - michael kippmichaelkipp.de/student/rummelsberger2017.pdf · 5 1...
TRANSCRIPT
Verfasser der Bachelorarbeit:
Philipp Rummelsberger
Firnhaberstraße 31
86159 Augsburg
Fakultät für
Gestaltung Bachelorarbeit
Studienrichtung
Interaktive Medien
Philipp Rummelsberger
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
Philipp Rummelsberger
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
Quelle: Eigene Darstellung.
Abbildung 7: Verwendung von Icons in PeerActivate
Quelle: Eigene Darstellung.
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
Quelle: Eigene Darstellung.
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
Quelle: Eigene Darstellung.
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
Quelle: Eigene Darstellung.
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
Quelle: Eigene Darstellung.
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
Quelle: Eigene Darstellung.
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
Quelle: Eigene Darstellung.
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
Quelle: Eigene Darstellung.
Abbildung 16: Übersicht der verwendeten Icons
Quelle: Eigene Darstellung.
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
Quelle: Eigene Darstellung.
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
Quelle: Eigene Darstellung.
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
Quelle: Eigene Darstellung.
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
Quelle: Eigene Darstellung.
Abbildung 21: Angular dependency injection – Performance durch modularen Aufbau
Quelle: Eigene Darstellung.
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
Quelle: Eigene Darstellung.
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
Quelle: Eigene Darstellung.
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
Quelle: Eigene Darstellung.
Abbildung 25: Datenbankschema User
Quelle: Eigene Darstellung.
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
Quelle: Eigene Darstellung.
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
Quelle: Eigene Darstellung.
Abbildung 29: Mongo Chef Core - 3T Software Labs
Quelle: Eigene Darstellung.
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
Quelle: Eigene Darstellung.
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
Quelle: Eigene Darstellung.
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
Quelle: Eigene Darstellung.
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
Quelle: Eigene Darstellung.
Abbildung 35: D3 Grafik – Gruppiertes Säulendiagramm
Quelle: Eigene Darstellung.
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.