Technische Universität München Prof. Dr. Helmut Krcmar Lehrstuhl für Wirtschaftsinformatik Entwicklung einer mobilen Webanwendung für einen auf ältere Menschen zugeschnittenen sozialen Marktplatz Christian Brennstuhl, Edwin Foris, Fabian Franzelin {brennstu foris franzeli}@in.tum.de Betreuer: Sebastian Esch Philipp Koene Felix Köbler München, 5. April 2011
Inhaltsverzeichnis Inhaltsverzeichnis 1 Einleitung 4 1.1 Motivation.............................. 4 1.2 Problemstellung............................ 4 1.3 Forschungsfragen........................... 4 2 Grundlagen 4 2.1 Software für mobile Anwendungen................. 5 2.1.1 Native Anwendungen.................... 5 2.1.2 Webanwendungen...................... 5 2.1.3 Hybridanwendungen..................... 5 2.1.4 Zusammenfassung und Diskussion............. 5 2.2 HTML 5................................ 6 2.3 Soziale Marktplätze......................... 6 3 Bring Dich ein! 6 3.1 Funktionsumfang der Webplattform................ 6 3.2 Bedarf für eine mobile Anwendung................. 7 3.3 Zusammenfassung.......................... 7 4 Vorgehensweise 7 4.1 Anforderungsanalyse......................... 7 4.1.1 Funktionale Anforderungen................. 7 4.1.2 Nicht-funktionale Anforderungen.............. 9 4.2 Entwicklungsmodell......................... 9 4.3 Projektplanung............................ 9 4.4 Entwicklungsframework....................... 10 4.4.1 HTML 5 Frameworks.................... 10 4.4.2 Auswahlprozess........................ 10 4.5 Zusammenfassung.......................... 10 5 Entwicklungsprozess 10 5.1 Erster Entwicklungszyklus: Konzept und Design.......... 10 5.1.1 Anforderungsanalyse..................... 10 5.1.2 Konzept............................ 10 5.1.3 Implementierung....................... 10 5.1.4 Evaluierung.......................... 10 5.1.5 Zusammenfassung...................... 10 5.2 Zweiter Entwicklungszyklus: Prototyp............... 10 5.2.1 Anforderungsanalyse..................... 10 5.2.2 Konzept............................ 10 5.2.3 Implementierung....................... 10 5.2.4 Evaluierung.......................... 10 5.2.5 Zusammenfassung...................... 10 5.3 Dritter Entwicklungszyklus: Finale Version............ 11 5.3.1 Anforderungsanalyse..................... 11 5.3.2 Konzept............................ 11 5.3.3 Implementierung....................... 11 5.3.4 Evaluierung.......................... 11 2
Abbildungsverzeichnis 5.3.5 Zusammenfassung...................... 11 6 Ergebnisse und Fazit 11 6.1 Forschungsfragen........................... 11 6.2 Mobile vs. Webplattform....................... 11 6.3 Sencha-Touch............................. 11 6.4 Feldstudien.............................. 11 6.5 Projektplanung............................ 11 7 Ausblick 11 7.1 Erweiterbarkeit............................ 11 Abbildungsverzeichnis 3
2 Grundlagen 1 Einleitung Möglichkeiten durch Web 2.0 Soziale Netzwerke, Facebook Anwendung für alte und junge Leute 1.1 Motivation Mobile Gesellschaft Smartphones, Tablets und Netbooks Neue Möglichkeiten an Userinterfaces: Toucheingabe Alte Leute Technische Verbesserungen, keine Tastatur Größerer Bildschirm 1.2 Problemstellung Bestehende Webanwendung auf mobile Geräte zu portieren Welche Funktionen übernimmt man, was lässt man weg, was fügt man hinzu Benutzerfreundlichkeit für Zielgruppe 50+, Nachweis davon durch Feldstudien Forschungsaspekt HTML 5 1.3 Forschungsfragen Übergang: Aus der Problemstellung ergeben sich foldende Forschungsfragen Forschungsfrage 1: 2. Unterpunkt Methodenbeschreibung Forschungsfrage 2: 2. Unterpunkt Methodenbeschreibung Forschungsfrage 3: 2. Unterpunkt Methodenbeschreibung 1. Unterpunkt 1. Unterpunkt 1. Unterpunkt Keine Zusammenfassung und Überleitung, die Forschungsfragen bilden bereits die Zusammenfassung der Problemstellung, dem Wesentlichen dieses Kapitels. 2 Grundlagen Einleitung: Im Folgenden werden die Grundlagen besprochen, die für die Beantwortung der Forschungsfragen vorausgesetzt werden können. 4
2 Grundlagen 2.1 Software für mobile Anwendungen Kleine Einleitung Verständnis, welche Möglichkeiten man hat eine mobile Anwendung zu entwickeln 2.1.1 Native Anwendungen Allgemeine Einführung was nativ überhaupt bedeutet Android SDK, Apple SDK Erwähnenswert: Windows Mobile 7, WebOS (HP) 2.1.2 Webanwendungen Nicht Sencha-Touch sondern nur allgemein über HTML 5 Betriebssystemunabhängigkeit Unabhängigkeit vom Apple/Android-Store Grundsätzlich die Möglichkeiten aufzeigen eine Webseite darzustellen Optimierung einer Website HTML X, PHP, AJAX, JSP 2.1.3 Hybridanwendungen Natives Grundgerüst mit dynamisch nachladendem Content & Funktionalität Schwierigkeiten mit Apple bei dynamischen Nachladen von Programmcode (siehe [iph11]) Das Grundgerüst kann über den Content Funktionalität nachladen, dies muss nicht über HTML 5 passieren, kann aber kann als Überleitung zum nächsten Abschnitt dienen 2.1.4 Zusammenfassung und Diskussion Bezieht sich auf die vorherigen 3 Punkte, hahaha Forschungsaspekt Plattformunabhängigkeit... 5
3 Bring Dich ein! 2.2 HTML 5 Geschichte Entwicklungsstatus Geotagging, Local Storage, Video, Audio, Ereignisse, Beschleunigungssensor Funktionalität: Javascript, Styling: CSS 3, Layout: HTML Imitierung des Look-And-Fell einer App Vorgaukeln einer nativen App 2.3 Soziale Marktplätze My Hammer, ebay, Facebook Soziale Netzwerke Social Commerce LETS Lokalität vs. Globalität Öffentlich vs. Privat Wie setzen sich die Gruppen zusammen innerhalb des sozialen Netzwerks? Ziel dieses Kapitels: Abgrenzung zu Social Commerce, soziale Netzwerke und soziale Marktplätze. Eine geeignete Untereinteilung soll man sich überlegen. Allgemeine Beschreibung, kein Bezug auf Bring Dich ein! 3 Bring Dich ein! Nutzerszenarien Demographischer Wandel Welche Konzepte werden von Bring Dich ein wie umgesetzt unter dem Gesichtspunkt der des vorigen Kapitels 2.3 Allgemeine Beschreibung des Konzepts von Bring Dich ein Zielgruppe 3.1 Funktionsumfang der Webplattform Nutzerszenarien Screenshots & Übersicht von Bring Dich ein Wünsche erstellen, Kommentieren, Fragen, Angebote erstellen, Nachrichten verschicken, Nachbarprofile anschauen, Profil bearbeiten, Datenschutzoptionen, Wunschübersicht, Nachrichtenübersicht, Statistiken, Registrierung, E-Mail-Benachrichtigung, Ereignisse, Schriftgröße 6
4 Vorgehensweise 3.2 Bedarf für eine mobile Anwendung Nutzerszenarien: Man ist im EDEKA und möchte wissen ob sonst noch jemand was aus dem Supermarkt braucht. Ortsbezogene Dienste Flexibilität Potential: Jeder hat ein Handy Catch the wave - Mit dem Trend gehen Infos aus dem Essay (Punkt 3) Mobile Device Integration: Paper xx (Musterpaper), Abschnitt 2.4 3.3 Zusammenfassung 4 Vorgehensweise Einleitung In wiefern fließen hier bereits Änderungen, die sich während des Projekts ergeben haben mit ein? Unser Vorschlag: vollständiger Überblick, der den Ist-Zustand am Ende des Projektes beschreibt. Zu Besprechen 4.1 Anforderungsanalyse Einleitung: Das sind die finalen Anforderungen, wobei nicht alle davon beim Start des Projektes vorhanden waren. Die Entwicklung der Anforderungen lassen sich aus dem Entwicklungsprozess entnehmen. Kriterien festlegen, nach welchen die Anforderungen festgelegt werden. Aufgrund davon ergeben sich die funktionalen und die nicht-funktionalialen Anforderungen. Anforderungsmatrix erstellen: 4.1.1 Funktionale Anforderungen Definition als Zitat Siehe Forschungsfragen im SVN Passwortgeschützte Anmeldung Wunsch erstellen, bearbeiten, löschen, Wunschdetailansicht, Wunschübersicht, kommentieren, fragen Angebote abgeben, bearbeiten, löschen, Angebotdetailansicht, Angeboteübersicht Nachbarübersicht, Nachbarprofildetailansicht, Detailansicht des eigenen Profils ansehen, Wünschübersicht zu einem Nachbarn 7
4 Vorgehensweise API- NutzenKernfunktionalität Entwicklungsgrad Komplexitätsgrad Auswertung Unterstützung (mobil) Platt- der form Gewichtung 10% 20% 30% 5% Wunschanzeige Wunschverwaltung Kartenansicht von Wünschen Route zu Wunsch Suche von Wünschen in der Umgebung Angebotsanzeige Angebotsverwaltung Nachrichtensystem Profilanzeige Profilverwaltung Ereignissanzeige Tabelle 1: Anforderungsmatrix, Tabelle quer reinlegen, Mit welcher Skala arbeiten wir? Intervall (1, 2, 3) mit Gewichtung bzw. Ordinal (-, o, +) oder Kombination Übersicht über Wünsche, die sich in einem bestimmten Radius von der eigenen Position befinden, Kartenansicht der Position des Wunsches im Bezug zur eigenen Position, Routenanzeige + Entfernungsanzeige zu einem Wunsch, Übersicht aller Wünsche auf der Karte, Übersichtliche Darstellung der Wunschmarker Neue Ereignisse seit der letzten Aktualisierung anzeigen Welche Ereignisse werden genau geladen? Zu Besprechen 4.1.2 Nicht-funktionale Anforderungen Definition als Zitat Siehe Forschungsfragen im SVN 4.2 Entwicklungsmodell Beispiele: Spiralmodell, Wasserfall Zu besprechen 8
5 Entwicklungsprozess 4.3 Projektplanung Grobe Abfolge des Projekts festhalten Tatsächlicher Projektplan, wie das Projekt bis zum Ende gelaufen ist Ziele: Webanwendung, Dokumentation, Präsentation Design Prototyp Verfeinerung Entwicklungszeiten begründet: 6 Monate, Zeitlicher Rahmen insgesamt + Begründung (Ferien, Feiertage und Klausurzeiten) Optionale Funktionalitäten vs. Erforderliche Funktionalitäten werden berücksichtigt Puffer für optionale Funktionalitäten Evaluierung durch Feldstudien Milestones: Feldstudien, Abgabetermine (Doku + Anwendung), Präsentationstermin Verweisen auf Projektplan, überarbeiteten Projektplan ausarbeiten, Zu Besprechen Überleitung: Einer der ersten Punkte im Projektplan: Entwicklungsframework auswählen 4.4 Entwicklungsframework 4.4.1 HTML 5 Frameworks Vorstellung und Beschreibung der verschiedenen Frameworks 4.4.2 Auswahlprozess Anforderungen definieren, priorisieren und Bewertungsskale festlegen Abschluss mit Entscheidungsmatrix deren Ergebnis Sencha Touch ist 4.5 Zusammenfassung 5 Entwicklungsprozess 5.1 Erster Entwicklungszyklus: Konzept und Design 5.1.1 Anforderungsanalyse 5.1.2 Konzept 5.1.3 Implementierung Balsamiq Mockups 9
6 Ergebnisse und Fazit 5.1.4 Evaluierung Auswertung der 1. Feldstudie 5.1.5 Zusammenfassung Was wir mitgenommen haben für den nächsten Iterationsschritt 5.2 Zweiter Entwicklungszyklus: Prototyp 5.2.1 Anforderungsanalyse 5.2.2 Konzept 5.2.3 Implementierung Sencha Touch 5.2.4 Evaluierung Auswertung der 2. Feldstudie 5.2.5 Zusammenfassung Was wir mitgenommen haben für den nächsten Iterationsschritt 5.3 Dritter Entwicklungszyklus: Finale Version 5.3.1 Anforderungsanalyse 5.3.2 Konzept 5.3.3 Implementierung Sencha Touch 5.3.4 Evaluierung 5.3.5 Zusammenfassung Was wir mitgenommen haben für den nächsten Iterationsschritt 6 Ergebnisse und Fazit Aufbau von den Unterpunkten: Ergebnisse auflisten und mit Fazit abschließen 10
Literatur 6.1 Forschungsfragen 6.2 Mobile vs. Webplattform 6.3 Sencha-Touch Kritische Auseinandersetzung mit Sencha Touch: Nachteile, die sich bei der Implementierung ergeben haben, besondere Schwierigkeiten bei der Implementierung Nachteile durch Safari: Readonly-Feld wurde nicht erkannt im Gegensatz zum Android-Browser 6.4 Feldstudien 6.5 Projektplanung 7 Ausblick 7.1 Erweiterbarkeit Funktionale Erweiterbarkeit: Welche Funktionen kann man zusätzlich einfügen? Vorteile durch MVC. Verschiedene Sprachen Vorteile durch MVC Einschränkungen: Formularüberprüfungen lokal und nicht auf Serverseite Beispiel Ereignisse: Komplett dynamisch vs. Formularausgaben statisch Beschleunigungssensor verwenden: Durch schütteln des Smarphones wählt man einen Wunsch zufällig aus Nachrichten integrieren Literatur [iph11] iphone-entwickler wirft das Handtuch Mac & i. http://www.heise.de/mac-and-i/meldung/iphone-entwickler-wirftdas-handtuch-1220663.html. http://www.heise.de/mac-and-i/ meldung/iphone-entwickler-wirft-das-handtuch-1220663. html. Version: April 2011 [Nam02] Name, Mein: 1. Bd. 3: Test. 1. München : Mein Verlag, 2002 11