Simple Recipes – Schritt für Schritt zur Uno-App

Mit Simple Recipes entsteht in diesem und im nächsten Artikel unserer Uno-Platform-Serie eine kleine, aber anschauliche Beispielanwendung, die den Entwicklungsprozess mit der Uno Platform exemplarisch nachvollziehbar macht. Nachdem in [1] und den daran anschließenden bisherigen Folgeartikeln bereits Grundlagen und typische UI-Elemente vorgestellt wurden, soll nun gezeigt werden, wie sich aus einer Idee eine funktionsfähige, plattformübergreifende Anwendung entwickelt. Dabei steht weniger die Komplexität der Geschäftslogik im Vordergrund – vielmehr soll sichtbar werden, wie Uno eine konsistente Benutzeroberfläche für unterschiedliche Geräteklassen ermöglicht und wie sich typische Workflows im Projektalltag damit abbilden lassen. 

Die Wahl einer Rezepte-App ist bewusst getroffen: Das Thema ist universell verständlich, benötigt nur ein kleines Datenmodell und erlaubt dennoch, zentrale Aspekte der UI-Gestaltung überzeugend zu demonstrieren. Eine App, in der Gerichte angezeigt, durchblättert und favorisiert werden können, bietet ausreichend Raum für attraktive Layouts, adaptive Navigation und medienreiche Inhalte, ohne mit unnötigen technischen Details zu überfordern. Gleichzeitig ermöglicht sie die Gegenüberstellung unterschiedlicher Plattformdarstellungen, etwa wenn eine Rezeptliste auf dem Smartphone in einer einspaltigen Ansicht erscheint, während sie auf dem Desktop in einem breiteren Rasterlayout dargestellt wird. Der Fokus liegt darauf, die Entwicklung nachzuvollziehen: von der Idee über Prototypen und UI-Skizzen bis hin zur Implementierung in XAML und C#. 

Von der Idee zur UI-Vision: Konzept und Prototyp

Am Anfang jeder Anwendung steht die Frage, welches Problem diese Anwendung lösen soll und wie Nutzerinnen und Nutzer mit ihr interagieren werden. Bei Simple Recipes ist der Use Case bewusst überschaubar gehalten: Die App soll das Durchstöbern von Rezepten ermöglichen, grundlegende Informationen wie Titel, Bild, Zutaten und Zubereitungsschritte anzeigen und eine einfache Favoritenfunktion bereitstellen. Dieser minimale Funktionsumfang erlaubt es, sich ganz auf den UI-Entwurf und die plattformübergreifende Darstellung zu konzentrieren.

Nach der Klärung der Kernanforderungen entsteht schnell eine erste Vorstellung der benötigten Screens. Zentral sind dabei die Rezeptübersicht sowie eine Detailansicht. Die Übersicht präsentiert alle verfügbaren Rezepte in Form einer Liste oder eines Rasters. Dieses Layout eignet sich gut, um den Unterschied zwischen Desktop und mobilen Geräten herauszustellen: Während auf breiten Displays mehrere Spalten sinnvoll sind, wird die mobile Ansicht typischerweise einspaltig und stärker fokussiert ausfallen. Die Detailansicht zeigt anschließend ein großes Titelbild, gefolgt von Zutaten und einem strukturierten Ablauf. Auch hier lassen sich durch klare Gliederung und typografische Akzente visuelle Unterschiede je nach Gerät betonen.

Bevor die erste Zeile Code entsteht, lohnt sich ein Low-Fidelity-Prototyp, beispielsweise als einfache Skizze oder digitaler Wireframe (Bild 1). Ziel ist nicht ästhetische Perfektion, sondern ein Gefühl für die Struktur und Interaktionswege. Eine grobe Skizze der Rezeptliste, einige Varianten für das Layout der Detailansicht oder Überlegungen zu Navigationsmustern helfen früh dabei, UI-Entscheidungen bewusst zu treffen. Gleichzeitig wird sichtbar, welche Elemente sich gut gemeinsam für alle Plattformen nutzen lassen und wo adaptive Anpassungen erforderlich sind. Das lässt sich etwa an der Navigation erkennen: Während der Desktop von einer Seitenleiste mit NavigationView profitiert, ist auf mobilen Geräten eine TabBar oft intuitiver.

Aus diesen Skizzen ergibt sich Schritt für Schritt die UI-Vision der App. Sie definiert, wie die Anwendung wirken soll, leicht, übersichtlich und klar strukturiert. Auch funktionale Details werden festgelegt, etwa die Art der Favorisierung oder die Darstellung von Bildern. Diese konzeptionelle Vorarbeit bildet die Grundlage für die spätere Umsetzung in XAML. Da Uno ein einheitliches UI-Modell bereitstellt, können viele der im Prototyp festgelegten Ideen direkt in plattformübergreifenden Komponenten abgebildet werden. 

Projekt-Setup mit der Uno Platform

Bevor das eigentliche UI entsteht, wird das Fundament des Projekts gelegt. Für Simple Recipes bietet sich das Standard-Template Uno Platform App (Bild 2) an, weil es direkt eine gemeinsame Codebasis sowie Projekte für Desktop, Web und Mobile anlegt.

Nach dem Anlegen des Projekts steht damit der Rahmen bereit, in dem wir unsere Rezepte-App schrittweise umsetzen. Der Blick in die Projektmappe zeigt die zentrale Struktur: Im Hauptordner liegen ViewModels, XAML-Seiten, Styles und Ressourcen, also alles, was plattformübergreifend genutzt wird. Der Umfang der plattformspezifischen Dateien ist möglichst gering zu halten, um die Vorteile von Uno als Cross-Plattform-Lösung gut nutzen zu können. 

Im nächsten Schritt werden die Abhängigkeiten konfiguriert. Dazu gehört insbesondere die Einbindung des Uno Toolkits, das zusätzliche Controls wie Cards, TabBar oder NavigationView-Varianten bereitstellt, die wir für die Rezepteübersicht und die Navigation nutzen. Außerdem werden erste Assets abgelegt: Platzhalterbilder für Rezepte, ein App-Icon und eventuell Farbressourcen für das Design. Diese Dateien werden so eingebunden, dass sie in allen Zielprojekten verfügbar sind.

Bevor mit der eigentlichen UI-Gestaltung begonnen wird, lohnt sich ein kurzer Probelauf: Zunächst wird die App auf Windows gestartet, um zu prüfen, ob das Grundgerüst funktioniert. Danach folgt ein erster Build für WebAssembly, der im Browser geöffnet wird, und ein Start auf dem Android-Emulator als Vertreter der mobilen Plattformen (Bild 3). 

Diese frühen Starttests stellen sicher, dass das Setup stimmt und alle Zielplattformen korrekt konfiguriert sind. Damit entsteht eine solide Ausgangsbasis, auf der die weitere Implementierung der Rezepte-App aufbaut.

Datenmodell

Bevor die Oberfläche mit Leben gefüllt wird, braucht die App ein klar definiertes Datenmodell. Bei Simple Recipes ist das bewusst schlank gehalten: Ein Rezept besteht aus einem Titel, einem kurzen Beschreibungstext, einem Bild, einer Zutatenliste und einer Schritt-für-Schritt-Anleitung. Zusätzlich ist ein Flag vorgesehen, mit dem ein Rezept als Favorit markiert werden kann. In C# ergibt sich daraus ein einfaches Modell mit Eigenschaften wie Id, Title, Description, ImagePath, Ingredients (als Liste von Zeichenketten) und Steps (ebenfalls als Liste von Zeichenketten) sowie einem booleschen IsFavorite. 

public class Recipe
 {
     public string Id { get; set; } = Guid.NewGuid().ToString();
     public string Title { get; set; } = string.Empty;
     public string Description { get; set; } = string.Empty;
     public string ImagePath { get; set; } = string.Empty;
     public List<string> Ingredients { get; set; } = new();
     public List<string> Steps { get; set; } = new();
     public bool IsFavorite { get; set; }
 }

Die Daten werden zunächst lokal bereitgestellt. Das hat mehrere Vorteile: Die App bleibt offline lauffähig, der Fokus liegt auf der Uno-Oberfläche und wir können uns auf die plattformübergreifende Darstellung konzentrieren. Die Rezepte werden dafür in einer JSON-Datei abgelegt. Jede JSON-Struktur entspricht einem Recipe-Objekt; so lassen sich Beispielgerichte wie „Spaghetti Bolognese“, „Gemüse-Curry“ oder „Pancakes“ sehr leicht hinterlegen.Um diese Daten in der App nutzbar zu machen, kapseln wir den Zugriff in einem DataProvider oder RecipeService. Diese Klasse ist dafür verantwortlich, die JSON-Datei zu laden, zu deserialisieren und als Liste von Recipe-Objekten bereitzustellen. Aus Sicht der ViewModels spielt es keine Rolle, ob die Daten aus einer Datei, aus dem Speicher oder später vielleicht aus einem Web-API kommen. Sie erhalten immer eine Liste von Rezepten und können damit arbeiten. Diese Trennung erleichtert spätere Erweiterungen und unterstreicht das MVVM-Prinzip, das wir in der App verwenden. Für die ersten Schritte genügt es, einige neutrale Platzhalterbilder zu verwenden; sie können später problemlos gegen echte Food-Fotos ausgetauscht werden. Die Bestandteile der App nach dem MVVM-Muster sind in Tabelle 1 dargestellt.

Tabelle 1: Bestandteile der App nach dem MVVM-Muster

Ausblick

Und so geht es im letzten Teil der Serie weiter: Wir erstellen das User Interface der App mithilfe der Uno-Plattform und passen dieses – bei Bedarf – an die unterschiedlichen Zielsysteme an (Visual State Manager/Adaptive Trigger). Danach kümmern wir uns um die Implementierung der Navigation und der restlichen Funktionen für die erste Version der App. Final erfolgen der Build sowie einige Tests und Anpassungen in Bezug auf ein mögliches Deployment der App.

Hinweis: Der vollständige Quellcode zu den Beispielen steht auf der Website des Autors zum Download bereit. 

[1] Veikko Krypczyk, UI-Gestaltung mit Uno, dotnetpro 12/2025, Seite 114 ff.