In der vorletzten Augustwoche wurde auf dem Discord-Server des YouTubers Vitalij Mik ein Coding Jam veranstaltet. Bei einem Coding Jam arbeiten Programmierer an einem bestimmten Projekt und folgen einem am Anfang vorgegebenem Thema, welches in diesem Fall „Single Form Applikation“ war. Nachfolgend werde ich euch meinen Projektverlauf dokumentieren und euch ein paar Tipps geben, solltet ihr auch an einem Coding Jam teilnehmen wollen.
Die Projektidee
Als Erstes war es wichtig, überhaupt zu wissen, was man genau machen möchte. Da ich bei dem Thema der „Single Form Applikation“ relativ beschränkt bin, musst etwas her, das gut in einem Formular umsetzbar war. Mein erster Gedanke war ein Service zum Hochladen und Freigeben von Dateien. Da ich jedoch dafür eine Authentifizierungsmethode wollte, mit der man bestimmte weitere Funktionen bekam, fiel diese Idee für mich flach. Gegebenenfalls hätte man einen Schlüssel am Ende des Formulars angeben können, aber es hätte eine Generationsmethode für den Schlüssel gefehlt.
Am Ende habe ich mich dann also für einen URL-Kürzer mit erweiterten Funktionen entschieden. Funktionen dafür war eine direkte Option, um einen QR-Code zu erstellen oder die URL ablaufen zu lassen.
Mein erster Fehler, den ich begangen habe, war, dass ich viel zu lange an Projektideen gebastelt habe, die alle zu groß für meinen Kenntnisstand waren oder auf 2 Wochen zu viel Arbeit gewesen wären. Darum am besten immer klein denken und die Projekte möglichst skalierbar aufzubauen, dass sollte man noch Zeit haben, weitere Funktionen einbauen zu können, wie es bei meinem URL-Kürzer der Fall war.
Als Letztes musste für die Projektidee noch ein Name her. Ich wollte etwas, welches Sharing und Applikation in einem zusammenfasst. Das Sharing kommt daher, dass die Applikation auch mittels des QR-Codes den Kurzlink direkt freigeben kann, das Applikation sollte rein, da es sich um eine Web-App handelt.
Der Projektaufbau
Beim Aufbau hatte ich mir 2 wichtige Punkte gesetzt, welche ich erfüllen wollte. Der wichtigste war für mich der Backendteil. Hierbei wollte ich einen möglichst sauberen Aufbau des Projekts haben, welcher auch für Personen verständlich ist, die den Code zum ersten Mal sehen und nur geringe Erfahrung im Bereich der Entwicklung haben.
Der zweite wichtige Teil war für mich, dass das Layout schlicht und übersichtlich ist, um auch Nutzern bei der ersten Anwendung, jede Funktion näherzubringen. Hier hätte ich im Layout noch Tooltips verbauen können, welche dem Nutzer genauere Informationen zu einzelnen Funktionen gaben, um diese besser zu verstehen.
Die Datenbank
Als Datenbanksystem verwendete ich MariaDB, da ich in PHP nicht groß Treiber installieren musste, um die Datenbank ans Laufen zu bekommen. In der Datenbank erstellte ich dann 2 Tabellen: Eine für die Kurzlinks samt deren Optionen und die andere, für die Telemetriedaten der erfolgreich aufgerufenen Links.
In der Telemetrietabelle wird eine Verknüpfung zur ID des Links in der Linktabelle gesetzt, um die ID des Links in der Telemetrie festzuschreiben und mögliche Fehler zu vermeiden. Außerdem speichere ich in der Telemetrietabelle noch den User Agent sowie die Zugriffszeit und wenn übermittelt den Refferer, welcher den Besucher auf den Link geleitet hat.
Die Codebase
Die Codebase war recht simpel gestaltet. Ein einfacher Router in PHP mit einer „.htaccess“ Datei, eine Template Engine, die mich Alerts und ähnliches einfach ausgeben lässt ohne nerviges schreiben von HTML im PHP Code und einer Composer Konfiguration.
Für den Kurz-URL-Generator selbst habe ich eine Klasse angelegt, welche die Kurz-URL generiert, in der Datenbank prüft, ob diese Kurz-URL schon existiert und dann alle übergebenen Werte in die Datenbank einfügt.
Was mir insgesamt an meiner Codebase im Nachhinein betrachtet nicht so passt, ist, dass ich beim Kurz-URL Generator an sich alle Parameter in einer Funktion übergebe. Dies hätte ich ordentlicher lösen können, indem ich recht simpel für einzelne Optionen eine eigene Funktion eingebaut hätte, welche ggf. auch Rohdaten bearbeitet. Dazu könnte man als Beispiel den Zeitstempel nehmen, wann der Link abläuft. Dieser übergibt mir den Zeitstempel wie im Post abgesetzt und ich müsste diesen dann nur in der Funktion zu einem Unix Timestamp umwandeln.
Außerdem fehlt mir eine CSRF-Protection, welche ich aufgrund eines miesen Bugs herausnehmen musste und ich zeitlich nicht mehr geschafft habe, diese zu reparieren und wieder einzubauen.
Das Frontend
Der Teil des Frontends war recht easy. Hier habe ich mich für ein simples Bootstrap 5.1 entschieden. Dieses besteht aus Card-Elementen, welche den nötigen Inhalt haben. Beim Aufrufen der Seite findet sich ein Textfeld und ein Absenden Knopf sowie ein Accordion Menü, welches die Freigabe Option des QR-Codes beinhaltet. Unterhalb des Freigabemenüs findet sich ein aufklappbares Akkordion Menü, welches dann erweiterte Optionen mit sich bringt. Von der Telemetrie bis zum Ablaufdatum des Links lässt sich dort alles einstellen.
Nachdem man einen Link erstellt hat, öffnet sich rechts bzw. in der Mobilansicht unten ein weiteres Card-Element der Webseite, welches dann die wichtigsten Informationen beinhaltet. Dazu zählt der Telemetrie Link, die Zieladresse und die gekürzte URL. Sollte man einen QR-Code erstellt haben, wird dieser ebenfalls oberhalb der ganzen Links angezeigt.
Mit dem Frontend bin ich alles in allem sehr zufrieden. Es bietet alles Wichtige, was man bei einem URL-Kürzer so braucht. Einziges, was man noch hätte umsetzen können wäre ein Verlauf von gekürzten Links, welche dem Nutzer eine Session setzt und alle gekürzten URLs des Nutzers in der Sidebar anzeigt, das sind aber nur kleine Feinheiten.
Die Bewertung
In diesem Jam waren erfahrene Programmierer als auch Neulinge in der Programmierung dabei. Da wir uns gegenseitig bewerten sollten, haben wir uns auch an den Kenntnisstand der jeweiligen Person orientiert.
Am Ende habe ich den 4. Platz mit einem Punktedurchschnitt von 3,71 belegt.
Auch der Inhaber des Discord-Servers hat ein Video hochgeladen, in dem er jedes Projekt bewertet, dieses könnt ihr hier finden:
Zusätzlich hat der Teilnehmer „DaBu“ auch einen Artikel in seinem Blog über den Jam geschrieben. Dieser ist hier zu finden: https://magnus-reiss.de/blog/2021-pro-final-but-not-final
Mein Fazit
Dieser Coding Jam war eine gute Erfahrung und hat mir auch gezeigt, wie komplex solch kleine Projekte werden können.
Da es sich bei diesem Projekt um ein Pilotprojekt handelte, mit „nur“ 8 Teilnehmern (bzw. 6, da 2 ausgestiegen sind), war es natürlich alles etwas durchwachsen. Dennoch hatte ich sehr viel Spaß an diesem Projekt zu arbeiten und Erfahrungen zu sammeln.
All in All war es trotz durchwachsener Planung ein sehr tolles Projekt, bei welchem ich immer wieder gerne mitmachen würde, egal ob ich gewinne oder nicht.
