Software

Hier findet sich ein Teil der von mir entwickelten Softwareprojekte.

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

Derzeit arbeite ich als Consultant bei der Woodmark Consulting AG.

Tech Stack, den ich bisher verwendet habe:
Frontend: HTML, CSS, JavaScript, React.js, Vue.js, Nuxt.js, QML, LiveScript, jQuery
Backend: Node.js/Express, Python, Java, Spring Boot
Datenbanken: PostgreSQL, SQLite
Cloud Computing: AWS (ECR, EC2, S3, CloudWatch, CodePipeline, Lambda, ParameterStore), Terraform
CICD: GitHub Actions, AWS
Tests: Jest, jUnit, PyTest
Monitoring/Alerting: DataDog
IDEs: IntelliJ, PyCharm, Visual Studio Code, 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

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

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

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

Eine hohe Priorit├Ąt hat konditionales Rendering, Sicherheitsfragen (Passwort-Hashing, Schutz vor SQL-Injektion, CSRF- und XSS-Angriffen, Reset-Code per E-Mail) und eine differenzierte Fehlerbehandlung (verschiedene Fehlermeldungen werden angezeigt, z.B. wenn die E-Mail nicht in der Datenbank ist, das erneut eingegebene Passwort nicht mit dem ersten Passwort ├╝bereinstimmt oder die Eingabefelder leer bleiben) in den Registrierungs-, Login- und Reset-Passwort-Komponenten.

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

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

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

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

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

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

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

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

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

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

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

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.