Masterarbeit (PDF, 28 MB)

186 Pages·2013·27.33 MB·German

1
186

Entwicklung einer sozialen Bookmarking-Plattform
für Musik und Videos
Bernd Hacker

ABSTRACT
Cliperize ist eine Webplattform, die Prototyp wird etwa 250 Anwendern in
Video- und Musikportale wie YouTube, einer geschlossenen Testphase ange-
Vimeo und SoundCloud in einer ein- boten. Im Anschluss werden aufgrund
zigen Anwendung vereint. Benutzer des User-Feedbacks Wünsche und
können Inhalte portalübergreifend in Änderungen für eine offene Version
Wiedergabelisten kombinieren, diese abgeleitet. Cliperize wird den Kreislauf
veröffentlichen und abonnieren sowie der Verbreitung und des Konsumierens
anderen Anwendern folgen. Das Follo- von Video- und Musikmedien ändern.
wing-System bietet zudem die Möglich-
keit, neue Inhalte zu entdecken sowie
selbst vorzuschlagen. Dadurch muss
nicht jedes Portal einzeln nach einem
bestimmten Video oder Lied durch-
sucht oder auf jedem dieser Portale ein
Account erstellt werden, um einzelne
Clips zu bookmarken. Mit cliperize kann
jeder Nutzer seine persönliche Media-
thek aufbauen, verwalten und diese mit
anderen Personen teilen.
Die technische Umsetzung umfasst
sowohl die MySQL-Datenbank, das
PHP-Backend auf Basis des Laravel-Fra-
meworks als auch das Frontend, das
mit AngularJS realisiert wurde. Der
5
186
Abstract . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
Einleitung . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
Motivation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
Ziele . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
Strategische Ziele . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
Konkrete Ziele . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
Funktionsweise . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
Vorgeschichte . . . . . . .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
Ähnliche Projekte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
musicplayr.com . . . . . . .. . . . . . . . . . . . . . . . . . . . . . . . . . . . 24
toma.hk . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28
plyr.com . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30
whyd.com . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32
crateplayer.com . . . . . . .. . . . . . . . . . . . . . . . . . . . . . . . . . . . 35
Fazit . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38
Hintergrund . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41
Anwender im Mittelpunkt . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42
Monetarisierung . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44
Interface Design: Entwicklungsgeschichte . . . . . . . . . . . . . . . . . . . . 46
Juli 2012 (Look & Feel Dummy) . . . . . . . . . . . . . . . . . . . . . . . . 46
Oktober 2012 (Version 0.1) . . . . . . . . . . . . . . . . . . . . . . . . . . 50
Dezember 2012 (Version 0.2) . . . . . . . . . . . . . . . . . . . . . . . . . 49
Dezember 2012 (Version 0.3) . . . . . . . . . . . . . . . . . . . . . . . . . 51
Januar 2013 (Version 0.4) . . . . . . . . . . . . . . . . . . . . . . . . . . . 53
März 2013 (Version 0.5) . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56
April 2013 (Version 0.6) . . . . . . . . . . . . . . . . . . . . . . . . . . . . 58
Mai 2013 (Version 1.0) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59
Zusammenfassung. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 64
6
186
Konzepte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69
Programmablauf . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 70
Aktionen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71
Anwendung und Einsatzbereich . . . . . . . . . . . . . . . . . . . . . . . . . . 72
Schichtenarchitektur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73
Datenbank . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 74
Backend . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 76
Bookmarklet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81
Interface . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 84
Allgemein . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 85
Icons . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 89
Bilder . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 92
Hauptelemente . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 94
Navigation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 94
Profil . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 95
Clip . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 96
Cliplist . . . . . . .. . . . . . . . . . . . . . . . . . . . . . . . . . . . 96
Follower / Following . . . . . . . . . . . . . . . . . . . . . . . . . . . . 98
Cliplist Detail . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 98
Miniplayer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 100
Musikplayer . . . . . . .. . . . . . . . . . . . . . . . . . . . . . . . 100
Videoplayer . . . . . . .. . . . . . . . . . . . . . . . . . . . . . . . 102
Dialog Einstellungen . . . . . . .. . . . . . . . . . . . . . . . . . . 103
Dialog Add to Cliplist . . . . . . . . . . . . . . . . . . . . . . . . . . 104
Playlist . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 105
Feed . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 107
Anmeldung . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 109
Registrierung . . . . . . .. . . . . . . . . . . . . . . . . . . . . . . 110
Frontend . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 111
Vergleich verschiedener JavaScript-Frameworks und -Libraries . . . . . 111
Backbone.js . . . . . . .. . . . . . . . . . . . . . . . . . . . . . . . 113
7
186
CanJS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 114
Ember.js . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 115
AngularJS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 116
Bewertung . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 118
Implementation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 121
Datenbank: MySQL 5 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 122
Administration . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 122
Datenstruktur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 122
User (Tabelle users) . . . . . . . . . . . . . . . . . . . . . . . . . . . 124
Clips (Tabelle clips) . . . . . . . . . . . . . . . . . . . . . . . . . . . 125
Quelle eines Clips (Tabelle clip_source) . . . . . . . . . . . . . . . . 126
Plattformen (Tabelle platforms) . . . . . . . . . . . . . . . . . . . . 126
Clips eines Users (Tabelle clip_user) . . . . . . . . . . . . . . . . . 127
Cliplists (Tabelle cliplists) . . . . . . . . . . . . . . . . . . . . . . . . 128
Clips einer Clipliste (Tabelle clip_cliplist) . . . . . . . . . . . . . . . 128
Cliplists eines Users (Tabelle cliplist_user) . . . . . . . . . . . . . . 129
Follower und Following (Tabelle followers) . . . . . . . . . . . . . . 129
Feed (Tabelle feeds) . . . . . . . . . . . . . . . . . . . . . . . . . . . 130
Nutzereinstellungen (Tabelle settings) . . . . . . . . . . . . . . . . 130
Kurze URLs (Tabelle urls) . . . . . . . . . . . . . . . . . . . . . . . . 131
Einladungsschlüssel (Tabelle alphacodes) . . . . . . . . . . . . . . 132
Nutzerrollen (Tabelle roles) . . . . . . . . . . . . . . . . . . . . . . 132
Nutzergruppen (Tabelle groups) . . . . . . . . . . . . . . . . . . . 132
Anbindung an soziale Netze (Tabelle socials) . . . . . . . . . . . . 133
Datenschema . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 134
Backend: Laravel 4 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 135
Ordnerstruktur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 135
Generatoren. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 136
Routen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 137
Models . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 139
8
186
Controller . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 140
Unit Tests . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 142
Bookmarklet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 143
Interface . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 149
Frontend: AngularJS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 153
Ordnerstruktur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 153
Generatoren und Entwicklungsablauf . . . . . . . . . . . . . . . . . . . 155
States (URL-Struktur) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 157
Interface (View) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 158
Logik (Controller) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 161
Daten (Service) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 162
Direktiven . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 162
Filter . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 164
Tests . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 165
Anwendertest und Usability . . . . . . . . . . . . . . . . . . . . . . . . . . . . 167
1. Testphase: Bugs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 168
2. Testphase: Usability . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 169
3. Testphase: Closed Beta . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 171
Ergebnisse . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 173
Bewertung und Ausblick . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 175
Bewertung . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 176
Optimierung . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 177
Datenbank . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 177
Backend . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 178
Interface . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 179
Frontend . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 180
Erweiterungen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 182
Marketing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 184
Danksagung . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 185
9
186
10
186