🏗️ Entwicklung einer Online-Wahlpflichtplattform: Herausforderungen, Lösungen und wichtige Lerneinheiten

Tutorials

Hallo Community! 👋 Ich habe kürzlich an einer einfach und sicher gehaltenen Online-Wahlpflichtplattform für meinen College-Miniprojekt gearbeitet und möchte mit dir teilen, wie ich das gemacht habe. Von der Verwaltung der Benutzerregistrierungen bis hin zur Einrichtung eines Admin-Freigabe-Systems hat dieses Projekt mir viel bezüglich der Erstellung funktionaler Webanwendungen mit JavaScript und localStorage beigebracht. In diesem Blogeintrag werde ich dich durch die Entwicklung der Plattform, die Herausforderungen, die ich bekommen habe, und wie ich sie bewältigt habe, führen.

Das Ziel bestand darin, eine einfache Wahlplatte zu schaffen, die die folgenden Funktionen unterstützen konnte:

  • Benutzerregistrierungen: Erlauben es Wählern, sich mit ihren Daten anzumelden.

  • Wahlen: Erlauben es den Nutzern, sicher an Umfragen teilzunehmen.

  • Admin-Kontrolle: Ermöglicht es einem Admin, Umfragen zu verwalten, Benutzerregistrierungen zu genehmigen/ablehnen und den Wahlprozess zu überwachen.

Zunächst habe ich erwogen, eine volle Backend-Lösung mit MongoDB zu verwenden, aber ich wollte etwas einfacher gehen, also habe ich localStorage verwendet, um Daten für diese erste Version des Projekts zu verwalten.

  1. Anmelde- & Registrierungsseiten: Nutzer können ein Konto anlegen oder sich anmelden.

  2. Admin-Freigabe: Benutzerregistrierung erfordert die Freigabe durch den Administrator, bevor sie abstimmen können.

  3. Abstimmungssystem: Registrierte Benutzer können in aktiven Umfragen abstimmen.

  4. Admin-Bereich: Der Administrator kann Umfragen erstellen und verwalten, Benutzeranfragen anzeigen und kontrollieren, wer abstimmen darf.

Ich begann damit, ein einfaches Login- und Registrierungssystem mit HTML, CSS, JavaScript und localStorage zur Verwaltung der Benutzerdaten zu erstellen. Das Admin-Konto wurde fest codiert, aber Benutzer konnten sich registrieren, indem sie ihren vollständigen Namen, ihre Wähler-ID und ihr Passwort angaben. Allerdings wurde mir schnell klar, dass es keine gute Idee war, es jedem zu ermöglichen, sich zu registrieren und abzustimmen, ohne die Freigabe durch den Administrator zu erhalten.

Um die Plattform sicherer zu machen, führte ich ein Administrator-Freigabesystem ein. Bei jeder Benutzerregistrierung wird die Anfrage im localStorage gespeichert und als „ausstehend“ markiert. Der Administrator kann dann diese Anfragen überprüfen und genehmigen oder ablehnen.

  • Tracking Pending Requests: Ich musste sicherstellen, dass Benutzer, die auf Freigabe warten, zunächst keine Stimme abgeben können.

  • Approving Users: Sobald ein Benutzer freigegeben wurde, musste seine Daten von der „Warteliste“ in den „Registrierten Benutzern“-Liste im localStorage verschoben werden.

Ich setzte einfache System ein, das:

  1. Registrierungsanfragen unter einer besonderen Schlüssel (accountRequests) im localStorage speicherte.

  2. Wenn der Admin einen Benutzer freigab, wurden ihre Details in die users-Liste verschoben, was ihnen Zugriff auf das Stimmabereich-System gewährte.

  3. Wenn abgelehnt, verblieb die Anfrage im localStorage für zukünftige Verweise, sodass der Admin auf allen Entscheidungen verweisen konnte.

Die Administratorenseite ermöglichte die Erstellung dynamischer Umfragen, bei denen der Administrator mehrere Wahlmöglichkeiten hinzufügen konnte. Umfragedaten wurden im localStorage gespeichert und den Benutzern nach ihrem Login und der Freigabe durch den Administrator präsentiert.

  • Umfragen werden von Administratoren mit einem Formular erstellt, das dynamische Optionen zulässt. Das Formular erlaubt es dem Administratoren, so viele Optionen hinzuzufügen, wie er für jede Umfrage bentigt.

  • Nutzer können diese Umfragen anschließend ansehen und ihre Stimme abgeben.

Das Abstimmungssystem wurde so konzipiert, dass es einfach ist: Nachdem die Nutzer angemeldet und durch den Administratoren freigestellt wurden, konnten sie die aktiven Umfragen sehen und ihre Stimme abgeben.

  • Verhinderung von Doppelstimmen: Ich musste sicherstellen, dass Nutzer nur einmal pro Umfrage abstimmen konnten.

  • Ergebnisse speichern: Stimmen wurden im localStorage gespeichert und dem bestimmten Nutzer und Umfrage zugeordnet.

Jeder Stimme war mit der Benutzer-ID und der jeweiligen Umfrage verknüpft, was sicherstellte, dass jeder Benutzer nur einmal abstimmen konnte und die Ergebnisse sicher in der lokalen Speicherung gespeichert wurden.

Ich wollte sicherstellen, dass die Benutzer wissen konnten, ob ihre Registrierung genehmigt, abgelehnt oder noch ausstehend war. Um das zu tun, fügte ich eine “Statusüberprüfung”-Seite hinzu, auf der die Benutzer ihre Registrierungs-ID eingeben konnten, um ihren Status zu überprüfen.

  • Bewahren des Benutzerstatus: Den jeder Registernachricht und sie mit dem richtigen Status verknüpfen war kompliziert.

Jeder Registrierungsanfrage wurde eine eindeutige ID zugewiesen und die Benutzer konnten diese ID eingeben, um zu prüfen, ob ihre Anfrage genehmigt, abgelehnt oder noch ausstehend war. Diese einfache Statusseite verbesserte die Benutzererfahrung, indem sie die Benutzer in Echtzeit über ihre Anfrage informierte.

Zunächst war ich nicht sicher, wie ich das Freigabesystem strukturieren sollte. Nach einigen Versuchen und Fehlern entschied ich, lokale Speicherung zu verwenden, um den Benutzerfreigabeprozess zu verwalten. Dies hielt das System einfach und erlaubte schnelle Updates durch den Admin.

Es war zwar kompliziert, aber auch belohnend, dynamisch mehrere Abstimmungsmöglichkeiten zu erlauben. Ich implementierte dies, indem ich dem Admin erlaubte, Umfragen mit so vielen Optionen zu erstellen, wie nötig, die dann als Arrays in der lokalen Speicherung gespeichert wurden.

Ein kniffliges Teil bestand darin, sicherzustellen, dass Benutzer nur einmal pro Umfrage abstimmen können. Ich habe dies gelöst, indem ich Stimmen mit der Benutzer-ID und der Umfrage-ID verknüpft habe, was sicherstellt, dass jedes Benutzer nur einmal abstimmen kann.

Der Aufbau dieser Abstimmungsplattform hat mir viel über die Verarbeitung von Benutzerdaten, die Erstellung von Genehmigungsworkflows und die Verwaltung dynamischer Inhalte mit localStorage beigebracht. Hier sind einige der wichtigsten Erkenntnisse:

  • Benutzerverwaltung: Ich habe gelernt, wie man Benutzerkonten verwaltet, einschließlich der Behandlung von ausstehenden Registrierungen und Genehmigungen.

  • localStorage für Datenpersistenz: Dies war die erste Zeit, dass ich localStorage für ein Projekt ausführlich verwendet habe, und es war eine großartige Lernerfahrung. Es funktioniert gut für kleine Projekte, könnte aber bei Skalierbarkeit durch eine Datenbank wie MongoDB ersetzt werden.

  • Admin-Panel aufbauen: Die Erstellung einer Admin-Seite, um Benutzer und Umfragen zu verwalten, hat mir Einblick in die Komplexitäten der administrativen Kontrolle in einem System gegeben.

Obwohl die aktuelle Version der Plattform hervorragend für kleine Skalen-Abstimmungen funktioniert, denke ich, dass Migration zu einer robuster Lösung in der Zukunft sinnvoll wäre:

  • MongoDB-Integration: Für größere Projekte bietet Migration zu MongoDB bessere Datenpersistenz und Skalierbarkeit.

  • Backend-Implementierung: Die Verwendung von Express.js für das Backend würde zu einer sichereren Datenbewirtschaftung und einfachere Verwaltung von Benutzerkonten und Umfragen führen.

Momentan bin ich mit dem Endergebnis der Plattform zufrieden. Sie ist einfach, sicher und funktioniert gut für den Umfang des Projekts.

Schau dir die Live-Plattform an: Online-Abstimmungsplattform
Entdecke den Code auf GitHub: Abstimmungssystem-Repo

Der Bau dieser Online-Wahlplattform war eine fantastische Lernerfahrung. Vom Umgang mit der Benutzerregistrierung und der Genehmigung durch den Administrator bis hin zur Erstellung dynamischer Umfragen und der Gewährleistung der Datensicherheit hat mich jede Herausforderung als Entwickler wachsen lassen. Ich freue mich darauf, diese Erkenntnisse in zukünftige Projekte einzubringen und hoffe, dass dieser Beitrag Sie dazu inspiriert, etwas Ähnliches zu erstellen!

Vielen Dank fürs Lesen und teilen Sie gerne Ihre Gedanken oder Fragen unten mit! 😄

Source:
https://arkadiptakundu.hashnode.dev/building-an-online-voting-platform-challenges-solutions-and-key-learnings