Cookiecaster 3.0 - Redesign einer Client-Server Anwendung

CookieCaster 3.0 ist eine benutzerfreundliche Webanwendung zur Gestaltung individueller Ausstechformen, die direkt für den 3D-Druck exportiert werden können. Das im Rahmen eines Hochschulprojekts entwickelte Open-Source-Projekt steht auf GitHub zur Verfügung und lädt Interessierte zur Mitwirkung und Weiterentwicklung ein.

Modernisierte Zeichnen Fläche für das Designen von Ausstechformen

Ausgangslage

CookieCaster 2.0 wurde im Rahmen einer Bachelorarbeit an der FHNW entwickelt und wird seither bei Schul- und Familienevents im FHNW Maker Studio eingesetzt, um Ausstechformen digital zu gestalten und für den 3D-Druck zu exportieren. Die bestehende Anwendung (CookieCaster 2.0) basiert auf veralteten Technologien, ist fehleranfällig und nur eingeschränkt benutzerfreundlich, insbesondere für Kinder und ältere Personen. Zudem ist der Betrieb auf eine nicht autonome Server-Infrastruktur angewiesen, die nur von wenigen Personen betreut werden kann und deren Quellcode nicht öffentlich zugänglich ist.

Zielsetzung

Ziel des Projekts war die Neuentwicklung des CookieCaster als moderne, webbasierte Open Source Anwendung zur Gestaltung und zum Austausch von Ausstechformen für den 3D-Druck. Die Anwendung ermöglicht den einfachen Import und Export von Formen, sowohl als STL-Dateien für den 3D-Druck als auch in einem internen Format zur Weiterverarbeitung, Weitergabe und Wiederverwendung innerhalb der App. Durch den Einsatz aktueller Webtechnologien, das Überarbeiten des Source Codes, ein vollständig frontendbasiertes Hosting ohne Backend sowie ein überarbeitetes, responsives Benutzerinterface wird die Wartbarkeit verbessert, der Betrieb vereinfacht und die Anwendung für Kinder wie auch Erwachsene zugänglich gestaltet. Zudem wurde das Projekt als Open-Source-Software umgesetzt und visuell an das FHNW-Branding angepasst, um Transparenz, Nachhaltigkeit und eine breitere Mitwirkung zu ermöglichen.

Ergebnisse

Im Rahmen dieses Projekts wurde der CookieCaster vollständig modernisiert und als nachhaltige, webbasierte Open-Source-Anwendung neu umgesetzt. Die bestehende React-Anwendung wurde auf Version 19 aktualisiert, von klassenbasierten auf funktionale Komponenten umgestellt und strukturell neu organisiert (Projektstruktur, Modulare Kompunenten, Mehr React Features...), wodurch Wartbarkeit, Übersichtlichkeit und Erweiterbarkeit deutlich verbessert wurden. Die Anzahl an überflüssigen und nicht aktuellen Bibliotheken wurde reduziert und selber geschrieben, um eine sicherere und kompaktere Applikation zu ermöglichen.

• Ablösung der bisherigen Backend-Abhängigkeit durch eine reine Frontend-Architektur
• Bereitstellung der Webapplikation neu über GitHub Pages: CookieCaster 3.0
• Persistenz von Formen erfolgt neu über den Local Storage des Browser
• Eigens eingeführtes Dateiformat (.cc3), ermöglicht Austausch und die Wiederverwendung von Zeichnungen
• Formen weiterhin als STL-Dateien für den 3D-Druck exportiert
• Galerie-Vorlagen direkt aus dem GitHub-Repository
• Formen zeichnen, spiegeln, rotieren, löschen, Bild als Hintergrund, validieren, exportieren, importieren, als STL exportieren
• Open Source mitsamt einer detaillierten Open Source Dokumentation
• MIT Lizenziert
• Kompatibel für Tablets und IPads
• Automatisch generierte Changelogs der Webapplikation bei neuen Release

Durch den verstärkten Einsatz von Bootstrap wurde die Responsivität der Anwendung verbessert und das User Interface modernisiert, ohne die kindgerechte Bedienbarkeit zu verlieren. Zusätzlich ermöglichte der Wechsel auf Bootstrap den Source Code deutlich kompakter zu halten und den Anteil von selber geschriebenen CSS zu reduzieren. Durch Bootstrap kann neu der CookieCaster 3.0 auch vom IPad oder Tablet bedient werden

Mit GitHub und GitHub Pages als zentrale Quelle für den Code und die Webseite konnte das Deployment der Applikation vollkommen automatisiert werden, was zuvor Abarbeiten einer Anleitung war und nur von bestimmten Personen erledigt werden konnte, ist neu nur noch ein Knopfdruck. Mit GitHub können Checks für Erweiterungen erzwungen werden, bevor sie in den produktiven Code gelangen. Damit und der erhöhten Abdeckung an funktionalen Tests wird sichergestellt, dass nach Änderungen die Applikation weiterhin 100% funktioniert. Der infrastrukturelle Aufwand für die FHNW wurde erheblich reduziert.

Wer gerne zum CookieCaster Beitragen möchte, kann dies gerne über GitHub tun

Technische Schlüsselbegriffe

• ReactJavaScript-Bibliothek zur Entwicklung interaktiver Benutzeroberflächen für Webanwendungen.
• BootstrapCSS-Framework zur schnellen Erstellung responsiver und konsistenter Benutzeroberflächen.
• 3D-DruckZweck der Applikation ist es Ausstechformen zu designen, welche dann in einem 3D Drucker ausgedruckt werden können
• WebapplikationAnwendung, die direkt im Webbrowser ausgeführt wird.
• RefactorStrukturierte Überarbeitung von Code zur Verbesserung von Wartbarkeit und Übersichtlichkeit.
• GitHub PagesHosting-Dienst zur Bereitstellung des CookieCaster aus dem GitHub Projekt.
• Frontend-OnlyArchitektur ohne Backend, bei der die gesamte Logik im Browser läuft.
• Open SourceDer CookieCaster ist öffentlich zugänglicher Quellcode, der gemeinschaftlich weiterentwickelt werden kann.
• Automated DeploymentProzess der die ganze Bereitstellung der Webseite automatisiert ohne menschliches eingreifen

Team