...loading...
Flowy
Flowgraph Tool
Sketch
Express
Typescript
React
Javascript
MUI
Flowy ist ein freiese Projekt. Die Idee ist die Verknüpfung der Entwicklung einer App mit der Dokumentation der einzelnen Schritte. Die einzelnen Schritte werden hier in einem Flowchart dargestellt wodurch Fachbereichsübergreifend gearbeitet werden kann. Designer, Productowner, Developer, Textmangement und alle weiteren in einem Projekt vorkommenden Positionen können hier einfach zusammen arbeiten. Der Designer des Projekts kann sich das Flowchart mittels Sketch Plugin synchronisieren und jeden Screen ausarbeiten.
Gestaltung
Der Hauptgedanke bei der Gestaltung lag auf einem einfachen und schnell umsetzbaren übersichtlichen frontend. Daher gibt es eine Projekt-Übersichtsseite mit Suchfunktion. Von hier kann ein neues Projekt erstellt oder ein vorhandenes Projekt geladen und weiter aufgebaut werden. Außerdem ist es möglich auch einen mermaid-graph zu nutzen um ein Flowy-Projekt zu kick-starten.
Umsetzung
Das Frontend ist eine React-Create-App. Mit react-bootstrap und styled-components für eine schnelle und problemfreie Implementierung.
Flowy Frontend
Als React-Create-App erstellt und mit Material-Ui aufgebaut. Angeschlossen an das Express Backend.
...loading...
Flowy Backend
Ein Simples Backend. Es stellt die Strucktur der Projecte und speichert die entsprecheden Uploads als Bilder neben der Project Json ab.
Sketch Plugin
Geschrieben in Javascript mit der Sketch Cli kann das Plugin sowohl download als auch das anschließende update des Projects. Wenn die Adresse zu einem laufenden Flowy Backendserver eingetragen wird, kann aus allen Projecten eins geöffnet werden. Der Flowchart und die Entsprechenden Skecht-Screens werden erstellt und verlinkt. Wenn die Screens ausgearbeitet sind kann wieder per Sketch Plugin das Project auf dem Server geupdated werden. Alle Nutzer des Flowy Frontends können dann die updates life sehen und weiter daran arbeiten.