SAPUI5 – die richtige Ordnerstruktur
Viele Wege führen ans Ziel eine SAPUI5-App zu entwickeln - daran ist grundsätzlich auch nichts auszusetzen. Die Erweiterung, Wartung und das Debugging der Apps wird jedoch umständlicher, wenn die Apps nicht den gleichen SAPUI5 Best Practices folgen. In diesem Blogbeitrag widmen wir uns daher der Ordnerstruktur einer SAPUI5-App.
Die Ordnerstruktur einer SAPUI5-App
Die nachfolgende Abbildung zeigt die empfohlene Ordnerstruktur einer SAPUI5-App.
Orderstruktur SAPUI5-App
Laut der SAP sollte diese Struktur für jede App genutzt werden, die eine Component, einen OData-Service und weniger als 20 Views nutzt. Treffen diese Punkte nicht mehr zu, dann können weitere Unterordner verwendet werden.
Hier noch jeweils eine kurze Erläuterung zu den wichtigsten Ordnern in diesem Konstrukt:
root Ordner
Enthält Dateien, die nicht Teil des Codes sind. Dazu gehören Build-Konfigurationen (ui5.yaml), sowie ggf. Dokumentationsdateien (bspw. README.md).
webapp Ordner
Beinhaltet für die App relevanten Code-Files. Alle Dateien, die lediglich für das Testen der App relevant sind, sind im test Ordner abzulegen.
Zudem strukturiert der webapp Ordner die Anwendung gemäß dem MVC-Pattern (siehe Punkt “weitere Ordner”).
test Ordner
Im test Ordner werden alle Dateien abgelegt, die für automatische Tests notwendig sind, oder um die Anwendung innerhalb der Sandbox auszuführen, um manuelle Tests machen zu können.
view Ordner
Beinhaltet alle Views und Fragmente der App. Außer JavaScript Views darf hier keine JavaScript-Logik enthalten sein. Die Unterteilung hierbei ist jedem selbst überlassen. Eine Möglichkeit ist, für Fragments einen eigenen Ordner anzulegen. Wenn es sich um eine größere App handelt, dann kann auch für jeden Bereich der App ein eigener Unterordner angelegt werden (detail, master, etc.).
controller Ordner
Hier werden alle controller Dateien abgelegt, welche von den Views genutzt werden. Auch übergreifend benutzte Dateien (BaseController, externe Libraries, etc.) werden hier abgelegt.
model Ordner
Beinhaltet alle Dateien der Model-Generierung und Model-Logik (z.B. Grouping, Formatting und Filtering).
i18n Ordner (Localization)
Hier werden die Internationalisierungsdateien abgelegt.
localService Ordner
Genutzt, um OData-Services für Tests zu emulieren oder für Preview-Modus der App. Beinhaltet außerdem die metadata.xml Datei, welche den angebundenen OData-Service der Anwendung beschreibt.
Für Ihre Entwicklungen innerhalb der SAP Web IDE wurde diese Best Practice bereits vorgedacht. Über den “Home”-Bereich kann mithilfe eines Templates genau diese Struktur für das angehende Entwicklungsprojekt angelegt werden.
SAPUI5 – Projekt aus einem Template heraus
Hier können für verschiedene Anwendungsarten die passenden Templates herausgesucht werden. Damit ist der erste wichtige Grundbaustein für ein erfolgreiches SAPUI5-Projekt gelegt.
Dieser Beitrag ist der erste einer ganzen Reihe, die sich allein mit den Best Practices in der SAPUI5-Entwicklung befasst. Die Beiträge werden in den nächsten Wochen in regelmäßigen Abständen veröffentlicht.
Kiosk Systeme mit SAP Fiori und DataFox
Kiosk Systeme mit SAP Fiori sind die Lösung für Orte an denen Mitarbeiter keinen Zugang zu eigenen Rechnern besitzen. Wir bieten die Komplettlösung.
