WEBVTT

00:00.000 --> 00:07.300
Hallo, Kevin, Emy, Pascal und ich, Florian.

00:08.140 --> 00:16.340
Kevin und Emy studieren im vierten Semester Medieninformatik, Pascal und ich im vierten Semester mobile Medien und wir haben zusammen das Projekt LOOTS gemacht.

00:17.660 --> 00:22.480
Das Projekt LOOTS hat sich in zwei Phasen gegliedert.

00:23.440 --> 00:29.320
Die erste Phase war Konzeption und Marktanalyse und die zweite Phase war dann die Implementierung.

00:30.000 --> 00:45.260
Jetzt ist die Frage, was ist Lutz überhaupt? Dazu erstmal eine kleine Problemstellung und zwar beim Einkaufen gibt es mittlerweile das Problem, dass man total überflutet wird an Überangebot und man sich kaum noch zurechtfindet in den Läden.

00:45.260 --> 00:48.780
gerade wenn man irgendwas Spezielles will

00:48.780 --> 00:51.260
wie zum Beispiel eine gelbe Jacke oder sowas

00:51.260 --> 00:54.120
dann findet man die meistens nicht

00:54.120 --> 00:55.420
und rennt in 30 Läden rein

00:55.420 --> 00:58.420
und hat am Ende doch nicht das, was man gebraucht hat

00:58.420 --> 01:01.840
und da wäre es ja hilfreich, wenn es eine App geben würde

01:01.840 --> 01:06.820
die einem in der Nähe befindliche Klamotten oder Kleidung anzeigen würde

01:06.820 --> 01:11.860
und man dann quasi nach seinen Kriterien

01:11.860 --> 01:14.020
zum Beispiel Jacke gelb oder so filtern könnte

01:14.020 --> 01:18.440
und dann läuft man am Ende nur in zwei Läden rein, kann sich dahin navigieren lassen.

01:23.100 --> 01:26.280
Dazu haben wir erstmal eine Domain Research betrieben,

01:26.440 --> 01:30.960
also haben erstmal geguckt, ob es die App oder so eine App überhaupt gibt

01:30.960 --> 01:34.420
und das Ergebnis war, dass es das noch nicht gibt.

01:34.860 --> 01:37.740
Dazu haben wir dann einen Fragebogen ausgearbeitet

01:37.740 --> 01:40.800
und sind direkt auf die Einkaufsstraße gegangen und haben die Leute befragt,

01:40.940 --> 01:43.800
ob Interesse daran besteht und das war auf jeden Fall positiv.

01:44.020 --> 01:48.740
Also, ja, die Leute wollen so eine App.

01:50.520 --> 01:57.880
Dann sind wir zu den Läden erstmal hingegangen und haben die Läden befragt,

01:58.940 --> 02:01.140
ob die da überhaupt mitmachen würden an so einer Idee.

02:01.920 --> 02:04.080
Und da war die Resonanz auch positiv.

02:05.400 --> 02:10.580
Und deswegen ist dann die Frage, in welcher Technologie wir das Ganze überhaupt implementieren.

02:10.580 --> 02:14.780
ob man jetzt eine Web-App macht, eine Native-App oder was auch immer

02:14.780 --> 02:18.320
und aus Performance-Gründen haben wir uns dann für eine Native-App entschieden

02:18.320 --> 02:25.040
und wenn man sich die aktuelle Marktsituation anguckt

02:25.040 --> 02:31.380
dann sieht man, dass Android im Moment knapp 85% an Marktanteil hat

02:31.380 --> 02:34.680
und deswegen haben wir uns dann für Android entschieden

02:34.680 --> 02:39.060
und die Android-App wird dann Pascal jetzt direkt mal vorstellen

02:39.060 --> 02:45.580
Ja, zur Android-App. Ich stelle jetzt mal die Main-Screens dieser App vor.

02:46.560 --> 02:51.060
Und wir starten mit dem Splash-Screen und den haben wir uns eben aus drei Gründen rausgesucht.

02:51.200 --> 02:56.280
Erstens mal, wir wollen eben das Logo den Kunden oder den Benutzern präsentieren, damit es einprägsam wird.

02:56.880 --> 03:04.620
Dann laufen im Hintergrund eben noch diverse Checker ab, zum Beispiel Connection-Check, hat die App überhaupt Netz, hat sie WLAN, hat sie mobile Daten.

03:05.040 --> 03:07.380
Dann Location-Check, ist der GPS-Server erreichbar.

03:07.380 --> 03:11.300
und natürlich, ob der normale Server, unser Server, erreichbar ist auch noch.

03:11.920 --> 03:15.780
Dann wird gleichzeitig im Hintergrund auch noch das erste Array geladen mit den Shops,

03:15.860 --> 03:17.780
weil es eben im nächsten Screen schon gebraucht wird.

03:18.640 --> 03:20.060
So, das ist dann unser Main Screen.

03:21.360 --> 03:27.140
Der teilt sich auf oben in eine Karte, wo dann eben die Shops in der Nähe angezeigt werden

03:27.140 --> 03:28.500
und unten in die Kategorie Suche.

03:29.420 --> 03:33.040
So, die Karte hat oben noch etwas Spezielles, und zwar ist da noch so eine Distanz drin,

03:33.040 --> 03:35.900
dieser rote Kreis, und wenn man den Distanzregner nach links dreht,

03:35.900 --> 03:37.480
dann skaliert sich die Map eben neu.

03:37.900 --> 03:39.500
Das sehen wir später nochmal in einem kleinen Video.

03:40.980 --> 03:42.120
So, sucht man nur noch einen Artikel,

03:42.220 --> 03:44.220
wird das eben in dieser Trefferliste hier angezeigt.

03:44.340 --> 03:45.580
Das wird natürlich asynchron geladen,

03:45.740 --> 03:47.140
sonst würde ja die UI hängen bleiben.

03:47.880 --> 03:50.800
Und wir haben da eben, weil wir auf Location-Based-Werk legen,

03:50.880 --> 03:53.740
haben wir links eben auch noch die Distanz zu diesem Artikel

03:53.740 --> 03:55.080
mit in der Liste drin.

03:55.480 --> 03:57.580
Und man kann auch filtern nach Preis und Distanz.

04:00.220 --> 04:01.220
Klickt man nur noch auf den Artikel,

04:01.300 --> 04:02.260
kommt natürlich Detailansicht

04:02.260 --> 04:04.800
und das zeigt dann alle Merkmale dieses Artikels

04:04.800 --> 04:07.040
rechts in dieser Box an und das Bild in groß.

04:07.160 --> 04:09.000
Dann haben wir zusätzlich noch eben drei Buttons unten.

04:09.740 --> 04:10.820
Dann kann man den Artikel eben

04:10.820 --> 04:12.980
zu Favoriten hinzufügen. Man kann sich zu dem Artikel

04:12.980 --> 04:14.760
hin navigieren lassen und man kriegt noch

04:14.760 --> 04:15.800
Informationen zu dem Shop.

04:18.120 --> 04:19.040
So, unser zweiter

04:19.040 --> 04:20.920
großer Menüpunkt, den man

04:20.920 --> 04:22.980
über den Navigation Drawer erreichen kann,

04:23.120 --> 04:24.960
sind die Shops in der Nähe. Da sieht man nochmals

04:24.960 --> 04:26.760
die Karte, die ein bisschen weiter reingezoomt ist.

04:27.600 --> 04:29.160
Und unten drunter haben wir

04:29.160 --> 04:31.040
zusätzlich noch mal eine Liste

04:31.040 --> 04:33.080
mit allen Shops, die wir in unserer Datenbank drin haben,

04:33.080 --> 04:37.240
die scrollbar ist. Also wirklich alle oben haben wir ja nur die in der Nähe drin gehabt, in der Karte.

04:38.880 --> 04:43.300
So, klickt man nun auf einen Marker oder in die Liste unten, dann kommt eben die Detailansicht dieses Shops.

04:43.380 --> 04:48.000
Dann sieht man zum Beispiel, wo ist dieser Shop, die Öffnungszeiten vom Shop und die Telefonnummer.

04:48.160 --> 04:49.940
Man kann sich ebenfalls wieder hin navigieren lassen.

04:50.700 --> 04:53.600
Und rechts dieses Symbol ist das Sortiment anzeigen von dem Shop.

04:54.140 --> 04:57.280
Und natürlich zwei Bilder, einmal das Logo und die Außenansicht.

04:59.040 --> 05:02.500
So, und jetzt haben wir noch ein kleines Video, damit man mal sieht, wie die App hier in Motion

05:02.500 --> 05:04.000
funktioniert.

05:07.860 --> 05:08.600
So, jetzt wird

05:08.600 --> 05:10.720
zunächst einfach mal nach einem Artikel gesucht.

05:15.420 --> 05:16.660
Und dann immer oben mal sieht,

05:16.740 --> 05:18.000
wie sich die Map dann skaliert, wenn man

05:18.000 --> 05:19.660
den Distanzregler bewegt.

05:21.280 --> 05:22.500
Wenn man genau sehen kann,

05:22.620 --> 05:24.680
welche Shops sind in der Distanz drin.

05:24.820 --> 05:26.060
Dann eben die Trefferliste.

05:26.060 --> 05:27.980
Wenn man kurz die Filterfunktion ausprobiert.

05:28.780 --> 05:29.800
Ja, funktioniert alles.

05:32.500 --> 05:38.940
So, die Detailansicht, dann wird mal ein Artikel reingelegt, dann sieht man, wie sich der Button ändert, dass man das auch wieder rauslöschen kann.

05:39.620 --> 05:45.140
Und wenn man navigiert, öffnet sich eben Maps oder die Navigation der Wahl und die Details.

05:45.140 --> 05:53.600
Dann über den Navigation Drawer sind dann eben die Punkte erreichbar, Favoriten kann man klar den Artikel wieder rauslöschen und in den Favoriten wird der Artikel auch persistent gespeichert.

05:53.600 --> 05:58.400
und dann haben wir hier wieder diese Shops-Ansicht

05:58.400 --> 06:00.920
und wenn man eben draufklickt, kommt die Detailansicht

06:00.920 --> 06:02.720
und man kann sich auch natürlich hier hin navigieren lassen

06:02.720 --> 06:03.580
und das Sortiment.

06:04.980 --> 06:07.540
Und wie das Ganze hier dann in einem Backend realisiert ist,

06:07.620 --> 06:09.200
das erklärt euch jetzt Imi und danach Kevin.

06:10.880 --> 06:11.180
Genau.

06:13.380 --> 06:18.140
Also zur Virtualisierung haben wir uns für ein neues Paradigma entschieden,

06:18.340 --> 06:18.740
Docker.

06:19.800 --> 06:23.200
Das wird derzeit von Facebook und es wurde von Twitter entwickelt,

06:23.200 --> 06:26.080
Deswegen haben wir uns dafür entschieden, darauf läuft unser Backend.

06:27.300 --> 06:29.120
Docker ist eine Open Source Software.

06:29.520 --> 06:35.420
Die stellt ein Unix-Betriebssystem mit einer Anwendung, also eine virtuelle Maschine, in einem sogenannten Container bereit.

06:36.380 --> 06:44.140
Der Vorteil davon ist, man hat eben ein privates Repository, kann das dann so mit Backupen, falls mal was daneben gehen sollte.

06:45.360 --> 06:47.600
Wir konnten Plattformen unabhängig entwickeln.

06:47.600 --> 06:52.880
Also wir haben unsere App entwickelt auf unseren Laptops, auf Mac OS X und Windows.

06:53.200 --> 07:00.040
Und haben anschließend dann den Container auf die VM übertragen von der HTM, damit sie im Internet erreichbar ist.

07:00.680 --> 07:03.840
In unserem Container haben wir zur Datenhaltung MongoDB installiert.

07:04.320 --> 07:07.660
Und als HTTP-Server haben wir uns für Node.js entschieden.

07:08.180 --> 07:10.320
Das macht später dann noch Kevin im Detail.

07:12.040 --> 07:14.180
Genau so sieht unsere Infrastruktur aus.

07:14.180 --> 07:17.900
Wir haben das MI-Netzwerk, in dem eine Ubuntu-VM ist.

07:18.460 --> 07:19.980
Und dort haben wir Docker installiert.

07:19.980 --> 07:22.960
dann haben wir unseren fertigen Container

07:22.960 --> 07:25.000
dorthin zu übertragen

07:25.000 --> 07:27.040
und in diesem Container ist eben

07:27.040 --> 07:29.100
MongoDB und Node.js, welche dann

07:29.100 --> 07:30.640
über Port 80 ins Internet

07:30.640 --> 07:33.080
sprechen können, damit die App

07:33.080 --> 07:34.900
eben Zugriff auf die Daten hat

07:34.900 --> 07:38.400
Wie schon gesagt, wer MongoDB

07:38.400 --> 07:40.660
benutzt

07:40.660 --> 07:43.100
MongoDB ist eine schemafreie, dokumentenorientierte

07:43.740 --> 07:44.860
Open Source Datenbank

07:44.860 --> 07:46.620
Sie ist eben nicht relational

07:46.620 --> 07:49.140
und es spiegelt sich wieder

07:49.140 --> 07:52.060
dass JSON-Objekte mit Key-Value darin abgelegt werden.

07:52.960 --> 08:00.180
Der Vorteil ist die Performance und dass nativ geolocation-basierte Funktionen genutzt werden.

08:00.600 --> 08:05.640
Das war bei uns eben zwingend notwendig, da wir uns zu den Artikeln navigieren lassen wollten.

08:06.400 --> 08:09.380
Dann haben wir wegen der Media Night, weil wir ja die App präsentieren müssen,

08:11.980 --> 08:18.080
5000 Testdatensätze mit Hilfe von einem Shell-Skript in die MongoDB importiert.

08:19.860 --> 08:20.220
Genau.

08:21.160 --> 08:22.620
So, und dann kommt Kevin mit Node.js.

08:23.860 --> 08:26.960
So, nachdem wir jetzt auf der einen Seite die App gesehen haben,

08:27.100 --> 08:28.680
die als Benutzerschnittstelle und als Client dient,

08:28.740 --> 08:29.980
auf der anderen Seite die Datenbank,

08:30.140 --> 08:32.540
möchte ich jetzt ein bisschen was über die API erzählen,

08:32.600 --> 08:33.780
die das Ganze miteinander verknüpft.

08:34.340 --> 08:36.180
Weil die API kann das Ganze nicht,

08:36.460 --> 08:38.760
die App kann das Ganze nicht direkt ansprechen, die MongoDB,

08:38.920 --> 08:41.460
sondern dann braucht man natürlich einen Web-Server dazwischen,

08:41.520 --> 08:42.400
der die Verbindung handelt.

08:43.080 --> 08:44.760
Das Ganze haben wir mit Node.js realisiert

08:44.760 --> 08:46.680
und zwar aus vielerlei Gründen.

08:46.680 --> 08:50.940
Zum einen ist es auf JavaScript basierend, auf der VR-Engine von Google.

08:51.740 --> 08:54.240
Das heißt, die Syntax ist uns nicht vollkommen fremd gewesen.

08:54.400 --> 08:56.280
Das heißt, die Einarbeitung ging relativ flott.

08:57.140 --> 08:59.920
Die Kompatibilität zu MongoDB war ausgesprochen gut.

09:00.240 --> 09:03.680
Also sowohl nativ gab es einen Treibersupport als auch über diverse Module.

09:04.640 --> 09:10.120
Was auch schon zur modularen Erweiterbarkeit führt, dass man das Ding einfach nach seinen Wünschen immer weiter erweitern kann,

09:10.200 --> 09:11.580
immer mehr Funktionalität hinzufügen kann.

09:12.580 --> 09:17.440
Durch vorgefertigte Module, durch eigengeschriebene Module, das ist wirklich sehr angenehm.

09:18.140 --> 09:24.060
REST-Interfaces lassen sich ziemlich intuitiv implementieren, was wir für unsere App auch wirklich dringend benötigt haben.

09:24.780 --> 09:30.620
Und zudem kommt, dass die Architektur dafür sorgt, dass viele gleichzeitig bestehende Netzwerkverbindungen ohne Performanceverlust

09:30.620 --> 09:34.680
ziemlich performant gehandelt werden können, was gerade in Sachen Scalability,

09:34.680 --> 09:39.960
weil wir vorhaben, das Ganze später auch noch ein bisschen größer aufzuziehen, uns von Vorteil erschien.

09:41.580 --> 09:53.980
Und nachdem wir das Ding entwickelt haben, sind wir auf ziemlich viele Fehler gestoßen und haben das ganze Projekt nochmal komplett eingestampft, haben im Prinzip nur die Skills mitgenommen, die wir im ersten Durchgang erworben haben und haben das Ganze dann testgetrieben entwickelt mit einem Framework namens Mocha.

09:55.060 --> 10:11.020
Und testgetrieben Entwicklung heißt, man konzipiert erst Test Cases, was soll dieses Backend, diese API überhaupt können und anschließend auf Basis dieser Test Cases haben wir dann angefangen die Funktionalität nach und nach zu implementieren, was zum einen zeitaufwendig war, weil wir uns erst einarbeiten mussten.

10:11.580 --> 10:14.080
und um

10:14.080 --> 10:17.260
auch ziemlich Blut und Schweiß gekostet hat, weil es echt nicht immer einfach war,

10:17.260 --> 10:20.220
aber jetzt haben wir eine API, die total fehlerresistent ist und

10:20.220 --> 10:22.580
überhaupt nicht mehr unvorhergesehen agiert,

10:22.580 --> 10:25.020
weswegen ich das wirklich jedem Entwickler ans Herz legen kann,

10:25.020 --> 10:28.820
Testgetrieben zu entwickeln, das ist wirklich eine total geile Geschichte, danke.

10:28.820 --> 10:29.760
Und

10:29.760 --> 10:33.600
im Schnelldurchlauf noch kurz, wie es funktioniert, Client, also Android-App,

10:33.600 --> 10:36.740
bastelt ein JSON-Objekt zusammen, schickt es an die API, die startet eine

10:36.740 --> 10:39.920
Datenbankabfrage und liefert praktisch in Response

10:39.920 --> 10:46.700
die Ergebnismenge zurück und dort wird die Ergebnismenge eben das JSON-Objekt aufbereitet, gerendert und dem Kunden präsentiert.

10:48.820 --> 10:51.560
Jetzt noch einen schnellen Ausblick in die Zukunft.

10:52.340 --> 10:59.200
Und zwar wollen wir das ganze Projekt fortführen und ich habe gesehen, dass wir zu Ende Schluss machen müssen.

10:59.560 --> 11:05.860
Also wir wollen auf jeden Fall noch ein Kundenfrontend bauen, das heißt für Shops einfach, dass sie die Klamotten oder

11:05.860 --> 11:16.720
Okay, also ihr seht hier im Überblick, was wir noch vorhaben und damit bedanke ich mich jetzt.

11:17.000 --> 11:18.800
Wenn ihr noch Fragen habt, dann gerne jetzt.

11:19.500 --> 11:22.320
Fragen können jetzt gerne gestellt werden, bestellt werden.

11:24.360 --> 11:26.980
Und währenddessen kann schon mal die nächste Gruppe weitermachen.

11:28.360 --> 11:33.680
Ja, was mich noch interessieren würde, ihr hattet ja von einem ShareScript gesprochen,

11:33.680 --> 11:38.720
wo ihr dann irgendwie Daten sammelt für eure Testanwendung hier.

11:39.100 --> 11:40.720
Wo habt ihr da die Daten genau her?

11:41.340 --> 11:45.820
Ja, die Daten wurden quasi mit dem Dienst Mokaru generiert.

11:47.480 --> 11:53.660
Das Ganze ist, also da kann man sich quasi, das ist ein Dienst, der bietet an,

11:53.720 --> 11:58.280
dass man eben zum Beispiel, du kannst sagen, okay, ich möchte jetzt die Marken Nike, Adidas

11:58.280 --> 12:01.480
und ich möchte die Farben Gelb, Blau, Grün, wie auch immer.

12:01.480 --> 12:03.400
und der generiert ja dann

12:03.400 --> 12:04.820
ein JSON-Array

12:04.820 --> 12:07.360
und das haben wir dann quasi per

12:07.360 --> 12:09.200
Curl runtergezogen und dann

12:09.200 --> 12:11.260
das Jelscript macht einen Mongo-Import

12:11.260 --> 12:13.400
und splittet die Daten dann auch noch

12:13.400 --> 12:15.240
auf und importiert sie eben in die

12:15.240 --> 12:15.740
Datenbank.

12:19.060 --> 12:21.420
Achso, genau, und die Technologien,

12:21.500 --> 12:23.440
die wir verwendet haben, liegen noch aus

12:23.440 --> 12:25.360
als Handout, falls es jemanden interessiert.

12:30.660 --> 12:31.180
...