Unsere Plattform ist speziell auf die Bedürfnisse von Heurigenbesuchern zugeschnitten. Wir haben eine moderne und benutzerfreundliche Suchmaschine entwickelt, die es dem Nutzer ermöglicht, mit nur wenigen Klicks den besten Heurigen in der Nähe zu finden. Unsere Plattform soll dabei helfen, die Bindung zwischen Gästen und Wirten zu stärken und Heurigenbetreibern die Plattform bieten, die sie verdienen.

Die Plattform ist nicht in Konkurrenz zu anderen Plattformen wie Google Maps oder TripAdvisor, sondern ist maßgeschneidert für die Zielgruppe von Heurigenbesuchern, Fans regionaler Küche und jugendlicher Entdecker. Unsere Plattform bietet die Möglichkeit, mit wenigen Klicks und Interaktionen den besten Heurigen in der Nähe zu finden und umfassende Informationen zu erhalten, um eine fundierte Entscheidung zu treffen.

In unseren weiteren Release-Phasen planen wir, Filtermöglichkeiten nach Speisen sowie Bewertungen einzubauen. Auf diese Weise können Nutzer noch gezielter nach den für sie relevanten Heurigen suchen und Bewertungen anderer Nutzer einsehen, um eine informierte Entscheidung zu treffen. Wir sind davon überzeugt, dass unsere Plattform einen wertvollen Beitrag leisten kann, um das Heurigen-Erlebnis in Niederösterreich, Wien und der Steiermark zu verbessern.

Das Technische Gerüst:

Die Plattform basiert auf modernen Technologien, die ein schnelles, zuverlässiges und benutzerfreundliches Erlebnis gewährleisten sollen. Im Folgenden haben wir eine Übersicht über die wichtigsten Technologien erstellt, die wir verwenden:

Backend-Entwicklung mit Node.js und TypeScript:

Wir verwenden das Node.js-Framework Nest.js, um unsere Backend-Logik zu implementieren. TypeScript ist eine Erweiterung von JavaScript, die die Entwicklung von skalierbaren Anwendungen erleichtert und Elemente von OOP (Object Oriented Programming), FP (Functional Programming) und FRP (Functional Reactive Programming) kombiniert.

Frontend-Entwicklung mit Ionic und Angular: Das Frontend unserer Plattform basiert auf dem Ionic-Framework, das auf Angular aufbaut. Ionic bietet eine Vielzahl von vorgefertigten UI-Komponenten, mit denen wir schnell und effizient benutzerfreundliche Schnittstellen erstellen können.

Datenbank mit MySQL: 

Wir verwenden eine MySQL-Datenbank, um die Informationen zu den Heurigen und deren Standorten zu speichern. MySQL ist eine bewährte und zuverlässige Open-Source-Datenbank, die uns die nötige Skalierbarkeit bietet.

Projektverwaltung mit GitHub: Wir verwenden GitHub zur Verwaltung unseres Codes und unserer Projektarbeit. Mit GitHub können wir die Zusammenarbeit in unserem Team erleichtern und sicherstellen, dass der Code immer auf dem neuesten Stand ist.

Design mit Ionic Framework: Wir verwenden das Ionic Framework auch für das Design unserer Plattform. Ionic bietet eine Vielzahl von vorgefertigten Designelementen, mit denen wir schnell und einfach ein ansprechendes Design umsetzen können.

Hosting mit einem Linux-Server und Plesk: Unsere Plattform wird auf einem Linux-Server gehostet. Wir nutzen Plesk, um den Server zu verwalten und unsere Dienste zu konfigurieren.

Wir sind davon überzeugt, dass die Kombination dieser modernen Technologien uns die nötige Flexibilität und Skalierbarkeit bietet, um eine leistungsstarke und benutzerfreundliche Heurigen-Suchmaschine zu entwickeln, die auf die Bedürfnisse unserer Nutzer zugeschnitten ist.

Server und Infrastruktur:

In der heutigen Zeit ist die Anwendung von Virtualisierungstechnologien in der IT-Welt nicht mehr wegzudenken. 
Eine kurze Erklärung: Docker ist eine solche Virtualisierungstechnologie, die es ermöglicht, Anwendungen in Containern auszuführen und diese Container unabhängig von der darunterliegenden Infrastruktur zu skalieren und zu verwalten. Docker ist ein Open-Source-Tool, das es Entwicklern ermöglicht, Anwendungen schnell und einfach in Containern zu isolieren, zu verteilen und auszuführen.

Mit Portainer hat man die Möglichkeit, Docker-Container noch einfacher zu verwalten. Portainer ist eine webbasierte Benutzeroberfläche für die Verwaltung von Docker-Containern, die es einem ermöglicht, Container zu erstellen, zu konfigurieren und zu überwachen. Mit Portainer kann man auch die Container skalieren, Versionen verwalten und Fehlerbehebungen durchführen.

Neben Docker und Portainer haben wir uns auch für Plesk entschieden, um unsere Hosting-Services zu verwalten. Plesk ist eine benutzerfreundliche Plattform, die einem ermöglicht, Websites, E-Mail-Konten und andere Dienste auf einem Server zu verwalten. Es ist besonders nützlich für die Verwaltung von Hosting-Services, da es eine einfach zu bedienende Oberfläche bereitstellt und eine Vielzahl von Erweiterungen und Tools bietet, um den Dienst sicher und zuverlässig bereitzustellen.

Wir haben uns für Plesk entschieden, da es uns eine einfache Möglichkeit bietet, unsere Dienste zu verwalten, ohne dass wir über umfangreiche Linux-Kenntnisse verfügen müssen. (kommt leider erst im 3. Semester). Darüber hinaus bietet Plesk eine Vielzahl von Erweiterungen und Tools, die es uns ermöglichen, unsere Dienste sicher und zuverlässig bereitzustellen. Natürlich gibt es auch andere Hosting-Optionen, die ebenfalls eine gute Wahl sein können, aber wir wollen den Dienst auch anderswertig verwenden. Es ist jedoch wichtig, die Vorteile und Einschränkungen von verschiedenen Optionen zu evaluieren, um sicherzustellen, dass man die beste Wahl für die eigenen Anforderungen trifft.

Insgesamt bieten Docker, Portainer und Plesk eine gute Kombination von Werkzeugen, die es uns ermöglichen, unsere App, sicher, effizient und einfach zu verwalten.

Vom Server zum Service:

Anfangs haben wir uns entschieden, unsere Ionic-App und das NestJS-Backend in Docker-Containern zu hosten, um eine einfache Skalierung und Verwaltung zu gewährleisten. Ebenso ist der Umzug auf einen anderen Server wesentlich einfacher. Um dies zu erreichen, haben wir uns für Portainer entschieden (Auch weil der Rat vom Lehrbeauftragten kam), eine webbasierte Benutzeroberfläche für die Verwaltung von Docker-Containern.

Zuerst haben wir Docker-Images für unsere Ionic-App und das NestJS-Backend erstellt. Hierfür haben wir Dockerfiles erstellt, in denen wir alle notwendigen Abhängigkeiten installiert und unsere Anwendungen konfiguriert haben.

Anschließend haben wir die Docker-Container mit den erstellten Images in Portainer gestartet. Hierfür haben wir eine neue App in Portainer erstellt und das entsprechende Image angegeben. Um die Netzwerkverbindung zwischen den Containern herzustellen, haben wir ein eigenes Netzwerk in Portainer erstellt und die Container diesem Netzwerk zugewiesen.

Nachdem wir sichergestellt hatten, dass die Anwendungen in den Containern liefen und auf Anfragen reagierten, haben wir sie veröffentlicht. Hierfür haben wir in Portainer eine Port-Weiterleitung erstellt, die Anfragen an den Container weiterleitete.

Dank Docker und Portainer haben wir unsere Anwendungen einfach skalieren und verwalten können. Wir konnten verschiedene Versionen unserer Anwendungen in verschiedenen Containern ausführen und problemlos zwischen ihnen wechseln. Die webbasierte Benutzeroberfläche von Portainer hat uns auch ermöglicht, Container zu überwachen und zu verwalten, was die Verwaltung unserer Anwendungen erheblich erleichtert hat.

Das Backend mit NestJs:

Wie bereits erwähnt haben wir uns dazu entschieden das Backend mit NestJs in Kombination mit Typescript umzusetzen. NestJs ist ein komplettes, open-source Development-Kit zum Entwickeln von serverseitigen Applikationen. Für das Kommunizieren mit der Datenbank wurde TypeORM herangezogen und in der Applikation implementiert. TypeORM ist ein Tool für ORM (Object–relational mapping), mit dem objektrelationale Abbildungen zur Umwandlung von Daten zwischen objekt-orientierten Programmiersprachen und einer relationalen Datenbank verwirklicht werden können. Aufgrund der positiven Erfahrung in Lehrveranstaltungen und der Ähnlichkeit zu bekannten ORMs wie Hibernate haben wir uns für TypeORM entschieden.

Da NestJs eine CLI (Command Line Interface) anbietet, wurde diese als ersten Schritt mit dem Node Package Manager (NPM) installiert und anschließend ein neues Projekt generiert.

Dazu haben wir der offiziellen Dokumentation folgende Befehle entnommen:

Folgende, weitere Dependencies (Pakete) sind installiert worden:

• Cross-env (für das Plattformübergreifende Verwenden von Umgebungsvariablen)
• Bcrypt (zum hashen/vergleichen/speichern von Passwörtern)
• Mysql (für die Mysql-Verbindung)

Nach dem Installieren der notwendigen Dependencies und der Erstellung der grundlegenden Struktur sieht das Projekt folgendermaßen aus:

Die sogenannten Endpoints spiegeln die clientseitige Erreichbarkeit der serverseitigen, nach außen freigegebenen Funktionalitäten wider. Diese API (= Schnittstelle) bietet zum gegebenen Zeitpunkt die Möglichkeit Heurigen anhand einer Query (= Suchwort/Suchwörter), einer eindeutigen ID oder einer GPS-Koordinaten zu suchen. Abgesehen davon besteht noch die Möglichkeit Heurigen zu erstellen und anhand der ID auch wieder zu löschen.

Die clientseitigen DTOs (Data Transfer Object) und serverseitigen Entities stellen die objektrelationale Abbildung zur Umwandlung von Daten dar, während mit den Repositories auf die Datenbank zugegriffen werden kann. Dabei bilden die Services die Businesslogik der Applikation, in denen beispielsweise auch die Umwandlungen stattfinden. Für das Auslagern der Umwandlungslogik wurden jeweils zu den Entities und DTOs sogenannte „Mapper“ erstellt, die unter dem Ordner „utils“ zu finden sind.

Für das Differenzieren zwischen der Development- und Production Umgebung sind folgende Dateien angelegt worden:

1. dev.env
2. prod.env

Grundsätzlich sind in diesen .env Dateien zu diesem Zeitpunkt folgende Variablen notiert:

Je nachdem, welche Umgebung gestartet oder gebaut wird (dev / prod), werden die dev.env oder prod.env Variablen geladen. Die Verwendung von den jeweiligen Variablen und die Konfiguration der Datenbank bzw. TypeORM findet folgendermaßen statt:

Plesk:

Als wir uns dazu entschieden haben, unsere Heurigen-Suchmaschine zu entwickeln, war schnell klar, dass wir auch eine geeignete Hosting-Lösung benötigen. Nach einigen Recherchen haben wir uns schließlich dazu entschieden, einen vServer zu mieten und darauf Plesk zu installieren.

Plesk ist eine leistungsstarke Server-Management-Plattform, die es uns ermöglicht, unsere Webanwendungen, Datenbanken und E-Mail-Konten einfach und effizient zu verwalten. Hierbei bietet Plesk eine breite Palette an Funktionen, wie beispielsweise die automatische Einrichtung von SSL-Zertifikaten, Backups und Firewall-Konfiguration.

Um Plesk auf unserem vServer zu installieren, haben wir zunächst die entsprechende Lizenz erworben und die Installation auf unserem Server durchgeführt. Dabei haben wir uns für die Plesk Webhost Edition entschieden, da sie alle Funktionen bietet, die wir benötigen, um unsere Webanwendungen zu hosten und zu verwalten.

version: '3'

services:
  nestjs-backend:
    image: your-nestjs-backend-image
    ports:
      - "3000:3000"
    environment:
      - DB_HOST=mysql
      - DB_USER=your-db-user
      - DB_PASSWORD=your-db-password
      - DB_NAME=your-db-name
    depends_on:
      - mysql
    networks:
      - backend-network

  mysql:
    image: mysql:latest
    environment:
      - MYSQL_ROOT_PASSWORD=your-mysql-root-password
      - MYSQL_USER=your-db-user
      - MYSQL_PASSWORD=your-db-password
      - MYSQL_DATABASE=your-db-name
    volumes:
      - your-mysql-data-directory:/var/lib/mysql
    networks:
      - backend-network

networks:
  backend-network:


volumes:
  your-mysql-data-directory:

docker run -d -p 3000:3000 –name my-nest-app my-nest-app-image

Nach der Installation konnten wir uns direkt über den Browser in das Plesk Control Panel einloggen. Dort haben wir dann zunächst unsere Domain registriert und die entsprechenden DNS-Einträge vorgenommen, damit unsere Heurigen-Suchmaschine über die Domain erreichbar ist.

Anschließend haben wir dann die benötigten Webanwendungen, Datenbanken und E-Mail-Konten eingerichtet. Hierbei war die Benutzeroberfläche von Plesk sehr intuitiv und einfach zu bedienen, sodass wir uns schnell zurechtgefunden haben. ( ist auch das mindeste, wenn wir monatlich für die Lizenz zahlen) 

Darüber hinaus bietet Plesk auch eine Integration von Docker, was es uns ermöglicht, unsere Webanwendungen in Docker-Containern zu betreiben. Dies bietet den Vorteil, dass wir unsere Anwendungen unabhängig von der zugrunde liegenden Serverkonfiguration betreiben können und somit auch die Flexibilität haben, unsere Anwendungen auf anderen Servern zu betreiben, falls dies notwendig sein sollte.

Insgesamt sind wir mit unserer Entscheidung, Plesk auf unserem angemieteten vServer zu nutzen, sehr zufrieden und gleichzeitig überrascht, wie strukturiert man mit so einer Infrastruktur arbeiten kann. Die Plattform bietet eine leistungsstarke und einfach zu bedienende Lösung für das Hosting unserer Webanwendungen, Datenbanken und E-Mail-Konten. Darüber hinaus bietet die Integration von Docker auch die Möglichkeit, unsere Anwendungen flexibel und unabhängig von der zugrunde liegenden Serverkonfiguration zu betreiben.

Github und automatische Builds :

Da auch einige nicht versierte Personen mitlesen, gehe ich wir mal etwas auf Github ein.
GitHub ist eine beliebte Plattform für die Versionsverwaltung von Code und ermöglicht es Entwicklern, an Projekten zusammenzuarbeiten und Änderungen an Code zu verfolgen. Plesk bietet die Möglichkeit, Git-Repositories in das Hosting-System zu integrieren und Webhooks zu verwenden, um automatische Bereitstellungen auszulösen. Wird eine Änderung vorgenommen, so ruft Github eine URL auf, die ein Skript triggert. Dieses holt sich die Änderung und erstellt ein neues Build der Applikation.

Um eine automatische Bereitstellung zu konfigurieren, sind wir wie folgt vorgegangen:

1. Ein Git-Repository auf GitHub erstellen oder ein bestehendes Repository verwenden.
2. Eine neue Domain in Plesk hinzufügen und das zugehörige Verzeichnis erstellen.
3. Das Git-Repository in Plesk einrichten und Webhooks hinzufügen.
4. Eine Pipeline-Konfiguration in Plesk erstellen, um das Build-Skript auszuführen.
5. Eine Post-Receive-Hook-URL in GitHub einrichten, um das Webhook auszulösen

Schritt 1: Git-Repository auf GitHub erstellen

Ein neues Git-Repository kann auf der GitHub-Website erstellt werden, indem auf den “New Repository”-Button geklickt wird. Man gibt dem Repository einen Namen und wählt, ob es öffentlich oder privat sein soll.

Schritt 2: Domain hinzufügen und Verzeichnis erstellen

In Plesk muss zunächst eine neue Domain hinzugefügt werden. Man klickt dazu auf “Websites & Domains” und dann auf “Add Domain”. Dann wählt man nur mehr einen Domainnamen ein und wählt das Verzeichnis aus, in dem Ihre Anwendung gespeichert wird.

Schritt 3: Git-Repository in Plesk einrichten und Webhooks hinzufügen

In Plesk kann das Git-Repository über das Menü “Git” eingerichtet werden. Dazu fügt man die Git-URL und Authentifizierungsdaten hinzu, um auf das Repository zuzugreifen. Anschließend können Webhooks hinzugefügt werden, indem man auf das “+”-Symbol neben dem Repository klicken und die Webhook-URL auswählen.

Schritt 4: Pipeline-Konfiguration in Plesk erstellen

Eine Pipeline-Konfiguration muss in Plesk erstellt werden, um das Build-Skript auszuführen. Dies kann über das Menü “Websites & Domains” und dann “Hosting Settings” erfolgen. Danach nur mehr auf “Run a script” drücken und das Skript einfügen, das ausgeführt werden soll.

Schritt 5: Post-Receive-Hook-URL in GitHub einrichten

Eine Post-Receive-Hook-URL muss in GitHub eingerichtet werden, um das Webhook auszulösen. Dazu klicken wir auf die Repository-Einstellungen und dann auf “Webhooks”. Fügen die URL hinzu, die in Plesk erstellt wurde, und wählt aus, welche Ereignisse das Webhook auslösen sollen.

Wenn alle Schritte abgeschlossen sind, wird die Anwendung automatisch bereitgestellt, wenn Änderungen an Ihrem Git-Repository vorgenommen werden.

Taskmanagment Github Projects:

Github Projects ist eine Funktion von Github, die es Nutzern ermöglicht, ihre Projekte zu organisieren und zu verwalten. Es ist ein flexibles und leicht zu bedienendes Tool, das bei der Zusammenarbeit an Projekten von Vorteil ist. Mit Github Projects kann man die Aufgaben und Backlogs visuell darstellen, was einem einen Überblick über den Fortschritt des Projekts gibt.

Die Einrichtung von Github Projects ist einfach. Man erstellt ein neues Projekt, indem man auf die Schaltfläche “Neues Projekt” auf der Github-Projektseite klicken. Wir können dann die Spalten definieren, die Sie für Ihr Projekt benötigen, z.B. “To Do”, “In Arbeit” und “Fertig”.

Ein Vorteil von Github Projects ist, dass es in Github integriert ist. Das bedeutet, dass man die Projekt-Management-Aufgaben direkt auf Github erledigen kann. Man muss nicht auf eine andere Plattform wechseln, um Ihre Projektdaten zu verwalten.

Ein weiterer Vorteil ist die Möglichkeit der Zusammenarbeit. Mit Github Projects können mehrere Personen an einem Projekt arbeiten und den Fortschritt des Projekts gemeinsam verfolgen. Es gibt eine Vielzahl von Funktionen, die es den Teammitgliedern ermöglichen, Aufgaben zuzuweisen, Kommentare zu hinterlassen und den Status von Aufgaben zu ändern.

Zusammenfassend bietet Github Projects eine großartige Option für Teams, die an einem gemeinsamen Projekt arbeiten und ihre Arbeit effektiv verwalten und koordinieren müssen.

Versionsverwaltung GitHUb

GitHub ist eine der bekanntesten Plattformen für Softwareentwickler und bietet eine Vielzahl von Tools, um die Zusammenarbeit und den Austausch von Code zu erleichtern. Es ist auch ein beliebtes Tool zur Verwaltung von Softwareprojekten und Backlogs.

Bei unserem Projekt haben wir uns dafür entschieden, GitHub Projects zu nutzen, um unsere Backlogs zu organisieren und das Projektmanagement zu vereinfachen. GitHub Projects ist ein Kanban-Board-Tool, das es Entwicklerteams ermöglicht, Aufgaben und Projektmanagement-Aufgaben zu erstellen, zu verwalten und zu verfolgen. Es ist direkt in GitHub integriert, so dass man es einfach nutzen kann, ohne eine separate Plattform nutzen zu müssen.

Um GitHub Projects nutzen zu können, müssen wir zunächst sicherstellen, dass unser Repository auf GitHub gehostet wird. Sobald das Repository vorhanden ist, können wir ein neues Projekt erstellen und die Karten in die Spalten “To Do”, “In Progress” und “Done” aufteilen. Anschließend können wir Karten erstellen und Aufgaben zuweisen. Diese Karten können dann per Drag-and-Drop verschoben werden, um den Fortschritt der Aufgaben zu verfolgen.

Die Vorteile von GitHub Projects liegen auf der Hand: Es ist einfach zu bedienen, es ist direkt in GitHub integriert, so dass man nicht auf eine separate Plattform zugreifen muss, und es ist für Teams jeder Größe geeignet. Auch die Möglichkeit, Issues direkt mit Karten in GitHub Projects zu verknüpfen, ist eine großartige Funktion, die den Workflow beschleunigt.

Insgesamt hat uns GitHub Projects geholfen, unser Projektmanagement zu verbessern und unsere Backlogs zu organisieren. Wir empfehlen es jedem Entwicklerteam, das eine einfache und benutzerfreundliche Lösung für die Organisation von Aufgaben sucht.

Frontend-Entwicklung

Die Wahl für unser Toolkit in Hinblick auf die Frontend Entwicklung fiel nach einiger Überlegung auf das Ionic Framework in Kombination mit dem JavaScript Framework Angular. Der zentrale Vorteil, welcher sich für uns dadurch ergeben hat ist, dass wir später die Möglichkeit haben unsere Plattform auch als Mobile Applikationen anzubieten. Auch wenn wir unseren Service zunächst nur als Webplattform ausführen werden, kann mit diesem Setup leicht alle nativen Plattformen bedient werden, ohne später die Struktur oder Codebase ändern zu müssen. Zudem verfügt das Framework über einige vorgefertigte Komponenten, welche uns die Arbeit erleichtern. 

Die Wahl des JavaScript Frameworks ergab sich aus mehreren Gründen. Zunächst war der Vorteil, dass wir schon in der Lehrveranstaltung mit Angular gearbeitet haben und so bereits gewisse Vorkenntnisse vorhanden waren. Zudem hat uns die generelle Struktur um einiges mehr überzeugt, als es bei Vue der Fall war und nachdem keiner aus unserem Team Erfahrungen mit React hatte und die Lernkurve vergleichsweise steil zu sein scheint, schied auch diese Option aus. 

Bevor wir mit der eigentlichen Entwicklung des Frontends beginnen konnten, war uns eine detaillierte Planung wichtig. Vor allem, da wir das Projekt über mehrere Semester angelegt haben, wurde zunächst einige Zeit in die Gestaltung des User Interfaces gesteckt. Damit wollten wir vermeiden den Aufbau der Seite im Laufe der Entwicklung laufend überdenken zu müssen. Den Startpunkt legte hierbei die Gestaltung von Wireframes, um einmal grob festzulegen, welche Inhalte wir auf unserer Seite haben wollen. Dabei haben wir uns auch mit den Grundfunktionen unserer Plattform beschäftigt, welche für spätere Nutzer entscheidend sein werden. Nachdem wir uns auf die wichtigsten Elemente und eine grobe Positionierung auf der Seite geeinigt hatten, folgte die Umsetzung von High Fidelity Mockups mit Adobe XD. Im Zuge dessen haben wir uns auch mit den grundlegenden Design Aspekten, sowie dem Corporate Design unserer späteren Seite beschäftigt. Dabei wurden wichtige Elemente wie Farben und Schriftarten definiert. 

Die Entwicklung unseres Projekts: Ein vertiefender Einblick ins zweite Semester

Als wir uns dem zweiten Semester näherten, wussten wir, dass sich der Fokus von der Backend-Entwicklung, die im ersten Semester unsere Hauptaufgabe war, zum Frontend verschieben würde. Was wir jedoch nicht erwartet hatten, war die Intensität und Komplexität der Herausforderungen, denen wir uns stellen würden.

Die Synergie unseres Teams

Unser Team ist eine Mischung aus talentierten Individuen mit einer gemeinsamen Vision. Diese Vision trieb uns an, nicht nur als Einzelpersonen, sondern als eine Einheit zu funktionieren. Während ich persönlich tief im Frontend versunken war, gab es Momente, in denen das Backend Aufmerksamkeit erforderte. Diese Balance zwischen den beiden Komponenten war nur durch die unermüdliche Zusammenarbeit und die Synergie unseres Teams möglich. Unsere täglichen Meetings und ständige Kommunikation halfen uns, auf dem richtigen Weg zu bleiben.

Design- und UI-Herausforderungen

Eines der größten Rätsel dieses Semesters war das User Interface (UI). Wir wollten nicht nur ein funktionelles, sondern auch ein intuitives und ästhetisch ansprechendes Design. Dies führte zu vielen Diskussionen, Prototypen und Tests. Unsere Entscheidung, das Error-Handling im Frontend zu erweitern, war entscheidend, um die User Experience zu verbessern. Diese Änderungen gewährleisteten, dass Benutzer nicht durch unerwartete Fehler oder Probleme frustriert wurden.

Die Evolution der Leaflet Map

Unsere Arbeit mit der Leaflet Map war besonders aufschlussreich. Die Entscheidung, sie in eine eigene Komponente auszulagern, war nicht trivial. Sie erforderte viele Stunden der Planung und Umsetzung, um sicherzustellen, dass sie nahtlos in unsere Anwendung integriert wurde. Die Herausforderung, welche Daten zu laden und wie sie dem Benutzer präsentiert werden sollten, verlangte einen feinen Balanceakt zwischen Performance und Benutzerfreundlichkeit.

Technische Tiefe: Unsere Autovervollständigungs- und Suchmaschinenentwicklung

In der modernen digitalen Welt ist die Nutzererfahrung eines der entscheidenden Merkmale einer erfolgreichen Anwendung. Ein wesentlicher Bestandteil dieser Erfahrung, besonders in datengetriebenen Anwendungen, ist die Fähigkeit, effizient und intuitiv nach Informationen zu suchen. Um dieses Erlebnis für unsere Nutzer zu optimieren, haben wir eine innovative Autovervollständigungs- und Suchfunktion entwickelt.

Das Herzstück: Der Suchbaum

Im Kern unserer Autovervollständigungslogik steht ein in PHP implementierter Suchbaum. Dieser Baum, auch bekannt als Trie (abgeleitet von Retrieval), ist eine baumartige Datenstruktur, die speziell für das dynamische Speichern und Abrufen von Zeichenketten verwendet wird. Jeden Tag aktualisiert sich unser Suchbaum automatisch durch einen Auszug aus unserer Datenbank. Dies garantiert, dass die Daten, die für die Autovervollständigung verwendet werden, stets aktuell und relevant sind.

Gliederung der Daten: Heurigen, Straßennamen und mehr

Ein wesentliches Merkmal unserer Implementierung ist die differenzierte Behandlung verschiedener Datensätze. Heurigen, Straßennamen und andere relevante Datensätze werden separat gespeichert und verarbeitet. Diese Segmentierung ermöglicht es uns, trotz der Kompaktheit des Suchbaums, eine klare Verbindung zwischen den zurückgegebenen Vorschlägen und ihren entsprechenden Kategorien zu behalten. So können wir beispielsweise sicherstellen, dass ein bestimmter Straßenname korrekt mit seiner zugehörigen Kategorie verknüpft ist und nicht versehentlich als Heuriger interpretiert wird.

Durch diese detaillierte Analyse und Trennung der Daten konnten wir auch interessante Einsichten gewinnen, wie zum Beispiel die Tatsache, dass es in unserer Datenbank 2072 einzigartige Wörter in Straßennamen gibt. Solche Informationen können nicht nur für interne Analysen wertvoll sein, sondern auch dazu beitragen, die Datenbank effizienter zu gestalten und den Nutzern ein noch schnelleres Sucherlebnis zu bieten.

Die Entwicklung dieser Autovervollständigungs- und Suchfunktion war kein einfacher Prozess, aber sie hat unsere Anwendung zweifellos auf die nächste Stufe gehoben. Durch unsere technisch fundierte Herangehensweise und die kontinuierliche Optimierung können wir unseren Nutzern ein reibungsloses und intuitives Sucherlebnis bieten, das ihre Interaktion mit unserer Plattform weiter verbessert.

Unsere eigenen Komponenten

Das Ionic Framework bietet viele nützliche Tools, aber wir erkannten schnell, dass wir spezifische Anforderungen hatten, die maßgeschneiderte Lösungen erforderten. Das Ergebnis war unser eigenes Split-Layout, das speziell entwickelt wurde, um den spezifischen Anforderungen unserer Anwendung gerecht zu werden.

Blick nach vorne

Während wir zurückblicken und unsere Erfolge feiern, sind wir uns auch bewusst, dass die Reise noch lange nicht zu Ende ist. Mit jedem neuen Semester kommen neue Herausforderungen und Möglichkeiten. Aber mit der Entschlossenheit und dem Engagement unseres Teams sind wir zuversichtlich, dass wir auch zukünftige Hürden überwinden und weiterhin Produkte von höchster Qualität liefern werden.