Eine iOS-App zum Lernen von Dialekt-Wörtern aus Ostwestfalen-Lippe. Diese App wurde von Jakob Metzger als Bachelor-Arbeit an der Universität Bielefeld entwickelt.
- Verwendete Ressourcen & Dienste
- Beteiligte Studierende an der Entwicklung des Konzepts
- Installation
- Wörterbücher
Im folgenden werden alle Ressourcen und Dienste aufgelistet, die von Drittanbietern stammen. Alle diese Ressourcen und Dienste sind für die private und kommerzielle Nutzung frei verfügbar.
- Apache Cordova 6.3.0
- Cordova StatusBar 2.1.3
- Cordova Keyboard 1.1.4
- Cordova Dialogs 1.2.1
- gulp 3.9.1
- jsdoc-to-markdown 1.3.6
- doctoc 1.2.0
- Lato Webfont
- Entypo via Fontello
- FontAwesome via Fontello
Folgende Studierende waren im Zuge des Seminars Mobile Learning an der Universität Bielefeld unter Leitung von Paul John an der Konzeption des ersten Prototypen von OWLisch beteiligt:
- Tugba Aksakal
- Miriam Belke
- Melanie Derksen
- Franziska Kluge
- Lisa Kottmann
- Kai-Frederik Lüking
- Jakob Metzger
- Philipp Niewöhner
Alle in der App enthaltenen Audio-Dateien wurden von Miriam Belke eingesprochen und bearbeitet.
Im folgenden wird beschrieben, wie das Projekt installiert und bearbeitet werden kann.
Für die Installation werden zunächst NPM und Xcode benötigt. Als nächstes müssen per Kommandozeile einige Pakete installiert werden:
# Xcode Command Line Tools
xcode-select --install
# Node Module
npm install -g cordova
npm install -g jsdoc-to-markdown
npm install -g doctoc
npm install -g ios-simUm das Projekt anschließend zu initialisieren und ein lauffähiges Xcode-Projekt unter platforms/ios anzulegen, können folgende Befehle verwendet werden:
# Zunächst zum Projekt navigieren
cd /pfad-zum-projekt/owlisch
# Kurzfassung
npm run init
# Alternativ
cordova platform add ios
cordova build iosUm die App in einem Emulator zu starten, können folgende Befehle verwendet werden:
# Kurzfassung
npm run emulate
# Alternativ
cordova emulate ios --target="iPhone-5s"Alternativ dazu kann auch das Projekt unter platforms/ios direkt in Xcode geöffnet und ausgeführt werden; so erfolgt auch die Installation auf einem iPhone, falls eine gültige Apple Developer-ID vorliegt.
Um die JavaScript-Dokumentation des Projekts unter doc/readme.md zu aktualisieren oder diese Readme-Datei mit einem Inhaltsverzeichnis auszustatten, können folgende Befehle benutzt werden:
# doc/readme.md aktualisieren
npm run doc
# README.md um Inhaltsverzeichnis erweitern
npm run readmeUm die App zu bauen ohne sie im Emulator zu starten, kann folgender Befehl verwendet werden:
# Mit Dokumentation
npm run build
# Ohne Dokumentation
cordova build iosUm das Projekt zu bearbeiten, wird ein beliebiger Texteditor benötigt; zwingend erforderlich ist auch gulp, um alle Quelldateien unter src/ an der richtigen Ort unter www/
zu kopieren und gegebenenfalls zu kompilieren.
Dafür muss, wie oben bereits beschrieben, NPM installiert sein; anschließend kann gulp mit allen erforderlichen Modulen über folgende Befehle installiert werden:
# gulp global installieren
npm install -g gulp
# Alle Module für das Projekt installieren
npm installUm gulp zu starten und im Hintergrund laufen zu lassen oder bestimmte Tasks manuell auszuführen können folgende Befehle verwendet werden:
# gulp starten
gulp
# www-Verzeichnis komplett neu erstellen
gulp all
# Einzelne Tasks ausführen (siehe gulpfile.js)
gulp <jshint|js|less|html|fonts|data|json|img|favicon|res>Zu beachten ist, dass ausschließlich Dateien im src/ Verzeichnis bearbeitet werden dürfen; alle Dateien in www/ werden automatisiert erstellt und überschrieben, sobald die zugehörigen Quelldateien geändert werden und gulp bereits gestartet wurde!
Im folgenden wird beschrieben, wie man die bereits vorhandenen Wörterbücher um neue Begriffe erweitern kann und wie man neue Wörterbücher anlegt, die in der App ausgewählt werden können.
Einem Wörterbuch können beliebig viele Begriffe hinzugefügt werden. Die Wörterbücher liegen als JSON-Dateien im Verzeichnis src/data/<alias>/<alias>.json vor, also z.B. src/data/owl/owl.json. Diese Wörterbuch-Dateien werden von Gulp minimiert und unter www/data/ abgelegt, z.B. www/data/owl/owl.json.
Eine solche Datei ist wie folgt aufgebaut:
{
"alias": "Dateiname",
"caption": "Anzeigename",
"terms": [
]
}Der Dateiname alias muss dabei dem echten Dateinamen des Wörterbuches entsprechen, der Anzeigename caption wird in der App so angezeigt, wie er definiert wurde (z.B. in der Wörterbuch-View oder im Quiz).
Die eigentlichen Begriffe des Wörterbuches werden im terms Array als JSON-Objekte in folgendem Format definiert:
{
"alias" : "kurzname",
"article" : "Artikel, optional",
"term" : "Anzeigename",
"translation" : "Übersetzung",
"info" : "Beschreibungstext",
"answersNative" : ["Deutsche Antwort", "..."],
"answersForeign" : ["Fremdsprachen-Antwort", "..."],
"answersPictures" : ["Bild-Datei", "..."]
}alias: Dient der Identifikation; er sollte nur Kleinbuchstaben und keine Sonderzeichen enthalten, aus Dönekens wird also z.B. doenekens. Eventuell vorhandene Bild- und Audio-Dateien müssen genauso heißen.article: Der optionale Artikel des Begriffs, also der, die, das.term: Der vollständige Anzeigename des Begriffs.translation: Die vollständige Übersetzung des Begriffs.info: Ein relativ kurzer Beschreibungstext mit näheren Informationen zum Begriff.answersNative: Ein Array aus deutschen Wörtern, die im Quiz als falsche Antwortmöglichkeiten dienen; es müssen mindestens drei vorhanden sein.answersForeign: Ein Array aus Fremdsprachen-Antworten, die im Quiz als falsche Antwortmöglichkeiten dienen; es müssen mindestens drei vorhanden sein.answersPictures: Ein optionales Array aus Dateinamen für Bilder unterwww/data/<alias>/image/<bild>.jpg; diese Bilder kommen im Quiz zum Einsatz, um als Antwortmöglichkeiten zu dienen. Es müssen mindestens drei Bilder angegeben werden und der Begriff muss selbst ebenfalls über ein Bild verfügen. Soll der Begriff über keine Bilder verfügen, muss ein leeres Array[]als Wert angegeben werden.
Um einen neuen Begriff hinzuzufügen, muss in der entsprechenden Datei ein neues Objekt mit den obigen Daten zum terms Array hinzugefügt werden:
"terms": [
{
"alias": "neu",
},
]Jedes Wörterbuch verfügt über seine eigenen Bild- und Audio-Dateien im entsprechenden Verzeichnis unter src/data/<alias>/image und src/data/<alias>/audio. Audio-Dateien müssen als .mp3 vorliegen, Bilder als .jpg mit einer Größe von 280x280px. Die Dateinamen müssen dabei immer dem Alias des zugehörigen Begriffes entsprechen; wenn also der Begriff Pinneken mit dem Alias pinneken über Dateien verfügen soll, muss es image/pinneken.jpg und audio/pinneken.mp3 geben.
Diese Dateien werden von Gulp automatisch in das www/data/ Verzeichnis kopiert und im Falle der Bilder auch komprimiert.
Beim Laden des Wörterbuches wird automatisch nach zugehörigen Dateien gesucht; gibt es kein Bild, sind bestimmte Quiz-Typen für diesen Begriff ausgeschlossen, ohne Audio-Datei fehlt der Button zum Vorlesen des Begriffes.
Soll es für einen Begriff möglich sein, ein Bilder-Rätsel im Quiz zu erhalten, müssen, wie oben erwähnt, entsprechende Bilder definiert werden. Auch hier müssen die definierten Bildnamen mit den Dateinamen übereinstimmen; sind z.B. folgende Bilder definiert,
"answersPictures" : ["schraube", "knopf", "schluessel"]so müssen auch folgende Dateien existieren:
image/
schraube.jpg
knopf.jpg
schluessel.jpg
Es müssen immer mindestens drei Bilder angegeben werden, da es im Quiz immer vier Antwortmöglichkeiten gibt und das eigentliche Bild des Begriffs ebenfalls eine Antwortmöglichkeit ist.
Für ein besseres Verständnis über die Struktur der Wörterbücher und Begriffe sollte man einen Blick auf das Hauptwörterbuch Ostwestfälisch unter src/data/owl/owl.json werfen.
In diesem Wörterbuch sind zum aktuellen Zeitpunkt folgende Begriffe vorhanden:
- angeschickert — „angetrunken“
- beömmeln — „sich totlachen“
- betuppen — „betrügen“
- Bollerbuchse, die — „Jogginghose“
- Bömsken, das — „Bonbon“
- Bütterken, das — „kleines Butterbrot“
- dölmern — „spielen“
- Dönekens, die — „Anekdoten“
- fickerich — „nervös“
- Knüpp, der — „Knoten“
- Kroppzeug, das — „Krempel“
- Latüchte, die — „Laterne“
- Mäse, die — „Hintern“
- Möttke, die — „Schlamm“
- Mürker, der — „Maurer“
- nöhlen — „meckern“
- nönkern — „Mittagsschlaf halten“
- öddelich — „dreckig“
- Pättkenschnüwer, der — „Moped“
- pecken — „kleben“
- Pillepoppen, die — „Kaulquappen“
- Pinneken, das — „Schnapsglas“
- plästern — „regnen“
- Pläte, die — „Glatze“
- Plüdden, die — „alte Klamotten“
- Pölter, der — „Schlafanzug“
- ratzen — „schlafen“
- Töffel, der — „Trottel“
- vermackeln — „beschädigen“
- wullacken — „schuften“
Um ein neues Wörterbuch hinzuzufügen, müssen zunächst alle erforderlichen Dateien unter src/data/ angelegt werden; ein Verzeichnis mit dem Kurznamen des Wörterbuches, eine entsprechende JSON-Datei mit dem gleichen Namen und die Verzeichnisse image und audio im Wörterbuch-Verzeichnis. Das sieht beispielsweise so aus:
data/
bayerisch/
audio/
<audio.mp3>
<...>
image/
<image.jpg>
<...>
bayerisch.json
Wie eine Wörterbuch-Datei aufgebaut ist und neue Begriffe hinzugefügt werden können ist bereits im Abschnitt Neue Begriffe hinzufügen erklärt worden. Audio-Dateien müssen als .mp3 vorliegen, Bilder als .jpg in der Größe 280x280px.
Zusätzlich dazu muss das neue Wörterbuch zur Liste der verfügbaren Wörterbücher in der Datei src/data/conf.json hinzugefügt werden; in dieser Datei befindet sich das Array dictionaries, welches wie folgt aufgebaut ist:
"dictionaries": [
{
"alias" : "owl",
"caption" : "Ostwestfälisch"
},
]Hier muss für das neue Wörterbuch ein neues Objekt zum Array hinzugefügt werden. Dabei entspricht alias dem Dateinamen des Wörterbuches (z.B. bayerisch), während caption der vollständige Anzeigename ist.
Um das neue Wörterbuch in die App zu integrieren, können die folgenden Befehle ausgeführt werden (wenn Gulp nicht ohnehin schon gestartet wurde):
gulp json
gulp data
Damit werden alle Dateien in das www/data/ Verzeichnis kopiert und im Falle von Bildern und JSON-Dateien zusätzlich minimiert.
Mit npm run build kann nun abschließend die iOS-App neu erzeugt und mit Xcode entweder auf einem iPhone installiert oder im Simulator gestartet werden.