MApps: Optimierung des eStudy Moduls Mitglieder für iPhone

Aus THM-Wiki
Wechseln zu: Navigation, Suche

Dieser Wiki Artikel beschreibt die Überarbeitung des Moduls Mitglieder für die mobile- und WAI-Variante der Kollaborationsplattform eStudy. Im SS09 wurde das Modul bereits für das iPhone optimiert. Auf diese optimierte Version des Mitgliedermoduls wird zurückgegriffen, um die Änderungen vorzunehmen, die in diesem Wiki-Artikel beschrieben werden.

Das Mitglieder-Modul

Das derzeit optimierte Mitgliedermodul hat bereits einen großen Funktionsumfang. Genau wie in der Desktop-Version von eStudy können Mitglieder und deren Profilseiten angezeigt werden. Weiterhin werden die aktiven Mitglieder der Plattform (Who is online) sowie die Freundesliste des eingeloggten Benutzers angezeigt. Fehlend ist derzeit die Kursteilnehmerliste.


Dokumentation
Arbeitstitel MApps: Optimierung des eStudy Moduls Mitglieder für iPhone
Kurs Mobile Applications
Semester SS 10
Teilnehmer Sascha Henry


Ist-Analyse

Wie zuvor beschrieben, wurde bereits versucht das Modul für das iPhone zu optimieren. Hierzu existieren bereits 2 Wiki-Artikel:



Probleme/Unaufmerksamkeiten

Indikator Der Indikator des Mitglieder-Moduls auf der Homeseite zeigt an, wie viele Benutzer der Plattform sich zum gegenwärtigen Zeitpunkt online befinden. Dieser Indikator ist rot hinterlegt. Rot kann als Signal- bzw. Warnfarbe angesehen werden, daher ist an dieser Stelle fraglich ob der rote Indikator beibehalten werden soll, oder ob man auf eine freundlichere Farbe wie grün umstellt.

Einstiegsseite des Mitgliedermoduls Nach einem Klick auf das Mitglieder-Icon fällt der benutzer sofort in den Content des Moduls herein. Wie auf dem iPhone ist die erste Zeile eine Suchleiste, mit der nach Mitgliedern der Plattform gesucht werden kann. Dieses Verhalten ist auf dem iPhone genau so zu erkennen. Jedoch kommt hier der nächste Stylebruch im Vergleich zum iPhone, sowie zu anderen iPhone-optimierten Modulen: Es werden zwei Listen angezeigt. Zunächst die Who is online-Liste und darauf folgend die Buddys, also die Freundesliste. Die Kurs oder Foyermitglieder werden zu keinem Zeitpunkt dargestellt und können nur über das Suchfeld erreicht werden. Außerdem wird nach einer Liste, die weiß hinterlegt ist, wie es in der iPhone-darstellung typisch ist, ein weiterer bruch erzeugt, indem der blaue Farbhintergrund mit der Überschrift der Liste erscheint.

Profilseite Anhand der Screenshots kann bereits eine gewisse Abweichung zur iPhone-App Kontakte erkannt werden. Diese Abweichungen sind besonders auf der Profilseite zu erkennen und äußern sich als Stilbrüche innerhalb des Mitglieder-Moduls. Die eMail-Adresse, die ein Benutzer der Plattform hinterlegt hat wird mit einem Zeilenabstand, der größer ist als bei anderen Textangaben größer dargestellt. In dieser Darstellung nimmt die eMail-Adresse zwei Spalten ein und wirkt erdrückend. Weiter unten existiert die Möglichkeit, über das betätigen des Bireifumschlagsymbols den Benutzer eine PN/eMail zu schicken. Hierzu existiert jedoch keine Beschriftung, sodass der benutzer erst nach dem touch (auf dem Desktop nach einem Klicken) auf dieses Symbol herausfindet, welche Funktion aufgerufen wird. Weiterhin ist es Fraglich, ob es Datenschutzrechtlich sinnvoll ist, die eMail-Adresse hier darzustellen und so markant hervorzuheben.

Soll-Analyse und Ausblick

Das Mitgliedermodul müsste um die Funktion zur Anzeige der Kursmitglieder/Foyermitglieder erweitert werden, damit das Modul an die Funktionalität in der Desktop-Variante anknüpft. Weiterhin gilt es die Darstellungsform des Moduls in allen Ansichten zu überarbeiten und kritisch zu hinterfragen, welche Informationen angezeigt werden müssen. Es handelt sich hier um einen mobilen Zugang: entsprechend gilt immer die Frage "Was will ein Anwender auf einem mobielen Endgerät sehen?"

Als Möglichkeit für das iPhone-optimierte Modul bietet sich die folgende Darstellung an, die auch schon im Wiki-Artikel des Kurses New Trends in IT beschrieben wurde. Nach einem Klick auf das Mitglieder-Icon gelangt man zunächst auf eine Liste mit folgender Auswahlmöglichkeit:

Mitglieder-Modul im FF

In dieser Liste fehlt noch der Punkt Who is online, der aber nicht unterschlagen werden soll. Außerdem sollte bereits in dieser Ansicht noch vor der Liste das Suchfeld erscheinen, sodass von Beginn an die Möglichkeit existiert, nach einem bestimmten Portalmitglied zu suchen.

Die weiteren Unteransichten können dann zunächst die alten bleiben, die aber entsprechend der obigen Kritikpunkte angepasst werden müssen. Als neue Unteransicht würde noch die Ansicht zum Anzeigen der Kurs-/Foyermitglieder entstehen.

Ein weiteres Feature wäre, sich mittels der Google-Maps App des iPhones eine Adresse anzeigen zu lassen. Dies sollte genau dann passieren, wenn ein Benutzer der Plattform seine Adresse hinterlegt hat. Zu beachten ist hier, wie sich diese Funktion auf anderen mobilen Endgeräten verhält.

Prototyp / Konzept mit jQTouch

Erreichbarkeit des Prototypen

Der Prototyp des Mitgliedermoduls mittels jQT befindet sich im eStudy-Repository und kann auf den Nodes aufgerufen und getestet werden.

Beschreibung des Prototyps und Konzepts

  • Die neue Einstiegsseite des Moduls hängt vom Zeitpunkt des Besuches und vom Benutzer ab. Hat der Benutzer beispielsweise keine Freunde in seiner Freundesliste, wird auf der Übersichtsseite dieser Auswahlpunkt nicht angezeigt. Hat der Benutzer Freunde, aber zu diesem Zeitpunkt befindet sich kein weiteres Mitglied der Plattform online, wird der Punkt "Who is online" nicht angezeigt. Sollte der Benutzer weder Freunde in seiner Freundesliste haben, noch ist ein weiterer Benutzer der Plattform online, dann wird er direkt auf die Kursmitgliederliste geleitet.
  • Die Kursmitgliederliste wird in tabellarischer Form dargestellt und ist mit Seperatoren versehen. Diese Zeigen für den Nachnamen den Anfangsbuchstaben an und sollen eine zusätzliche Orientierungshilfe sein.
  • Die Toolbar enthält zur Navigation und Übersichtlichkeit innerhalb des Moduls zwei Buttons. Einer, der linke, führt immer zurück zur Startseite von eStudy2Go, der rechte leitet zur Übersichtsseite oder zur Desktopansicht.
  • In der Mitgliederliste haben Admins oder Dozenten die Möglichkeit, den Kursmitgliedern eine Nachricht über das Portal eStudy zukommen zu lassen.
  • Im Profil eines Benutzers können Administratoren der Plattform eStudy zur Unterscheidung bei mehreren gleichnamigen Mitgliedern das Kürzel des Mitglieds sehen (bspw. hg14113).
  • Das Profil ist darauf ausgelegt mobile Funktionen zu nutzen: Neben der Möglichkeit zum Versenden einer Nachricht über die Plattform, können hier beim touch auf die entsprechenden Kontaktdaten eMails oder SMS versendet werden. Da als Zielgruppe Benutzer mit Smartphones angesprochen werden sollen, besteht weiterhin die Möglichkeit die Benutzer anzurufen, wenn die dieser seine Daten wie Handy- oder Telefonnummer veröffentlicht hat.
  • Der Benutzer hat auf jeder Seite ein Suchformular, um nach Mitgliedern des Portals zu suchen.
  • Mitgliederliste, Who is online und Freundesliste sind immer gleich aufgebaut. Alphabetisch nach Nachnamen sortiert und zur Übersicht mit Seperatoren versehen.
  • Toolbar auf jeder Seite des Moduls mit zwei Buttons. Einer dieser Buttons ist immer zurück (links), der andere je nach Modulfunktion variabel.

Die mobilen Funktionen des Moduls "Mitglieder"

  • Anruf beim touch

Wenn ein Benutzer seine Telefon- oder Handynummer zugänglich gemacht hat, kann dieser angerufen werden. Dies zeigt das erste Bild der Gallerie. Hier wird auf die hinterlegte Handynummer getoucht und es kommt die Frage, ob der Benutzer angerufen werden soll.

  • SMS schreiben

Weiter unterhalb in der Profilansicht gibt es einen SMS Button. Dieser wird angezeigt, wenn ein Benutzer seine Handynummer freigegeben hat und mit einem touch auf diese, wird die SMS-Anwendung des iPhones (funktioniert auch auf einem HTC) geöffnet. Somit erhält der Benutzer die Möglichkeit, einem anderen Mitglied der Plattform eine SMS zu senden (Galleriebilder 2 + 3).

Achtung: Die SMS wird entsprechend vom Handy verschickt, nicht von der Plattform oder einer Service-Webseite. Der Benutzer ist selbst dafür verantwortlich mit seinem Budget und seinen eventuellen freiSMS, die in seinem Vertrag enthalten sind zu haushalten.

Ausschluss von Funktionen

Es ist in dem Konzept nicht vorgesehen, dass ein Benutzer sein Profil über e2G ändern oder erweitern kann. Das Modul beschränkt sich auf die Anzeige von Informationen und ermöglicht den Kontaktaustausch in Form von verschiedenen mobilen Funktionen sowie eStudy-PNs.

Verwendung von Google-Maps

Ein Mitglied der Plattform eStudy kann zusätzlich seine Adresse als Informationen hinterlegen und entscheiden, in welchem Kontext (Foyer/Kurs/gar nicht) diese angezeigt werden. Hat er diese Freigegeben und ein anderes Portalmitglied nutzt den mobilen Zugang, kann sich dieser die Route via Google Maps berechnen und anzeigen lassen. Auf dem iPhone wird hierfür die extra Karten App geöffnet, Android bietet zur Auswahl an, ob die Google-Maps App oder der Browser zur Anzeige verwendet werden sollen. Auch normale Browserbenutzer können auf diese Funktionalität zugreifen. Ihnen wird entsprechend die Google-Maps Webseite mit den Adressdaten geladen.


Diskussion: Storage

Das Modul greift auf Daten der Tabellen user und user_contacts zu. Um eine lokale Benutzung zu ermöglichen, müssen diese Daten lokal verfügbar gemacht werden. Die user-Tabelle enthält die generellen Daten eines Benutzers, bspw. den Vor- und Nachnamen, die Benutzergruppe oder die Benutzerkennung. Die Tabelle user_contacts beinhaltet zusätzliche Profilinformationen von Benutzern wie ICQ, Jabber oder weitere Telefon- und Handynummern.

Um Kursmitglieder anzeigen zu können, müsste auch die Zuordnung von Kursen und benutzern lokal existieren. Dies liegt aber weniger im Bereich des Mitgliedermoduls, als viel mehr an der generellen Arbeitsweise von e2G, da bereits auf der Startseite der Kurswechsel vollzogen wird und nur die Anzeige der Kursmitglieder entsprechend im Mitgliedermodul stattfindet.

Probleme kann die Anzeige der Benutzerbilder machen. Diese liegen nicht in der Datenbank, sondern lokal auf einem eStudy-Server. Die Bilder aller eStudy-Mitglieder auch lokal auf dem iPhone zu speichern, würde einen enormen Traffic verursachen und die Speicherkapazität eines Smartphones überschreiten. Demnach wäre es sinnvoll die Bilder nur Anzuzeigen, wenn eine Internetverbindung besteht und die Anzeige bzw. Speicherung auf die aktuelle Session auszulegen. Bilder von Mitgliedern die gerade aktiv online sind, könnten so während der Sitzung gespeichert werden, wohingegen die restlichen Profilbilder nicht synchronisiert werden.

Ressourcen

Kurszusatzaufgabe: iPhone App

Als Zusatzaufgabe des Kurses kann eine native iPhone App programmiert werden, um Zusatzpunkte im Umfang von bis zu 15% zu erhalten. Um diese Zusatzaufgabe zu erfüllen, existieren zwei iPhone Apps, diese sind jedoch nicht im App Store verfügbar, da eine Anmeldung mit Kosten von 99$ verbunden ist. An dieser Stelle sollen die beiden Apps vorgestellt werden. Bei Bedarf und Interesse können diese auch im Plenum noch einmal vorgeführt und beschrieben werden oder der Quellcode zur Verfügung gestellt werden.

Binary App

Die Screenshots zeigen die App Binary Clock in Aktion. Diese wurde in Objective-C geschrieben. Die obere Reihe gibt die aktuelle Stunde der Uhrzeit aus, die untere Reihe ist für die Minuten zuständig. Leuchtet eine oder mehrere Lampen, müssen die Werte zusammenaddiert werden. Die Stunden werden hier im 12 Stundenformat angegeben. Auf Bild drei zeigt die graue iPhone Statusleiste die Uhrzeit 23:01 an. Betrachtet man nun die Stundenanzahl der Binary Clock, so leuchten die Lampen von 8, 2 und 1. Diese Zahlen ergeben zusammenaddiert 8+2+1 = 11. Da wie zuvor erwähnt das 12-Stundenformat benutzt wird, ist dieser Wert auch korrekt. 01 als Minute ergibt, dass die erste Lampe von rechts in der zweiten Reihe leuchten muss, was auch der Fall ist. Bild 4 zeigt 23:02 an. Entsprechend hat sich die Minutenanzeige der Binary Clock geändert und die zweite Glühlampe leuchtet nun. Lampe eins ist wieder erlöscht. Die App kann sowohl im Portrait- als auch Landscapemodus verwendet werden und reagiert auf Touches auf den Bildschirm, indem ein Alertfenster die aktuelle Uhrzeit mit Sekunden ausgibt. Toucht man erneut auf das Display, verschwindet das Alert-Fenster wieder.

BottleSounds

BottleSounds iPhone App. Leider mit Platzhalter anstatt Bildern

Das Rezept

1. Man nehme eine volle Getränkeflasche, z.B. 1l Coca Cola Flasche

2. Flasche öffnen

3. Luft holen und die Flasche mit geradem Flaschenhals Richtung Mund führen

4. Am Flaschenhals pusten

5. Ein Ton erklingt. Dieser ist hoch

6. 200ml aus dieser Flasche trinken

7. Wiederholen der Schritte 3 und 4

8. Der Ton, der diesmal erklingt ist tiefer

9. Solange das Spielchen treiben, bis die Flasche leer ist. Je leerer die Flasche, um so tiefer der Ton

Wer mit 6 Flaschen erkennbar das Lied "Alle meine Entchen" pusten kann, kann bei Wetten, dass... auftreten ;-)

Auf dem oben dargestellten Prinzip basiert die App BottleSounds. Das Bild rechts zeigt die App in Aktion. Leider bin ich kein begabter Grafiker, sodass die App zwar Funktional fertig und einsetzbar ist, jedoch grafisch nicht fertiggestellt ist. Im Prinzip stellen die farblichen Balken eine Flasche dar. Man muss eine Flasche durch touchen auswählen und gleichzeitig in das Mikrofon pusten, damit ein Flaschensound erklingt. Solange man diese Flasche ausgewählt hat und gleichzeitig pustet erklingt dieser Ton. Beim Start dieser App wurde ein Splashscreen, derzeit auch ein Platzhalter, hinzugefügt.

Anmerkung: Wer Grafiken für die App erstellen kann und möchte ist gerne dazu eingeladen ;-)