Nur ein weiteres (durchschnittliches) Full-Stack-Webprojekt

Inhaltsverzeichnis

1. Hintergrund
2. Anfänge
3. Tech-Stack
4. Erstes Design
5. Herausforderungen
6. Großes Finale
7. Reflexionen

Hintergrund.

Als ich 2019 aus eigenem Interesse anfing, mich mit der Webentwicklung zu beschäftigen, hatte ich nie die Gelegenheit (oder besser gesagt, ich zögerte massiv hinaus), mein eigenes Full-Stack-Webprojekt zu starten. Meine bisherigen persönlichen Projekte waren immer Frontend-fokussiert und verwendeten Technologien wie React oder Bootstrap. Ich fand Frontend-Entwicklung immer angenehmer und fesselnder, da es mir ermöglichte, meine Arbeit zu visualisieren und meine kreative Seite beim Entwerfen von Schnittstellen zu erkunden.

Aber es war an der Zeit, meine Komfortzone zu verlassen.

Ich habe im Sommer 2021 begonnen, mich mit Backend-Technologien – von MongoDB bis Express – zu beschäftigen. Ich habe dies als Gelegenheit genutzt, mehr Technologie-Frameworks und -Tools zu lernen, hauptsächlich durch YouTube-Tutorials von Traversy Media und Full Stack Junkie. Es hat mir definitiv Spaß gemacht, endlich eine ganz andere Seite der Webentwicklung zu entdecken.

Erst in meinem letzten Jahr an der National University of Singapore (NUS) im August 2021 hatte ich die Gelegenheit, mein ganz eigenes Full-Stack-Webprojekt zu erstellen.

Anfänge.

Als Informatikstudenten an der NUS mussten wir das berüchtigte CG4002 Capstone-Modul absolvieren. Warum habe ich berüchtigt gesagt? Nun, weil dies unser erstes Projekt war, bei dem wir alle Kenntnisse und Fähigkeiten einsetzen mussten, die wir uns in den letzten 3 Jahren unseres Studiums angeeignet hatten. Eingebettete Systeme? Ja . Socket-Programmierung? Natürlich . Maschinelles Lernen? Sie wetten . Vivado? Ich hasse es absolut, aber ja .

Ich denke, Sie verstehen, worauf es ankommt.

Es war ein riesiges Projekt mit so vielen verschiedenen Komponenten, die miteinander interagierten, aber zum Glück arbeiteten wir in Gruppen, in denen jeder von uns eine andere Rolle spielte und zu Experten auf unseren verschiedenen Gebieten wurde. Natürlich habe ich mich für die Rolle der Webentwicklung entschieden. Warum sollte ich diesen Beitrag schreiben, wenn es keine Webentwicklung gäbe. Um nur ein wenig Kontext zu geben, lautete die Problemstellung unseres Projekts:

Wir hatten völlige Gestaltungsfreiheit, wenn auch ein paar Richtlinien zu beachten waren. Wir konnten die Richtung des Projekts bestimmen und wie wir es ausführen wollten. Für meine Webentwicklungskomponente, auch Dashboard genannt, musste ich einige Anforderungen erfüllen:

Einfach ausgedrückt, Tänzer hätten Wearables (mit Sensoren) an ihren Handgelenken. Die Daten werden verwendet, um vorherzusagen, welche Tanzbewegung ein Tänzer ausführt. Ich musste ein Dashboard erstellen, das das Ergebnis des maschinellen Lernmodells anzeigt und auch eine Datenvisualisierung und -analyse in Echtzeit ermöglicht, während die Tänzer ihre Bewegungen ausführen. Machen wir uns vorerst keine Gedanken über die Details der Datenpipeline zwischen den anderen Komponenten und meiner.

Es ist endlich an der Zeit, in den Teil der Webentwicklung einzutauchen, auf den Sie alle gewartet haben.

Tech-Stack.

Ich habe mich für mein Projekt für den Tech-Stack von MERN entschieden. Lassen Sie mich kurz auf die verschiedenen Komponenten in MERN eingehen und warum ich sie ausgewählt habe. Es muss gesagt werden, dass die gesamte Webanwendung, sowohl der Client als auch der Server, lokal auf meinem eigenen Gerät ausgeführt wurde.

M ongoDB

MongoDB ist eine der bekanntesten NoSQL-Datenbanken. Im Gegensatz zu herkömmlichen Datenbanken stellt MongoDB seine Informationen in einer schemalosen Reihe von JSON-ähnlichen Dokumenten dar, im Gegensatz zum Tabellen- und Zeilenformat relationaler Systeme wie PostgreSQL oder MySQL. Ich habe es aus 2 Hauptgründen ausgewählt - (1) es erlaubte mir, Echtzeit-Änderungen in der Datenbank mit Change Streams zu beobachten, und (2) ich hatte eine komplizierte Hassliebe zu SQL.

E xpress

Als intelligenter (und harter Arbeiter) wollte ich meine Ziele erreichen, ohne API-Funktionen oder Routen von Grund auf neu schreiben zu müssen. Express kommt als minimales Webanwendungs-Framework zu Hilfe, das mir eine Vielzahl von HTTP-Dienstprogrammmethoden und Middleware zur Verfügung stellt, um die Erstellung von APIs zu vereinfachen.

R reagieren

Natürlich habe ich mich für React entschieden. Was hätte ich sonst gewählt? Reagieren ist offensichtlich das beste Frontend-Tool. Abgesehen von allen Witzen fühlte ich mich mit React im Vergleich zu anderen Technologien wie Vue und Angular am wohlsten, da ich die Bibliothek damals ausgiebig erforscht hatte, als ich mein persönliches Webportfolio entwickelte. (Entschuldigung für den schamlosen Plug.)

N ode
Die Verwendung von Node war für mich im Wesentlichen ein Kinderspiel. Node würde es mir ermöglichen, JavaScript außerhalb des Browsers auszuführen, daher kann ich es auch serverseitig verwenden.

Ursprüngliches Design.

Die vollständige Designfreiheit zu haben, war definitiv aufregend, aber es kann eine Herausforderung sein, weil es manchmal richtungslos erscheint. Glücklicherweise habe ich versucht, einen angemessenen Arbeitsablauf zu entwickeln, um ein außergewöhnliches Endergebnis zu erzielen.

1. Ich begann zuerst, nach Inspiration zu suchen auf dieser erstaunlichen Website, Dribbble. Sie hatten TONNENweise von Benutzern eingereichte Designs und Animationen, die ich dann benutzte, um meine eigenen Ideen zu entwickeln.

2. Als nächstes verschickte ich eine einfache vorläufige Umfrage an meine Gruppenkollegen, Freunde und Familie. Ich würde diese (nicht) überwältigenden Antworten dann verwenden, um Anwendungsfälle, Benutzergeschichten und Funktionslisten zu entwickeln, die sich alle um die Benutzer drehen.

3. Der letzte Schritt war der spannende Teil, der das Design beinhaltete der Benutzeroberfläche. Glücklicherweise hatte ich für die gesamte Adobe Creative Suite bezahlt, die Adobe Xd enthielt, wodurch ich einfache Mockups erstellen konnte.

Herausforderungen.

Wenn man bedenkt, dass es mein erstes Full-Stack-Webprojekt war, wurde ich mit einigen Herausforderungen konfrontiert, die von einem Neuling wie mir zu erwarten waren. Obwohl ich Lehrassistenten und Professoren hatte, die meinen Prozess leiten konnten, wollte ich so unabhängig wie möglich sein. Das bedeutete, unzählige schlaflose Nächte damit zu verbringen, StackOverflow zu debuggen, umzugestalten und die Tiefen von StackOverflow zu durchforsten. Hier sind nur einige Herausforderungen, denen ich während der Entwicklung der Anwendung begegnet bin, und wie ich versucht habe, sie zu überwinden oder sie einfach zu ignorieren (Ignoranz ist Glückseligkeit).

1. MongoDB bietet eine Cloud-basierte Lösung, MongoDB Atlas, die die gesamte Komplexität der Bereitstellung, Verwaltung und Handhabung von Bereitstellungen bei einem Cloud-Service-Anbieter unserer Wahl bewältigt. Ich dachte, ich müsste nur die Endpunkte auf meinem Server einrichten, die sich mit der Cloud-Datenbank verbinden würden, und schon wäre ich startklar. Junge, lag ich falsch. Leider gab es Probleme bei der Verbindung mit dem Cloud-Service auf dem FPGA, den wir bereitgestellt haben, um ML-Vorhersagen auszuführen und Ergebnisse an die Datenbank zu senden. Das FPGA befand sich während des gesamten Projektverlaufs in einem Labor auf dem Campus (wir mussten eine Remote-Verbindung herstellen) und war mit dem Campus-Netzwerk verbunden. Das Netzwerk hatte anscheinend eine gewisse Firewall, die ich nie umgehen konnte. Eine Problemumgehung bestand jedoch darin, den MongoDB-Server lokal auf meinem Laptop einzurichten. Da ich auf dem Campus wohnte, befanden sich mein Laptop und das FPGA im selben Netzwerk!

2. Ich hatte definitiv Probleme beim Anzeigen von Echtzeitgrafiken auf dem Bildschirm. Obwohl ich Change Streams und Socket.io von MongoDB hatte, um mein Echtzeit-Streaming zu unterstützen, hatte ich immer noch Probleme. Das Problem war, dass meine Datenbank Daten mit einer Frequenz von 30 Hz empfing und mein Server die Daten dann mit der gleichen Rate an das Frontend ausgab, was zu erheblichen Latenzproblemen führte. Eine einfache Lösung, an die ich dachte, war, die eingehenden Daten abzutasten und die Frequenz auf nur etwa 5 Hz zu reduzieren. Bei der Entscheidung über die Abtastrate ging es darum, den idealen Punkt zwischen minimaler Latenz und dennoch Erfüllung der Anforderung von „Echtzeit“ zu finden.

3. Das größte Hindernis, dem ich gegenüberstand, war der Zeitmangel . Es stand kurz vor der abschließenden Bewertung, aber ich hatte auch Einreichungen für andere Module, auf die ich mich konzentrieren musste. Mein Dashboard war größtenteils fertig, mit Ausnahme der Anmelde-, Anmelde- und Abmeldefunktionen. Es war eine Schande, da ich ziemlich viel Zeit damit verbracht habe, die Authentifizierung mit JSON Web Tokens (JWT) und Redux zu lernen, um den Status der Anwendung zu verwalten und zu verfolgen. Da dies ursprünglich ein 'Nice to Have' war, habe ich mich entschieden, auf die Funktionalität zu verzichten und den Authentifizierungsprozess mit nur einfachen bedingten Prüfungen und Passwortverschlüsselung mit bcrypt zu vereinfachen. Ich war definitiv nicht stolz darauf, aber wenn man bedenkt, dass es nicht einmal eine Projektanforderung war und nur etwas, womit ich Spaß haben wollte, war ich nicht allzu lange enttäuscht.

Großes Finale.

Nach fast 4 Monaten mühevoller Arbeit war es endlich soweit. Unsere abschließende Bewertung verlief reibungslos, und das Dashboard funktionierte so, wie es sollte. Da ich bei der Evaluation nur einen kleinen Teil meiner Website zeigen musste, dachte ich mir, vielleicht kann ich hier mein Meisterwerk schamlos zur Schau stellen.

Viel Spaß

Hier sind nur einige der Tools und npm-Pakete, die ich bei der Erstellung einiger Komponenten meines Dashboards verwendet habe:

• Blobmaker – Ein kostenloses Webdesign-Tool, mit dem Sie schnell zufällige, einzigartige und organisch aussehende SVG-Formen erstellen können.
• Nivo – Eine Bibliothek, die eine Vielzahl hochgradig anpassbarer Tools zur Datenvisualisierung bereitstellt.
• Material UI DataTables – Eine einfache Datentabellenkomponente mit Funktionen wie Filtern, Anzeigen/Ausblenden von Spalten, Suchen und vielem mehr.
• React Bootstrap – Eine Bibliothek, die viele benutzerfreundliche und hochgradig anpassbare Komponenten bereitstellt, die in jeder modernen Webanwendung unerlässlich sind.

Reflexionen.

War ich mit meiner Arbeit zufrieden? Absolut . Hätte ich mehr tun können? Vielleicht? Letztendlich war es meiner Meinung nach eine großartige Erfahrung, endlich einen tiefen Einblick in die verschiedenen Aspekte der Full-Stack-Webentwicklung zu erhalten. Von der Untersuchung meiner Missverständnisse in React bis hin zum Verständnis der Funktionsweise von HTTP-Anforderungen habe ich auf dieser Reise definitiv viel gelernt. Dieses Projekt hat mir gezeigt, dass die Backend-Entwicklung definitiv nicht mein Ding ist und ich immer noch ein sehr Faible für die Frontend-Entwicklung hatte. Ich möchte meinen netten Gruppenkollegen Andrew, Billy, Jess, Jiayi und Alex dafür danken, dass sie so großartige Teamkollegen sind und meine CG4002-Reise unvergesslich gemacht haben. Für andere mag dieses Projekt trivial und einfach erscheinen, aber es war definitiv ein Sprungbrett für mich, um ein kompetenter Webentwickler zu werden.

Auf viele weitere Projekte!