social_media_platform/doc/bachelorarbeit_EstherKleinhenz/chapters/framework.tex

\chapter{Framework}
\label{ch:framework}
Um die Website-Erweiterung realisieren zu können, wird zunächst festgelegt, welche Programmierschnittstellen verwendet werden. Im Web-Backend fällt die Wahl auf die objektorientierte Sprache Python, die serverseitig anwendbar ist. Der Programmaufbau Pythons macht den Code leicht lesbar und die einfache Syntax ermöglicht eine strukturierte Implementierung der Website (vgl. [Ndu17]). Durch den modularen Aufbau ist es selbst für unerfahrene Entwickler möglich, die Sprache schnell zu erlernen. Darüber hinaus bringt Python verschiedene Web-Service Tools mit sich, die beim Implementieren einer Website viel Zeit sparen und das Aneignen von komplexen Protokollen redundant machen (vgl. [Sol17]).
Das dazugehörige Framework Django reduziert den Entwicklungsaufwand eines Prototypen erheblich und ist daher als zielführendes Framework die beste Wahl.

\section{Django}
Django ist ein Web-Framework, das eine schnelle, strukturierte Entwicklung ermöglicht und dabei ein einfaches Design beibehält. Der darin enthaltene Model-View-Presenter (MVP) kann, ähnlich wie der Model-View-Controller, die Interaktionen zwischen Model und View, die Auswahl und Ausführung von Befehlen und das Auslösen von Ereignissen steuern (vgl. Abbildung 2.1). Da die View aber hier bereits den Gro"steil des Controllers übernimmt, ist der MVP eine Überarbeitung. Der Teil, der Elemente des Modells auswählt, Operationen durchführt und alle Ereignisse kapselt, ergibt die Presenter-Klasse (vgl. [She09]). Durch die direkte Bindung von Daten und der View, geregelt durch den Presenter, wird die Codemenge der Applikation stark reduziert. 

\begin{figure}[!h]
\centering
\includegraphics[width=0.6\textwidth]{figures/MVP}
\caption{Vereinfachter MVP [She09]}
\hfill
\end{figure}    

Der Prozess vom Anfragen der URL über den Server bis hin zur fertig gerenderten Website kann wie folgt vereinfacht dargestellt werden. 

Der User gibt eine URL im Browser ein und sendet sie an den Web-Server. Das Interface WSGI (Web Server Gateway Interface) am Web-Server verbindet diesen mit dem Web-Framework, indem es den Request zum passenden Objekt weiterleitet. Hier wird der Applikation eine Callback-Funktion zur Verfügung gestellt (vgl. [Kin17]). Au"serdem werden folgende Schritte durchgeführt:
\begin{itemize}
\item Die Middleware-Klassen aus der \texttt{settings.py} werden geladen
\item Die Methoden der Listen Request, View, Response und Excpetion werden geladen
\item Die angeforderte URL wird aufgelöst 
\end{itemize}

Der WSGI-Handler fungiert als Pförtner und Manager zwischen dem Web-Server und dem Django-Projekt.
Um die URL aufzulösen, benötigt WSGI einen \textit {urlresolver}\footnote{ Urlsresolver verknüpft Url-Muster mit den passenden Views.} 
(vgl. [Dja18b]). Durch die explizite Zuweisung der vorhandenen Seiten kann dieser über die regulären Ausdrücke der \texttt{url.py}-Datei iterieren. Gibt es eine Übereinstimmung, wird die damit verknüpfte Funktion in der View (\texttt{views.py}) aufgerufen. Hier ist die gesamte Logik der Website lokalisiert. Unter anderem ist es möglich auf die Datenbank der Applikation zuzugreifen und Eingaben des Users über eine Form zu verarbeiten. Anschlie"send werden die Informationen der View an das Template weitergereicht. Es handelt sich dabei um eine einfache HTML-Seite, in der der strukturelle Aufbau im Frontend festgelegt wird. Die Informationen der View können hier zwischen doppelt-geschweiften Klammern eingebunden und, wenn nötig, mit einfachen Python-Befehlen angepasst werden. Das Template kann dann die vom WSGI-Framework zur Verfügung gestellte Callback-Funktion befüllen und eine Response an den Web-Server schicken. Die fertige Seite ist beim Klienten im Browserfenster zum Rendern bereit (vgl. [Kin17], Abbildung 2.2.).    

\begin{figure}[!h]
\centering
\includegraphics[width=0.5\textwidth]{figures/request-response-cycle}
\caption{Request-Response-Kreislauf des Django Frameworks [Nev15]}
\hfill
\end{figure}

\subsection {Besonderheiten Djangos}
Das Django-Framework bringt einige Besonderheiten mit sich, die beim Implementieren des Prototypen von Bedeutung sind. Diese werden im Folgenden beschrieben.

Die Administratoroberfläche ist eines der hilfreichsten Werkzeugen des gesamten Frameworks. Es stellt die Metadaten der Modelle aus dem Code visuell dar. Verifizierte Benutzer können die Daten nicht nur schnell erfassen, sondern diese auch editieren und verwalten. Das Recht, das Admin-Backend uneingeschränkt zu nutzen, ist dem \textit{Superuser}\footnote{ Superuser ist ein Benutzer, der alle Zugangsrechte im Framework erhält.} vorenthalten. Dieser kann beim erstmaligen Zuweisen nur über die Kommandozeile eingerichtet werden. Ist bereits ein Superuser vorhanden, kann dieser im Admin-Backend weiteren Benutzern den gleichen Handlungsfreiraum einräumen. Zudem gibt es noch weitere Stufen der Zugangsberechtigungen, Staff- und Active-Status, die für eine breitere Gruppe von Benutzern geeignet ist.
Um die gestaffelten Zugangsberechtigungen auch auf der Website umsetzen zu können, stellt Django verschiedene Dekoratoren zur Verfügung. Soll eine bestimmte Seite nur von authentifizierten Benutzern besucht werden können, kann die Funktion mit einem Dekorator versehen werden: 
\\
\begin{addmargin}[0pt]{0pt} 
\noindent\hspace*{10mm}%
\texttt{\makeatletter @login\_required}
\\
\end{addmargin}
Natürlich lassen sich Dekoratoren auch für andere Zwecke vor Funktionen platzieren. Unter anderem werden so die Views vor möglichen Angriffen, wie \textit{Cross-Site-Scripting}\footnote{ Cross-Site-Scripting kann Webseiten verändern oder Passwörter abgreifen.}, geschützt. 

Durch den einfachen Aufbau ist es au"serdem möglich, Dekoratoren selbst zu implementieren. Ein einfaches Beispiel wäre das Prüfen des an die Funktion übergebenen Parameter. Sollen nur positive Zahlen verarbeitet werden, so kann der Decorator alle anderen Eingaben abfangen. 


\subsection{Virtuelle Umgebung}

Wird eine prototypische Anwendung gestartet, ist es notwendig, verschiedenste Module zu verwenden und zu testen. Die Versionen dieser Module spielen hierbei eine entscheidende Rolle, um Konflikte zu vermeiden (vgl. [Fou18]). Um diesem Problem vorzubeugen, wird eine virtuelle Umgebung implementiert. Sie besitzt einen eigenen Projektpfad, beinhaltet alle nötigen Pakete und Bibliotheken, und lässt sich nach dem Einrichten im Terminal starten. Abbildung 2.3. zeigt das Erstellen eines neuen Ordners, das Erstellen der virtuellen Umgebung und den Aktivierungsbefehl. Ist der Name des Environments in Klammern am Kommandozeilenanfang, bedeutet das, dass diese jetzt aktiv ist.

\begin{figure}[!h]
\centering
\includegraphics[width=0.7\textwidth]{figures/virt-env-terminal}
\caption{Erstellen der virtuelle Umgebung im Terminal}
\hfill
\end{figure}

Um die Pakete und Module kollisionsfrei zu installieren, ist es empfehlenswert, einen Package-Manager zu verwenden. Mit \textit{pip}\footnote{ pip ist das rekursive Akronym für pip Install Packages. } (vgl. [Wei17, K. 23.1]) können diese installiert, geupdated und gelöscht werden. Au"serdem kann der Manager Abhängigkeiten, wenn nötig, überschreiben und optimieren. Falls ein sich von der neuesten Version unterscheidendes Programm installiert werden soll, so ist dies ebenso möglich.

\subsection{Sicherheit}
Beim Implementieren einer Website ist das Absichern vor schädlichen Attacken heutzutage unabdingbar. Django aktiviert einige Funktionen zum Schutz bereits beim Projektstart automatisch. Dazu gehört das Abwehren von \textit{Cross-Site-Scripting}, \textit{SQL-Injektion}\footnote{ SQL-Injection nutzt mangelnde Überprüfung von Metazeichen um Datenbankabfragen zu verändern.}, \textit{Clickjacking}\footnote{ Clickjacking ist eine Überlagerung von Internetseiten um Klicks zu manipulieren.}
und die Sicherstellung der \textit{Session-Security}\footnote{ Session-Security setzen Cookies auch für Subdomäne beim Client. }.

Sollen die Formulare des Prototypen gegen \textit{Cross-Site-Request-Forgery} geschützt werden, muss aktiv ein \textit{Token} im Template gesetzt werden. 

Ein solcher Angriff tritt auf, wenn über einen bösartigen Link, eine Formularschaltfläche oder einfach den eingebettetem JavaScript-Code die Daten im Server verändert werden sollen. Hierbei nutzt der Angreifer die Rechte eines eingeloggten Benutzers und kann somit Informationen im Backend verfälschen. Um dies zu verhindern, wird im Template des Prototypen zwischen den Form-Tags der \textit{crsf-Token}\footnote{ Token sind Komponente die eine Zugriffskontrolle von Benutzer druchführen können.} 
eingefügt. Der Token setzt einen Cookie mit einer verschlüsselten Zufallszahl. Das Gleiche passiert im Template, wo ein für den Benutzer nicht sichtbares Form-Feld die gleiche verschlüsselte Zufallszahl erhält. Beide Zahlen erhalten zudem einen \textit{Salt}, einen generierten Zusatzwert, der das Entschlüsseln dieser um ein vielfaches erschwert. Wird ein Request gesendet, vergleicht eine von Django initialisierte \textit{Middleware}\footnote{ Middleware ist ein Plug-in, dass Anfrage- und Antwortverarbeitung durchführt.} beide Zahlen. Stimmen diese nicht überein, hat also ein Dritter die Informationen manipuliert, wird der 403 HTTP-Standard-Statuscode gesendet, welcher besagt, dass der Server eine Anfrage erhalten hat, diese aber nicht erfüllen wird.
Der \texttt{crsf-Token} greift nur, wenn der POST-Request innerhalb der eigenen Website gesendet wird und nicht über URLs, die au"serhalb des Frameworks liegen (vgl. [Fou18a]).

\section {Erweiterungen}
Django bringt viele hilfreiche Erweiterungen mit sich, die mit einem Packagemanager einfach in die virtuelle Umgebung geladen werden können. Um das passende Add-on für ein Projekt zu finden, bietet die Plattform djangopackages.org alle Erweiterungen in übersichtlichen Tabellen mit Eigenschaften und Bewertungen an. Eine Vielzahl an Bibliotheken wurden für diese Arbeit getestet, aber wegen mangelnder Kompatibilität oder Funktionalität als nicht hilfreich erachtet und deshalb hier nicht weiter erwähnt.
Die im Folgenden aufgeführten Bibliotheken sind im Prototyp zur Anwendung gelangt. 

\subsection {Taggable-Manager}
Um die Artikel besser priorisieren und die Informationsflut für Benutzer reduzieren zu können, wird im Prototyp mit Schlagwörtern gearbeitet. Django-taggit ist eine Erweiterung, die das Verwenden von Tags vereinfacht. Der darin enthaltene Taggable Manager setzt Django's Contenttype Framework ein, welches per Default verwendet wird, um die Modelle der Applikation zu verfolgen und diese durch generische Beziehungen zu verknüpfen. Die Felder \texttt{app\_label} und \texttt{model} machen die Modelle eindeutig zuweisbar. Instanzen des Contenttyps präsentieren und speichern die Informationen und erstellen automatisch neue Instanzen, wenn Modelle hinzugefügt werden. Zudem stehen Methoden zur Verfügung, die das Abrufen und Arbeiten mit Instanzen der einzelnen Modelle erleichtern.

Der Taggable-Manager ist jedoch nicht an das Contenttype-Framework gebunden (vgl. [Her16]). Durch die Verwendung eines echten Fremdschlüssels kann zum Beispiel die Performance und Referenzgarantie verwirklicht werden. Dazu ist lediglich die Erstellung einer eigenen \textit{Lookup-Tabelle}\footnote{ Eine Lookup-Tabelle speichert Daten statisch im Verhältnis zueinander.} notwendig, die die Entitäten zweier Tabellen direkt verlinkt, statt sie generisch zu verbinden. Weiterführend können Modelle in einem benutzerdefinierten Modell vereint werden, sodass der Zugriff darauf einheitlich geschieht. Au"serdem ist es möglich, Primary-Keys zu verwenden, die nicht aus ganzen Zahlen bestehen, sondern aus Buchstaben und Wörtern.

Um django-taggit zu installieren, wird der folgende Befehl in die Kommandozeile eingefügt (vgl. [Gay10]):
\\
\begin{addmargin}[0pt]{0pt} 
\noindent\hspace*{10mm}%
\texttt{\$ pip install django-taggit } 
\\
\end{addmargin}
Im ˜\texttt{model.py} wird das Feld \texttt{tag} neu erstellt und als Taggable Manager definiert.
Au"serdem muss taggit in der \texttt{settings.py} unter \texttt{INSTALLED\_APPS} ergänzt werden. Um dem Programm mitzuteilen, dass nun eine neue Liste der Datenbank hinzugefügt werden muss, werden über die Kommandozeile Migrations-Befehle ausgeführt, die im Kapitel Datenmodellierung genauer beschrieben werden.
Im Admin-Backend kann nun geprüft werden, ob das neue Feld in die Datenbank integriert wurde und neue Tags können in das Textfeld eingetragen werden. Der Parser verarbeitet jede Eingabe, die durch ein Komma oder ein Leerzeichen getrennt ist als einen Tag. Soll der Tag jedoch aus mehreren Wörtern bestehen, so müssen diese mit Anführungszeichen umfasst werden. Standardmä"sig unterscheidet der Taggable Manager zwischen Gro"s- und Kleinschreibung, Tags sind also case sensitive.

\subsection {Hilfsbibliotheken}
Weitere Add-ons werden geladen, um kleinere Funktionen der Website einfach umsetzen zu können. 

Zu diesen gehört \texttt{django-taggit-templatetags}, welches durch die Einbindung im HTML-File die Tags der Applikation als Liste ausgibt. Au"serdem lassen sich die eingepflegten Tags als Cloud visualisieren. Kommen bestimmte Schlagwörter öfter vor als andere, so werden sie entsprechend grö"ser dargestellt.

\texttt{Django-hitcount} dient zum zählen der Besucher einer Seite (vgl. [Tim15]). Es lässt sich auf drei verschiedene Arten in die Applikation einbinden. Der schnellste Weg ist die Darstellung der Besuche mit Hilfe eines Template Tags im HTML-File. Möchte man die Anzeige aber individueller gestalten, so kann durch das integrieren der \texttt{HitCountDetailView} in \texttt{views.py} die Variable \texttt{hitcount} verwenden und im Frontend ausgeben. Eine weitere Möglichkeit ist das Erweitern oder neu Erstellen eines Models im Django Backend. Von dort kann auf das neue Feld im Django-Admin-Backend zugegriffen werden, ebenso wie von der View und vom Template. Die im Add-on integrierten Einstellungen, die in der \texttt{settings.py} ergänzt werden müssen, ermöglichen unter anderem das Begrenzen der Lebensdauer des Zählers, bevor dieser zurück gesetzt wird.

Zum Versenden und Verwalten von E-Mails in Django eignet sich \texttt{django-post-office} (vgl. [Ong18]). Nach der Installation kann im Admin-Backend ein E-Mail-Template angelegt, Anhänge verwaltet und das Versenden dieser im Log überprüft werden. Es ist möglich die Benachrichtigungen mithilfe eines eines Shell-Skript des Frameworks \texttt{Cron}\footnote{ Cron dient zur zeitbasierten Ausführung von definierten Aufgaben.} asynchron zu versenden. Der Inhalt kann Text oder HTML-basiert sein und in mehreren Sprachen hinterlegt werden.


\section{Bootstrap}
Um die Usability des Prototyps zu erhöhen, wird das Framework Bootstrap eingebunden. 

Eine umfangreiche Website einheitlich zu gestalten ist oft sehr komplex und zeitaufwendig. Die Entwickler von Twitter haben deshalb an einem neuen Verwaltungswerkzeug gearbeitet, das mehrere Bibliotheken zusammenführen sollte (vgl. [Ott11]). Die Open-Source-Bibliothek, die auf GitHub abrufbar ist, wird seitdem von vielen  Programmierern weiterentwickelt und ist somit stark gewachsen. Ab Version 2.0 verfügt diese über die Fähigkeit, Websites \textit{responsiv}\footnote{ Responsive Webseiten sind auf allen Endgeräten angepasst darstellbar.} auf verschiedenste mobile Endgeräte anzupassen (vgl. [Ott12]).

Das Bootstrap-Paket beinhaltet vorgefertigte Cascading Stylesheets, kurz CSS, die Farben, Schriftarten und viele weitere Stildefinitionen implizieren. Zudem befinden sich auch Erweiterungen des JavaScript-Frameworks jQuery in der Bibliothek, die weiterführende Funktionen beinhalten wie zum Beispiel Filter oder Dropdown-Menüs. Das Paket kann im head-tag einer HTML-Datei (vgl. Abbildung 2.4.) einfach eingebunden werden. Das bedeutet, dass \textit{Media-Queries}\footnote{ Media-Qeries setzen statische Umbrüche um Layouts verschiedener Endgeräte anzupassen.} oder ähnliche Methoden nicht mehr nötig sind - nicht nur um eine Website mobilfähig zu machen, sondern auch kompatibel für die verschiedensten Browser (vgl. [Boo12]).

\begin{figure}[!h]
\centering
\includegraphics[width=1\textwidth]{figures/bootstrap-head-tag}
\caption{Einbindung von Bootstrap in einer HTML-Datei}
\hfill
\end{figure}

Durch das Einbinden von Bootstrap in einer HTML-Datei werden einige Styles bereits automatisch auf die darin vorkommenden Tags, wie Links und Überschriften, angewendet. Dies ist jedoch nur ein sehr kleiner Teil, den die Bibliothek zur Verfügung stellt. Bootstrap lässt sich umfangreicher nutzen, indem Stildefinitionen mit Klassen oder ID's in diverse HTML-Tags eingetragen werden (vlg. Abbildung 2.5.).

\begin{figure}[!h]
\centering
\includegraphics[width=1\textwidth]{figures/bootstrap-class-example}
\caption{Bootstrap-Klassen in HTML-Tag}
\hfill
\end{figure}

Möchte man bestimmte gestalterische Eigenschaften von Bootstrap überschreiben, muss eine eigens verfasste CSS-Datei nach der Verlinkung von Bootstrap in die Website eingebunden werden. Der Parser liest die Datei von oben nach unten, links nach rechts. Liest dieser also zu erst die Bootstrap Bibliothek und speichert diese, so überschreiben die Styles, die danach kommen, die bereits gelesenen Eingaben. Die Styles, die inline auf ein Tag angewendet werden, sind somit die bestimmenden Eigenschaften.