Embed Size (px)
Citation preview
BachelorarbeitMobin Meiwandi
Eine mobile Applikation zur Umsetzung des Lernkonzepts vonFlashcards basierend auf Android und XML
Fakultät Technik und InformatikStudiendepartment Informatik
Faculty of Engineering and Computer ScienceDepartment of Computer Science
Mobin Meiwandi
Eine mobile Applikation zur Umsetzung des Lernkonzepts vonFlashcards basierend auf Android und XML
Bachelorarbeit eingereicht im Rahmen der Bachelorprüfung
im Studiengang Bachelor of Science Technische Informatik
am Department Informatik
der Fakultät Technik und Informatik
der Hochschule für Angewandte Wissenschaften Hamburg
Betreuender Prüfer: Prof. Dr. Ulrike Ste�ens
Zweitgutachter: Prof. Dr. Philipp Jenke
Eingereicht am: 3. April 2014
Mobin Meiwandi
Thema der ArbeitEine mobile Applikation zur Umsetzung des Lernkonzepts von Flashcards basierend auf An-
droid und XML
StichworteFlashcards, Lernkartei, Karteikarte, Android, XML, Lernkonzept, mobile Applikation, lernen
KurzzusammenfassungIn dieser Bachelor-Thesis wird eine mobile Applikation erstellt, die das Lernkonzept von
Flashcards umsetzt. Schlüsseltechnologien für die Umsetzung der Applikation sind Android
und XML. Es werden Anforderungen an eine solche Applikation gestellt, die im Laufe der Arbeit
erfüllt werden. Mit Hilfe einer Web-Applikation soll es der Lehrkraft möglich sein, Lerninhalte
für Lernende zur Verfügung zu stellen. Themen und Karten werden von der Lehrkraft erstellt.
Der Lernende kann mit Hilfe eines mobilen Gerätes auf die Themen und Karten zugreifen. In
der Arbeit soll das Design der kompletten Anwendung präsentiert werden, dabei wird auf die
GUI-Gestaltung und die Kommunikation zwischen Web-Applikation und Android-Applikation
eingegangen.
Mobin Meiwandi
Title of the paperAn Android- and XML-based mobile application implementing the learning concept of Flash-
cards
Keywords�ashcards, notecard, Android, XML, learning concept, mobile application, learn, study
AbstractIn this bachelor-thesis, a mobile application is created which implements the concept of learning
with �ashcards. Key technologies for the implementation of the application are Android and
XML.The thesis lists requirements for such an application, which are statisfy in the course of
this work. With the help of a web-application it is possible for a teacher to provide learning
content for learners. Topics and cards will created by the teacher.The learner has access to the
topics and cards making use of moble devices. This thesis presents the design of the entire
application, thereby will be discussed the GUI design and the communication between web
application and Android application.
Inhaltsverzeichnis
1 Einleitung 11.1 Motivation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
1.2 Ziel dieser Arbeit . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
1.3 Aufbau dieser Arbeit . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
2 Grundlagen 32.1 Begri�serklärung . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
2.2 Android . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
2.3 XML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
3 Analyse 73.1 Karteikartensystem . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
3.1.1 Lernstrategien . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
3.2 Use Cases . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
3.3 Anforderungen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
3.4 Fazit . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
4 Design 184.1 Applikationsentwurf . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
4.2 GUI Gestaltung . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
4.2.1 Web-Applikation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
4.2.2 Android-App . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24
4.3 Kommunikation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29
4.3.1 Nachrichtenformat XML . . . . . . . . . . . . . . . . . . . . . . . . . . 32
4.3.2 Datenbankmodellierung . . . . . . . . . . . . . . . . . . . . . . . . . . 34
5 Realisierung 375.1 Android-App Entwicklung . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37
5.2 Web-Applikation Entwicklung . . . . . . . . . . . . . . . . . . . . . . . . . . . 46
5.3 Bibliotheken und Hilfsprogramme . . . . . . . . . . . . . . . . . . . . . . . . . 50
6 Schluss 516.1 Zusammenfassung . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51
6.2 Ausblick . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52
iv
1 Einleitung
Auch wenn in vielen Lernsituationen heute das Erarbeiten von handlungsorientiertem Wissen
in den Vordergrund gestellt wird, so basiert doch auch dieses meist auf einem soliden Fakten-
wissen, dass sich Lernende sei es in der Schule, sei es in der Ausbildung oder Studium erarbeiten
muss. Hierzu zählen beispielsweise das Lernen von Vokabeln in der Schule oder das Lernen
von Fachbegri�en und grundsätzlichen Zusammenhängen im Studium. Eine Lernmethodik,
die es erlaubt, Fakten möglich einfach und e�zient zu lernen, erleichtert dem Lernenden das
Lernen insgesamt, da sie Kapazitäten freisetzt, die dann gezielt auch zum handlungsorientierten
Lernen genutzt werden können.
In dieser Arbeit soll ein Lernsystem auf einer benutzerfreundlichen, elektronischen Plattform
entwickelt werden, um so den Lernenden eine Methodik anzubieten, die ihm beim Lernen von
Faktenwissen hilft. Die Einfachheit der Anwendung soll hierbei im Vordergrund stehen.
1.1 Motivation
Wie in der Einleitung angedeutet, stellt das ständige Lernen von Faktenwissen in verschiedenen
Lebensphasen eines Menschen eine Motivation dar, eine geeignete Anwendung zu erstellen,
die ihn unterstützt. Mobile Endgeräte, über die heute viele Lernender verfügen, ermöglichen
es, zu fast jeder Zeit an fast jedem Ort ohne großen Aufwand lernen zu können. Die gegebenen
technischen Möglichkeiten stellen daher eine weitere Motivation für die vorliegende Arbeit
dar.
1.2 Ziel dieser Arbeit
Ziel dieser Arbeit ist es, eine Anwendung zu scha�en, die Lernende beim Lernen von neuem
Faktenwissen unterstützt. Vor allem soll die Anpassung der Anwendung an die heutige Zeit,
sprich die Ausführung und Benutzung der Anwendung über mobilen Geräte in dieser Arbeit
integriert werden.
1
1 Einleitung
1.3 Aufbau dieser Arbeit
Die Arbeit ist in sechs Kapitel gegliedert, wovon das erste diese Einleitung ist.
Im zweiten Kapitel werden die Grundlagen der Arbeit vorgestellt. Diese sollen einen bes-
seren Einstieg sowie ein einheitliches Verständnis scha�en., um einen besseren Einstieg in die
Arbeit sowie ein einheitlichen Verständnis der für diese Arbeit relevanten Begri�e zu erhalten.
Im dritten Kapitel beginnt die Analyse der zu entwickelnden Anwendung. Sie dient dazu,
die richtigen Anforderungen an die Anwendung zu �nden und mögliche Use Cases zu formu-
lieren. Nach der Analyse folgt das vierte Kapitel.
Das vierte Kapitel beschäftigt sich mit dem Design der zu entwickelnden Anwendung. Es
werden standardisierte Software-Engineering Methoden angewendet, um die Anwendung zu
beschreiben. Dabei wird auf die GUI-Gestaltung und die Kommunikationswege der Applikation
eingegangen.
Im fünften Kapitel wird die Realisierung präsentiert. Die tatsächlichen Komponenten der
Anwendung werden vorgestellt und, um die Realisierung besser zu verstehen, werden ausge-
wählte Code-Abschnitte präsentiert und erklärt. Das letzte Kapitel ist eine Zusammenfassung
der Arbeit, zudem werden Verbesserungen bzw. Erweiterungsmöglichkeiten im Ausblick vor-
gestellt.
2
2 Grundlagen
In diesem Kapitel werden die Grundlagen beschrieben, um ein besseres Verständnis beim
Lesen der Arbeit zu erhalten. Es wird zunächst auf einige für die Arbeit relevante Begri�e
eingegangen. Das Betriebssystem Linux wird vorgestellt, ebenso wie das Datenaustauschformat
XML.
2.1 Begri�serklärung
In diesem Abschnitt werden einige Begri�e erklärt.
• FlashCard: FlashCard ist ein Begri� aus dem Englischen und bedeutet Lernkartei.
FlashCards können Karten sein, die zum systematischen Lernen eingesetzt werden.
Typischerweise beinhaltet eine Karte, eine Frage und Antwort.
• Mobile Geräte: Wird in dieser Arbeit von mobilen Geräten gesprochen, so sind alle
Geräte gemeint, die Touchgestiken wahrnehmen können. Beispiele: Smartphones und
Tablets.
• Web-Applikation: Eine Web-Applikation ist eine Anwendung, die mit Hilfe eines Brow-
sers bedient werden kann. Solche Anwendungen können verschiedene Aufgaben und
Services ausführen. Inhalte und Programmcode sind auf einem Webserver gespeichert.
Web-Applikationen sind vom Betriebssystem unabhängig.
• Android-Applikation: Eine Android-Applikation ist eine Anwendung, die für das
Betriebssystem Android entwickelt wurde. Nur Geräte, die das Betriebssystem Android
unterstützen, können die Anwendung ausführen und bedienen.
• Touchgestiken: Touchgestiken sind verschiedene Gestiken, die mittels Berührung
ausgeführt werden. Touchgestiken werden bei Geräten mit einer touchemp�ndlichen
Ober�äche eingesetzt. Hinter jeder Touchgestik können verschiedene Aktionen interpre-
tiert werden. Verschiedene Arten von Gestiken sind möglich, so kann beispielsweise das
3
2 Grundlagen
Wischen von Rechts nach Links, das Blättern zur nächsten Seite bedeuten. von Rechts
nach Links auf einer Buch-Applikation, kann das Blättern zur nächsten Seite bedeuten.
• File Chooser: Ein File Chooser ist ein Dateimanager, der genutzt wird, um die Inhalte
eines Dateisystems zu verwalten. Folgende Aktionen können mit Hilfe eines File Choo-
sers verwirklicht werden: Löschen, Kopieren, Verschieben, Au�isten von Dateien und
Verzeichnissen. Eine Rechteverwaltung von Dateien wird ebenfalls durch einen File
Chooser verwirklicht.
• GUI: GUI steht für „Graphical User Interface“ und ist abstrakt gesehen eine Schnittstelle
für den Benutzer, um mit einem System zu interagieren. Eine GUI ist eine gra�sche
Benutzerober�äche.
• XML: XML steht für „Extensible Markup Language“ und kann eingesetzt werden, um
Inhalt zwischen Systemen auszutauschen. Die Darstellung eines XML-Dokuments ist
hierarchisch und strukturiert.
• Parser: Ein Parser ist eine Anwendung, die Daten entgegennimmt und diese für ein Sys-
tem in ein brauchbares Format umwandelt oder zerlegt. Parser haben feste syntaktische
Regeln zur Durchführung ihrer Arbeit.
2.2 Android
Android ist ein Linux-basiertes Betriebssystem und die Software-Plattform von Google. Andro-
id ist stark auf mobilen Geräten verbreitet und für solche Anwendungen optimiert. Durch die
Architektur von Android lassen sich jedoch auch Anwendungen für andere Geräte entwickeln
(Künneth (2012)). Durch folgende Gra�k (2.1) lässt sich Android am besten erklären:
4
2 Grundlagen
Abbildung 2.1: Aufbau der Android-Plattform
Quelle: Wikipedia (2014a)
Der rote Bereich unten stellt den Linux Kernel dar. Der Linux Kernel ist das Fundament
von Android. Aufbauend auf dem Linux Kernel gibt es verschiedene Bibliotheken, die von
Android zur Verfügung gestellt werden. Diese Bibliotheken sind in C/C++ geschrieben und der
Entwickler greift indirekt über das Android-Application Framework darauf zu. Das Application
Framework ist, wie schon erwähnt, eine Schnittstelle für den Entwickler und stellt eine Basis
für die Entwicklungsarbeit dar. Durch das Application Framework wird dem Entwickler die
Erstellung von mobilen Anwendungen leicht gemacht. Ein Prinzip dieses Frameworks ist es,
dass hier Anwendungen ihre Funktionalitäten in Form von Schnittstellen verö�entlichen, so
dass andere Programme darauf zugreifen können (Künneth (2012)). Die Lebenszyklen einer
Anwendung werden im „Activity Manager“ verwaltet. Die Android Runtime, der gelbe Bereich,
ist dafür zuständig, dass für jede Anwendung ein Prozess gestartet wird. Vorteil dieser Me-
thode ist, dass bei Absturz einer einzelnen Anwendung nicht das komplette System abstürzt.
In der obersten Schicht sind die Programme, die von Endbenutzern verwendet werden. Die
Applikationen greifen auf das Application Framework zu. (Künneth (2012)).
5
2 Grundlagen
2.3 XML
XML steht für „Extensible Markup Language“. Durch XML ist es möglich, eigene Dateiformate
zu formulieren. Die Formate werden immer im selben Schema entwickelt. Die Dokumente
sind hierarchisch strukturiert aufgebaut und menschenlesbar. Zum Einsatz kommt XML unter
anderem in Kon�gurationsdateien, beim Importieren und Exportieren von Daten innerhalb
eines Programmes und beim Einsatz in Datenbanken vor (Koch (2010)). Der Aufbau eines
XML-Dokuments sieht wie folgt aus:
Ein Dokument beginnt immer mit einem ö�nenden Tag. Ein Tag kann individuell, unter Be-
achtung der Syntax, benannt werden:
1 <kartenset>2 </kartenset>
Listing 2.1: XML - Tag
Es ist darauf zu achten, dass einmal geö�nete Tags wieder geschlossen werden. Tags können
auch Attribute besitzen, die den Tag genauer beschreiben:
1 <kartenset>2 <row thema="Verteilte Systeme">3 </row>4 </kartenset>
Listing 2.2: XML - Tag mit Attribut
Innerhalb eines Tags können weitere Tags geö�net und korrekt geschlossen werden, um eine
Hierarchie aufzubauen.
1 <kartenset>2 <row thema="Verteilte Systeme">3 <frage>Was ist ein Verteiltes System?</frage>4 </row>5 </kartenset>
Listing 2.3: XML - Tag mit Inhalt
Im Listing 2.3 ist ein XML-Dokument zu sehen, welches ein Datenelement besitzt. Datenele-
mente werden zwischen einem ö�nenden und geschlossenen Tag geschrieben.
6
3 Analyse
„Lernen ist wie Rudern gegen den Strom. Hört man damit auf, treibt man zurück.“
-Laozi (2014)
Die zu entwickelnde Applikation soll vor allem Studenten, Schülern und allen Lernenden
die Möglichkeit bieten, Lerninhalte mittels eines bewährten Systems vorzubereiten und sich
einzuprägen. Die Möglichkeiten und Techniken, Inhalte zu lernen und aufzubereiten, sind
verschieden. In diesem Kapitel soll eine Lernmethodik im Vordergrund stehen, das "clevere
Wiederholen". Deren Vor- und Nachteile werden aufgezeigt. Durch verschiedene Szenarien
sollen die Applikation sowie das verwendete Lernsystem veranschaulicht werden. Hierfür
werden im nächsten Schritt die funktionalen Anforderungen formuliert.
3.1 Karteikartensystem
Abbildung 3.1: Karteikartenlernsystem
Quelle: Wikipedia (2014b)
Eine Methodik zum Lernen stellt das Karteikartensystem dar. Die Gestaltung der Karteikarten
ist individuell. In der klassischen Form wird die Vorderseite mit einer Frage versehen und die
Rückseite enthält die entsprechende Antwort auf die Frage. Je nach Lerntyp, Größe der Karten
und technischen Möglichkeiten können die Inhalte Videos, Bilder, Stichwörter, Sätze oder
Sonstiges enthalten. Durch das ständige Wiederholen der Karteikarten entsteht ein Lern- und
Einprägungse�ekt, was wiederum zum e�ektiven Lernen beiträgt. (Bor-learn (2014), MemoStep
(2014)).
In Abbildung 3.1 ist das klassische Karteikartensystem zu sehen. Einer bestimmten Lernstra-
tegie folgend werden die Karten je nach dem, ob die Fragen richtig oder falsch beantwortet
7
3 Analyse
wurden, in den jeweiligen Fächern hinterlegt.(siehe 3.1.1).
Vorteile:
• Systematisches Lernen: Ermöglicht Inhalte kurz vor dem Vergessen zu wiederholen und
dadurch ins Langzeitgedächtnis einzuprägen.
• Energie- und Zeitersparnis: Bereits richtig beantwortete Inhalte werden erst später
wiederholt, wohingegen falsch beantwortete Inhalte in den Vordergrund treten.
• Individuelle Gestaltung der Inhalte.
• Motivation steigt, da schnell Erfolge ersichtlich sind.
Nachteile:
• Selbstorganisation des Lernenden ist erforderlich, da bei großem Lernsto� die Karteikar-
ten schnell unübersichtlich werden können.
• Zeitaufwand beim Erstellen der Karten. Dieses kann andererseits aber auch als Vorteil
gesehen werden, da sich Lernende, wenn sie selbst Karten erstellen, dabei schon Wissen
aneignen können.
• Inhalte werden zusammenhangslos gelernt.
3.1.1 Lernstrategien
Es werden drei Lernstrategien für ein Karteikartensystem vorgestellt. Die Vor- und Nachteile
der jeweiligen Strategien werden aufgezeigt (MemoStep (2014)).
• Strategie 1: Einfaches WiederholenEine Karte wird aus dem Fach entnommen und der Lernende versucht, die Frage zu
beantworten. Sowohl bei richtiger als auch bei falscher Antwort wird die Karte zurück
nach hinten ins Fach gelegt. Diese Strategie ist bezüglich des Aufwandes, im Sinne von der
Selbstorganisation des Lernenden, umsetzbar, da sie simpel ist. Nachteil dieser Methode
ist, dass nicht auf die falsch beantworteten Fragen reagiert wird, um auf die Schwäche
des Lernenden einzugehen, und dass richtig beantworteten Fragen unnötigerweise
wiederholt werden.
• Strategie 2: FächerlernenBeim Fächerlernen gibt es n Fächer, die zeitlich unterschiedlich angeordnet sind. Ein Teil
der Karteikarten wird in Fach 1 gelegt. Karteikarten werden in periodischen Abständen
8
3 Analyse
vom Fach 1 entnommen und beantwortet. Bei richtiger Antwort gelangt die Frage in
Fach 2, und bei falscher Antwort bleibt sie in Fach 1. Die Fächer, die einen größeren
numerischen Wert haben, werden in größeren periodischen Intervallen wiederholt und
jeweils bei richtiger Antwort in die nächstgrößere Fach verschoben. Sind die Karten in
Fach 1 alle erfolgreich bearbeitet, werden weitere Karten nachgelegt.
• Strategie 3: Cleveres WiederholenBei der dritten Strategie, Cleveres Wiederholen, werden Karten in ein Fach gelegt. Richtig
beantwortete Fragen gelangen in das nächste Fach und falsch beantwortete Fragen
werden wieder in das Ausgangsfach gelegt. Es werden erst Fragen aus dem nächsten
Fach entnommen, wenn zuvor alle Fragen aus dem vorherigen Fach richtig beantwortet
wurden. Somit wiederholen sich stets die nicht richtig beantworteten Fragen.
3.2 Use Cases
In diesem Abschnitt werden die verschiedenen Szenarien der entworfenen Applikation Flash-
Cards dargestellt.
Stakeholder
Die Stakeholder in diesem System sind Lehrkraft und Lernender. Die Lehrkraft hat das Inter-
esse, den Lerninhalt dem Lernenden attraktiv und so einfach wie möglich zu präsentieren.
Der Lernende will mit so wenig Aufwand wie möglich eine gute Leistung erzielen. Die gute
Leistung kann als eine Verbesserung seiner bisherigen Fähigkeit bzw. seines Wissenstandes
angesehen werden.
9
3 Analyse
Lehrkraft Lernender
Thema erstellen/bearbeiten/löschen
Kartenerstellen/bearbeiten/löschen
Text/Bild hinzufügen/ändern/löschen
XML exportieren
Thema/Karten aktualisieren oder löschen
Themenansichtwählen
Karteikartenlernen
LokaleXML importieren
Server Einstellungändern
<<extend>>
Karte kopieren/verschieben in anderes
Thema
Abbildung 3.2: Anwendungsfall
In der Abbildung 3.2 sind die Anwendungsfälle als Use-Case-Diagramm zu sehen.
Es folgt eine Erläuterung der Szenarien:
Thema erstellen/bearbeiten/löschen
Die Lehrkraft will ein Thema erstellen, das eine bestimmte Menge an Lehrsto� repräsentiert.
Bei Ergänzungen sollen die Themen auch bearbeitet werden können. Hat die Lehrkraft die
Klasse abgeschlossen oder das Thema ist nicht mehr relevant, so ist ein Löschen notwendig.
Karten erstellen/bearbeiten/löschen
Die erstellten Themen sollen Karten enthalten. Die Karte besitzt zwei Seiten. Auf der einen Seite
be�ndet sich eine Frage, auf der anderen Seite eine entsprechende Antwort oder Erklärung.
Die Lehrkraft erstellt die jeweiligen Karten und kann diese ggf. bearbeiten und löschen.
Text/Bild hinzufügen/ändern/löschen
Erstellte Karten sind zunächst leer. Die Lehrkraft hat die Möglichkeit jeweils einen Text und ein
Bild zur Frage und zur Antwort hinzuzufügen sowie zu entfernen. Ergänzungen sind möglich,
10
3 Analyse
in dem der Text bearbeitet werden kann oder die Frage- und Antwortbilder ausgetauscht
werden können.
Karte kopieren/verschieben in anderes Thema
Die Lehrkraft will Karten eines Themas in ein anderes Thema kopieren oder verschieben.
XML exportieren
Die erstellten Themen und die dazugehörigen Karten können im XML-Format von der Lehrkraft
exportiert werden, um den Lernenden die passenden Themen zu übergeben.
Thema/Karten aktualisieren
Der Lernende will die aktuellste Version der Themen und Karten erhalten.
Themenansicht wählen
Ist die Applikation gestartet, so kann der Lernende sich die verfügbaren Themen anschauen
und ein Thema zum Lernen auswählen.
Karteikarten lernen
Bei Wahl eines Themas werden die Karteikarten nacheinander aufgezeigt, wobei der Lernende
jeweils für sich selbst einschätzen muss, ob er die Antwort auf die jeweilige Frage auf der Karte
weiß oder nicht.
Lokale XML importieren
Der Lernende hat von der Lehrkraft eine XML-Datei erhalten, die Themen und Karten enthält.
Diese Datei kann er in der Applikation importieren, um die Themen und Karten zu erstellen.
Server Einstellung ändern
Der Lernende erfährt von der Lehrkraft, dass der Server, auf dem sich die Themen und Karten
be�nden, sich geändert hat. Der Lernende muss dies unter dem Menüpunkt Server Einstellung
ändern, um weiterhin die Themen und Karten vom aktuellen Server zu erhalten.
11
3 Analyse
3.3 Anforderungen
In diesem Kapitel sollen die Rahmenbedingungen der Applikation erfasst werden. Die funktio-
nalen Anforderungen werden dabei dargelegt.
Rahmenbedingungen
Es müssen bei der Implementation der Applikation einige Rahmenbedingungen beachtet
werden. Der Austausch der Themen und Karten zwischen Lehrkraft und Lernenden geschieht
ausschließlich über ein XML-Dokument. Zunächst haben nur Lehrkräfte die Befugnis, neue
Themen mit Karten zu erstellen und zu verwalten, sprich die Themen und Karten sind für die
Lernenden von der Lehrkraft vorgeben. Es besteht theoretisch die Möglichkeit, dass System in
der Zukunft so zu erweitern, dass auch Lernende Themen und Karten hinzufügen können. Dies
wird später im Ausblick behandelt. Die Webapplikation soll auf einem beliebigen Server liegen
können, um eine Abhängigkeit zwischen Handy-App und Webapplikation zu vermeiden. Das
Layout der Web-Applikation soll weitgehend so gestaltet sein, dass es sich auch auf mobilen
Geräten (Smartphones, Tablets) darstellen lässt. Es wird ebenfalls Wert gelegt auf eine nicht
textlastige Darstellung in Web-Applikation und Handy-App.
Funktionale Anforderungen
Die Funktionen, welche die gesamte Applikation erfüllen soll, werden hier beschrieben. Zusätz-
lich zum Namen der Funktion werden für jede funktionale Anforderung der Akteur, Ereignisse,
die bei dieser Funktion passieren, Vor- und Nachbedingungen und ggf. das Zeitverhalten auf-
gezeigt. Die funktionalen Anforderungen sind im Folgenden mit FAx bezeichnet und werden
fortlaufend durchnummeriert.
FA1: Einloggen in die Web-Applikation
• Akteur: Lehrkraft
• Ereignisse: 1. Lehrkraft ö�net die Server-URL zur Web-Applikation, 2. Lehrkraft gibt
Benutzername und Passwort ein, 3. Drückt auf Login
• Vorbedingungen: Internetzugang, Gültige Benutzerdaten
• Nachbedingungen: Zugang zum System
12
3 Analyse
FA2: Thema erstellen (Web-Applikation)
• Akteur: Lehrkraft
• Ereignisse: 1. Lehrkraft klickt auf das Plus-Symbol, 2. Name des Themas wird angegeben,
3a. Es wird auf „Hinzufügen“ geklickt, um das Thema anzulegen, 3b. Mit „Abbrechen“
wird der Vorgang abgebrochen,
• Vorbedingungen: Zugang zum System
• Nachbedingungen: Das neue Thema wird aufgelistet
FA3: Thema bearbeiten (Web-Applikation)
• Akteur: Lehrkraft
• Ereignisse: 1. Lehrkraft klickt auf das Stift und Zettel-Symbol des zu bearbeitenden
Themas, 2. Neuen Namen angeben, 3a. Es wird auf „Ändern“ geklickt, um den Namen
des Themas zu ändern, 3b. Mit „Abbrechen“ wird der Vorgang abgebrochen
• Vorbedingungen: Zugang zum System, Thema ist vorhanden
• Nachbedingungen: Bearbeitetes Thema wird aufgelistet
FA4: Thema löschen (Web-Applikation)
• Akteur: Lehrkraft
• Ereignisse: 1. Lehrkraft klickt auf das Kreuz-Symbol des zu löschenden Themas, 2a. Es
wird auf „Ok“ geklickt, um das Thema zu löschen, 2b. Mit „Abbrechen“ wird der Vorgang
abgebrochen
• Vorbedingungen: Zugang zum System, Thema ist vorhanden
• Nachbedingungen: Thema ist gelöscht
FA5: Karte erstellen (Web-Applikation)
• Akteur: Lehrkraft
• Ereignisse: 1. Lehrkraft klickt auf ein Thema, 2. Lehrkraft klickt auf das Plus-Symbol, 2.
Name der Karte wird angegeben, 3. Frage und Antwort werden jeweils formuliert, 4a.
13
3 Analyse
Es wird auf „Hinzufügen“ geklickt, um Karte anzulegen, 4b. Mit „Abbrechen“ wird der
Vorgang abgebrochen, Bild hinzufügen/entfernen siehe FA8
• Vorbedingungen: Zugang zum System, Thema ausgewählt,
• Nachbedingungen: Karte wird aufgelistet
FA6: Karte bearbeiten (Web-Applikation)
• Akteur: Lehrkraft
• Ereignisse: 1. Lehrkraft klickt auf ein Thema, 2. Lehrkraft klickt auf das Stift-und-
Zettel-Symbol der zu bearbeitenden Karte oder auf den Kartennamen, 3. Frage und
Antwort können bei Bedarf geändert werden, 4a. Es wird auf „Ändern“ geklickt, um
Einstellungen zu übernehmen. 4b. Mit „Abbrechen“ wird der Vorgang abgebrochen, Bild
hinzufügen/entfernen siehe FA8
• Vorbedingungen: Zugang zum System, Karte ist vorhanden
• Nachbedingungen: Bearbeitete Karte wird aufgelistet
FA7: Karte löschen (Web-Applikation)
• Akteur: Lehrkraft
• Ereignisse: 1. Lehrkraft klickt auf ein Thema, 2. Lehrkraft klickt auf das Kreuz-Symbol
der zu löschenden Karte 3a. Es wird auf „Ok“ geklickt, um die Karte zu löschen, 3b. Mit
„Abbrechen“ wird der Vorgang abgebrochen
• Vorbedingungen: Zugang zum System, Karte ist vorhanden
• Nachbedingungen: Karte ist gelöscht
FA8: Bild hinzufügen/entfernen (Web-Applikation)
• Akteur: Lehrkraft
• Ereignisse: 1. Lehrkraft klickt auf ein Thema 2. Lehrkraft klickt auf das Stift-und-Zettel-
Symbol der zu bearbeitenden Karte oder auf den Kartennamen, 3a. Fragebild durchsuchen
klicken, um Bild zur Frage hinzuzufügen und Antwortbild durchsuchen klicken, um
Bild zur Antwort hinzuzufügen, 3b. Klick auf das Kreuz-Symbol bei Fragebild oder
Antwortbild löscht das jeweilige Bild
14
3 Analyse
• Vorbedingungen: Zugang zum System, zu 3a. Gültiges Bild ist vorhanden,
• Nachbedingungen: Zu 3a. Bild wird hinzugefügt, zu 3b. Bild wird entfernt
FA9: XML Importieren (Web-Applikation)
• Akteur: Lehrkraft
• Ereignisse: 1. Lehrkraft klickt auf das XML-Zettel-Symbol des zu speichernden Themas,
2. XML-Datei kann von Lehrkraft gespeichert werden
• Vorbedingungen: Zugang zum System, Thema ist vorhanden
• Nachbedingungen: Generierung der XML-Datei
FA10: Karte in anderes Thema verschieben/kopieren (Web-Applikation)
• Akteur: Lehrkraft
• Ereignisse: 1. Lehrkraft wählt aus der Zeile der jeweiligen Karte, die verschoben/kopiert
werden soll, das Thema aus, 2a. Auswahl von Doppel-Zettel-Symbol aus, 2b. Aus von
Links-Rechts-Pfeil-Symbol
• Vorbedingungen: Zugang zum System, Thema 1 ist vorhanden, Thema 2 ist vorhanden
• Nachbedingungen: a: Karte wurde in Thema 2 verschoben und ist nicht mehr in Thema
2 aufgelistet, b: Karte wurde in Thema 2 kopiert
FA11: Themenansicht wählen (Android-App)
• Akteur: Lernender
• Ereignisse: 1. Lernender wählt Themen
• Nachbedingungen: Ansicht der Themen
FA12: Karteikarten lernen (Android-App)
• Akteur: Lernender
• Ereignisse: 1. Thema auswählen, 2. „Los“ wählen, 3a. „weiß ich“ wählen, 3b. „weiß ich“
nicht wählen 4. „Nächste Karte!“
15
3 Analyse
• Vorbedingungen: Themenansicht, verfügbare Themen vorhanden, verfügbare Karten
vorhanden
• Nachbedingungen: Antwort der Karte wird angezeigt
FA13: Themen aktualisieren (Android-App)
• Akteur: Lernender
• Ereignisse: 1. Lernender wählt das Optionsmenü (oben rechts), 2. Auswahl „Aktualisie-
ren“
• Vorbedingungen: Ansicht der Themen
• Nachbedingungen: Themenliste wird aktualisiert
FA14: Karten aktualisieren (Android-App)
• Akteur: Lernender
• Ereignisse: 1. Lernender wählt das Optionsmenü (oben rechts), 2. Auswahl „Aktualisie-
ren“
• Vorbedingungen: Thema ausgewählt
• Nachbedingungen: Karten mit den dazugehörigen Bildern werden geladen
FA15: Lokale XML importieren (Android-App)
• Akteur: Lernender
• Ereignisse: 1. Lernender wählt „XML-Laden“, 2. Auswahl von „XML wählen“, 3. XML-
Datei vom lokalen Dateisystem auswählen
• Vorbedingungen: Verfügbare XML-Datei auf dem lokalen Dateisystem vorhanden
• Nachbedingungen: Thema mit dazugehörigen Karten und Bildern wird geladen
• Zeitverhalten: Je nach Anzahl der zu ladenden Bilder, kann das Importieren der XML-
Datei bzw. das Aktualisieren der Karten sich verzögern. Bei 100 Karten mit jeweils 2
Bildern ist mit 10-15 Sekunden Ladezeit zu rechnen. Die genaue Ladezeit hängt allerdings
von der Geschwindigkeit des mobilen Geräts, der Internet- und Servergeschwindigkeit
sowie der Bildgröße ab.
16
3 Analyse
FA16: Server Einstellung ändern (Android-App)
• Akteur: Lernender
• Ereignisse: 1. Lernender wählt „Einstellungen“ aus, 2. Eingabe einer Serveradresse, 3.
Auswahl von „Speichern“
• Vorbedingungen: Gültige Serveradresse vorhanden
3.4 Fazit
In diesem Kapitel wurden Anforderungen und die dazugehörigen Use Cases beschrieben, die
im Laufe der Arbeit wiederverwendet werden. Die Analyse dient als Grundlage zur Erstellung
des Designs und zur Implementierung (Realisierung).
17
4 Design
In diesem Kapitel wird das Design der Applikation vorgestellt. Dabei werden die einzelnen
Komponenten aufgezeigt. Es wird auf die Gestaltung der GUI eingegangen sowie auf die
Sequenzen, die sich in der Applikation bilden.
4.1 Applikationsentwurf
Apache Web-Server
Web-Applikation
Applikation
XML
HTTP GET
Lehrkraft LernenderMySQL DB SQLite DB
Abbildung 4.1: Systementwurf
In der Abbildung 4.1 ist der abstrakte Entwurf der zu entwickelnden Applikation zu sehen.
Die zwei Hauptakteure, Lehrkraft und Lernender, interagieren mit der Applikation. Die zwei
Hauptbestandteile der Applikation stellen die Web-Applikation und die Android-Applikation
dar. Die Web-Applikation wird auf einem Apache Web-Server betrieben. Sie wird nur von
der Lehrkraft benutzt und nimmt Befehle (siehe 3.3) entgegen, um hauptsächlich Lernsto�
bereitzustellen. In der MySQL Datenbank werden die Daten zum Lernsto� gelesen bzw. erstellt.
Die Android-Applikation wird vom Lernenden benutzt und hilft ihm, den bereitgestellten Lern-
sto� aufzurufen und dementsprechend zu lernen. Web-Applikation und Android-Applikation
kommunizieren miteinander, um die geforderten Ein-/Ausgaben der Akteure zu behandeln.
Die Web-Applikation schickt die Inhalte per XML an die Android-Applikation, um sie für den
18
4 Design
Lernenden aufzubereiten. Die jeweiligen Daten werden von der Android-Applikation in die
SQLite Datenbank geschrieben. Um die Daten von der Web-Applikation abrufen zu können,
wird von der Android-Applikation ein HTTP GET geschickt.
SplashScreen
MainThemen Einstellung
XMLImport
lokal
XMLParser
MySQLiteHelper
Thema
Fragen
Antworten
Karten
Themen
Abbildung 4.2: Komponentenübersicht der Android-Applikation
In der Abbildung 4.2 sind die wichtigsten Komponenten der Android-Applikation zu sehen.
Es folgt eine kurze Beschreibung dieser Komponenten. Da in der Realisierung näher auf die
Klassen eingegangen wird, dient dies nur zum ersten Einblick. Die Komponenten, die einge-
rahmt sind und unter Activities stehen, sind die nach außen sichtbaren Komponenten der
Android-Applikations-GUI. Aus der Main-Activity heraus können drei Activities aufgerufen
werden (Themen für die Themenübersicht, Einstellung für die Servereinstellung, XMLImport
für das Importieren der XML), die jeweils eine andere Sicht anzeigen. Der XMLParser ist für
das Parsen von eintre�enden oder lokal liegenden XML-Dokumenten zuständig. Durch den
MySQLiteHelper kann durch simple Operationen, wie addKarte(), getKarte und deleteKarte(),
auf die MySQL-Datenbank zugegri�en werden.
19
4 Design
4.2 GUI Gestaltung
Bei der Entwicklung einer Applikation, die beim Lernen helfen soll, ist es vor allem wichtig, dass
die Lehrkraft und besonders der Lernende schnell und ohne großen Aufwand die Funktionalität
begreifen, da nicht die Bedienung der Applikation im Vordergrund stehen soll, sondern das
Lernen an sich. Die GUI Gestaltung ist daher besonders von Bedeutung. In diesem Teil wird
auf die Gestaltung der GUI eingegangen, außerdem soll die Einfachheit der GUI präsentiert
und deutlich gemacht werden.
4.2.1 Web-Applikation
Abbildung 4.3: Web-Applikation Login-Ansicht
In Abbildung 4.3 sieht man die Login-Ansicht, die auch der Einstieg in die Web-Applikation
ist. Die funktionale Anforderung aus Abschnitt 3.3 FA1 soll hier erfüllt werden. Man sieht das
Logo und den Titel - „FlashCards“ - der Web-Applikation.
20
4 Design
Abbildung 4.4: Web-Applikation Themen-Ansicht
Diese Ansicht 4.4 erscheint, nachdem man sich eingeloggt hat. Die funktionalen Anforderungen
aus Abschnitt 3.3 FA2, FA3 und FA4 werden durch die gebotenen Funktionalitäten in dieser
Ansicht erfüllt. Die Symbole sind klar und deutlich zu erkennen und sind selbsterklärend.
Durch die große Überschrift weiß der Benutzer, in dem Fall die Lehrkraft, in welcher Ansicht
sie sich be�ndet. Die Themen werden sofort angezeigt und müssen nicht extra aufgerufen
werden.
21
4 Design
Abbildung 4.5: Web-Applikation Themen erstellen-Ansicht
Bei der Erstellung eines Themas (siehe Abbildung 4.5) sind über�üssige Informationen ausge-
blendet, es ist deutlich erkennbar, dass man ein neues Thema anlegt. Die funktionale Anforde-
rung aus Abschnitt 3.3 F2 wird in diesem Punkt umgesetzt.
22
4 Design
Abbildung 4.6: Web-Applikation Karten-Ansicht
In der Abbildung 4.6 ist die Ansicht der Karten zu einem Thema für die Lehrkraft zu se-
hen. Durch die Überschrift mittig über den Karten ist klar ersichtlich, in welchem Thema
man sich be�ndet. Jede Karte des Themas ist aufgelistet. Es sind durch die Symbole klare
Bearbeitungsmöglichkeiten zu erkennen. Die gelben Symbole sind jeweils Kopier- und Ver-
schiebeoperationen für Karten in andere Themen. Die funktionalen Anforderungen 3.3 FA5,
FA6, FA7 und FA10 werden hier erfüllt.
23
4 Design
Abbildung 4.7: Web-Applikation Karten ändern-Ansicht
Die Abbildung 4.7 zeigt die Möglichkeit, wie Karteninhalte geändert bzw. hinzugefügt wer-
den können. Frage- und Antwortfelder sind jeweils deutlich erkennbar und unterscheidbar.
Die Felder können dynamisch vergrößert und verkleinert werden. Frage- und Antwortbilder
können hinzugefügt werden. Falls keine Bilder hinzugefügt wurden, wird dies durch einen
Text kenntlich gemacht. Einfachheit ist durch klare Symbole gewährleistet. Die funktionalen
Anforderungen aus Abschnitt 3.3 FA6 und FA8 werden erfüllt.
4.2.2 Android-App
Die Android-App wird vorgestellt. Anhand von Gra�kausschnitten aus der Applikation wird
das einfach gehaltene Layout präsentiert und erklärt.
24
4 Design
Abbildung 4.8: Android-App Splashscreen und Hauptmenü
Bei Start der Applikation wird der Splashscreen (4.8 - links) aufgezeigt. Er dient nur der
Optik. Außerdem sieht man in der Abbildung 4.8 das Hauptmenü der Android-Applikation.
Das Menü ist simpel gehalten, um das Lernen schnell beginnen zu können. Durch große
Buttons werden fehlerhaft oder wirkungslose Touchgestiken verhindert.
25
4 Design
Abbildung 4.9: Android-App Themen
Nachdem man im Hauptmenü Themen ausgewählt hat, landet man in der Ansicht 4.9. Die
Themen sind klar getrennt aufgelistet. Die rot markierten Objekte stellen Funktionalitäten dar.
Ö�net man das Optionsmenü mit dem Button mit den drei Punkten (siehe 2 in der Abbildung
4.9), erscheint das Auswahlmenü, um die Themen zu aktualisieren oder zu löschen (siehe 1 in
der Abbildung 4.9). Die funktionalen Anforderungen aus Abschnitt 3.3 FA11 und FA13 werden
erfüllt.
26
4 Design
Abbildung 4.10: Android-App Beginn Lernen
Wird ein Thema ausgewählt, erscheint die Ansicht wie in Abbildung 4.10 dargestellt. In
der Ansicht wird deutlich, um welches Thema es sich handelt, da das Thema das Layout
einer Überschrift hat und dadurch direkt au�ällt. Um das Lernen zu beginnen, muss „Los!“
ausgewählt werden. Die funktionale Anforderung FA12 wird hier erfüllt.
27
4 Design
Abbildung 4.11: Android-App Frage und Anwort
In der Abbildung 4.11 sieht man eine Frage und die Antwort der Karte. Diese Ansicht erscheint,
nachdem man ein Thema ausgewählt hat. In diesem Beispiel hat die Frage ein Fragebild und
einen Fragetext. Je nach Wissenstand kann „weiß ich“oder „weiß ich nicht“ausgewählt werden.
Die Antwort umfasst ein Antwortbild und einen Antworttext. Hat man die Antwort mit seinem
Wissenstand verglichen, so kann man „Nächste Karte“wählen. Das Design ist in diesen Ansich-
ten ebenfalls schlicht gehalten. Der Lernende kann sich auf die Frage konzentrieren und wird
nicht von zusätzlicher Gra�klast abgelenkt. Die funktionale Anforderung FA12 wird hier erfüllt.
28
4 Design
Abbildung 4.12: Android-App Server Einstellung und XML laden
In Abbildung 4.12 sind die Ansichten, um die Server-Einstellung zu ändern und ein XML-
Dokument zu laden, dargestellt. Die Server-Url kann mit der gewohnten Android-Tastatur
eingegeben werden. Um ein XML-Dokument laden zu können, muss „XML wählen“ ausgewählt
werden. Beide Optionen sind einfach gehalten. Die funktionalen Anforderungen aus Abschnitt
3.3 FA15 und FA16 werden erfüllt.
4.3 Kommunikation
In diesem Abschnitt sollen zwei Sequenzdiagramme vorgestellt werden. Sie beschreiben exem-
plarisch die Kommunikation zwischen Web-Applikation und Android-Applikation. Es werden
die Szenarien „Themen aktualisieren“ und „Karten aktualisieren“ dargestellt.
29
4 Design
Web-Applikation
Datenbank - Web-Applikation
Android-Applikation
Datenbank - Android-Applikation
Lernender
1. Öffne Themen
2. Öffne Menü und Aktualisiere
3. Anfordern der Themen
4. select * from Themen
5. Themen
6. Senden der Themen im XML-Format
7. Parsen
8. insert Themen
9. Aktualisieren der Themen
10. Themenansicht
Abbildung 4.13: Sequenzdiagramm - Themen aktualisieren
In der Abbildung 4.13 ist das Sequenzdiagramm abgebildet, welches die Kommunikation
zwischen Web-Applikation und Android-Applikation bei der Option „Themen aktualisieren“
beschreibt. Es folgt eine Erklärung der jeweiligen Sequenzpunkte zur funktionalen Anforderung
FA13 (3.3):
1. Der Lernende ö�net in der Android-Applikation die Themen-Ansicht.
2. Um die aktuellen Themen anzeigen zu lassen, wählt der Lernende unterm Optionsmenü
die Option „Aktualisieren“.
3. Da die aktuellen Themen auf der Web-Applikation liegen, erfolgt eine Abfrage von der
Android-Applikation an die Web-Applikation, um die Themen anzufordern.
4. Die Web-Applikation schickt eine Anfrage an die Datenbank, um die aktuellen Themen
zu erhalten.
30
4 Design
5. Rückgabe: Aktuelle Themen.
6. Die Web-Applikation hat die Themen nun erhalten und schickt sie weiter an die Android-
Applikation. Die Themen werden strukturiert im XML-Format versendet.
7. Da die aktuellen Themen im XML-Format vorliegen, muss die Android-Applikation die
Daten parsen, um die Inhalte zu erhalten.
8. Nach dem die Daten geparst wurden, werden sie geordnet in die Android-Datenbank
eingefügt, um spätere Logik bei Ausführung der Android-Applikation „FlashCards“
umzusetzen. Die Logik sagt beispielsweise aus, wie viele Karten richtig beantwortet
wurden (siehe nächstes Sequenzdiagramm 4.14).
9. Die Android-App aktualisiert die Themen.
10. Der Lernende bekommt die aktuelle Themenübersicht angezeigt.
Zusätzlich zum Ablauf des Sequenzdiagramms kann gesagt werden, dass zunächst nur alle
Themen aktualisiert werden. Es erfolgt keine automatische Aktualisierung der Karten pro
aktualisiertes Thema. Die Karten werden nicht sofort aktualisiert, um eine Überlastung der
Android-Applikation zu vermeiden, sprich eine zu lange Wartezeit.
Web-Applikation
Android-Applikation
Datenbank - Android-Applikation
1. Parsen
4. insert Bilder
2. Frage Bilder an
3. Sende Bytes der Bilder
Nur wenn Bildpfad im XML-Dokument
eingetragen
Abbildung 4.14: Sequenzdiagramm - Karten aktualisieren
31
4 Design
In der Abbildung 4.14 ist das Sequenzdiagramm abgebildet, das die Aktionen darstellt, wenn
der Lernende die aktuellen Karten zu einem Thema angefordert. Die Kommunikation zwischen
Web-Applikation und Android-Applikation wird grob aufgezeigt. Dabei ist anzumerken, dass
die Anfangsphase (Punkt 3 bis 7) ähnlich wie im vorherigen Sequenzdiagramm aus Abbil-
dung 4.13 verläuft. Aus diesem Grund wird sie nicht noch einmal aufgezeigt. Die funktionale
Anforderung FA14 (3.3) wird durch das Sequenzdiagramm beschrieben:
1. Der Lernende aktualisiert nun die Karten zu einem Thema. Die ersten notwendigen
Schritte wird hier nicht dargestellt. Die Android-Applikation hat ein XML-Dokument
erhalten und parst es entsprechend.
2. Aus dem XML-Dokument wird je Karte ersichtlich, ob zu der Karte ein Bild gehört oder
nicht. Bei vorhandenem Bild wird pro Karte die Web-Applikation angefragt.
3. Die Web-Applikation sucht im zugrunde liegenden Dateisystem anhand des gegebenen
Pfades nach dem Bild und sendet die Bytes des Bildes.
4. Die Bilder werden von der Android-Applikation im entsprechenden Format (BLOB) in
die Android-Datenbank zur passenden Karte eingefügt.
4.3.1 Nachrichtenformat XML
Um die Nachrichten zwischen der Web-Applikation und der Android-Applikation strukturiert
austauschen zu können, muss ein geeignetes Format gewählt werden. Wie aus der bisherigen
Arbeit ersichtlich wird, wird hier XML benutzt. In diesem Abschnitt sollen die XML-Formate
zur Kommunikation der Applikation vorgestellt werden. Es werden zwei Formate de�niert.
Das eine XML-Format beschreibt die verfügbaren Themen und das andere XML-Format be-
schreibt die Inhalte für die Karten. Im abstrakten Systementwurf (vgl. Abschnitt4.1) sind die
Kommunikationspartner und deren Verbindungs- und Übertragungsart aufgezeigt.
1 <themen>2 <row>3 <id>4</id>4 <thema>Verteilte Systeme</thema>5 </row>6 <row>7 <id>10</id>8 <thema>Software Engineering</thema>9 </row>
32
4 Design
10 <row>11 <id>11</id>12 <thema>Mathe 1</thema>13 </row>14 <row>15 <id>16</id>16 <thema>Hauptstädte</thema>17 </row>18 <row>19 <id>18</id>20 <thema>Computer Engineering</thema>21 </row>22 </themen>
Listing 4.1: XML-Dokument: Themen
Das Listing 4.1 beschreibt das XML-Format, welches notwendig ist für die Themenansicht.
Jedes Thema hat eine Identi�kationsnummer und einen Namen.
1 <kartenset>2 <row thema="Hauptstädte">3 <id>22</id>4 <id_thema>16</id_thema>5 <frage_text>Algerien</frage_text>6 <frage_bild/>7 <antwort_text>8 Lage/Kontinent: Afrika Bevölkerung: 31.800.0009 Fläche: 2.381.700 qkm Bevölkerungsdichte:
10 13 Einw./qkm Hauptstadt: Algier11 </antwort_text>12 <antwort_bild>22_antwort.png</antwort_bild>13 </row>14 <row thema="Hauptstädte">15 <id>23</id>16 <id_thema>16</id_thema>17 <frage_text>Afghanistan</frage_text>18 <frage_bild/>19 <antwort_text>20 Lage/Kontinent: Asien Bevölkerung: 28.700.00021 Fläche: 647.500 qkm Bevölkerungsdichte:22 44 Einw./qkm Hauptstadt: Kabul23 </antwort_text>
33
4 Design
24 <antwort_bild>23_antwort.png</antwort_bild>25 </row>26 <row thema="Hauptstädte">27 <id>24</id>28 <id_thema>16</id_thema>29 <frage_text>Deutschland</frage_text>30 <frage_bild/>31 <antwort_text>32 Lage/Kontinent: Europa Bevölkerung: 82.500.00033 Fläche: 357.000 qkm Bevölkerungsdichte:34 231 Einw./qkm Hauptstadt: Berlin35 </antwort_text>36 <antwort_bild>24_antwort.png</antwort_bild>37 </row>38 .39 .40 .41 </kartenset>
Listing 4.2: XML-Dokument: Karten
Das Listing 4.2 beschreibt das XML-Format, welches für die Erstellung der Karten in der
Android-Applikation notwendig ist. Es stellt ein Kartenset zu einem Thema dar. Ein Kartenein-
trag umfasst eine Identi�kationsnummer, die zugehörige Identi�kationsnummer zum Thema,
den Fragetext, das Fragebild, den Antworttext und das Antwortbild.
4.3.2 Datenbankmodellierung
In diesem Abschnitt soll kurz auf die Datenbankmodellierung der Web-Applikation und der
Android-Applikation eingegangen werden. Es werden jeweils Entity-Relationship-Modelle
(ERM) aufgezeigt und kurz erklärt.
34
4 Design
kartenthemen
login
id id_themafrage_text
frage_bildantwort_bild
antwort_text
id
usernamepassword
id
thema
hat1n
Abbildung 4.15: ERM - Web-Applikation
In der Abbildung 4.15 ist das ERM der Web-Applikation zu sehen. Es gibt drei Entitäten
„login“, „themen“ und „karten “. Die Entität Login enthält alle Benutzernamen und die zugehö-
rigen Passwörter von Benutzerkonten, wobei die Passwörter als MD5-Checksumme abgelegt
werden. Die Entität Karte hat die Attribute, die für die Darstellung der jeweiligen Karte not-
wendig sind (siehe 4.2).Die Entität Themen besitzt das Attribut Thema. Karten und Themen
haben eine 1:n Beziehung zu einander, da ein Thema mehrere Karten enthalten kann. Beim
Kopieren einer Karte in ein anderes Thema entsteht eine Kopie der Karte und nicht eine weitere
Referenzierung, was eine m:n Beziehung zwischen Karten und Themen bedeuten würde. Diese
Handhabung hat den Vorteil, dass beim Löschen der Karte in einem Thema nicht automatisch
die Karte im anderen Thema gelöscht wird.
kartenthemen
id id_themafrage_text
frage_bild
antwort_bild
antwort_text
id
thema
hat1n
richtig_beantwortet
origin
serverid url
Abbildung 4.16: ERM - Android-Applikation
Die Android-Applikation verwendet ebenfalls eine Datenbank. Das ERM dieser Datenbank ist
35
4 Design
in Abbildung 4.16 zu sehen. Die Menge der Entitäten ähnelt derjenigen der Web-Applikation,
jedoch fehlt in diesem ERM die „login“- Entität. Darüber hinaus gibt es einen Unterschied
zwischen den Attributen „antwort_bild“ und „frage_bild“ in der Web-Applikation und Android-
Applikation. In der Web-Applikation sind die Pfade der jeweiligen Bilder gespeichert (siehe
XML-Dokument (4.2)). Die Android-Applikation hingegen speichert die Bytes der Bilder in
BLOB-Format, um sie bei Bedarf in der Android-Applikation anzeigen zu lassen. Im ERM der
Android-Applikation gibt es zusätzlich das Attribut „origin“. Das Attribut „origin“ enthält
als Eintrag entweder „web“ oder „xml“ und ist dafür da, um in der Android-Applikation zu
unterscheiden, ob die Themen aus einem lokalen XML-Dokument oder vom Server stammen.
In der Entität „server“ wird die entsprechende Server URL gespeichert und bei Bedarf kann sie
aktualisiert bzw. geändert werden.
36
5 Realisierung
In diesem Kapitel geht es um die Realisierung der Applikationen. Dabei werden die Erkenntnisse
aus den vorherigen Kapiteln als Grundlage genommen. Die Anwendung besteht aus zwei
Applikationen, der Android-Applikation und der Web-Applikation. Diese werden getrennt
von einander vorgestellt. Mit Hilfe eines Klassendiagramms werden die Komponenten der
Android-Applikation (Bleske (2012)) erklärt. Code-Abschnitte dienen zur Veranschaulichung
und werden ebenfalls erklärt. Am Ende des Kapitels werden verwendete Bibliotheken und
unterstützende Programme vorgestellt.
5.1 Android-App Entwicklung
In diesem Abschnitt wird die Realisierung der Android-Applikation vorgestellt. Das Klassen-
diagramm der Applikation wird hierbei erklärt, und Code-Abschnitte werden aufgezeigt.
Die Mindestanforderung des Gerätes, auf dem die Applikation ausgeführt werden soll, lauten:
• Android Version: 2.3.3 API-Level 10
• Speicheranfoderung: ca. 5 MB + weiteren Speicher für die Karten und die zugehörigen
Bilder.
37
5 Realisierung
Abbildung 5.1: Klassendiagramm
38
5 Realisierung
In der Abbildung 5.1 ist das Klassendiagramm der Android-Applikation zu sehen. Es folgt eine
Beschreibung der wichtigsten Klassen, dabei wird darauf geachtet, logisch zusammenhängen-
de Klassen direkt nacheinander aufzulisten und zu erklären. Vorweg ist zu erwähnen, dass
einige Klassen, die hauptsächlich für die GUI-Gestaltung zuständig sind, nicht erklärt werden,
da sie wenig Logik enthalten (GUI-Elemente siehe (4.2)). Die Erklärung ist jeweils wie folgt
aufgebaut: Erst wird die Funktionalität der Klasse beschrieben und dann wichtige Methoden
durch Code-Abschnitte erklärt:
MySQLiteHelper: Diese Klasse ist die am meisten verwendete Klasse. Sie stellt eine Schnitt-
stelle dar, um die Android-Datenbank des mobilen Gerätes zu verwenden, sprich notwendige
Datenbankzugri�e (Türker (2003)) werden in der Klasse realisiert. Zusätzlich zur Verwendung
der Datenbank wird in der Klasse in einer Methode, bei Notwendigkeit, Bilddaten aus der
Web-Applikation angefordert, heruntergeladen und in der Datenbank abgelegt. Näheres dazu
in der Erklärung des jeweiligen Code-Abschnittes. Dabei ist anzumerken, dass in jeder Methode
dieser Klasse eine Schreib- bzw. Lesereferenz der Datenbank erzeugt werden muss.
1 @Override2 public void onCreate(SQLiteDatabase db) {
4 String CREATE_THEMEN_TABLE = "CREATE TABLE themen ( " +5 "id_auto INTEGER PRIMARY KEY AUTOINCREMENT, " +6 "id INTEGER, " +7 "thema TEXT, " +8 "origin TEXT)";
10 String CREATE_KARTEN_TABLE = "CREATE TABLE karten ( " +11 "id INTEGER PRIMARY KEY AUTOINCREMENT, " +12 "id_thema INTEGER, " +13 "frage TEXT, " +14 "antwort_text TEXT, " +15 "richtig_beantwortet INTEGER, " +16 "frage_bild BLOB, " +17 "antwort_bild BLOB)";
19 String CREATE_SERVER_TABLE = "CREATE TABLE server ( " + "id INTEGER, " + "url TEXT)";
21 db.execSQL(CREATE_THEMEN_TABLE);22 db.execSQL(CREATE_KARTEN_TABLE);23 db.execSQL(CREATE_SERVER_TABLE);24 }
Listing 5.1: MySQLiteHelper - onCreate
39
5 Realisierung
Im Listing 5.1 sieht man die „onCreate“- Methode, die beim ersten Aufruf der Android-
Applikation ausgeführt wird. Sie erstellt die notwendigen Tabellen und Felder in der internen
Datenbank der Android-Applikation.
1 public void addKarte(Karte karte){
3 ServerUrl sUrl = new ServerUrl(cont);4 String sUrlString = sUrl.getServerUrl();5 SQLiteDatabase db = this.getWritableDatabase();
7 ContentValues values = new ContentValues();8 values.put(KEY_ID_THEMA, karte.getId_thema());9 values.put(KEY_FRAGE, karte.getFrage());
10 values.put(KEY_ANTWORT, karte.getAntwort_text());11 values.put(KEY_RICHTIG_BEANTWORTET, karte.getRichtig_beantwortet());
13 if(karte.getFrage_bild() != null && karte.getFrage_bild() != ""){14 byte[] logoImage = getLogoImage(sUrlString + "upload/upload/" + karte.
getFrage_bild());15 values.put(KEY_FRAGE_BILD, logoImage);16 }
18 ...
20 db.insert(TABLE_KARTEN,21 null,22 values);
24 db.close();25 }
Listing 5.2: MySQLiteHelper - addKarte
Im Listing 5.2 sieht man den Code-Abschnitt, der das Hinzufügen einer neuen Karte in die
Datenbank der Android-Applikation realisiert. Es wird zunächst eine Verbindung zur Daten-
bank erstellt, anschließend werden die Werte in die passenden Felder eingetragen. Durch die
If-Abfrage in Zeile 13 wird überprüft, ob die Karte ein Bild hat. Wenn ja, wird das Bild direkt
vom Web-Applikations-Server, per „getLogoImage“, angefordert (siehe 5.3). Die Abfrage und
Sequenzen für die Erhaltung der Frage- und Antwort sind identisch.
1 private byte[] getLogoImage(String url){2 try {3 ...4 InputStream is = ucon.getInputStream();5 BufferedInputStream bis = new BufferedInputStream(is);
40
5 Realisierung
7 ByteArrayBuffer baf = new ByteArrayBuffer(500);8 int current = 0;9 while ((current = bis.read()) != -1) {
10 baf.append((byte) current);11 }
13 return baf.toByteArray();14 ...15 }
Listing 5.3: MySQLiteHelper - getLogoImage
Im Listing 5.3 ist die Methode zu sehen, die aufgerufen wird, um die Frage- und Antwortbilder
der Karte zu erhalten. Es werden eintre�ende Bytes in der richtigen Reihenfolge sequentiell
aneinandergehängt.
1 public Karte getRandomKarte(int id_thema){
3 ...
5 Cursor cursor =6 db.query(TABLE_KARTEN, // a. table7 COLUMNS, // b. column names8 " id_thema = ? and richtig_beantwortet = ?", // c. selections9 new String[] { String.valueOf(id_thema), String.valueOf(
getMinRichtig(id_thema)) }, // d. selections args10 null, // e. group by11 null, // f. having12 "RANDOM()", // g. order by13 "1"); // h. limit
15 if (cursor != null)16 cursor.moveToFirst();
18 ...
20 return karte;21 }
Listing 5.4: MySQLiteHelper - getRandomKarte
In der Methode „getRandomKarte“ (siehe Listing 5.4) wird die nächste Karte beim aktiven
Lernen in der Applikation ermittelt. Die ermittelte Karte wird erzeugt und zurückgegeben,
um sie in der Applikation anzeigen zu lassen. Es wird eine Query an die Android-Datenbank
gesendet, um die jeweilige Karte zu erhalten. Das Ermitteln der geeigneten Karte erfolgt nach
folgenden Kriterien: 1. Es wird die Karte zum passenden Thema gesucht. 2. Die Methode
„getMinRichtig“ in Zeile 9 ermittelt die Karte, die am wenigsten richtig beantwortet wurde.
41
5 Realisierung
Diese Vorgehensweise entspricht der in Abschnitt 3.1 vorgestellten Lernstrategie "Cleveres
Wiederholen".
1 public ArrayList<Thema> getAllThemen() {2 ArrayList<Thema> themen = new ArrayList<Thema>();
4 String query = "SELECT * FROM " + TABLE_THEMEN;
6 ...
8 Thema thema = null;9 if (cursor.moveToFirst()) {
10 do {11 thema = new Thema();12 thema.setId_auto(Integer.parseInt(cursor.getString(0)));13 thema.setId(Integer.parseInt(cursor.getString(1)));14 thema.setThema(cursor.getString(2));15 thema.setOrigin(cursor.getString(3));
17 themen.add(thema);18 } while (cursor.moveToNext());19 }
21 ...
23 return themen;24 }
Listing 5.5: MySQLiteHelper - getAllThemen
Im Listing 5.5 werden alle Themen, die in der Datenbank verfügbar sind, aufgerufen und
zwischengespeichert. Diese Methode wird zur Visualisierung in der Android-Applikation ver-
wendet.
ParsingXML: In dieser Klasse werden die XML-Dokumente geparst. Dabei wird unterschie-
den, ob die XML-Dokumente, Karte oder Themen beschreiben. Außerdem wird unterschieden,
ob sich die XML-Dokumente im lokalen Speicher be�nden oder aus der Web-Applikation
stammen. Um die XML-Dokumente geeignet zu parsen, gibt es für Karten und Themen jeweils
einen XMLHandler.
1 public ArrayList<Karte> parser(String p_uri, int i, Context cont) {
3 try {4 SAXParserFactory spf = SAXParserFactory.newInstance();5 SAXParser sp = spf.newSAXParser();
42
5 Realisierung
7 XMLReader xr = sp.getXMLReader();
9 KartenXMLHandler myXMLHandler = new KartenXMLHandler();10 xr.setContentHandler(myXMLHandler);
12 InputSource inputSource = new InputSource();13 inputSource.setEncoding("utf-8");14 inputSource.setCharacterStream(new StringReader(p_uri));
16 xr.parse(new InputSource(new FileReader(new File(p_uri))));
18 kartenList = myXMLHandler.getParsedData();
20 return kartenList;21 ...22 }23 }
Listing 5.6: ParsingXML - parser
In der Methode „parser“ (5.6) wird ein SAXParser (McLaughlin und Edelson (2006)) erzeugt,
der dafür zuständig ist, XML-Dokumente mit wenig Aufwand zu parsen. Der entsprechende
Handler für Karten oder Themen wird dem Reader des SAXParser übergeben. Ab Zeile 12 bis
14 wird das XML-Dokument aus dem lokalen SpeicherHier besteht ein Unterschied zu den
anderen Parser-Methoden in der ParsingXML-Klasse. Nach dem Parsen wird eine Liste mit
entsprechenden Daten erzeugt.
ThemenXMLHandler: Die Klasse erbt von der Klasse „DefaultHandler“, damit sie dem SAX-
Parser (5.6) übergeben werden kann. Da jedes XML-Dokument ein eigenes Schema besitzt,
muss für jedes Schema individuell ein Handler geschrieben werden, der die Struktur der ent-
sprechenden XML-Dokumente parsen kann. In dieser Klasse werden die XML-Dokumente der
Themen behandelt.
43
5 Realisierung
1 @Override2 public void startElement(String namespaceURI, String localName,3 String qName, Attributes atts) throws SAXException {
5 if (localName.equals("row")) {6 list.add(new Thema());7 }else if (localName.equals("id")) {8 this.in_id = true;9 }else if (localName.equals("thema")) {
10 this.in_thema = true;11 }12 }
Listing 5.7: ThemenXMLHandler - startElement
Im Listing 5.7 wird zu Anfang beim Parsen des XML-Dokuments die „startElement“- Methode
aufgerufen. Jedes Mal, wenn ein ö�nender Tag vom Parser erkannt wird, wird diese Methode
aufgerufen. Es wird überprüft, was für einen Typ der Tag (<Typ>) beschreibt. In Zeile 5 wird
der Anfang des XML-Dokuments bearbeitet. Daher wird ein neues Thema-Element in die Liste
der verfügbaren Themen hinzugefügt, ansonsten wird je nach Typ, ein boolean auf true gesetzt.
In der nächsten Methode (5.8) wird darauf eingegangen.
1 public void characters(char ch[], int start, int length) {2 if(this.in_id){3 list.get(list.size()-1).setId( Integer.parseInt(new String(ch,
start, length)));4 }5 if(this.in_thema){6 thema += new String(ch, start, length);7 list.get(list.size()-1).setThema(thema);8 }
10 }
Listing 5.8: ThemenXMLHandler - characters
In der Methode „characters“ (5.8) wird der Tag behandelt, dessen boolean auf true gesetzt ist,
da dieser zuvor von der Methode „startElement“ (5.7) erkannt wurde. Der Inhalt des Tags wird
in das entsprechende Attribut des Themas in der Liste eingefügt bzw. gesetzt.
44
5 Realisierung
1 public void endElement(String namespaceURI, String localName, String qName)2 throws SAXException {3 if (localName.equals("id")) {4 this.in_id = false;5 }else if (localName.equals("thema")) {6 thema = "";7 this.in_thema = false;8 }9 }
Listing 5.9: ThemenXMLHandler - endElement
Wird der Tag geschlossen, wird die Methode „endElement“ aufgerufen, um die jeweiligen
boolean-Attribute auf false zu setzen.
KartenXMLHandler: In dieser Klasse werden die Karten zu einem Thema geparst. Es verfügt
über die gleiche Logik wie die ThemenXMLHandler-Klasse, aus diesem Grund werden die
Code-Abschnitte nicht aufgezeigt. Einziger minimaler Unterschied ist, dass die Karten mehr
Attribute haben und daher mehr Abfragen getätigt werden müssen.
ServerURL: Die Karten und Themen werden von einem Server aufgerufen. Die Klasse spei-
chert die notwendigen Serverdaten in der Android-Datenbank. Als Default Server kann ein
Default-Server eingetragen werden, der kontaktiert wird, wenn keine Server-URL manuell
eingestellt wurde. Bei Änderung der Server-URL wird der entsprechende Eintrag in der Daten-
bank geändert.
FragenActivity: Diese Klasse beschreibt ein GUI-Element. Wenn das Lernen beginnt und die
erste Frage einer Karte aufgezeigt wird, ist diese Klasse aktiv (4.11). Die Funktionalitäten hinter
den jeweiligen Buttons werden implementiert. Außerdem greift die Klasse auf „MySQLiteHel-
per“zu, um Zugri� auf die Datenbank zu erhalten. Wird eine Frage richtig beantwortet, wird in
der Klasse in einer Methode ein Attribut inkrementiert, um sie aus Sich der Anwendungslogik
ins nächste Fach zu legen.
AntwortActivity: In dieser Klasse wird, genau wie in der Klasse „FragenActivity“, ein GUI-
Element erzeugt. Die Antwort zur Frage einer Karte wird hier mit den notwendigen Kompo-
nenten erzeugt und angezeigt. Es erfolgt, bei Bedarf, Zugri� auf die Datenbank.
45
5 Realisierung
5.2 Web-Applikation Entwicklung
In diesem Abschnitt wird auf die Entwicklung der Web-Applikation eingegangen. Es erfolgt
eine Erklärung des Aufbaus der Applikation und anschließend wird auf die Erzeugung des
XML-Dokuments durch Vorstellung des Codes eingegangen.
Für die Entwicklung der Web-Applikation wurden folgende Technologien/Sprachen eingesetzt:
• HTML und CSS: Gestaltung der Ober�äche, Formulare, Hintergrundbilder, Tabellen.
• PHP: Verarbeitung der Benutzereingaben und Zugri� auf die Datenbank. Handling der
Bilder. Erzeugen der XML-Dokumente.
• Ajax: Für einen bequemeren Bilderupload. Bilder werden durch diese Technologie im
Hintergrund hochgeladen und sofort angezeigt, ohne Neuladen der Seite.
• JavaScript: Sicherheitsabfragen, beim Löschen von Bildern, Themen und Karten.
• SQL: Verschiedene SQL-Queries zur Manipulation der Datenbank.
46
5 Realisierung
Aufbau
styles.css
config.php
edit.php
login.php
karten_erstellen.php
karten.php
thema_erstellen.php
themen.php
reqXML.php
ajaximage.php
upload
pages
imguploadimg
Abbildung 5.2: Aufbau der Web-Applikation
In der Abbildung 5.2 sieht man den Aufbau der Web-Applikation. Es ist die hierarchische
Ordnerstruktur zu sehen. Die Web-Applikation enthält eine „index.php“-Datei, die das ge-
samte Grundgerüst der Applikation enthält. Werden neue Seiten aufgerufen, so müssen sie
nicht das komplette Grundgerüst enthalten, sondern werden nur an die entsprechende Stelle
per „include“ eingebunden. Es erfolgt eine kurze Erläuterung der einzelnen Dateien und Ordner:
/img/: In diesem Ordner werden die Gra�ken für die GUI der Web-Applikation abgelegt.
/upload/upload_img/: Der Ordner beinhaltet die Bilder, die hochgeladen worden sind. Es
sind die Bilder die bei einer Frage und Antwort hinzugefügt werden können.
login.php: In diesem Skript werden, wenn sich die Lehrkraft einloggt, die Eingaben, sprich Be-
nutzername und Passwort, mit den Daten in der Datenbank verglichen. Aus dem eingegebenen
Passwort wird ein MD5-Hashwert gebildet. Die Passwörter in der Datenbank sind ebenfalls in
47
5 Realisierung
diesem Format gespeichert, so dass nun ein Vergleich statt�nden kann. Bei korrekter Einga-
be gelangt die Lehrkraft zur nächsten Ansicht, bei falscher Eingabe wird der Zugri� verweigert.
edit.php: Die Manipulation der Datenbank geschieht in diesem Skript. Funktionen wie, Thema
erstellen, Thema ändern, Thema löschen, Karte erstellen, Karte löschen, Karte ändern, Karte
kopieren und Karte verschieben, die von der Web-Applikation ausgehen, werden hier umgesetzt.
con�g.php: Diese con�g-Datei wird dort eingesetzt, wo eine Verbindung zur Datenbank
notwendig ist. Sie enthält die Login-Informationen.
styles.css: Dieses Dokument beschreibt den Stil bzw. die Gestaltung der HTML-Elemente.
upload/ajaximage.php: Dieses Skript beinhaltet die Logik, um die Bilder der Karten im
Hintergrund hochzuladen (9Lessongs (2014)). Dabei wird darauf geachtet, dass nur erlaubte
Dateiendungen verwendet werden (gif, jpeg, png und bmp). Außerdem wird in diesem Skript
darauf geachtet, dass die maximale Dateigröße nicht überschritten wird.
pages/themen.php: Vorweg ist zu erwähnen, dass die Skripte, die im Ordner „pages“ enthal-
ten sind, je nach Ausführung, in die index.php geladen werden. Dieses Skript lädt die Themen
aus der Datenbank und zeigt sie an, außerdem können verschiedene Operationen durchgeführt
werden (siehe funktionale Anforderungen (3.3)).
pages/thema_erstellen.php: Um ein neues Thema zu erstellen und es in die Datenbank
zu laden, wird dieses Skript benötigt.
pages/karten.php: Durch dieses Skript werden die verfügbaren Karten geladen. Verschiedene
Operationen sind durchführbar (siehe funktionale Anforderungen (3.3))
pages/karten_erstellen.php: Neue Karten mit deren Inhalten für ein Thema werden mit
Hilfe dieses Skriptes umgesetzt. Datenbankzugri�e werden hierfür benötigt.
reqXML.php: Mit diesem Skript ist es möglich, ein XML-Dokument der verfügbaren Karten
und der verfügbaren Themen zu erzeugen. Die erzeugten XML-Dokumente dienen zum Aus-
tausch der Web-Applikation und Android-Applikation.
48
5 Realisierung
1 <?php2 ...
4 if(isset($_REQUEST["thema"])){
6 header("Content-Type: application/xml");
8 $thema = $_REQUEST["thema"];
10 $thema_name = $mysqli->query("SELECT thema FROM themen WHERE id = ’".$thema."’")->fetch_object()->thema;
11 $result = mysqli_query($verbindung, "SELECT * FROM karten WHERE id_thema = ’".$thema."’");
13 $XMLDoc = new SimpleXMLElement("<?xml version=’1.0’ standalone=’yes’?><kartenset></kartenset>");
15 while($dbrow = mysqli_fetch_object($result))16 {17 $xmlrow = $XMLDoc->addChild("row");18 $xmlrow->addAttribute(’thema’, $thema_name);
20 foreach($dbrow as $Spalte => $Wert)21 $xmlrow->$Spalte = $Wert;22 }23 echo $XMLDoc->asXML();
25 } else {
27 header("Content-Type: application/xml");
29 $result = mysqli_query($verbindung, "SELECT * FROM themen");
31 $XMLDoc = new SimpleXMLElement("<?xml version=’1.0’ standalone=’yes’?><themen></themen>");
33 while($dbrow = mysqli_fetch_object($result))34 {35 $xmlrow = $XMLDoc->addChild("row");
37 foreach($dbrow as $Spalte => $Wert)38 $xmlrow->$Spalte = $Wert;39 }40 echo $XMLDoc->asXML();41 }42 ?>
Listing 5.10: reqXML.php
49
5 Realisierung
Im Listing 5.10 ist der Ablauf zu sehen, um die XML-Dokumente zu erstellen. Als erstes
wird überprüft, ob Themen oder Karten angezeigt werden sollen. Dies wird überprüft, indem
geschaut wird, ob die Themen-ID übergeben wurde (Zeile 4). Es wird zunächst der richtige XML-
Header angegeben, damit bekannt wird, dass es sich um ein XML-Dokument handelt. Falls die
Themen-ID übergeben wurde, erfolgt eine Datenbankabfrage, um alle Karten zu einem Thema
zu erhalten. In Zeile 14 wird ein leeres XML-Dokument mit der Klasse „SimpleXMLElement“
erzeugt, welches in den nachfolgenden Schleifen mit den jeweiligen Karten gefüllt wird. Ist
Themen-ID nicht gesetzt, so ist die Übersicht aller Themen anzuzeigen. Diese wird im else-
Zweig realisiert.
5.3 Bibliotheken und Hilfsprogramme
In diesem Abschnitt werden verwendete Bibliotheken und Hilfsprogramme genannt und
vorgestellt, die bei der Entwicklung der Applikation eingesetzt wurden.
• Eclipse: In dieser Entwicklungsumgebung wurde die Android-Applikation program-
miert.
• Adobe Dreamweaver CC: Hiermit wurde die Web-Applikation erstellt.
• Android SDK: Android SDK (Software Development Kit) (Bleske (2012)) enthält Pro-
gramme, um Android-Applikationen zu entwickeln.
• SQLite Debugger:Der SQLite Debugger be�ndet sich auf dem Android-Gerät und ist ein
Werkzeug, womit man die Datenbank des Androids-Gerätes auslesen und manipulieren
kann.
• jQuery: Ist eine JavaScipt-Bibliothek, die in der Web-Applikation genutzt wurde.
• aFileChooser: Der aFileChooser ist eine Bibliothek von Paul Burke (Burke (2013)), der
ein Dateimanager für Android-Geräte verwirklicht.
50
6 Schluss
In diesem Kapitel erfolgt eine Zusammenfassung der Arbeit. Es werden die Erfahrungen, die
während der Erstellung der verschiedenen Kapitel und der Anwendung gesammelt wurden,
beschrieben sowie Erweiterungsmöglichkeiten und Verbesserungen im Ausblick dargestellt.
6.1 Zusammenfassung
Der Einstieg der Arbeit erfolgte durch Beschreibung der Grundlagen. Es wurden verschiedene
Begri�e kurz erklärt und Systeme und Techniken erläutert, da sie für das bessere Verständnis
in der Analyse, dem Design und der Realisierung der gesamten Anwendung erforderlich sind.
Ein Teil der Anwendung ist eine Web-Applikation, weshalb einige Prinzipien zum Webdesign
vorgestellt wurden.
Im dritten Kapitel erfolgte die Analyse der Anforderungen an die Anwendung. Das Karteikarten-
system, gemeinsam mit Lernstrategien wurde vorgestellt, um die zu entwickelnde Anwendung
zu präsentieren. Durch Use Cases entstand ein Einblick in die Szenarien der Anwendung und
aus diesen Use Cases wurden Rahmenbedingungen und funktionale Anforderungen an die zu
entwickelnde Anwendung abgeleitet.
Im vierten Kapitel wurde das Design der Anwendung vorgestellt. Wichtig zu erwähnen ist,
das Zusammenspiel der beiden Applikationen (Android-Applikation und Web-Applikation).
In einem groben Systementwurf wurde dieses Zusammenspiel aufgezeigt. Ein wesentlicher
Teil der Anwendung ist die GUI, da sie zur Interaktion mit beiden Akteuren, Lehrkraft und
Lernendem, eine wichtige Rolle spielt. Aus diesem Grund wurden die GUI der Web-Applikation
und der Android-Applikation genauestens erläutert und deren Einfachheit aufgezeigt. Die
Kommunikation zwischen den Applikationen wurde mit Hilfe von Sequenzdiagrammen be-
schrieben. Dabei wurden nur entscheidende Abläufe veranschaulicht. Durch Verwendung des
XML-Formates erfolgt ein Austausch der jeweiligen Daten. Mit Hilfe einer Datenbank werden
die Daten zwischengespeichert, um beim Abruf aktuelle Daten zu erhalten. Das Design der
Datenbank wurde mit Hilfe eines Entitiy-Relationship-Modells aufgezeigt.
Das fünfte Kapitel stellt die Ausarbeitung zur Realisierung dar. Die Realisierung beider Ap-
plikationen wurde separat präsentiert. Wichtige Klassen der Android-Applikation wurden
51
6 Schluss
vorgestellt. Ebenso wurden wichtige Methoden der jeweiligen Klassen erläutert, um einen
groben Überblick über die Android-Applikation zu erhalten. Die Methoden wurden in Form
von Code-Abschnitten präsentiert. Zur Entwicklung der Web-Applikation wurde der allge-
meine Aufbau erläutert. Der Code zur Erzeugung der XML-Datei wurde dargelegt. Es wurden
verschiedene Bibliotheken und Programme eingesetzt, um die Realisierung zu vereinfachen
und zu unterstützen, welche ebenfalls kurz aufgezeigt wurden.
6.2 Ausblick
In diesem Abschnitt werden einige Verbesserungen bzw. Erweiterungen vorgestellt. Es erfolgt
eine Unterteilung in technische Möglichkeiten, Funktionalität und Gestaltung.
Technische Möglichkeiten
Die Applikation ist nur für Android-Geräte kompatibel. Eine Erweiterung für andere Betriebs-
system, wie beispielsweise Apples iOS ist denkbar.
Zurzeit ist es nur möglich, mit Hilfe einer einzigen Lernstrategie, dem "cleveren Wiederho-
len"(siehe Abschnitt 3.1.1), die Karten zu erlernen. Die Umsetzung von anderen Strategien
wäre sinnvoll, da somit der Lernende für sich entscheiden könnte, welche Strategie für ihn am
besten geeignet ist.
Die Anwendung unterstützt nur einfache Toucheingaben. Die Nutzung von mehr Gestiken
könnte von Vorteil sein. Beispielsweise ein „Rechts-wischen“ könnte eine neue Karte erschei-
nen lassen.
Die Bilder der Fragen und Antworten von Karten werden durch Pfade im XML-Dokument
übergeben. Eine Verbesserung wäre, wenn beim Exportieren des XML-Dokuments, die Bilder
direkt binär im jeweiligen Tag enthalten sind. Dadurch müssten die Bilder nicht erst noch
heruntergeladen werden, wenn ein lokales XML-Dokument importiert wird, sondern direkt
ohne Internetzugang gespeichert werden.
Funktionalitäten
Zurzeit gibt es für die Web-Applikation nur einen Admin-Benutzer, die Lehrkraft. Durch eine
Benutzerregistrierung wäre es möglich, mehrere Benutzer anzulegen, so dass die Lernenden
ihre Karten individuell verwalten können. So wäre es denkbar, dass es zwei Kartentypen gibt.
Zum einen Benutzerkarten, die nur der jeweilige Benutzer und eventuell die Lehrkraft sieht,
und zum anderen Karten, die jeder sehen und benutzen darf, welche beispielsweise von der
52
6 Schluss
Lehrkraft für alle zur Verfügung gestellt werden.
Die Fragen und Antworten könnten um Videos- und Sounddateien erweitert werden, so dass
der Lernende die Fragen ggf. besser versteht und sich die Antworten besser einprägen kann.
Zurzeit ist es nur möglich pro Frage und Antwort ein Bild einzubinden. Das Einbinden von
mehreren Bildern könnte für das Verständnis einiger Inhalte von Vorteil sein, jedoch besteht
auch die Gefahr, dass die Karte zu unübersichtlich sein wird.
Um neue Karten zu erstellen und zu ändern, muss die Lehrkraft diese in die Web-Applikation
einp�egen. Von Vorteil wäre es, wenn es in der Android-Applikation eine solche Funktionalität
auch gäbe.
Gestaltung
Um Karten und vor allem Themen zu di�erenzieren, könnte man verschiedene Hintergrund-
farben pro Thema wählen, so wäre ebenfalls eine Unterteilung möglich.
Statistiken könnten für den Lernenden hilfreich sein, um einen Überblick über das bisher
Gelernte zu bekommen. Die Statistik wäre ebenfalls für die Lehrkraft von Vorteil, um abzu-
schätzen, welcher Lerninhalt einfacher und welcher schwieriger ist.
Beim Einfügen von Frage- und Antworttext ist es zurzeit nicht möglich, den Text zu formatie-
ren. Für eine bessere Übersicht der Karten und zur Hervorhebung von Textstellen wäre diese
Funktionalität von Vorteil.
53
Listings
2.1 XML - Tag . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
2.2 XML - Tag mit Attribut . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
2.3 XML - Tag mit Inhalt . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
4.1 XML-Dokument: Themen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32
4.2 XML-Dokument: Karten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33
5.1 MySQLiteHelper - onCreate . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39
5.2 MySQLiteHelper - addKarte . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40
5.3 MySQLiteHelper - getLogoImage . . . . . . . . . . . . . . . . . . . . . . . . . 40
5.4 MySQLiteHelper - getRandomKarte . . . . . . . . . . . . . . . . . . . . . . . . 41
5.5 MySQLiteHelper - getAllThemen . . . . . . . . . . . . . . . . . . . . . . . . . 42
5.6 ParsingXML - parser . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42
5.7 ThemenXMLHandler - startElement . . . . . . . . . . . . . . . . . . . . . . . . 44
5.8 ThemenXMLHandler - characters . . . . . . . . . . . . . . . . . . . . . . . . . 44
5.9 ThemenXMLHandler - endElement . . . . . . . . . . . . . . . . . . . . . . . . 45
5.10 reqXML.php . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48
54
Abbildungsverzeichnis
2.1 Aufbau der Android-Plattform . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
3.1 Karteikartenlernsystem . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
3.2 Anwendungsfall . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
4.1 Systementwurf . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
4.2 Komponentenübersicht der Android-Applikation . . . . . . . . . . . . . . . . . 19
4.3 Web-Applikation Login-Ansicht . . . . . . . . . . . . . . . . . . . . . . . . . . 20
4.4 Web-Applikation Themen-Ansicht . . . . . . . . . . . . . . . . . . . . . . . . . 21
4.5 Web-Applikation Themen erstellen-Ansicht . . . . . . . . . . . . . . . . . . . 22
4.6 Web-Applikation Karten-Ansicht . . . . . . . . . . . . . . . . . . . . . . . . . . 23
4.7 Web-Applikation Karten ändern-Ansicht . . . . . . . . . . . . . . . . . . . . . 24
4.8 Android-App Splashscreen und Hauptmenü . . . . . . . . . . . . . . . . . . . 25
4.9 Android-App Themen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26
4.10 Android-App Beginn Lernen . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27
4.11 Android-App Frage und Anwort . . . . . . . . . . . . . . . . . . . . . . . . . . 28
4.12 Android-App Server Einstellung und XML laden . . . . . . . . . . . . . . . . . 29
4.13 Sequenzdiagramm - Themen aktualisieren . . . . . . . . . . . . . . . . . . . . 30
4.14 Sequenzdiagramm - Karten aktualisieren . . . . . . . . . . . . . . . . . . . . . 31
4.15 ERM - Web-Applikation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35
4.16 ERM - Android-Applikation . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35
5.1 Klassendiagramm . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38
5.2 Aufbau der Web-Applikation . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47
55
Literaturverzeichnis
[9Lessongs 2014] 9Lessongs: Ajax Image Upload without Refreshing Page
using Jquery. 2014. – URL http://www.9lessons.info/2011/08/ajax-image-upload-without-refreshing.html. – Zugri�sdatum:
16.03.2014
[Bleske 2012] Bleske, C.: Java für Android: native Android-Apps programmieren ; [so entwi-
ckeln Sie Android-Apps mit Java und Eclipse ; Klassen undMethoden für Android kennenlernen
und nutzen ; so verkaufen Sie Ihre Apps bei Google Play ; der Einstieg in die mobile Program-
mierung]. Franzis, 2012 (Know-how ist blau). – URL http://books.google.de/books?id=sjPJpwAACAAJ. – ISBN 9783645601108
[Bor-learn 2014] Bor-learn: Gleich richtig lernen! 2014. – URL http://bor-learn.de/lerntechniken/karteikarten/vor-und-nachteile.html. – Zu-
gri�sdatum: 10.03.2014
[Burke 2013] Burke, Paul: aFileChooser. 2013. – URL https://github.com/iPaulPro/aFileChooser. – Zugri�sdatum: 10.03.2014
[Koch 2010] Koch, D.: XML für Webentwickler: ein praktischer Einstieg. Hanser, 2010.
– URL http://books.google.de/books?id=xZClQwAACAAJ. – ISBN
9783446422568
[Künneth 2012] Künneth, T.: Android 4: Apps entwickeln mit demAndroid SDK. Galileo Press
GmbH, 2012 (Galileo Computing). – URLhttp://books.google.de/books?id=j-BpuQAACAAJ. – ISBN 9783836219488
[Laozi 2014] Laozi: Zitat1567. 2014. – URL http://zitate.net/zitat_1567.html. – Zugri�sdatum: 23.03.14
[McLaughlin und Edelson 2006] McLaughlin, B. ; Edelson, J.: Java and XML. O’Reilly, 2006
(Java Series). – URL http://books.google.de/books?id=O59QAAAAMAAJ.
– ISBN 9780596101497
56
Literaturverzeichnis
[MemoStep 2014] MemoStep: Lerntipps - E�ektiv lernen mit Karteikarten. 2014. –
URL http://www.memostep6.com/de/lerntipps-sprachen-lernen/effektiv-lernen-mit-karteikarten.htm. – Zugri�sdatum: 13.03.2014
[Türker 2003] Türker, Can: SQL: 1999 & SQL: 2003 – Objektrelationales SQL, SQLJ &
SQL/XML. Heidelberg : dpunkt.verlag, 2003. – ISBN 3-89864-219-4
[Wikipedia 2014a] Wikipedia: Android (Betriebssystem). 2014. – URL http://de.wikipedia.org/wiki/Android_%28Betriebssystem%29. – Zugri�sda-
tum: 12.03.2014
[Wikipedia 2014b] Wikipedia: Lernkartei. 2014. – URL http://de.wikipedia.org/wiki/Lernkartei. – Zugri�sdatum: 15.03.2014
57
Hiermit versichere ich, dass ich die vorliegende Arbeit ohne fremde Hilfe selbständig verfasst und
nur die angegebenen Hilfsmittel benutzt habe.
Hamburg, 3. April 2014 Mobin Meiwandi
