Worum es in der App geht

Im Kern funktioniert Timelapse wie ein visuelles Tagebuch:

• Nutzer:innen legen Projekte an (z. B. „Daily Selfie“ oder „Zimmerpflanze“).
• Die App erinnert regelmäßig daran, neue Fotos aufzunehmen.
• Alle Bilder werden zeitlich geordnet, mit Datum und optionalen Kommentaren gespeichert.
• Auf einer kompakten Übersicht sieht man, wann man etwas aufgenommen hat, welche Tage besonders wichtig waren und wie sich das Projekt über Wochen und Monate entwickelt.
• Aus dieser Sammlung erzeugt Timelapse auf Knopfdruck ein Zeitraffervideo, das die Geschichte des Projekts in wenigen Sekunden erzählt.

Zentrale Funktionen in Kürze

• Projektorganisation: Mehrere parallele Timelapse-Projekte mit Titel, Beschreibung und individuellen Einstellungen.
• Visuelle Timeline: Eine kombinierte Wochen- und Listenansicht zeigt, welche Tage schon dokumentiert sind und welche Lücken es noch gibt.
• Erinnerungen: Konfigurierbare Benachrichtigungen, damit die tägliche Aufnahme zur Routine wird und die Timeline nicht abreißt.
• Favoriten & Notizen: Einzelne Tage können hervorgehoben und mit kurzen Kommentaren versehen werden – etwa um Meilensteine oder besondere Momente zu markieren.
• Automatische Video-Montage: Die App erstellt aus den Bildern ein Video, berücksichtigt Ausrichtung, Datum, optionales Wasserzeichen und Kommentare und bietet Konfigurationsmöglichkeiten für Qualität oder Textstil.

Technologie-Stack

Die App ist als native Android-Anwendung mit Jetpack Compose umgesetzt und nutzt moderne Android-APIs sowie eine klare Schichtung zwischen UI, Logik und Medienverarbeitung.

• UI: Jetpack Compose + Material 3
  • Alle Screens (Projektliste, Details, Dialoge, Konfiguration) sind vollständig in Compose realisiert.
  • Material-3-Komponenten wie LargeFlexibleTopAppBar, Listen, Cards und Dialoge sorgen für ein konsistentes Look & Feel.
  • Ein zentrales TimelapseTheme verwaltet App-Theme (Light/Dark), Seed-Farbe und den Palette-Stil.
• Material 3 Expressive & Material You
  • Die App nutzt Material 3 Expressive, um eine lebendige, charakterstarke Farb- und Typografie-Sprache umzusetzen – passend zu einer App, die persönliche Veränderungen dokumentiert.
  • Über einen integrierten Color Picker wählen Nutzer:innen eine eigene Akzentfarbe.
  • Aus dieser Seed-Farbe wird mit Material You ein komplettes Farbschema generiert, das sich konsistent über die gesamte App zieht.
  • Dadurch wirkt Timelapse auf jedem Gerät persönlich, bleibt aber immer klar strukturiert und gut lesbar – unabhängig davon, ob Light- oder Dark-Mode aktiv ist.
• Video-Montage & Bildverarbeitung
  • Die Montage-Logik läuft in einem eigenen Modul:
  • Bilder werden anhand ihrer EXIF-Daten korrekt ausgerichtet.
  • Ein Canvas setzt die Frames zusammen, ergänzt Texte (Datum, Kommentare, Wasserzeichen) und kümmert sich um Hintergrundfarbe und Zensurflächen.
  • Ein Muxer erzeugt daraus ein MP4-Video, gesteuert über Kotlin Flows, die den Fortschritt an die UI melden.
  • So entsteht aus einer losen Sammlung von Bildern ein stimmiges Timelapse-Video, ohne dass externe Tools nötig sind.

Material 3 Expressive & Material You im Einsatz

Ein großer Fokus des Projekts lag auf einer modernen, adaptiven UI, die sich nach den Nutzer:innen richtet:

• Dynamische Farbwelten
  • Durch den Seed-Color-Ansatz wirkt die App nicht wie ein statisch durchgestyltes Produkt, sondern wie ein Rahmen, der sich der jeweiligen Geschichte anpasst.
  • Projekte mit emotionalem Kontext (z. B. Schwangerschaft, Beziehungen, erste Wohnung) profitieren von den kräftigen, expressiven Paletten, die Material 3 bereitstellt.
• Einheitliche, weiche Formsprache
  • Großzügige Rundungen (z. B. extra große Card-Shapes in Dialogen), expressive Typografie und bewusst eingesetzte Icons unterstützen den Tagebuch-Charakter der App.
  • Die App verzichtet auf überladene UI-Elemente und setzt auf Ruhe, Klarheit und Fokus – wichtig, wenn man sich über Monate immer wieder mit derselben Oberfläche beschäftigt.
• Konsistentes Theming
  • Alle Bausteine – von Erfassungsdialogs über Erinnerungs-Settings bis hin zu Fortschrittsanzeigen bei Scans und Montage – hängen am gleichen Theme.
  • Änderungen an Theme, Palette oder Seed-Farbe greifen sofort durch, ohne dass einzelne Screens speziell angepasst werden müssen.

Herausforderungen & Learnings

• Balance zwischen Einfachheit und Kontrolle
  • Nutzer:innen sollen einerseits „einfach nur“ ein Timelapse-Video erstellen können, andererseits genug Einstellmöglichkeiten für Qualität, Text, Stabilisierung und Privatsphäre haben.
  • Ein wichtiger Lernpunkt war, die Komplexität hinter klaren Dialogen und wenigen, gut erklärten Optionen zu verstecken.
• Stabile, angenehme Timelapse-Videos
  • Kleine Fehler bei Skalierung oder Matrix-Transformation führen schnell zu Sprüngen oder abgeschnittenen Bereichen – hier war viel Feintuning nötig.
• Durchgängiges Theming mit Material 3 / Material You
  • Seed-Farben, dynamische Paletten und unterschiedliche Palettenstile (z. B. Expressive) lassen sich mächtig kombinieren – aber nur, wenn das Theming-Konzept von Anfang an klar definiert ist.
  • Die wichtigste Erkenntnis: Ein zentrales Theme-Objekt vereinfacht langfristig alle Entscheidungen rund um Farben, Typografie und Component-Styling.

Fazit

Timelapse war für mich ein Projekt, in dem sich User Experience, modernes Android-Design und Medienverarbeitung sehr gut ergänzt haben. Die App zeigt, wie sich mit Jetpack Compose, Material 3 Expressive und Material You eine Oberfläche bauen lässt, die technisch anspruchsvolle Abläufe (zB. Videomontage) hinter einem einfachen, persönlichen Nutzungserlebnis versteckt. Besonders spannend war zu sehen, wie stark sich die Wahrnehmung der App ändert, wenn man eine eigene Farbwelt definieren kann und diese sich konsequent durch alle Screens zieht. In zukünftigen Schritten möchte ich die App um Themen wie Musik, Export-Presets und umfangreichere Sharing-Optionen erweitern – immer mit dem Ziel, den Kern beizubehalten: Veränderung sichtbar machen, ohne dass sich der Aufwand danach anfühlt.

The post Projekt | Timelapse Android App appeared first on Mobile USTP MKL.

In diesem Artikel werden fünf gängige Architektur-Muster vorgestellt, die wichtigsten Auswahlkriterien erklärt und eine praktische Check­liste für die Entscheidung geliefert. So entsteht bereits vor dem ersten Commit eine solide Basis für eine reibungslose Entwicklung.

Klassische Schichten-Architektur

Die bekannteste Herangehensweise ist die klassische Schichten-Architektur. Dabei wird eine Anwendung in drei Teile gegliedert:

In der Praxis:

Einsatzszenario:

Die klassische Drei-Schichten-Architektur eignet sich besonders für kleine bis mittelgroße Anwendungen und Solo- oder Kleinteam­projekte, weil sie schnell aufgesetzt ist und eine klare Trennung von UI, Logik und Datenzugriff bietet. Hält sich die Domäne jedoch in Grenzen, lässt sich damit langfristig gut arbeiten. Wachsen jedoch Funktionsumfang, Geschäftsprozesse oder Teamgröße, sollte man rechtzeitig über Modularisierung, DDD oder Microservices nachdenken, um die Wartbarkeit nicht zu gefährden.

Frontend-Pattern: MVC und MVVM

In Frontend-Anwendungen treffen Darstellung, Logik und Nutzereingaben direkt aufeinander – ohne klare Struktur wird der Code schnell unübersichtlich. MVC und MVVM sind zwei bewährte Muster, die helfen, diese Bereiche zu trennen und Benutzeroberflächen wartbarer und übersichtlicher zu gestalten.

Model-View-Controller (MVC):

• Model: Alle Daten und Geschäftslogik.
• View: Das, was man sieht und anklickt.
• Controller: Die Brücke dazwischen – nimmt Eingaben der View entgegen und aktualisiert Model oder View.MVC trennt klar, wer was tut, und macht es leicht, einzelne Teile auszutauschen.

Model-View-ViewModel (MVVM):

• Ähnlich wie MVC, ergänzt aber das ViewModel, das View und Model synchron hält.
• Änderungen am Model „binden“ sich automatisch in die View ein und umgekehrt.MVVM ist besonders beliebt in modernen UI-Frameworks (z. B. SwiftUI, Jetpack Compose), weil es mit Datenbindung und Deklarativität perfekt harmoniert.

Einsatzszenario:

• MVC eignet sich für einfache Web-Apps oder klassische Desktop-Anwendungen.
• MVVM glänzt, wenn Frameworks Datenbindung anbieten und man den UI-Code sauber von Logik fernhalten will.

Monolith vs. Microservices

Wenn die Anwendung wächst, stellt sich die Frage, ob man alle Funktionen in einem großen Block (Monolith) lässt oder in kleine, eigenständige Dienste (Microservices) aufteilt.

Einsatzszenario:

Für kleine Teams und einfache Projekte bleibt der Monolith oft die pragmatischere Wahl. Bei hoher Komplexität, vielen Teams oder strengen Skalierungsanforderungen lohnt sich der Umstieg auf Microservices.

Domain-Driven Design (DDD)

Domain-Driven Design ist ein Ansatz, bei dem der Fokus auf dem fachlichen Kern einer Anwendung liegt, also auf dem, was das System inhaltlich wirklich tut. Statt sich zuerst mit Frameworks oder Datenbanken zu beschäftigen, geht es darum, die Abläufe und Begriffe einer bestimmten Domäne, zum Beispiel im Ressourcenmanagement, in der Buchhaltung oder im E-Commerce genau zu verstehen und diese im Code richtig abzubilden. Um diese Idee in der Praxis umzusetzen, nutzt DDD verschiedene Konzepte, die helfen, komplexe Systeme verständlich zu strukturieren und die Zusammenarbeit zwischen Fachexperten und Entwickelnden zu verbessern. Besonders wichtig sind dabei Ubiquitous Language, Bounded Contexts und der Unterschied zwischen Entities und Value Objects.

Ubiquitous Language bedeutet, dass Entwickelnde und Fachexperten eine gemeinsame Sprache verwenden. Fachbegriffe wie „Buchung“, „Ressource“ oder „Projekt“ tauchen dabei direkt im Code auf, zum Beispiel als Klassen oder Methoden. Das sorgt dafür, dass alle dasselbe Verständnis haben und sich leichter austauschen können.

Bounded Contexts helfen dabei, eine große und komplexe Domäne in klar abgegrenzte Bereiche zu unterteilen. Jeder Bereich hat sein eigenes Modell und eigene Regeln. So bleibt der Code übersichtlich, und Änderungen in einem Teil der Anwendung führen nicht automatisch zu Problemen in einem anderen.

Bei Entities handelt es sich um Objekte mit einer eindeutigen Identität, wie zum Beispiel ein Kunde, der sich im Laufe der Zeit verändern kann. Value Objects dagegen, wie ein Geldbetrag, sind unveränderlich und werden nur durch ihre Werteigenschaften beschrieben.

Einsatzszenario:

Wenn die Domäne komplex ist und viele Experten involviert sind, sorgt DDD dafür, dass alle dasselbe Vokabular nutzen, im Code und in Meetings. Das reduziert Missverständnisse und verbessert die Wartbarkeit.

Event-Driven Architektur & CQRS

Bei modernen Anwendungen, die in Echtzeit reagieren oder viele Prozesse gleichzeitig verarbeiten müssen, stoßen klassische, linear aufgebaute Systeme schnell an ihre Grenzen. Um diesen Anforderungen gerecht zu werden, haben sich neue Architekturansätze wie die Event-Driven Architecture und Command Query Responsibility Segregation etabliert.

Event-Driven Architecture (EDA):

Statt dass Komponenten direkt miteinander kommunizieren, reagieren sie auf Ereignisse, sogenannte Events. Wenn beispielsweise eine Bestellung aufgegeben wird, löst dieses Ereignis weitere Aktionen aus, wie den Versand einer Bestellbestätigung oder das Aktualisieren des Lagerbestands. Das System bleibt dadurch flexibel, entkoppelt und kann leicht erweitert oder skaliert werden.

Command Query Responsibility Segregation (CQRS):

CQRS trennt Lese- und Schreibvorgänge klar voneinander: Commands verändern den Zustand eines Systems (zum Beispiel „Erstelle Rechnung“), während Queries nur Daten abfragen (etwa „Hole Rechnungsübersicht“). Durch diese Trennung lassen sich beide Bereiche gezielt optimieren. In Verbindung mit Event Sourcing, bei dem jede Zustandsänderung als Ereignis gespeichert wird, können Abläufe besser nachvollzogen und Systeme insgesamt stabiler und fehlertoleranter gestaltet werden, besonders bei komplexen oder verteilten Anwendungen.

Einsatzszenario:

IoT-Netzwerke, Echtzeitanalysen, große Webplattformen oder Finanz­transaktionen, bei denen Latenzen niedrig und Nachvollziehbarkeit hoch sein müssen.

Fazit

In meinem Semesterprojekt habe ich eine Webapp nach dem klassischen Drei-Schichten-Prinzip aufgebaut – Benutzeroberfläche, Geschäftslogik und Datenzugriff. Als alleiniger Entwickler konnte ich so in kurzer Zeit neue Features hinzufügen, ohne dass das System unübersichtlich wurde.

In meiner aktuellen Arbeit an einer umfangreichen Ressourcenmanagement-Plattform mit über zehn Entwicklerinnen und Entwicklern reicht dieses einfache Grundgerüst allerdings nicht mehr aus. Deshalb sind wir auf Domain-Driven Design umgestiegen und nutzen im Code jetzt echte Fachbegriffe wie „Ressource“, „Room“ oder „Desk“. Diese Umstellung hat nicht nur die Einarbeitung neuer Teammitglieder erleichtert, sondern auch die Abstimmung mit den Fachabteilungen deutlich beschleunigt.

Im Laufe verschiedener Projekte ist mir immer wieder aufgefallen, wie schnell selbst kleine Änderungen an der Architektur später großen Aufwand nach sich ziehen können. Wer sich bereits zu Beginn Gedanken über mögliche Wachstums- und Team­szenarien macht, schafft eine solide Grundlage für spätere Erweiterungen. Mir wurde dabei deutlich, dass sich ein wenig zusätzliche Planung im Vorfeld vielfach auszahlt, sei es durch eine bewusste Strukturierung in Schichten, eine klare Trennung fachlicher Kontexte oder den Einsatz von Entkopplungs­mechanismen. Dieses Vorgehen sorgt nicht nur für verständlicheren Code, sondern erleichtert auch das Hinzukommen neuer Mit­arbeiterinnen und Mitarbeiter. Letztlich zahlt sich jeder Moment, den man in die Architektur­entscheidung investiert, in Form von Zeitersparnis und weniger technischen Stolpersteinen aus.

Links

• https://learn.microsoft.com/en-us/dotnet/architecture/modern-web-apps-azure/common-web-application-architectures

• https://learn.microsoft.com/en-us/azure/architecture/guide/architecture-styles

• https://learn.microsoft.com/en-us/azure/architecture/guide/architecture-styles/microservices

• https://martinfowler.com/microservices

The post Blog | Software Architekturen: Überblick und Entscheidungs­hilfe appeared first on Mobile USTP MKL.

Technischer Aufbau

Im Hintergrund greift WebXR auf JavaScript-APIs zurück. Technisch gesehen setzt sich WebXR also aus diesen Bausteinen zusammen, die eng ineinandergreifen:

• Rendering
  Die Darstellung der 3D-Grafik erfolgt über WebGL oder aufbauende Frameworks wie Three.js, Babylon.js oder A-Frame. Das Rendering läuft in einer speziellen Schleife, die ähnlich wie requestAnimationFrame funktioniert, jedoch direkt an die Anforderungen der XR-Hardware angepasst ist. Eine Szene wird dabei in 3D präsentiert, indem die Perspektive für jedes Auge berechnet wird. Beide Bilder – links für das linke Auge, rechts für das rechte Auge – werden in einem Framebuffer kombiniert und anschließend an das XR-Gerät übergeben, sodass der Nutzer eine realistische stereoskopische Ansicht erhält.
• Gerätedaten
  Die API stellt Informationen über die aktuelle Position und Orientierung von Headsets bereit, erfasst Kameradaten für AR-Anwendungen und liefert Sensordaten wie Bewegungen, Beschleunigung, Rotation oder Barometerwerte. Typische XR-Geräte unterstützen 3 oder 6 Freiheitsgrade (DoF) und können interne oder externe Positionssensoren besitzen. Diese Daten werden abstrahiert, sodass die Anwendung nicht wissen muss, ob sie von einem High-End-VR-Headset, einem Smartphone oder einer AR-Brille stammen.
• Eingabemethoden
  Neben klassischen VR-Controllern können auch moderne Eingabeverfahren wie Handtracking, Blicksteuerung oder Gestenerkennung integriert werden. Bewegungen der Eingabegeräte werden in Vektoren umgewandelt, die die Anwendung für Navigation und Interaktion innerhalb der XR-Szene nutzt.
• Rendering-Schleifen
  Jede XR-Session läuft in einem eigenen Zyklus, bei dem pro Bild sowohl die Grafiken berechnet als auch die neuesten Tracking-Daten der Hardware abgefragt werden. Dadurch wird ein konsistentes XR-Erlebnis gewährleistet, bei dem Interaktion und Darstellung stets synchronisiert sind.
• Sicherheits- und Zugriffskontrolle
  Da XR-Anwendungen Zugriff auf sensible Daten wie Kamerastreams oder präzise Bewegungsprofile erhalten, übernimmt der Browser die Sicherheitsabfragen. Er fordert die Zustimmung des Nutzers ein und gibt nur die notwendigen Daten weiter, die für die jeweilige Session benötigt werden.
• Multi-View-Unterstützung und Spiegelung
  WebXR kann mehrere Ansichten gleichzeitig rendern. Typisches Beispiel ist das Stereo-Rendering für VR, bei dem getrennte Bilder für das linke und rechte Auge erzeugt werden. In AR-Szenarien können zusätzlich 3D-Inhalte mit Kamerabildern kombiniert werden. Optional kann die Szene auch auf einem 2D-Display gespiegelt werden, um das Erlebnis für Zuschauer sichtbar zu machen oder für Debugging-Zwecke.

Um ein Erlebnis zu starten, legt eine Website eine Session an (etwa „immersive-vr“ für Virtual-Reality-Inhalte oder „immersive-ar“ für Augmented-Reality-Erfahrungen). Der Browser kümmert sich dabei um die Kommunikation mit dem Betriebssystem und der Hardware. Er fragt nach den nötigen Berechtigungen und stellt der Anwendung die Daten in einem standardisierten Format zur Verfügung. Diese werden dann in Folge für das Redern gebraucht. Der Vermittlungsprozess kann von WebXR geräteunabhängig durchgeführt werden. Sensoren wie Beschleunigungsmesser, Gyroskope oder Barometer werden automatisch berücksichtigt, sodass Bewegungen des Nutzers präzise in die XR-Szene übertragen werden.

WebXR Einsatzgebiete

Zu den wesentlichen Bereichen, in denen WebXR Anwendungen mittlerweile stark vertreten sind, kurz ein Überblick:

• Industrie und Wartung: Techniker sehen AR-Überlagerungen mit Infos zu Maschinen, oder bekommen Schritt-für-Schritt-Anleitungen eingeblendet.
• E-Commerce: Online-Shops können Produkte in 3D oder AR darstellen. Nutzer können Möbel virtuell ins Wohnzimmer stellen oder Kleidung anprobieren.
• Kultur und Kunst: Museen schaffen virtuelle Rundgänge, oder bieten AR-geführte Touren, die einfach im Browser starten.
• Bildung und Training: Virtuelle Labore oder Simulationen sind direkt im Browser nutzbar, ohne teure Software-Installationen. Pilotprojekte zeigen, dass das den Zugang zu Lerninhalten erleichtert.

Hier nun ein paar Real-Beispiele zum Draufklicken:

WebXR in der Praxis (Code-Snippet)

Das folgende Code-Snippet zeigt, wie man mit WebXR und Three.js eine einfache AR-Anwendung erstellt kann, die es Nutzern ermöglicht, ein 3D-Modell direkt in ihrer realen Umgebung zu platzieren:

const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.xr.enabled = true;
document.body.appendChild(renderer.domElement);

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 0.2, 20);
scene.add(camera);

const light = new THREE.AmbientLight(0xffffff, 1);
scene.add(light);

const cube = new THREE.Mesh(
  new THREE.BoxBufferGeometry(0.2, 0.2, 0.2),
  new THREE.MeshBasicMaterial({ color: 0x00ff00 })
);
scene.add(cube);

const controller = renderer.xr.getController(0);
scene.add(controller);

const hitTestSource = new XRHitTestSource();
controller.addEventListener('select', () => {
  const hitPose = hitTestSource.getPose();
  if (hitPose) {
    cube.position.set(hitPose.position.x, hitPose.position.y, hitPose.position.z);
  }
});

function animate() {
  renderer.setAnimationLoop(animate);
  renderer.render(scene, camera);
}

animate();

Dieses Code-Snippet erstellt eine 3D-Szene mit Kamera, Licht und einem grünen Würfel als Objekt. Der WebGL-Renderer wird aktiviert und unterstützt WebXR, sodass AR-Funktionen direkt im Browser genutzt werden können. Ein XR-Controller erfasst die Eingaben des Nutzers, während ein Hit-Test die reale Position für das Objekt bestimmt. Tippt der Nutzer, wird der Würfel an dieser Position platziert. Die Szene wird kontinuierlich gerendert, sodass das Objekt in Echtzeit in der Umgebung angezeigt wird.

Chancen und Herausforderungen von WebXR

Ein zentraler Vorteil von WebXR liegt in der niederschwelligen Zugänglichkeit: Nutzer müssen keine zusätzliche App installieren, sondern können direkt über einen Link immersive Inhalte aufrufen. Das senkt die Eintrittsbarrieren erheblich und steigert die Reichweite. Darüber hinaus ermöglicht WebXR plattformübergreifende Entwicklung, sodass eine einzige Codebasis sowohl auf Desktop, Mobilgeräten als auch XR-Headsets funktioniert. Entwickler profitieren zudem von der engen Verzahnung mit etablierten Webtechnologien wie WebGL oder WebAudio, was die Integration bestehender Infrastruktur erleichtert und Entwicklungsaufwände reduziert. Fortschritte wie WebAssembly und WebGPU lassen erwarten, dass die Lücke in puncto Leistung zu nativen Anwendungen kleiner wird.

Auf der anderen Seite zeigen sich nach wie vor deutliche Einschränkungen. Die Unterstützung in Browsern und auf Geräten ist fragmentiert: Während einige Plattformen bereits solide WebXR-Funktionalitäten bieten, hinkt etwa Safari auf iOS noch hinterher. Auch die Performance bleibt bei komplexen 3D-Szenen hinter nativen Anwendungen zurück, was sich etwa in niedrigeren Framerates oder reduzierter visueller Qualität äußern kann. Ein weiterer kritischer Punkt betrifft die Sicherheit: Da WebXR im Browser läuft, sind klassische Webbedrohungen wie Phishing, bösartige Skripte oder Datenlecks nicht auszuschließen. Gerade weil WebXR-Schnittstellen Zugriff auf sensible Sensoren und Bewegungsdaten erlauben, sind strenge Berechtigungs- und Sicherheitskonzepte unverzichtbar. Schließlich erfordert die breite Kompatibilität oft Kompromisse bei Funktionsumfang und Detailtiefe, um auf möglichst vielen Endgeräten zuverlässig zu laufen.

Ausblick in die Zukunft

WebXR entwickelt sich rasant von einer experimentellen Technologie hin zu einem festen Bestandteil digitaler Erlebnisse. Diese Entwicklung zeigt sich besonders in vier zentralen Bereichen:

• Integration neuer Technologien: Künstliche Intelligenz und Mixed Reality machen WebXR-Erfahrungen individueller und immersiver, indem sie Inhalte dynamisch anpassen und reale mit virtuellen Elementen
• Mehr Leistung & Zugänglichkeit: Moderne Browser, leistungsstarke Geräte und schnelle Netzwerke ermöglichen bereits heute beeindruckende XR-Erlebnisse direkt im Web – ohne zusätzliche Apps oder komplizierte Installationen.
• Standardisierung & Interoperabilität: Mit Schnittstellen wie dem WebXR Device API entstehen plattformübergreifende Anwendungen, die auf unterschiedlichsten Geräten konsistent funktionieren und so ein breites Publikum erreichen.
• Neue Einsatzfelder: Neben Gaming rücken vor allem Bildung, E-Commerce und virtuelle Zusammenarbeit in den Fokus. Lernende profitieren von interaktiven Kursen, Unternehmen nutzen immersive Showrooms, und Kund:innen können Produkte realitätsnah erleben.

Fazit

WebXR verbindet das Web mit der Welt der XR-Erlebnisse und das recht unkompliziert direkt im Browser. Es macht VR und AR leichter zugänglich und bringt Vorteile in der Nutzung für Bildung, Industrie, E-Commerce und Kultur. Gleichzeitig gibt es noch Hürden bei Leistung, Sicherheit und Standardisierung. Nichtsdestotrotz haben sich schon einige Unternehmen an die Entwicklung reiner WebXR Anwendungen herangewagt. Doch mit der Weiterentwicklung von Hardware, offenen Standards und einer aktiven Community wird WebXR in den kommenden Jahren ein wichtiger Zugangskanal für immersive Inhalte werden.

Um nun selbst einen Eindruck gewinnen zu können, kann man unter WebXR – Samples checken, ob der eigene Browser WebXR unterstützt und im Falle einer Unterstützung direkt sich mit den Aspekten der WebXR API auseinandersetzen.

Links:
Beitragsbild – https://immersive-web.github.io/webxr-samples/media/logo/webxr-logo.svg
Bilder der Real-Beispiele – Quelllink direkt in den Bildern eingebettet
https://immersiveweb.dev/
https://immersive-web.github.io/webxr-samples/
https://developer.mozilla.org/de/docs/Web/API/WebXR_Device_API
https://www.rooom.com/de/blog/webxr-the-future-of-immersive-web-experiences
https://www.onirix.com/webxr-examples-development-extended-reality/
https://edbyto.com/edbyto/webxr-fuer-berufliche-aus-und-weiterbildung
https://www.edtechaustria.at/virtuelle-welten/
https://edbyto.com/edbyto/albion-press-virtuelles-museumserlebnis-in-webxr
https://webhosting.de/webxr-virtuelle-realitaet-browser/ https://developer.mozilla.org/de/docs/Games/Techniques/3D_on_the_web/WebXR

The post Blogbeitrag | WebXR – das Web als Tor in eine neue Dimension appeared first on Mobile USTP MKL.

In diesem Artikel zeige ich, wie man mit Next.js (App Router), React Server Components und Suspense eine performante, filterbare Liste baut. Dabei erkläre ich nicht nur den Code, sondern auch die zugrunde liegenden Konzepte.

1. React Server Components (RSC) – kurz erklärt

Mit dem App Router hat Next.js Server Components eingeführt.
Das bedeutet: Komponenten können auf dem Server gerendert werden, bevor HTML an den Browser geschickt wird.

Vorteile:

• Weniger JavaScript im Client → bessere Performance.
• Direkter Zugriff auf Datenbanken/Server-APIs (kein API-Layer nötig).
• SEO-freundlich, da Inhalte direkt im HTML stehen.

Für unsere filterbare Liste bedeutet das:
Wir können die gefilterten Daten direkt im Server Component holen und rendern, ohne zusätzliche API-Endpunkte schreiben zu müssen.

2. Suspense – was ist das?

React Suspense erlaubt es, Ladezustände elegant zu handhaben.
Anstatt im Code manuell isLoading-Zustände zu bauen, können wir Teile des UI in <Suspense fallback={...}> hüllen.

So wird z. B. eine Liste erst angezeigt, wenn die Daten geladen sind, und bis dahin zeigt React automatisch eine Fallback Komponente an (z. B. „Loading…“).

In Next.js ist Suspense schon integriert – wir müssen es nur nutzen.

3. Datenmodell vorbereiten

Als Beispiel nutzen wir Prisma ORM mit einer PostgreSQL-Datenbank. Unser Modell könnte so aussehen:

// prisma/schema.prisma
model Event {
  id        String   @id @default(cuid())
  title     String
  location  String
  date      DateTime
  status    String   // e.g. "open", "closed"
}

Wir haben also eine Liste von Events mit Titel, Ort, Datum und Status.

4. Eine einfache Liste rendern

Zuerst bauen wir eine Seite, die alle Events anzeigt:

Eine Server Component rendert direkt die Liste. Vorteil: Sie läuft auf dem Server, hat Zugriff auf Prisma und schickt nur HTML an den Client.

// app/events/page.tsx
import { prisma } from "@/lib/db";

export default async function EventsPage() {
  const events = await prisma.event.findMany();

  return (
    <div>
      <h1 className="text-2xl font-bold mb-4">Events</h1>
      <ul className="space-y-2">
        {events.map((e) => (
          <li key={e.id} className="p-3 border rounded-lg">
            <div className="font-semibold">{e.title}</div>
            <div>{e.location} – {e.date.toDateString()}</div>
            <div>Status: {e.status}</div>
          </li>
        ))}
      </ul>
    </div>
  );
}

Das ist schon SSR out of the box, ohne zusätzliche API.

5. Filter via Search Params

Jetzt machen wir die Liste filterbar, indem wir searchParams nutzen.
Ein Beispielaufruf:

/events?status=open&location=StPoelten

Somit kann auch über die URL im Browser ein Filter für die Liste definiert werden.

// app/events/page.tsx
import { prisma } from "@/lib/db";

export default async function EventsPage({
  searchParams,
}: {
  searchParams: { status?: string; location?: string };
}) {
  const { status, location } = searchParams;

  const events = await prisma.event.findMany({
    where: {
      status: status || undefined,
      location: location || undefined,
    },
  });

  return (
    <div>
      <h1 className="text-2xl font-bold mb-4">Events</h1>
      <Filters />
      <EventList events={events} />
    </div>
  );
}

6. Eine Client Komponente für die Filter-UI

Interaktive Filter brauchen Client-Side Hooks (useRouter, useSearchParams). Darum trennen wir UI (Client) von Datenfetching (Server).

// app/events/Filters.tsx
"use client";

import { useRouter } from "next/navigation";

export function Filters() {
  const router = useRouter();

  return (
    <div className="mb-4 flex gap-2">
      <button
        className="px-3 py-1 border rounded"
        onClick={() => router.push("/events?status=open")}
      >
        Open
      </button>
      <button
        className="px-3 py-1 border rounded"
        onClick={() => router.push("/events?status=closed")}
      >
        Closed
      </button>
      <button
        className="px-3 py-1 border rounded"
        onClick={() => router.push("/events")}
      >
        All
      </button>
    </div>
  );
}

Die Page-Component bleibt Server-seitig, nur die UI für die Filter ist Client-seitig.

7. Ladezustände mit Suspense

Damit beim Filterwechsel nicht plötzlich ein „Leeres UI“ flackert, setzen wir eine Suspense Boundary.

Während dem Ladevorgang wird somit Loading events... angezeigt. Dies soll nur der Veranschaulichung dienen – in modernen Webanwendungen würde man hier z.B. eine Skeleton-Komponente anzeigen.

// app/events/page.tsx
import { Suspense } from "react";
import { EventList } from "./EventList";
import { Filters } from "./Filters";

export default function EventsPage({ searchParams }: { searchParams: any }) {
  return (
    <div>
      <h1 className="text-2xl font-bold mb-4">Events</h1>
      <Filters />
      <Suspense fallback={<p>Loading events...</p>}>
        <EventList searchParams={searchParams} />
      </Suspense>
    </div>
  );
}

Die EventList selbst bleibt ein Server Component:

// app/events/EventList.tsx
import { prisma } from "@/lib/db";

export async function EventList({ searchParams }: { searchParams: any }) {
  const { status, location } = searchParams;

  const events = await prisma.event.findMany({
    where: {
      status: status || undefined,
      location: location || undefined,
    },
  });

  return (
    <ul className="space-y-2">
      {events.map((e) => (
        <li key={e.id} className="p-3 border rounded-lg">
          <div className="font-semibold">{e.title}</div>
          <div>{e.location} – {e.date.toDateString()}</div>
          <div>Status: {e.status}</div>
        </li>
      ))}
    </ul>
  );
}

8. Fazit

Filterbare Listen sind ein zentrales Feature in fast jeder Web-App. Mit Next.js App Router, Server Components und Suspense können wir sie:

• performant (wenig Client-JS, schnelle Server-Abfragen),
• einfach (keine extra API nötig),
• userfreundlich (Suspense für Ladezustände)

umsetzen.

Das Prinzip lässt sich auf viele Bereiche anwenden – ob Produktkataloge, Reisebuchungen oder Mitgliederlisten.

The post Blog | Filterbare Listen mit Next.js: Server Components & Suspense appeared first on Mobile USTP MKL.

Doch React Native allein ist nicht immer der einfachste Startpunkt. Wer sich den Einstieg erleichtern und viele wiederkehrende Aufgaben automatisieren möchte, kommt an Expo kaum vorbei.

Im 2. Semester meines Masterstudiums in Interactive Technologies hielt ich in der Masterklasse Mobile einen Workshop ab, der eine Einführung in die App-Entwicklung mit React Native und Expo gab:

React Native – die Basis

React Native wurde 2015 von Meta (Facebook) veröffentlicht und ist seither ein fester Bestandteil der mobilen App-Entwicklung. Ziel ist es, die aus dem Web bekannte React-Philosophie auch auf mobile Plattformen zu bringen: Komponentenbasiert, wiederverwendbar und flexibel.

Vorteile von React Native

• Plattformübergreifend: Eine Codebasis für Android und iOS
• Performance: Native UI-Komponenten, keine WebViews
• Entwicklerfreundlich: Hot Reloading beschleunigt den Entwicklungsprozess
• Ökosystem: Riesige Community und viele Open-Source-Bibliotheken
• Erfolgreiche Einsätze: Unternehmen wie Facebook, Uber, Airbnb oder Tesla setzen auf React Native

Im Vergleich zu Frameworks wie Ionic oder Flutter zeigt sich ein klarer Unterschied:

• Ionic nutzt stark Web-Technologien und WebViews, was aufwändige Apps schnell an Grenzen bringt.
• Flutter verwendet eine eigene Rendering-Engine und ein komplett eigenes UI-System. Das bietet Flexibilität, geht aber zulasten von App-Größe und Integration in die nativen Systeme.
• React Native dagegen greift direkt auf native APIs zu und integriert sich harmonisch in iOS und Android.

Expo – das Turbo-Framework für React Native

Wer mit React Native arbeitet, merkt schnell: Obwohl es in vielen Fällen einfacher ist als native Entwicklung, braucht man dennoch viel Konfiguration. Build-Tools, Signierungen, App-Store-Prozesse – all das kostet Zeit und Nerven.

Genau hier kommt Expo ins Spiel. Expo ist ein Open-Source-Framework, das wie eine Art „Abkürzung“ für React-Native-Projekte funktioniert.

Was Expo bietet

• Vorgefertigtes SDK mit Zugriff auf Kamera, Standort, Push-Notifications u. v. m.
• Expo Go App: Einfach QR-Code scannen und die App direkt auf dem Smartphone testen – ohne Build-Prozess.
• OTA-Updates (Over-the-Air): Apps können direkt aktualisiert werden, ohne dass der App Store durchlaufen werden muss.
• Schneller Start: Keine komplizierte native Konfiguration notwendig – besonders für Einsteiger ein riesiger Vorteil.

Ein praktischer Vergleich:
Während man bei klassischem React Native oft erstmal eine komplexe iOS- oder Android-Konfiguration anlegen muss, startet man mit Expo praktisch „out of the box“ – fast so, als würde man ein neues React-Webprojekt mit Next.js beginnen.

Expo Go – Entwickeln ohne Hürden

Ein Highlight von Expo ist Expo Go. Statt bei jeder Änderung die App neu bauen zu müssen, scannt man mit der Expo-Go-App auf dem Smartphone einfach einen QR-Code und testet die Anwendung sofort live.

Für Entwickler bedeutet das:

• Sofortiges Feedback bei Änderungen
• Weniger Zeitverlust durch Builds
• Schnelleres Prototyping

Besonders im Teamwork oder bei Präsentationen vor Kunden ist das ein enormer Vorteil, weil Feedback in Echtzeit umgesetzt werden kann.

Expo Application Service (EAS) – Von der Idee in den Store

Früher war der Weg von einer funktionierenden App zum Eintrag im App Store oft eine große Hürde. Mit EAS (Expo Application Service) nimmt Expo Entwicklern auch diesen Teil ab.

Die wichtigsten Funktionen:

• EAS Build: Der Code wird auf Expo-Servern in native Apps für iOS und Android kompiliert. Auch das Signieren übernimmt Expo.
• EAS Submit: Der automatische Upload in den Apple App Store und Google Play Store spart enorm viel Zeit.

Ein besonderer Vorteil: Windows-Nutzer benötigen keinen Mac, um iOS-Apps zu bauen und hochzuladen – eine Einschränkung, die viele Entwickler bisher blockiert hat.

Praxisbeispiel: TODO-App

Ein klassischer Einstieg in die App-Entwicklung ist eine TODO-App. Im Zuge des Workshops wurde eine solche erfolgreich mit den Studenten umgesetzt:

• Nutzer können Aufgaben anlegen, abhaken und löschen
• Die Daten werden lokal gespeichert

Das klingt simpel, zeigt aber: Schon mit wenigen Zeilen Code lassen sich funktionale und plattformübergreifende Apps erstellen – ohne tief in die nativen Eigenheiten von iOS oder Android einzusteigen.

Der vollständige Sourcecode der App aus dem Workshop kann hier heruntergeladen werden:

Fazit – Warum Expo?

React Native ist schon für sich ein mächtiges Framework. Doch Expo hebt die Effizienz und Benutzerfreundlichkeit noch einmal auf ein neues Level. Besonders für kleinere Teams, Start-ups oder Einzelentwickler bedeutet das: schneller Ergebnisse, weniger technische Hürden und ein klarer Fokus auf die eigentliche App-Idee.

Ob für Prototypen, MVPs oder vollwertige Produktions-Apps – Expo bietet eine moderne, schlanke und praxisnahe Lösung, die den gesamten Entwicklungszyklus abdeckt:
Von der ersten Zeile Code über das Testen auf dem Smartphone bis hin zur Veröffentlichung im App Store.

Wer also nach einem Weg sucht, mobile Apps ohne Umwege zu entwickeln, findet in React Native mit Expo einen idealen Einstieg.

Downloads

The post Workshop | Expo (React Native) appeared first on Mobile USTP MKL.

99 problems but my agent has none

Fast jede bekannte IDE hat mittlerweile KI-Assistenten oder zumindest die Möglichkeit diese mit Extensions/Plugins einzubauen. Der bekannteste externe KI-Assistent ist Github Copilot. Was nun neben den klassischen KI Chats über den eigenen Code noch dazu kommt, sind Agents. Ein Agent kann sich durch die gesamte Codebase lesen und auch eigenständig unterschiedliche Dateien bearbeiten. Somit kann man einem Agent sagen “Erstelle mir einen Reddit Klon”. Dieser Prompt wird zwar wahrscheinlich nicht funktionieren, aber der Agent wird mehrere Files erstellen, in der CLI Befehle ausführen und am Ende ein Projekt erstellen, welches viele Fehlermeldungen erzeugt. Naja trotz der Fehler stellen sich viele Leute die Frage: “Warum überhaupt noch selbst coden?”. Willkommen in der Thematik Vibe Coding.

Was ist Vibe Coding?

Vibe Coding lässt sich eigentlich ganz einfach beschreiben, man wirft einfach Beschreibungen in eine KI und hofft, dass am Ende das Richtige rauskommt. Man muss nicht verstehen was man macht, man muss nicht sorgfältig planen und man muss keine Dokumentationen lesen. Ein Prompt Ablauf sieht circa so aus (das folgende Beispiel ist fiktiv und nicht real (wirklich)):

• “Erstelle mir eine App wie Reddit, aber moderner und besser.”
• KI erstellt 2000 Zeilen Code
• “Das Design ist nicht modern genug, außerdem sind folgende Errors aufgetaucht {insert errors}”
• KI erstellt 1000 Zeilen Code
• “Funktioniert noch immer nicht… {insert error}”
• KI erstellt die gleichen 1000 Zeilen Code von vorhin.
• User schließt Agent

Die Realität

Es ist zwar lustig kleine Apps und Webseiten mit KI zu erstellen, aber es wird “gefährlich” wenn man die KI-Experimente in die professionelle Arbeitswelt überträgt. Wenn man Glück hat dann funktioniert alles oberflächlich, aber sobald man in die Tiefe geht wird man zwangsläufig auf Probleme stoßen. Je mehr Prompts man dem KI-Agent gibt, desto mehr wird der Code ein Mysterium. Nun braucht man die KI um die eigene Codebase zu verstehen, falls es die KI überhaupt selbst noch erklären kann. Das macht die Wartung oder Debugging fast unmöglich. Und wenn das noch nicht genug ist dann ist die fehlende Sicherheit das nächste große Thema. Die KI wirft wahllos Bibliotheken zusammen egal ob veraltet oder mit bekannten Sicherheitslücken. Also selbst wenn man es schafft ein funktionierendes Projekt zu zaubern, dann wird es spätestens bei den Sicherheitslücken zu Problemen kommen.

Vibe Coding – die Lernfalle

Gerade für Coding-Anfänger sind KI-Assistenten umstritten. Als Anfänger sollte man die Konzepte verstehen und sich über den geschriebenen Code Gedanken machen. Standardmäßig ist die Inline-Code-Completion aktiviert und nach 1-2 Wörtern werden schon die nächsten Zeilen von der KI vorgeschlagen. Dadurch gewöhnen sich die Anfänger daran, dass der Code magisch auftaucht und funktioniert. Diese Entwickler können dann scheinbar komplexe Projekte erstellen, aber sobald Fehler auftauchen sind sie komplett aufgeschmissen. Teilweise spreche ich hier aus Erfahrung weil ich auch kurzeitig in diese Lernfalle gefallen bin, aber irgendwann habe ich gemerkt dass es mir eigentlich schadet, also habe ich alle KI-Funktionen ausgeschaltet.

KI nutzen oder nicht

Ki-Assistenten können durchaus nützliche Werkzeuge sein, aber sie sollten nicht als Ersatz für das eigene Denken verwendet werden. Es spricht nichts dagegen auch im Coding KI einzusetzen, es kommt einfach auf die Nutzung an. Zum Beispiel für: Erklären von Code, die Erstellung von Boilerplate-Code, oder als Rubber-Duck. Echte Softwareentwicklung erfordert, zumindest aktuell nach wie vor Verständnis, Planung und Sorgfalt. Das mein kurzer Exkurs zu Vibe Coding.

Hinweis: Das Beitragsbild wurde mit KI erstellt (Inronie beabsichtigt)

The post Vibe Coding weil kein Coding appeared first on Mobile USTP MKL.

MCP standardisiert die Integration von Daten und Tools mit KI-Anwendungen. Dieser Artikel erklärt, warum MCP sich aktuell schnell zum neuen Standard für die Kontextkommunikation in agentenbasierten KI-Systemen entwickelt.

Was ist das Model Context Protocol (MCP)?

Damit KI-Modelle in Produktionsumgebungen wie z.B. Programmierassistenten, Fertigungssteuerungen oder der Finanzberichterstattung zuverlässigen Mehrwert liefern, benötigen sie den passenden Kontext. Effektive KI-Systeme kombinieren die Fähigkeiten des Modells mit dem Zugriff auf relevante, präzise Informationen – seien es proprietäre Daten aus verschiedenen Unternehmenssystemen oder aktuelle Erkenntnisse aus Websuchen – sowie mit agentenbasierten Tools, die Daten weiterverarbeiten und Unternehmensabläufe automatisieren können.

Früher geschah dies ad hoc und ohne Standardisierung. MCP bietet nun ein konsistentes, strukturiertes Format für die Interaktion mit Large Language Models (LLMs) und anderen KI-Modellen und vereinfacht so die Entwicklung maßgeschneiderter KI-Anwendungen erheblich. Ähnlich wie REST-APIs einst die Kommunikation von Webdiensten standardisierten, ermöglicht MCP eine nahtlose Integration und Interoperabilität zwischen verschiedenen Systemen und Plattformen.

MCP definiert klare Muster für die Kontextbereitstellung für Modelle, die Verwaltung der Tool-Nutzung und die Verarbeitung von Antworten. So können Entwickler schneller wartungsfreundlichere KI-Anwendungen erstellen, ohne für jeden Anwendungsfall neue Implementationen erstellen zu müssen.

Wie funktioniert MCP?

MCP verwendet ein einfaches Client-Server-Modell. KI-Anwendungen wie Cursor, Claude oder ein Haystack Agent fungieren als Clients, die sich mit MCP-Servern verbinden. Jeder dieser Server ermöglicht über eine standardisierte Schnittstelle den Zugriff auf ein bestimmtes Tool oder eine Datenquelle.

Wenn die KI-Anwendung Informationen benötigt oder eine Aktion ausführen möchte, sendet sie eine Anfrage an den entsprechenden MCP-Server. Dieser übernimmt die Interaktion mit der zugrundeliegenden Datenquelle oder dem Tool und gibt die Ergebnisse zurück. Diese Standardisierung ermöglicht die Zusammenarbeit aller MCP-kompatiblen Clients mit allen MCP-kompatiblen Servern ohne individuelle Integration.

Während in der offiziellen Dokumentation zwischen Hosts (der KI-Anwendung) und Clients (Protokolladaptern auf der Hostseite, die 1:1 mit Servern verbunden sind) unterschieden wird, wird in den meisten praktischen Ausführungen zu MCP die KI-Anwendung selbst einfach als „MCP-Client“ bezeichnet, der sich mit mehreren Servern verbinden kann.

MCP Servers

Ein MCP-Server ist wie ein intelligenter Adapter für ein Tool oder eine App. Er kann eine Anfrage einer KI (z. B. „Verkaufsbericht von heute abrufen“) in vom Tool verständliche Befehle übersetzen.

Beispiele:

• Ein GitHub-MCP-Server könnte die Anfrage „Offene Pull Requests auflisten“ in einen GitHub-API-Aufruf umwandeln.
• Ein File-MCP-Server könnte die Anfrage „Zusammenfassung als Textdatei speichern“ in eine Datei auf Ihren Desktop schreiben.
• Ein YouTube-MCP-Server könnte Videolinks auf Anfrage transkribieren.

Der MCP Server ist für folgende Aufaben zuständig:

• Der KI erklären, was sie überhaupt tun kann (Tool-Erkennung)
• Interpretieren und Ausführen von Befehlen
• Formatieren von Ergebnissen, die für die KI verständlich sind
• Behandeln von Fehlern und Zurückgeben von aussagekräftigen Feedback

MCP Clients

Auf der anderen Seite befindet sich ein MCP-Client im KI-Assistenten oder in der App (wie Claude oder Cursor). Wenn die KI ein Tool verwenden möchte, kommuniziert sie über diesen Client mit dem entsprechenden Server.

Zum Beispiel:

• Cursor kann über einen Client mit Ihrer lokalen Entwicklungsumgebung interagieren
• Claude kann damit auf Dateien zugreifen oder Tabellen lesen

Der Client übernimmt den gesamten Transfer von Daten: Senden von Anfragen, Empfangen von Ergebnissen und Weiterleiten an die KI.

Das MCP Protokoll

Das MCP-Protokoll sorgt für die Synchronisierung. Es definiert die Kommunikation zwischen Client und Server – wie Nachrichten aussehen, wie Aktionen beschrieben werden und wie Ergebnisse zurückgegeben werden.

Es ist sehr flexibel:

• Kann lokal ausgeführt werden (z. B. zwischen Ihrer KI und den Apps Ihres Computers)
• Kann über das Internet ausgeführt werden (z. B. zwischen Ihrer KI und einem Online-Tool)
• Verwendet strukturierte Formate wie JSON, damit alles sauber und konsistent bleibt

Dank dieses gemeinsamen Protokolls kann ein KI-Agent eine Verbindung mit einem neuen Tool herstellen – sogar mit einem, das er noch nie zuvor gesehen hat – und trotzdem verstehen, wie es zu verwenden ist.

Services: Konkrete Apps und Daten

Der letzte Teil des Puzzles sind die Services – die eigentlichen Tools oder Datenquellen, die die KI nutzen möchte.

Das können sein:

• Lokal: Dateien auf Ihrem Gerät, ein Ordner, eine lokal ausgeführte App
• Remote: Cloud-Datenbanken, SaaS-Tools, Web-APIs

MCP-Server bilden das Gateway zu diesen Diensten und gewährleisten den Zugriff sicher und zuverlässig.

Model Context Protocol (MCP) in der Praxis: Integration und schnelle Entwicklung

Das Potenzial vom MCP wird deutlich, wenn wir uns Anwendungen in der Praxis ansehen:

1. Neue Integrationen ohne Programmierkenntnisse: Stellen Sie sich einen Finanzanalysten vor, der mit einem LLM Investitionsmöglichkeiten bewertet. Mit MCP kann er neue Datenquellen – beispielsweise eine proprietäre Marktdatenbank oder Echtzeit-Rohstoffpreise – dynamisch integrieren, ohne dass Entwicklungsressourcen für die individuelle Integration erforderlich sind. Der Analyst kann den KI-Assistenten einfach auf die MCP-kompatible Datenquelle verweisen und die Erkenntnisse sofort in die Analyse einfließen lassen.
2. Schnelle Integration von Datenquellen in dynamische Szenarien: Stellen Sie sich einen Marktforscher vor, der während einer Kundenpräsentation Daten aus einer spezialisierten Branchendatenbank hinzufügen möchte. Mit MCP kann er seinen KI-Assistenten mit minimalem Einrichtungsaufwand mit dieser neuen Quelle verbinden und Antworten mit neuem Kontext erhalten, ohne seinen Arbeitsablauf zu unterbrechen oder technischen Support zu benötigen.
3. Einfacheres Prototyping: Aus Sicht der Produktentwicklung beschleunigt MCP den Prototyping- und Iterationszyklus. Ein Bankinstitut, das verschiedene Anwendungsfälle für den KI-Einsatz evaluiert, kann mit MCP schnell mehrere Szenarien testen. Beispielsweise können sie die Automatisierung des Kundenservice, die personalisierte Finanzberatung und die Bearbeitung von Kreditanträgen gleichzeitig testen, indem sie Prototypen mit verschiedenen MCP-basierten Tools und Datenquellen erstellen.
4. Schnellere Iterationszyklen: Über das anfängliche Prototyping hinaus ermöglicht MCP eine iterative, feedbackgesteuerte Entwicklung. Beispielsweise könnte ein Team, das ein Self-Service-Portal erstellt, mit einfachen Funktionen zum Abrufen von Dokumenten beginnen und diese dann basierend auf dem Benutzerfeedback schrittweise erweitern. Wenn Kunden zusätzliche Funktionen anfordern, kann das Team problemlos neue Tools – Zugriff auf die Produktdatenbank, Abfrage des Bestellstatus, Erstellung von Support-Tickets – über MCP integrieren, ohne jede Integration von Grund auf neu schreiben zu müssen.

Mit diesen schnelleren und umfassenderen Möglichkeiten zum Prototyping und zur Iteration unterstützt die deepset AI Platform Teams dabei, den Überblick über ihre verschiedenen Projekte und Releases zu behalten. Sie bietet integrierte Best Practices für die KI-Produktentwicklung und zahlreiche vorgefertigte, aber leicht anpassbare Vorlagen, um jedes Projekt schnell zu starten. Produktteams können mehrere Anwendungsfälle validieren, bevor sie Ressourcen für die vollständige Entwicklung bereitstellen. Das reduziert die Markteinführungszeit und die Entwicklungskosten.

Ausblick und zukünftige Entwicklungen

Die einfache und flexible Integration von Datenquellen sowie schnellere Prototyping- und Iterationszyklen mit einer Vielzahl von Tools durch MCP machen es wahrscheinlich, dass MCP in den kommenden Jahren zu einem integralen Bestandteil von KI-Systemen in Unternehmen wird. Es gibt jedoch noch Bereiche, in denen das MCP-Ökosystem noch ausgereifter werden muss:

• Viele MCP-Server-Implementierungen sind derzeit lokal ausgelegt und lassen sich nicht auf Unternehmens-Workloads skalieren.
• Mehr offizielle MCP-Server-Implementierungen direkt von Unternehmen werden die Verbreitung steigern. Der Markt ist aber bereits rasant in Bewegung: AWS und GitHub haben beispielsweise kürzlich ihre ersten offiziellen Implementierungen veröffentlicht.
• MCP führt dynamischere Sicherheits- und Compliance-Anforderungen ein, die bei der Integration mehrerer Tools und Datenquellen in KI-Anwendungen erfüllt werden müssen.

Quellen

https://www.deepset.ai/blog/understanding-the-model-context-protocol-mcp

https://modelcontextprotocol.io/introduction

https://medium.com/@elisowski/mcp-explained-the-new-standard-connecting-ai-to-everything-79c5a1c98288

https://a16z.com/a-deep-dive-into-mcp-and-the-future-of-ai-tooling

The post Blog | Model Context Protocol (MCP): Der nächste Evolutionsschritt für AI-Integrationen appeared first on Mobile USTP MKL.