Software

Hier findet sich ein Teil meiner aktuellen Softwareprojekte.

Weiter unten finden sich die Projekte, die ich im Rahmen meiner Ausbildung zum Full-Stack-Web-Entwickler entwickelt habe.

Derzeit arbeite ich an einem Qt/QML-Projekt mit umfangreicher GUI f├╝r BeMoveD/Charit├ę Berlin.
hier.

Tech Stack, den ich bisher verwendet habe:
Frontend: JavaScript, React.js, Vue.js, QML, HTML, CSS, jQuery
Backend: Node.js/Express, Python, PostgreSQL, SQLite, AWS
Tests: Jest
IDEs: PyCharm, VSC, QtCreator
Versionsverwaltung: Git, GitHub, GitLab

GRAIL_upload

App zum Kopieren von Dateien und Erstellen von Graphen

Technologien: Python 3.8, Matplotlib, Pandas, NumPy, PySimpleGUI, poetry, pyinstaller
Versionskontrolle: Git, GitLab
IDE: PyCharm

Funktionalit├Ąt: Grafische Benutzer:innenoberfl├Ąche, Suche nach Patient:innen, Kopieren aller relevanten lokalen Dateien auf Server mit ver├Ąnderter Ordnerstruktur und Erstellen von Graphen mit einem einfachen Klick, R├╝ckmeldung des Bearbeitungsstands, umfangreiche Fehleranzeige, Erstellen eines debug logfiles

Der Code auf GitLab

Gif anzeigen

Mehr Informationen
Ziele
  • Genau herausfinden, was die Mitarbeitenden der Charit├ę ben├Âtigen und eine kund:innenorientierte Software entwickeln (aus diesen Gespr├Ąchen ist in mehreren Iterationen das Programm entstanden)
  • Das Programm soll zuverl├Ąssig, schnell und vollst├Ąndig kopieren
  • Das Programm soll einfach bedienbar sein
  • Das Programm soll sch├Âne .svg-Graphen erstellen
Aufgabenbeschreibung
  • Software schreiben, die lokale Daten von verschiedenen Rechner auf einen Server kopiert, dabei auf diesem eine bestimmte Ordnerstruktur anlegt und den Datumsordner von 8- zu 6-stellig ├Ąndert
  • Erstellen von .svg-Graphen aus .csv-Datei(en), sofern diese vorliegt/-en; dabei zus├Ątzliche Verwendung von xml-Layout-Dateien
  • Nutzer:innenfreundliche grafische Oberfl├Ąche
  • Erstellen einer JSON-Datei mit relevanten Werten zur sp├Ąteren Verwendung
  • Das Programm muss in einer Windows-Umgebung laufen, Erstellen einer .exe-Datei
Das Programm

GRAIL_upload kopiert die lokalen Daten vom GRAIL- und Vicon-Rechner auf den BeMoveD-Server der Charit├ę Berlin und erstellt .svg-Graphen, wenn es die richtige .csv-Datei findet.

Wenn das Programm l├Ąuft, ├Âffnet sich eine (deutschsprachige) Benutzer:innenoberfl├Ąche (GUI) und der:die Benutzer:in wird aufgefordert, eine Patient:innen-ID einzugeben. Die App pr├╝ft, ob der:die Patient:in existiert (z.B. P100). Wenn er:sie gefunden wird, zeigt die GUI den Quell- und Zielpfad an und ob .csv-Dateien gefunden wurden.

Wenn der Knopf gedr├╝ckt wird und eine .csv-Datei vorhanden ist

  • kopiert die Anwendung die .layout-Dateien in jeden Datumsordner, s├Ąubert sie (l├Âscht alle HTML-Tags), ersetzt die Pfeile durch besser aussehende und benennt sie um ('walk.layout', 'run.layout')
  • erstellt eine .json-Datei zur sp├Ąteren Verwendung mit den keys 'title', 'graphname' und 'channelname' aus der .csv-Datei
  • erstellt einen Ordner 'cascade-graphs' und einen Unterordner f├╝r jeden Zeitpunkt (z.B. '1013'), der im Dateinamen der .csv-Datei steht
  • erstellt aus jeder .csv-Datei (in der Regel) 89 .svg-Graphen und speichert sie in das entsprechende Zeit-Unterordner.
  • schreibt eine Readme-Datei in jeden Zeit-Unterordner
  • legt 3 Ordner auf dem Server an: 'Dokumente', 'GRAIL', 'Vicon'
  • kopiert alles aus den lokalen Patient:innendaten (z.B. P100/20211016) in den GRAIL-Unterordner auf dem Server ('P100/211016/GRAIL'). Dazu geh├Âren die Patient:innendaten, die .layout-Dateien, die .json-Datei und die Graphen, falls es eine .csv-Datei gibt.
  • kopiert jede Datei aus dem lokalen Vicon-Pfad 'D:/BeMovedDB/gait analysis bemoved/P100/New Session' in den entsprechenden Vicon-Ordner auf dem Server ('P100/211016/Vicon'). 'Entsprechend' bedeutet hier, dass das Erstellungsdatum der Datei mit dem Datum ├╝bereinstimmen muss (z. B. wird eine am 16. Oktober 2021 erstellte Datei in 'P100/211016/Vicon' abgelegt). Da das Erstellungsdatum unter Windows und Linux/Mac unterschiedlich ist, wird zun├Ąchst gepr├╝ft, welches Betriebssystem verwendet wird.
  • zeigt dem:r Benutzer:in an, dass der Kopiervorgang noch l├Ąuft. Wenn der Vorgang abgeschlossen ist, wird dem:r Benutzer:in angezeigt, dass er beendet ist.

Wenn keine .csv-Datei vorhanden ist, werden die Schritte a-e ├╝bersprungen.

Daten und Zeiten werden mit regular expressions gefunden.

Fehlerbehandlung

Die GUI von GRAIL_upload zeigt dem Benutzer eine Reihe von m├Âglichen Fehlern an:

  • Wenn der:die Benutzer:in etwas anderes als Ziffern eingibt
  • Wenn der:die Benutzer:in weniger als 3 oder mehr als 4 Ziffern eingibt
  • Wenn der:die Patient:in nicht existiert
  • Wenn keine .csv-Datei vorhanden ist
  • Wenn die .csv-Datei falsch ist (das erste Feld enth├Ąlt nicht den String 'left')
  • Wenn es keinen lokalen Datumsordner gibt
  • Wenn der lokale Datumsordner nicht genau 8 Ziffern hat
  • Wenn die .layout-Datei unter dem angegebenen Pfad nicht existiert
  • Wenn das Kopieren fehlschl├Ągt

Zus├Ątzlich wird eine Logdatei f├╝r die Fehlersuche erstellt.

Meilensteine
  • Gr├Â├čter Erfolg: Feedback der Charit├ę-Mitarbeitenden, dass ihnen das Programm pro Patient:in 2-5 Minuten Zeit erspart und sie es t├Ąglich benutzen
  • Differenzierte Fehlerbehandlung mit genauer R├╝ckmeldung an Benutzer:in
  • Lust, mehr mit Python zu programmieren ­čśŐ

Scraping WGcompany

Automatisierte E-Mail bei neuen WG-Angeboten

Technologien: Python 3.10, selenium, chromedriver-autoinstaller, chromedriver-py, dateparser, poetry, python-dotenv
Versionskontrolle: Git, GitHub
IDE: PyCharm

Funktionalit├Ąt: Die App scraped die neuesten Eintr├Ąge auf wgcompany.de und sendet sie automatisch an eine angegebene E-Mail-Adresse.

Der Code auf GitHub

Gif anzeigen

Mehr Informationen

Abfrage von lokalen Umgebungsvariablen oder GitHub-secrets (remote) f├╝r GitHub-Actions, Headless Selenium Chrome Webdriver, Passung von Chrome-Browser und Chromedriver-Version, ├ťberpr├╝fung ob die zu scrapende Seite korrekt ist, relevante Daten mit XPath- und RegEx-Mustern erlangen, ├ändern von Datumsmustern, Versenden von E-Mails ├╝ber SSL-Verbindung mit allen relevanten Informationen in utf-8 encoding, Funktionen: Typing von Parametern und R├╝ckgabewerten und umfangreiche erkl├Ąrende Docstrings.

Soziales Netzwerk

Screenshot von Suchergebnissen des Sozialen Netzwerks Kite.Inc

Facebook-inspirierte Single-Page-Application (SPA)

Technologien: React & Redux, Node, Express, PostgreSQL, Socket.io, Amazon S3 and SES, CSS, HTML

Funktionalit├Ąt: Registrierung, Login, pers├Ânliches Profil mit Bio- und Bild-Upload, Senden, Empfangen und Annehmen von Freundschaftsanfragen, Freundschaft beenden, Gespr├Ąche in einem Chat-Raum f├╝hren, Anzeige der letzten 3 registrierten Benutzer:innen, Suche nach Benutzer:innen mit Vor- und Nachnamen, Anzeigen von Freund:innen von Freund:innen, Abmelden

Der Code auf GitHub

Gif anzeigen

Mehr Informationen

Benutzer:innen k├Ânnen einem Sozialen Netzwerk beitreten, in diesem Fall einem f├╝r inklusive Kitesurfing-Communities.

highPriority

Petition

Screenshot der Registrierungs-Seite der Online-Petition gegen algorithmische Diskriminierung

Online-Petition gegen algorithmische Diskriminierung

Technologien: Express handlebars, Node, PostgreSQL, jQuery, CSS, HTML

Funktionalit├Ąt: Unterst├╝tzer:innen k├Ânnen sich registrieren, einloggen, ihre Profilinformationen aktualisieren, unterschreiben, die Unterschrift wieder zur├╝ckziehen, Mitunterzeichnende nach Ort sortiert anzeigen lassen, sich abmelden

Der Code auf GitHub

Gif anzeigen

Mehr Informationen

Diese Petition pl├Ądiert f├╝r die Unterzeichnung der Algo.Rules und gegen algorithmische Diskriminierung. Je nachdem, ob sich Benutzer:innen registrieren und unterschreiben, werden ihnen unterschiedliche Seiten angezeigt. Wenn sie unterzeichnen, werden andere Unterzeichnende, deren Homepages, ihr Alter und ihre Stadt angezeigt.

Ich habe viel ├╝ber Datenfluss gelernt, die Arbeit mit Session-Cookies, Get- und Post-Routen und wie man sie mit Supertest testet. Ich habe auch mit promises, Passwort-Hashing und inserts, updates, upserts und deletes in der Datenbank gearbeitet. Besonders herausfordernd fand ich die Unterschrift mit canvas und das konditionale Bearbeiten des Benutzer:innen-Profils.

Die Seite verf├╝gt ├╝ber eine differenzierte Fehlerbehandlung und ist gegen SQL-Injektion, Clickjacking, XSS- und CSRF-Angriffe gesch├╝tzt.

Pfeil nach oben zum Anfang der Seite

Imageboard

Screenshot der Startseite des Imageboards f├╝r Graffiti und Street Art

Instagram-inspirierte Single-Page-Application (SPA)

Technologien: Vue, Node, Express, PostgreSQL, Amazon S3, Jest, CSS, HTML

Funktionalit├Ąt: Hochladen von Bildern mit Titel, Beschreibung und Benutzernamen, jedes Bild kann angeklickt und gro├č angezeigt werden mit mehr Informationen und der M├Âglichkeit, das Bild zu kommentieren und auch zu l├Âschen, weitere Bilder k├Ânnen geladen werden

Der Code auf GitHub

Gif anzeigen

Mehr Informationen

Jede:r kann Bilder ihrer Wahl hochladen; das Thema dieses Imageboards ist Graffiti und Street Art.

Ich habe viel ├╝ber Vue.js und die Arbeit mit state, un-/mounting, dynamischem Routing, Click-Handlern, Event-Emittern und W├Ąchtern (watchers) gelernt. Das Imageboard ist gegen SQL-Injektion, Clickjacking, XSS- und CSRF-Angriffe gesch├╝tzt.

Kaleidoskop

Screenshot der Startseite des Kaleidoskops mit allen Projekten

Meine kleineren und mittelgro├čen Projekte

Technologien: Express handlebars, CSS, HTML

Funktionalit├Ąt: Alle Projekte werden mit ├ťberschrift und Bild angezeigt und f├╝r jedes Projekt gibt es eine eigene Seite mit ausf├╝hrlicher Beschreibung

Der Code auf GitHub

Skalierte Bilder

Screenshot Skalierte Bilder

Funktionalit├Ąt: Schieberegler f├╝r Skalierung der Bildgr├Â├če, Anzeige des einen oder des anderen Bildes

Mehr Informationen

2 ├╝bereinander gelegte Bilder, die normalerweise f├╝r Vorher-Nachher-Situationen verwendet werden. Ich benutze es zum Gedenken an meine Urgro├čmutter Emilie Rau. Wird der wei├če Schieberegler nach links geschoben, ist mehr vom Bild auf der rechten Seite zu sehen und umgekehrt. Auf der Programmiere-Ebene habe ich Mousedown, Mousemove und Mouseup-Ereignisse verwendet und offset().left wurde zu einem guten Freund. Schwierig fand ich, das Gleiten des Schiebereglers innerhalb der Grenzen des Bildes zu beenden.

Spotify-Suche

Screenshot Spotify-Suche, Suchergebnisse f├╝r 'monae'

Funktionalit├Ąt: Spotify-Datenbank ├╝ber API durchsuchen, Album/K├╝nstler:in mit verlinktem Cover und Namen anzeigen, mehr Daten durch Button oder Endlos-Scroll laden

Mehr Informationen

Trotz des Nicht-Vorhandenseins eines eigenen Spotify-Kontos, habe ich trotzdem eine Benutzeroberfl├Ąche programmiert, um ├╝ber eine API die Spotify-Datenbank durchsuchen zu k├Ânnen. Wird nach einer:m K├╝nstler:in oder Album gesucht, werden die ersten 20 Suchbegriffe mit einem Bild des Albums und dem Namen des:r K├╝nstler:in angezeigt. Unten angekommen, kann f├╝r die n├Ąchsten 20 Suchbegriffe auf 'More' geklickt werden. Endlos-Scroll ist auch m├Âglich. Ich habe jQuery, Clickhandler, mehrere Ajax-'GET'-Requests, CSS-Flexbox und Pseudo-Selektoren verwendet. Ich fand es schwierig, die Reihenfolge herauszufinden, wann welche Funktion aufgerufen werden soll und dass sie sich nicht gegenseitig st├Âren. Schlussendlich habe ich es geschafft, und wer auf den Link unten klickt, hat einen unbegrenzten Vorrat an Suchergebnissen - hoffentlich hast DU ein Spotify-Konto...

Screenshot des K├Ątzchen-Karussells, ein K├Ątzchen kommt von rechts rein, w├Ąhrend das andere nach links gleitet

Funktionalit├Ąt: Die K├Ątzchen kommen von rechts und wandern der Reihe nach nach links, ein bestimmtes Bild kann gezielt angezeigt werden

Mehr Informationen

4 Bilder von K├Ątzchen bewegen sich in einer Endlosschleife von rechts nach links, ein Bild pro Sekunde. Es kann auch ein bestimmtes Bild ausgew├Ąhlt werden, indem auf den entsprechenden wei├čen Punkt geklickt wird. Bei der Programmierung waren timing und Raum wichtig, einschlie├člich des Hinzuf├╝gens und Entfernens von QuerySelectors, eventListeners und clickHandlers. Es war das erste Mal, dass ich mit CSS-transitions gearbeitet habe. Niedlich, nicht wahr? Klick auf den Link, um das K├Ątzchen-Karussell zu sehen...

Ticker

Screenshot des Tickers

Funktionalit├Ąt: Die neuesten Nachrichten werden angezeigt und k├Ânnen bei Interesse angeklickt werden

Mehr Informationen

Ticker sind etwas veraltet, aber eine gute Programmier├╝bung. Meiner l├Ąuft von rechts nach links, und wird mit der Maus ├╝ber einen der Titel gefahren, h├Ârt der Ticker auf zu laufen, der Hyperlink wird blau und unterstrichen, und wenn er angeklickt wird, ├Âffnet sich die gew├╝nschte Information in einem neuen Tab. Die Programmierung ist in Vanilla-JavaScript u.a. mit Event Listener, Mouseovers, Mouseoutss, OffsetWidth und AnimationFrames. Wer tiefer in meinen Ticker eintauchen will, findet alle meine Texte, die ins Englische ├╝bersetzt wurden... In einer sp├Ąteren ├ťbung haben wir ein Backend hinzugef├╝gt und Live-Tweets von bestehenden Twitter-Accounts ├╝ber die twitter-API mittels Token abgerufen.

Lokaler Speicher

Screenshot Lokaler Speicher-Projekt

Funktionalit├Ąt: Nachricht schreiben und im lokalen Speicher speichern, Nachricht anzeigen und/oder l├Âschen

Mehr Informationen

Die Arbeit mit dem lokalen Speicher hat Spa├č gemacht. Wenn man etwas in das Textfeld schreibt und auf die Schaltfl├Ąche 'Keep it a secret!' klickt, verschwindet der Text und die Schaltfl├Ąche kann nicht mehr angeklickt werden (um das, was im lokalen Speicher gespeichert wurde, zu behalten). Die Schaltfl├Ąche links daneben ('Tell me the secret!') zeigt an, was gespeichert wurde, auch nachdem der Browser geschlossen wurde. Die letzte Schaltfl├Ąche ('I don't trust you anymore - forget my secret!') l├Âscht den lokalen Speicher und die Konsole. Ich habe mit jQuery unter Verwendung von Click-Handlern und Try-Catch-Fehlerbehandlung gearbeitet.

JSON-Validator

Screenshot JSON-Validator, der in gr├╝n valides JSON anzeigt

Funktionalit├Ąt: Test, ob Daten JSON sind oder nicht

Mehr Informationen

Dieser einfache Validierungstest pr├╝ft, ob JSON vorliegt oder nicht. Einfach per Copy-Paste in das Textfeld kopieren und auf die Schaltfl├Ąche 'Validate JSON' anklicken. Wenn JSON vorliegt, f├Ąrbt sich der Rand des Textfelds gr├╝n und unten im Textfeld blinkt der Text 'Valid JSON!'. Handelt es sich nicht um JSON, f├Ąrbt sich der Rand des Textfelds rot und es erfolgt ein entsprechender Hinweis. F├╝r den n├Ąchste ├ťberpr├╝fung einfach 'Clear textarea' klicken... Programmiert mit jQuery mit der parse()-Methode und Flexbox und Keyframes in CSS.

4 Gewinnt

Screenshot 4 Gewinnt, beide Farben im Spiel

Funktionalit├Ąt: 2 Spieler:innen k├Ânnen gegeneinander spielen, horizontale, vertikale oder diagonale Siege, Animation, wenn ein:e Spieler:in gewinnt, die Farbe des Gewinners wird angezeigt, erneut spielen

Mehr Informationen

Schon als Kind habe ich gerne 4 gewinnt gespielt - und tue es bis heute! Ich h├Ątte nie gedacht, dass ich das mal als Computerspiel programmieren w├╝rde. Das Schwierigste war das Herausfinden und Programmieren der Diagonalsiege. Man kann entweder dunkelrot oder pink zum Spielen ausw├Ąhlen. Jeder Spielzug wird von einem Klick-Ger├Ąusch begleitet. Wenn eine Farbe gewinnt, dehnt sich das ganze Brett aus und die Gewinner-Farbe f├╝llt den ganzen Bildschirm. Diese Animation habe ich mit jQuery erstellt. Zus├Ątzlich gibt es eine Gewinnerinnen-Meldung, die blinkt - diese habe ich mit CSS-Animationen und Keyframes erstellt. Der 'Play again'-Knopf startet ein neues Spiel - Viel Spa├č dabei!

Spiced Homepage

Screenshot Spiced Homepage

Funktionalit├Ąt: Pop-up Anzeige, Hamburger-Men├╝, von rechts hereingleitende Navigation, auch f├╝r kleinere Bildschirme geeignet

Mehr Informationen

Eine ├ťbung zur Erstellung einer Homepage f├╝r Spiced mit HTML, CSS und JavaScript/jQuery ohne Flexbox oder Grid - recht anspruchsvoll! Ich habe eine Pop-up-Anzeige und ein von rechts hereingleitendes Men├╝ hinzugef├╝gt. Es ist auch f├╝r einen kleineren Bildschirm mit @media screen ausgelegt. Ich habe Animationen und Click-Handler verwendet und mit Un/Sichtbarkeit gespielt.

Funktionalit├Ąt: L├Ąndersuche, geht mit Maus oder Tasten

Mehr Informationen

Ich habe in meinem Leben viele Male inkrementelle Suchen verwendet und kannte diesen Begriff noch nicht einmal, bis ich eine programmieren sollte... Ich habe nie ├╝ber all die verschiedenen Schritte nachgedacht, die daf├╝r notwendig sind. Ich habe gelernt, wie man mit Mouseovers, Mousedowns und Tastenbefehlen arbeitet und wie man ein Suchergebnis hervorhebt - alles programmiert mit jQuery. Ich habe auch Fokus und Unsch├Ąrfe verwendet, sollte die Aufmerksamkeit einer Benutzer:in schwinden ­čśë, und schlussendlich war es mein erster Ajax-'GET'-Request, um von einer L├Ąnder-API aus suchen zu k├Ânnen.