-
Einleitung
Dont drink and drive, call Kangaroo and fly. Mit diesen Worten möchte ich den Einstieg in mein Abschlussprojekt machen. Es geht um Cocktails. Genauer gesagt geht es um das Unternehmen Flying Kangaroo, welches während der Corona Pandemie von drei Unternehmern gegründet wurde. Das Konzept der drei Unternehmer beruht darauf Cocktails direkt vor Ort bei den Kunden zu mixen. Das garantiert einen exzellenten Geschmack, frische und Entertainment. Zu Beginn hat Flying Kangaroo die Produkte über Lieferando vertrieben. So konnte mit wenig Aufwand eine hohe Reichweite erzielt werden - allerdings mit zusätzlichen Kosten. Aufgrund der Tatsache, dass sich der Absatz wie geplant gut entwickelt hat, wird nun eine eigene Website implementiert. Das Ziel ist es, u.a. durch geschicktes Marketing (Socialmedia Werbung, Werbung auf den Bechern und Auto) die vorhandenen Kunden auf die eigene Website zu leiten, um so eine höhere Kundenbindung zu generieren und um die zusätzlichen Kosten, die durch Lieferando anfallen zu minimieren. Gerade die Kunden von Flying Kangaroo profitieren vom Umzug auf die eigene Homepage, weil dort die Cocktails zu günstigeren Preisen angeboten werden und es dort die Möglichkeit gibt aus über 20 verschiedenen Zutaten seinen eigenen Cocktail nach Lust und Laune zu kreieren.
-
Inhalt der Webb Application
2.1.1 Header für jede Page 2.1.2 Footer für jede Page
2.2.0 Home
2.2.1 Es wird eine „Home“ Seite geben auf den allgemeinen Informationen über die Produkte stehen. Es wird ein Banner mit einem Bild einer Überschrift und einer kurzen Beschreibung geben. Hier kann Flying Kangaroo nach Bedarf den neusten Cocktail präsentieren, Rabatt Aktionen aufzeigen oder andere relevante Informationen für die Kunden bereitstellen
2.2.2 Danach folgt eine Tabelle mit zwei Spalten und einer Zeile. Die Kunden bzw. Interessenten können hier wählen, ob sie sich die „Cocktail Collection“ (Eine Zusammenstellung aus bekannten Cocktails) oder den „Cocktail-Mixer“ anschauen möchten. Produkte in beiden Kategorien können bestellt werden
2.2.3 Weitere Informationen über die Produkte, wie z.B. die Herkunft der Zutaten (Bio, regional), Nachhaltigkeit (… der Zutaten, Transport, Wohltätigkeit) und wenig Zuckergehalt o.Ä. werden in einer weiteren Tabelle aufgeführt
2.2.4 Im Anschluss daran folgt eine Diashow, die aus einem Textbereich und einem Bildbereich besteht. Hier werden drei Cocktails gezeigt. Der Textbereich enthält einen „Buy now“ Button
2.2.5 Top 5 Top Sellers werden danach aufgeführt. Es ist jeweils ein Bild zu sehen, der Name des Drinks und der Preis
2.2.6 Eine Art Gruß folgt zum Schluss – sowas wie Enjoy your Drinks
2.3.0 Cocktails
2.3.1 Ein Banner ist enthalten. Es sind mehrere Leute zu sehen, sodass Geselligkeit suggeriert wird
2.3.2 Eine gewisse Anzahl von Cocktails werden per Productcard dargestellt. Inhalt einer Card: Bild, Name des Cocktails, Preis, drei Hauptzutaten: Alkoholart, zwei weitere charakteristische Zutaten
2.3.3 Es werden dieselben Informationen wie aus 2.1.3 unter den Productcards aufgeführt
2.3.4 Jeder Cocktail hat eine Detailseite
2.4.0 Detailseiten
2.4.1 Informationen: Bilder, Name, Geschmacksnoten, Alkoholgehalt, Zutaten, größe des Drinks
2.4.2 Review Sektion
2.5.0 Cocktail-Mixer
2.5.1 Es ist eine Liste aus über 20 Zutaten zu sehen, woraus der Kunde per Klick wählen kann. Es können bis zu 5 Zutaten ausgewählt werden. Außerdem kann gewählt werden, ob der Cocktail alkoholfrei, mit Alkohol oder mit einem extra Schuss Alkohol sein soll.
2.5.2 Die Zutaten die gewählt wurden, erscheinen in einem Cocktailglas, welches neben der Liste platziert ist. So sieht der Kunde alle Zutaten im Glas.
2.5.3 „Add to Cart“ Button
2.6.0 About Us
2.6.1 Auf der About Us Seite wird es Beispeiltext mit Beispielfotos der Gründer geben. Im prinzip generelle Informationen über die Gründung, zu den Personen und den Beweggründen.
2.7.0 Contact
2.7.1 Seite die ein Kontaktformular enthält
- Tech Stack
3.1.0 API
3.1.1 Es wird die [TheCocktailDB](https://www.thecocktaildb.com/api.php) verwendet. Dies ist eine DB, die über 635 Drinks, 489 Zutaten und 635 Bilder enthält.
3.1.2 ..Für den Cocktail-Mixer wurden JSON Daten erzeugt die als Basis dienen. Diese Daten sind in der db.json Datei abgelegt.
3.2.0 Coding
3.2.1 HTML
3.2.2 CSS
3.2.3 Vue.js
3.2.4 Vite
3.2.5 Pinia
3.2.6 Cypress (E2E Testing)
3.3.0 Client
3.3.1 Google Chrome
3.4.0 Testing
3.4.1 Cypress (Cocktail-Mixer)
-
Zusammenfassung
Mit Hilfe moderner Webtechnologien wird eine elegante und freundliche Web App geschaffen, die Flying Kangaroo dabei hilft, die Ziele zu erreichen. Die Produkte werden so in Szene gesetzt, dass sie den Kunden bzw. Interessenten dazu animieren, die Produkte zu kaufen. Ein besonderer Augenmerk wird auf den Cocktail-Mixer gesetzt. Er stellt das Herzstück der Web App dar und bietet mit seinen vielfältigen Auswahlmöglichkeiten, genau das, was anspruchsvolle Kunden in der heutigen Zeit benötigen.
American express Icons erstellt von Freepik - Flaticon
Apple pay icons created by Freepik - Flaticon
Google pay icons created by Freepik - Flaticon
Visa icons created by Freepik - Flaticon
Paypal icons created by Roundicons - Flaticon
maestro Icon by Maestro: Artwork and branding requirements are available at brand.mastercard.com/brandcenter/other-marks.html
YouTube Play icon by Icons8
LinkedIn im Kreis icon by Icons8
Foto von Kaufmann Mercantile auf Unsplash
Heart icons created by Freepik - Flaticon
Growing icons created by Freepik - Flaticon
World icons created by turkkub - Flaticon
Foto von Austin Distel auf Unsplash
Foto von Pylyp Sukhenko auf Unsplash
Foto von Brooke Cagle auf Unsplash
Foto von Ian Schneider auf Unsplash
Foto von Helena Yankovska auf Unsplash
Pfeil Icons erstellt von Freepik - Flaticon
Foto von M.S. Meeuwesen auf Unsplash
Foto von kofookoo.de auf Unsplash
Foto von Kobby Mendez auf Unsplash