Modul 335 - Chatroomapp

Inhaltsverzeichnis

1 Anforderungsdefinition
2 Datenmodell
3 Datenflussdiagramm
4 Architektur-Beschreibung
- 4.1 Verwendete Technologien
- 4.2 Design
5 Screenshots
6 Testfall-Matrix
- 6.1 Anforderungs-Testing
- 6.2 Input-Testing
7 Ausblick / Verbesserungsmöglichkeiten
8 Fazit

Anforderungsdefinition

Ausgangslage

Hinsichtlich der freien Kommunikation zwischen mehreren Teilnehmern besteht aktuell die Notwendigkeit einer Plattform, welche die entsprechenden Funktionen mobil und Plattform unabhängig zur Verfügung stellt.

Diesbezüglich soll eine Applikation entwickelt werden, welche es beliebig vielen Teilnehmern ermöglicht miteinander über Textnachrichten zu kommunizieren, ohne Ihre Identität zwingend preisgeben zu müssen.

Die Anwendung soll möglichst unkompliziert funktionieren und ohne Registrierung auskommen.

Funktionelle Anforderungen

Serverseitige Anforderungen

Die Kommunikation zwischen der Anwendung und der Datenbank soll mittels PHP realisiert werden
Die PHP Engine soll auf AJAX Calls korrekt reagieren
Input Serverseitig validieren

Clientseitige Anforderungen

Das Grundgerüst soll in HTML 5 bereitgestellt werden
Eine Chatengine soll in Javascript / JQuery bereitgestellt werden
Ein Client soll einen Chatroom erstellen oder bestehenden Chatrooms beitreten können
Der Nutzer soll beim Betreten eines Chats einen Benutzernamen wählen können

Datenbank Anforderungen

Jeder User soll mit einer ID in einer Tabelle abgelegt werden
Jeder neu erstellte Chatroom soll in einer eigenen Tabelle abgelegt werden
Nachrichten sollen in einer eigenen Tabelle abgelegt werden mit einer Referenz zum User sowie dem Chatroom

Nicht funktionelle Anforderungen

Optionale Anforderungen

Die Applikation soll als Nativeapp über Phonegap bereitgestellt werden
Die Identifikation eines Nutzers erfolgt über die MAC-Adresse
Der Nutzer soll Chatrooms Themenspezifisch erstellen / filtern können

Usecases

Die folgenden grundlegenden Usecases sollen umgesetzt werden

Storyboard


Name	Beschreibung	Mock-Up
Welcome Screen	Der erste Screen der erscheint, wenn die Applikation gestartet wird. Der Benutzer kann entscheiden, ob er einen bestehenden Chatroom betreten oder einen neuen erstellen will. Ebenso kann er einen Nicknamen auswählen, der dann im Chat angezeigt wird.
Choose Chatroom	Wenn der Benutzer im Welcomescreen die Option Chatroombetreten gewählt hat, erscheint dieser Screen. Der Benutzer kann einen Chatroom aus der Liste auswählen und diesen mit einem Klick auf die Schaltfläche "Chatroom betreten" betreten.
Create Chatroom	Wenn der Benutzer im Welcomescreen die Option Chatroom erstellen gewählt hat, erscheint dieser Screen. Der Benutzer kann einen Namen für den neuen Chat eingeben und diesen mit einem Klick auf "Chatroom erstellen" erstellen. Dabei tritt er auch automatisch diesem Chat bei.
Read Chat	Wenn der Benutzer entweder mittels betreten oder mittels erstellen einen Chatroom betreten hat, kann er in diesem Screen die alle erstellten Nachrichten lesen.
Write Chat	Der Benutzer kann nun über die Eingabezeile eigene Beiträge verfassen
Chat Menu	Der Benutzer kann über das Chatmenu den Chatroom wechseln, den eigenen Benutzernamen ändern oder alle aktuellen Benutzer, die sich aktuell im Chat befinden anzeigen.

Datenmodell

Das grundlegende Datenbankmodell soll wie folgt aussehen

Datenflussdiagramm

Der Datenfluss soll der folgenden Grundstruktur folgen. Hierbei gilt zu beachten, dass dass technisch gesehen die Javascript Komponente nicht direkt mit der PHP Komponente kommuniziert, sondern der Apacheserver als Schnittstelle dazwischen stehen würde. Diese Tatsache wurde im Diagramm nicht veranschaulicht, da dies aus Programmiertechnischer Sicht nicht relevant ist.

Architektur-Beschreibung

Verwendete Technologien

Die Architektur baut auf HTML5, CSS3, Javascript, MySQL, AJAX und jQuery Mobile. Die Benutzeroberfläche(Frontend) ist in HTML5 implementiert, die über eine AJAX-Schnittstelle mit dem PHP-Backend kommuniziert. Ebenfalls sind im Frontend Scripts zum Beispiel zur automatischen Weiterleitung implementiert. Der Abschnitt "Datenfluss-Diagramm" stellt die verwendeten Technologien bildlich dar.

Über das PHP-Backend wird die MySQL-Datenbank bewirtschaftet. MySQL-Datenbank sowie PHP-Backend laufen auf einem Apache-Server. Nach der Eingabe des Benutzernamens wird dieser in der User-Tabelle gespeichert. Dasselbe gilt nach der Eingabe des Chatroomsnamens. Jede im Chat gesendete Nachricht wird in der Datenbank gespeichert und kann somit wieder abgerufen und einem Benutzer zugeordnet werden.

Für die komfortable Bedienung auf mobilen Geräten wurde jQuery Mobile verwendet. Dies erlaubt eine reibungslose Darstellung der Webapp auf Smartphones und Tablets. Die data-role="page"-Funktion von jQuery erlaubt es, praktisch die gesamte App auf einer einzigen HTML-Seite zu implementieren. Für den Benutzer erscheint diese jedoch trotzdem als mehrere Seiten.

Die Implementation ermöglicht es, mehrere Chatroom-Instanzen zu erstellen und gleichzeitig zu betreiben.

Das Zusammenspiel dieser Komponenten erlaub eine einfache Erweiterung der Applikation in der Zukunft.

Design

Verwendete interne Ressourcen:

index.html: Login Formulare für Eingabe des Nicknamens und Chatroomnamens, sowie Auswahl eines Chatrooms. In der index.html befindet sich auch die eigentliche Chat-Applikation.
process.php: Dient als serverseitige Schnittstelle zwischen Client und MySQL-Datenbank.
script.js: Beinhaltet Scripts für die Chat-Funktionalität, sowie für das Übergeben des Nicknamens und des Chatroomsnamens an die PHP-Schnittstelle.
formular.css: Stylesheets für das Website-Design.

Verwendete externe Ressourcen und Libraries:

Die externen Libraries werden für die Verwendung von jQuery Mobile zwingend benötigt.

In der index.html sind alle 4 Seiten der App festgelegt. Es sind dies:

Die Welcome-Page mit dem Formular zur Eingabe des Nicknames. Diese Seite ruft das für den Eintrag des Benutzernamens in die Datenbank zuständige Skript auf.
Die Join-Page zur Auswahl eines bestehenden Chatrooms. Diese Seite listet anhand eines Skripts alle zur Verfügung stehenden Chatrooms aus der Datenbank auf.
Die Create-Page zur Erstellung eines neuen Chatrooms. Diese Seite ruft das für den Eintrag des Chatrooms in die Datenbank zuständige Skript auf.
Die Chat-Page mit der eigentlichen Chat-Funktionalität. Diese Seite ruft die für die Chat-Funktionalität zuständigen Scripts auf.

Die process.php dient vor allem zur Kommunikation mit der Datenbank. Hier sind alle Fälle festgelegt, die anhand von Scripts aufgerufen werden. Folgende Fälle werden behandelt:

"Update" des Chats falls neue Nachrichten vorhanden sind.
"Send" EIntragen einer neu gesendeten Nachricht in die Datenbank.
"Chaterstellen" Eintragen eines neuen Chatrooms in die Datenbank.
"Usererstellen" Eintragen eines neuen Users in die Datenbank.
"Chatanzeigne" Holt eine Liste aller Chatrooms aus der Datenbank.
"Chatauswaehlen" Liest die Chatroom-ID des ausgewählten Chatrooms aus der Datenbank aus.

Screenshots


Eingabe Nickname	Betreten existierender Chat	Neuen Chat erstellen	Unterhaltung

Eingabemaske für die Eingabe des Nicknamens	Auswahlbildschirm für die Wahl des Chatrooms	Eingabemaske für die Erstellung eines neuen Chatrooms	Anzeige der Nachrichten innerhalb eines Chatrooms

Testfall-Matrix

Anforderungs-Testing


Testphase 1	Erwarteter Output	Ok?
Reagiert die PHP Engine korrekt auf AJAX Calls?	Ja	Ja
Werden die Inputs Serverseitig validiert?	Ja	Ja
Ist das Grundgerüst in reinem HTML 5 bereitgestellt?	Ja	Ja
Ist die Chatengine in Javascript/JQuery bereitgestellt worden?	Ja	Ja
Kann der User einen Chatroom erstellen?	Ja	Ja
Kann der User einem bestehenden Chatrooms beitreten?	Ja	Ja
Kann der User einen Benutzernamen wählen?	Ja	Ja
Werden User richtig in der Datenbank gepseichert?	Ja	Ja
Werden neu erstellte Chatrooms richtig in der Datenbank gespeichert?	Ja	Ja
Werden Nachrichten richtig in der Datenbank gepseichert?	Ja	Ja
Funktioniert die Applikation als Nativeapp über Phonegap?	Ja	Ja

Input-Testing


Input-Validierung	Beispiel/Erwarteter Output	Ok?
Kann der User einen alphanumerischen Namen eingeben (login)?	Abc123	Ja
Wird der Name im Chatroom richtig dargestellt?	Ja	Ja
Fangt die Applikation eine leere Eingabe ab?	Nein	Nein
Ist das Namensfeld gegen SQL-injection gesichtert?	Ja	Ja
Fangt die Applikation eine leere Eingabe ab?	Nein	Nein
Ist das Chat-Namensfeld gegen SQL-injection gesichtert?	; DROP DATABASE;	Ja
Werden numerische Nachrichten angezeigt?	131224	Ja
Werden alphanumerischen Nachrichten gezeigt?	7hi5 is 4n 3x4mpl3.	Ja
Werden spezielle Zeichen richtig dargestellt?	這是一個例子	Ja
Werden die User des Chatrooms benachrichtigt, wenn neue Nachrichten erscheinen?	Ja	Ja
Ist das Nachrichtenfeld gegen SQL-injection gesichtert?	Ja	Ja
Werden alten Nachrichten wieder im Chatroom angezeigt?	Ja	Ja

Ausblick / Verbesserungsmöglichkeiten

Der momentane Stand der App erfüllt alle an die Chat-App gestellten funktionellen Anforderungen. Sie ist voll funktional.

Trotzdem sehen wir noch diverse Verbesserungsmöglichkeiten.

Beispielsweise könnte die Kommunikation zwischen Client und Server via Websockets umgesetzt werden. Durch eine korrekte Implementation der Websockets könnte die Serverlast deutlich reduziert werden. Dies hätte jedoch noch deutlich mehr Zeit in Anspruch genommen.

Ebenfalls wäre eine Funktion zur Anzeige aller momentan im Chat anwesenden User sowie deren Nachrichten-History wünschenswert.

Momentan ist es sehr einfach einen Chat aus der Liste auszuwählen, da die Anzahl der verfügbaren Chats noch klein ist. Mit zunehmender Anzahl der Chatrooms wäre jedoch eine Filterfunktion wünschenswert.

Ein nettes Gimmick wäre eine Funktion zur Geolokalisierung der anwesenden User. Dieses müsste dann via Native App umgesetzt werden.

Zur Zeit werden beim betreten eines bestehenden Chatrooms alle je geschriebenen Nachrichten automatisch geladen und angezeigt. Aus Performance-Gründen, wäre es wünschenswert, dass beispielsweise nur die Nachrichten der letzten 24 Stunden geladen werden. Die wäre mit einer Datenbank-View realisierbar.

Fazit

Durch das Projekt konnten wir viel Erfahrung im Bereich App-Entwicklung für Mobile Devices sammeln.

Wir konnten bereits Gelerntes wie HTML oder PHP vertiefen und lernten neue Sprachen wie JavaScript oder jQuery kennen.

Dadurch, dass wir keinerlei Erfahrung mit JavaScript oder jQuery hatten, stiessen wir natürlich auf diverse Probleme.

Unser erster Schritt war es die App in zwei Teile aufzuteilen. Einerseits galt es die Loginformulare für Nickname und Auswahl oder Erstellung des Chatrooms zu programmieren. Andererseits musste die eigentliche Chatengine programmiert werden. Ebenfalls musste die Server-Infrastruktur noch installiert werden, da wir uns entschlossen, die App auf einem privaten Webserver zu hosten.

Unser erster Fehler war es, an die Entwicklung dieser Webapp wie an die Entwicklung einer normalen Website heranzugehen. Uns war nicht bewusst, dass wir PHP- und HTML-Teile von einander trennen sollten. Somit hatten wir PHP, HTML und JavaScript bunt gemischt. Des Weiteren haben wir in einer ersten Version die Funktionen zur Eingabe eines Nicknamens und die Auswahl/die Erstellung eines Chatrooms in verschiedenen Files gehandhabt. Uns wurde erst später klar, dass wir mit jQuery alles in einer Datei verarbeiten können. Da wir unsere Webapp mit Phonegap/Cordova als Native App erweitern wollten, mussten wir im Nachhinein zwangsweise PHP von HTML trennen. Ebenfalls vergassen wir jQuery von Anfang an einzubinden. Dies erforderte ebenfalls eine Restrukturierung des Codes und hätte uns viel Zeit und Arbeit abgenommen, hätten wir es von Anfang an eingebaut gehabt.

Das nächste Problem war die Kommunikation von Client und Server. Wir hatten die Wahl entweder AJAX oder Websockets zu verwenden. Die Verwendung von Websockets hätte den Vorteil, dass eine Kommunikation nur wenn nötig stattfindet. In unserem Fall wäre das, wenn ein User eine neue Nachricht absendet und diese allen im Chatroom befindlichen Benutzern angezeigt werden muss. Leider benutzt Websockets bereits bei nur einem Chatroom sehr viele Ressourcen des Webservers, sodass dieser sehr schnell an seine Grenzen kommt. Darum entschieden wir uns trotzdem mit AJAX zu arbeiten. Ein Vorteil von AJAX war es auch, dass wir diese Technologie schon ein wenig kannten.

Eine weitere Schwierigkeit war es, eine geeignete Möglichkeit zu finden, um Variablen innerhalb der Webapp und zwischen verschiedenen Technologien weiterzugeben.

Übers Ganze gesehen können wir aber auf jeden Fall konstatieren, dass uns dieses Projekt bewusst gemacht hat, was mit Webapps möglich ist und wie sich diese auf relativ einfache Weise realisieren lassen. Es war auf jeden Fall interessant diese, für uns, neuen Technologien wie jQuery kennen zu lernen und anzuwenden. Als es uns gelang, unsere Webapp mit Phonegap/Cordova auf unserem Android Phone zu installieren, hatten wir auf jeden Fall ein riesen Erfolgserlebnis.