MSP:Vision Document HUE "AJAX-Kurswahlliste"

Aus THM-Wiki
Wechseln zu: Navigation, Suche

Das folgende Dokument beschreibt in Form eines Vision Documents die Hausübung des Kurses Methoden des Softwareentwicklungsprozesses. Diese Hausübung wurde selbständig ausgewählt und in diesem Dokument beschrieben. Die Bewertung und Bearbeitung findet als Einzelnachweis statt.

Vision Document

Introduction

Im Rahmen des eStudy MSP-Projektes soll eine Hausübung erstellt werden. Diese zielt darauf ab, die Usability des eStudy durch die Verwendung von AJAX zu steigern. Im Speziellen soll hier die Anzeige der Kurswahlliste des eStudy durch AJAX-Funktionen statt finden

Business Needs/Requirements

  • Human Ressources (2x20 Stunden)
  • JQuery-Ajax Scripts
  • eStudy
  • PHP5
  • Web 2.0 compatible Browser

Product/Solution Overview

Die Kurswahlliste des eStudy wird derzeit als Baum statisch angezeigt und muss mit jedem Ausklappen eines Teilbaums neu geladen werden. Dieses Problem soll mittels im Hintergrund übertragenen Daten gelöst werden, um so die Geschwindigkeit der Interaktion mit dem Anwender zu steigern.


Der Baum sowie dessen Generierung soll gekapselt und möglichst generisch erfolgen, sodass der Baum auch an anderen Stellen implementiert werden kann.

  • Es soll folgende Funktionalität geschaffen werden:
    • Darstellung des Baumes
    • beliebige Schachtelung der Äste
    • Hinterlegen der Links/Parameter für das Öffnen der Inhalte

Major Features (Optional)

Wie in Product/Solution beschrieben.

Scope/Limitations

  • Die Barierrefreiheit muss erhalten bleiben. Um dies zu realisieren wird ein Fallback auf den alten Baum beibehalten.
  • Die erzeugten Klassen müssen von den Modulverantwortlichen/Refactorern eingebunden werden


Implementierung

Zielsetzung war es einen Baum zu erstellen oder in das bestehende Design und den bestehenden Code eingebaut werden konnte um die Kursauswahl zu erleichtern und zu beschleunigen. Hauptmerkmale des Baums sollten die geringe Serverlast und der geringe Datentransfer für die Navigation innerhalb des Baums, sein. Dies wurde realisiert indem der Baum nur einmal übertragen wurde und danach die Unteräste dynamisch ausgeklappt/angezeigt wurden ohne weiteren Datentransfer zu benötigen.

Die bereits existierenden Navigationsklassen sollten wiederverwendet werden, um die Weiterentwicklung der Navigationskomponente einfach zu halten sowie bei der Implementation Zeit zu sparen.

Die Accessibility und die Kompatibilität sollten sichergestellt werden, indem der bereits bestehende Code als Fallback beibehalten werden soll. Somit sollte die Neuentwicklung bei ausgeschaltetem JavaScript nicht zu sehen sein.

Technische Argumentation

Zur erfolgreichen Implementation der Anwenderseite haben wir JQuery eingesetzt. JQuery beinhaltet alle nötigen Javascript-Grundfunktionalitäten um AJAX und XML-Dokumente innerhalb der Javascript-Umgebung effizient zu implementieren und verwenden. Des Weiteren haben wir einen bereits fertigen Javascript-Baum eingebunden, da dieser die grundlegende Funktionalität bereits mitbrachte. Die Verbindung der AJAX und Baumkomponente war mittels der JQuery-Bibliothek relativ schnell zu implementieren. Die Vorteile der bereits vorgefertigten abstrakten Baumkomponente lagen auf der Hand: weniger Aufwand, schnelle Integration durch gute Dokumentation. Damit blieb mehr Zeit für andere aufwändigere Baustellen, welche das Budget letztendendes gänzlich aufbrauchten.

Da der vorgefertigte Baum komplett abstrakt war, haben wir es vorgezogen ihn in dieser Form möglichst zu erhalten, um z.B. zukünftigen Entwicklerteams die Möglichkeit zu geben diesen innerhalb anderer Module des eStudys zu verwenden. So mussten nur kleine Änderungen vorgenommen werden um mit den eStudy CSS konform zu sein. Der Kernteil und die Individualisierung des Baumes zu einer Kurswahlliste finden innerhalb des Backends, direkt an dem Modul der Kurswahlliste statt.

Um das vorhandene Klassenkonzept im Backend der Kurswahlliste nicht gänzlich zu zerstören haben wir eine Schicht eingeführt, welche das Modul der Kurswahlliste nur abfragt und somit die problemlose Weiterentwicklung des ursprünglichen Codes der Kurswahlliste zulässt. Wir haben versucht die Schnittstelle dahingehend auf ein Minimum zu reduzieren und maximal eine Überladung von Funktionen innerhalb der Klassen zu schreiben, welche die Klassen um XML-Fähigkeiten erweitert. Wie in den Anforderungen beschrieben wurde so die komplette javascriptlose Ansicht gewahrt, sodass nicht Javascript fähige Browser dennoch eine Kurswahlliste darstellen können.

Probleme

Beim Implementieren der Kurswahlliste sind diverse Probleme aufgetreten, die die Entwicklung zusätzlich beeinträchtigt haben. Dazu zählt unter anderem dass wir während der Implementation lernen mussten, dass JavaScript im eStudy besser funktioniert wenn er am Seitenende eingebunden wird. Da wir dies aber in keiner Dokumentation finden konnten haben wir dies durch aufwändiges Testen herausfinden müssen. Das Backend sollte an die bestehenden Klassen angeschlossen werden damit die bereits existierenden Funktionen weiter benutzt werden können und Refaktorisierungsgruppen nicht an mehreren Stellen Code ändern müssen. Allerdings stellte sich heraus, dass die bestehenden Klassen ineinander verschachtelt sind und zudem extrem groß geraten sind, so dass das Verstehen des existierenden Codes einige Zeit in Anspruch nahm (Bad Smell: Large Class). Zudem funktionierten nicht alle Methoden wie erwartet, weswegen es überhaupt erst nötig war den existierenden Code zu lesen und zu verstehen. Auf Grund der knappen Zeit wurden die Probleme im Code bestehen gelassen. Hinzu kommt dass der Funktionsaufruf "generateTree($parent = 0, $includeLeafs = false)" den Anschein erweckt, dass die Leafs standardmäßig nicht mitgeneriert werden. Schaut man sich jedoch die zugehörige SQL-Query an

$res = $this->db->get_results("SELECT * FROM coursetree WHERE parentID='$parent'" . (($includeLeafs) ? " AND (type='node' OR type='node_ecom')": ));

so stellt man fest, dass hier unbedacht programmiert wurde. Diese falsche Bezeichnung sorgt für unter anderem für die starken Performanceprobleme des Kursmoduls, da hier bei jedem Laden der Seite ein Baum mit allen vorhandenen Einträgen generiert wurde und mehrfach rekursiv verarbeitet wurde.

Schnittstelle AJAX/PHP

Die Schnittstelle basiert auf XML und ist durch folgendes XML-Schema definiert.

<?xml version="1.0" encoding="UTF-8"?>

<xsd:schema xmlns:xsd="http://www.w3.org/2001/XMLSchema" elementFormDefault="qualified">
    <xsd:complexType name="node">
        <xsd:sequence>
            <xsd:element name="id" type="xsd:string"/>
            <xsd:element name="pid" type="xsd:string"/>
            <xsd:element name="ih" type="xsd:string"/>
            <xsd:element name="title" type="xsd:string"/>
            <xsd:element name="href" type="xsd:string"/>
            <xsd:element name="icon" type="xsd:string"/>
            <xsd:element name="iconopen" type="xsd:string"/>
        </xsd:sequence>
    </xsd:complexType>
    <xsd:element name="tree">
        <xsd:complexType>
            <xsd:sequence maxOccurs="unbounded">
                <xsd:element name="node" type="node"/>
            </xsd:sequence>
        </xsd:complexType>
    </xsd:element>
</xsd:schema>

Serverseitig muss darauf geachtet werden, dass nichts gesendet wird und als Content-Type explizit XML übergeben wird bevor der eigentliche Inhalt übertragen wird. Dazu zählt auch, dass keine Dateien geladen werden die Ausgaben erzeugen. Hierzu gehören auch Dateien die am Dateiende eine leere Zeile besitzen, da selbst diese schon als Ausgabe zu werten sind. Eine Möglichkeit wäre es das PHP-Endtag zu entfernen, diese Variante wird beispielsweise in der Open-Source Groupware eGroupware verwendet um Problemen mit Cookies aus dem Weg zu gehen.

Abstraktion des Baums

Das Frontend und die XML-Kommunikation sind generisch gehalten, damit sie auch in anderen Komponenten wie beispielsweise das Modul "Dateien & Links" diesen Baum verwenden können. Das Backend konnte aufgrund der Anbindung an die bestehenden Klassen innerhalb von 20 Stunden nicht zu einer generischen Implementierung gebracht werden. Das Frontend kann wie weiter unten beschrieben mit minimalen Änderungen auch in anderen Modulen betrieben werden und könnte so relativ einfach alle existierenden Bäume im eStudy ersetzen.

Vergleich mit Baumimplementierung von Jan Marco Müller

Zeitgleich wurde eine zweite Implementierung von Herrn Jan Marco Müller erstellt. Diese unterscheidet sich stark in den verwendeten Techniken. Die Lösung von Herrn Müller ist eine Komplett-Refaktorisierung des Moduls "Kurse/eCommunities" und setzt auf eine MVC-Schicht. Der Baum wird jedoch nicht komplett am Stück übertragen, sondern es werden immer nur Teilbäume nachgeladen die grade angefordert wurden. Hier ist bei jedem Klick im Baum jedoch ein Nachladen erforderlich, was beim Benutzen der Seite zu Verzögerungen führen kann. Durch Effekte ist das Nachladen der Seite optisch geglättet, jedoch kostet dies weiterhin Zeit beim Laden. Aus diesem Grund ist der erste Seitenaufruf bei Herrn Müller etwas schneller als bei unserer Implementierung, jedoch lässt sich mit unserer Lösung schneller durch den Baum navigieren. Technisch gesehen ist die Lösung von Herrn Müller jedoch kein AJAX, da nur POST-Anfragen gestellt werden und HTML-Teilbäume zurückübertragen werden.

Anleitung zum zukünftigen Einbau

Um die AJAX-*Wahlliste in andere Module zu übertragen muss lediglich der JavaScript eingebunden werden und ein wenig Logik in der Seite integriert werden. Im Backend muss allerdings eine spezielle Generierung der Daten vorgenommen werden, die dann dem XML-Schema entsprechen. Dazu muss in der Seite lediglich '/courses/classes/class.treeview_ajax.inc.php' eingebunden werden bzw eine angepasste Version dieser Datei eingebunden werden. Zusätzlich muss im Backend eine Klasse angelegt werden, die Daten in das XML-Format bringt und auf Anfrage an die Weboberfläche schickt.