Herzlich willkommen zurück zu unserer fortlaufenden Beitragsreihe, in der wir den Entwicklungsprozess eines Content Management Systems (CMS) für eine Coaching-App durchleuchten. Nachdem wir bisher die Konzeption, die Anforderungen und die technische Architektur des Systems besprochen haben, fokussieren wir uns in diesem Beitrag auf eine zentrale Komponente des Projekts: die Entwicklung der Kurs-, Kapitel- und Übersichts-Screens.
Diese Elemente sind von wesentlicher Bedeutung, da sie die Schnittstelle darstellen, durch die Benutzer mit dem CMS interagieren. Daher ist es entscheidend, dass sie intuitiv gestaltet und leicht bedienbar sind, um den Nutzern eine nahtlose und angenehme Erfahrung zu bieten.
Wir werden Sie durch den Entwicklungsprozess dieser Schlüsselkomponenten führen und dabei aufzeigen, wie wir unsere User Story und Anforderungen in praktische Design- und Implementierungslösungen umgewandelt haben. Dabei werden wir aufzeigen, wie wir sicherstellen, dass Benutzer problemlos Kurse anlegen, bearbeiten und löschen können, wie Kapitel strukturiert sind und wie wir eine klare und nützliche Übersichtsseite gestaltet haben.
Begleiten Sie uns auf diesem spannenden Abschnitt unserer Reise und erfahren Sie mehr über die Herausforderungen und Lösungen, die bei der Entwicklung dieser wichtigen Features aufgetreten sind.
Kurs-Übersicht und Kurs-, sowie Kapitel-Screen
Zunächst betrachten wir die Entwicklung der Kurs-Übersicht, Kurs und Kapitel Screens, sowie der Drag & Drop Funktionalität. Das Interface zum Anlegen der Kurse ist wird über die /pages/kurse/index.tsx generiert.
Mothoden & Element
In diesem Komponenten gibt es mehrere Methoden, die im oberen Bereich des Komponenten definiert sind.
Während loadData() und saveData() die Daten über den dbHandler erhalten / abspeichern und dafür sorgen, dass die useState Werte an diesen übergeben werden, sind die Funktionen addNewKurs(kapitelId) und removeKurs(kapitelId, kursId) für das Anlegen und Entfernen der Kurse in einem bestimmten Kapitel zuständig. Diese werden an das <Kapitel/> Element übergeben.
Das <Kapitel/> Element beherbergt die <KursElement> Komponenten des jeweiligen Kapitels. Über die onDragEnd Function, welche an den <DragDropContext/> übergeben wird, können die Kurse via Drag&Drop verschoben und neu angeordnet werden. Dafür gibt es im <Kapitel/> Komponenten den <Droppable/> und im <KursElement/> den <Draggable/> Komponenten.
Kurse editieren
Zum Editieren eines Kurses kann man durch Klicken auf das Bearbeitungsicon zur Seite/kurse/kurs navigieren. Dort werden über die URL Parameter die richtige KapitelId und KursId geladen und die gespeicherten Inhalte des Kurses geladen. Diese könne über die Input-Felder editiert werden. Die Inputfelder speichern die Werte in den jeweiligen useState(). Diese temporeren states werden durch die onSave() Function an den dbHandler übergeben.
Eine Besonderheit bei dem Editieren der Kurse ist es, dass es möglich ist, die Vorschaubilder der Kurse hochzuladen. Dies funktioniert über das <ImageUpload/> Element, an welchen die notwendigen Callback-Funktionen übergeben werden.
Kapitel editieren
Zum Editieren eines Kapitels kann man durch Klicken auf das Bearbeitungsicon zur Seite /kurse/kapitel navigieren. Das Laden, Speichern und Editieren der Daten funktioniert gleich, wie bei den oben beschriebenen Kursen.
Kalender- und Beitrag-Screen
Die Beitragsseite kann über /beitraege aufgerufen werden. Dieser wurde in /pages/beitraege.tsx umgesetzt und besteht aus zwei Komponenten: <MonthView/> und <SlideOverContent/>
MonthView
Der <MonthView/> Komponent (/components/calendar/MonthView.tsx) generiert das Kalender-Layout des Screens. Hierbei werden die Tage des Monats kalendertypisch angezeigt und die bereits gespeicherten Beiträge an ihrem Veröffentlichunsdatum angezeigt. Um im Kalender zu navigieren und einen anderen Monat auszuwählen, gibt es eine Reihe an funktionen, wie changeCurrentMonth(prop) und changeCurrentYear(prop).
Um einen neuen Beitrag hinzuzufügen, gibt es die Möglichkeit, auf einen freien Platz im Kalender zu drücken. Dabei wird die Funktion changeContentSlideOver(true) aufgerufen und somit der <SlideOverContent/> Komponent aktiviert. Über die passDataToNewScreen() Funktion bei neuen Beiträgen und über die passDataToEditScreen(beitrag, index) bei zu editierenden Beiträgen, die benötigten Daten an den Komponenten übermittelt.
SlideOverContent
Der <SlideOverContent/>Komponent (/components/calendar/SlideOverContent.tsx) erhält die Daten vom <MonthView/>. Diese werden in die jeweiligen Input-Felder geladen. Das Bearbeiten und Speichern funktioniert gleich, wie bei dem Kurs Bearbeiten Screen. Auch die Funktion zum Bild hochladen wurde wie im Kurs Bearbeiten Screen mithilfe des <ImageUpload/> Komponenten umgesetzt, an welchen die jeweiligen Callback-Funktionen übergeben werden.
Fazit
Zum Abschluss dieses Beitrags hoffen wir, dass Sie einen fundierten Einblick in die Entwicklung der Kurs-, Kapitel- und Übersichts-Screens unserer Coaching-App bekommen haben. Wir haben das Ziel, Ihnen den Entwicklungsprozess transparent und verständlich zu machen, um Ihnen einen realistischen Einblick in die Herausforderungen und Lösungen der Softwareentwicklung zu geben.
Im nächsten Beitrag werden wir noch tiefer in den Entwicklungsprozess eintauchen und weitere wichtige Aspekte unserer App diskutieren. Bleiben Sie also dran, um weitere spannende Einblicke in dieses Projekt zu bekommen. Wie immer freuen wir uns über Ihr Feedback und Ihre Fragen, da dies uns hilft, unseren Content stets zu verbessern und anzupassen. Bis zum nächsten Mal!
