Über dieses Projekt

AR Commerce - Ein modernes E-Commerce Erlebnis mit Augmented Reality

Bachelor Thesis - Multi Media Producer (Media Engineering)

Entwickler: Jasper Bleeker

Das Projekt

AR Commerce ist eine moderne E-Commerce Plattform, die Augmented Reality (AR) Technologie nutzt, um Kunden ein immersives Shopping-Erlebnis zu bieten. Das Projekt entstand als Teil meiner Bachelor Thesis an der Fachhochschule Graubünden und demonstriert die Kombination aus modernen Webtechnologien und innovativer AR-Implementierung.

Entwicklungszeit

4 Wochen intensive Entwicklung

Basierend auf bereits erstelltem UX-Testing Prototyp

Bachelor Thesis

Multi Media Producer (Media Engineering)

Fachhochschule Graubünden

Mein Beitrag

  • Konzeption, UX-Design & Usability-Testplanung
  • 3D-Modellierung in Blender (inkl. Optimierung für Web)
  • Frontend-Entwicklung mit Svelte 5, AR-Integration mit Model Viewer
  • Self-Hosting auf Unraid + Docker + MongoDB
  • Datenerhebung und -auswertung mit Python (AttrakDiff™ Analyse)
  • Deployment inkl. Reverse Proxy via Cloudflare Tunnel
🔬

Wissenschaftlicher Hinweis

Diese Webanwendung ist Teil einer wissenschaftlichen Untersuchung zur User Experience im E-Commerce und wurde im Rahmen meiner Bachelor Thesis an der FH Graubünden entwickelt.

Technologie-Stack

Frontend & AR

Svelte 5 - Moderne Frontend-Framework
Model Viewer - AR ohne Kopfschmerzen
TypeScript - Typsichere Entwicklung
Tailwind CSS - Utility-First CSS

Backend & Hosting

MongoDB - NoSQL Datenbank
Docker - Containerisierung
Unraid Server - Self-Hosting
Portainer - Container Management
Cloudflare Tunnel - Reverse Proxy

Zur Entwicklung

Die Entwicklung erfolgte mit Svelte 5, das eine moderne und reaktive Benutzeroberfläche ermöglicht. Model Viewer wurde für die AR-Integration gewählt, da es die komplexe WebXR-Implementierung vereinfacht und eine nahtlose 3D-Erfahrung bietet. TypeScript sorgt für typsichere Entwicklung und bessere Code-Qualität, während Tailwind CSS ein schnelles und konsistentes Styling ermöglicht.

Zum Deployment

Das Projekt wird auf einem Unraid Server mit Docker-Containerisierung gehostet. Portainer vereinfacht das Container-Management, während Cloudflare Tunnel als Reverse Proxy fungiert und sicheren externen Zugriff ermöglicht. MongoDB läuft in einem separaten Container und stellt die Datenpersistenz sicher. Diese Architektur ermöglicht einfache Updates und skalierbare Bereitstellung.

Herausforderungen & Lösungen

3D-Modelle & AR

  • • Challenge: Optimierung für Web-Kompatibilität (GLTF)
  • • Problem: Transparenz-Texturen in Blender
  • • Lösung: Transparenz Node in Blender löschen
  • • Erkenntnis: unterschiedliche 3D-Formate = unterschiedliches Rendering

Self-Hosting Setup

  • • Challenge: Mehrere fehlgeschlagene Builds
  • • Problem: Environment-Variablen Konfiguration
  • • Lösung: Portainer + FTP für einfaches Deployment
  • • Bonus: Zero-Downtime Updates möglich

Persönliche Erfahrungen

🎨

Svelte 5

Sehr interessant, erinnert stark an Nuxt. Framework-Abstraktion kann für Lernzwecke hinderlich sein, aber für Produktivität optimal.

👁️

AR-Entwicklung

Model Viewer macht AR zum Kinderspiel. Kreative Workarounds für Touch-Interaktionen auf Mobile erforderlich.

🏠

Self-Hosting

Tolle Möglichkeit, Internet-Hintergründe zu verstehen. Kostengünstig und erfüllend, eigene Projekte auf eigener Hardware zu hosten.

Thesis-Erkenntnisse

AR vs. Statische Bilder

AR Vorteile: Verbessert hedonische UX-Qualitäten (Stimulation)
Statische Bilder: Bessere pragmatische Qualitäten, gewohnte Interaktion
Empfehlung: Kombination beider Visualisierungsarten

Technische Innovationen

  • • Markdown CMS: Einfaches Dev-CMS für Produktdaten
  • • Flexibilität: Sehr entwicklerfreundlich
  • • Nachteil: Nicht nutzerfreundlich für Nicht-Entwickler
  • • Performance: Top auf alter Hardware (4 Kerne, 8GB RAM)

Zukunftspläne

Geplante Features

  • • Virtual Try-On: Für Mode (anspruchsvoll aber spannend)
  • • Admin-Panel: Nutzer-Authentifikation für eigene Produkte
  • • PWA: Progressive Web App
  • • Payment: Mit Wirtschaftspartnern

Technologie-Interessen

  • • Machine Vision: Pose-Erkennung für Virtual Try-On
  • • Home Lab: High Availability, Kubernetes
  • • Load Balancing: Erweiterte Self-Hosting Experimente
  • • Portfolio: Wird definitiv auf Portfolio erscheinen

Mehr Informationen zum Projekt sind in den Github Repositories zu finden.

Zum Projekt Github Repository Zum Thesis Github Repository

Dieses Projekt demonstriert die Möglichkeiten moderner Webtechnologien, Self-Hosting und AR-Integration. Ein Beweis dafür, dass mit der richtigen Technologie auch komplexe Projekte in kurzer Zeit realisierbar sind.

Zurück zur Startseite