Bouw een online stemmingplatform: uitdagingen, oplossingen en belangrijke lessen

Handleidingen

Hallo iedereen! 👋 recently heb ik aan een eenvoudige en veilige online stemming platform voor mijn college mini-project gewerkt, en ik wilde dat delen. Van het beheer van gebruikersregistraties tot het instellen van een beheerder goedkeuringssysteem, heb ik veel geleerd over het bouwen van functionele webapplicaties met JavaScript en localStorage. In dit blogbericht zal ik u door de ontwikkeling van het platform leiden, de uitdagingen die ik tegenkwam en hoe ik die overwonnen.

Het doel was een eenvoudig stemming platform te creëren dat de volgende functionaliteiten ondersteunde:

  • Gebruikersregistraties: Stemmers mogen zich aanmelden met hun gegevens.

  • Stemmen: Laat gebruikers veilig op stemmingen stemmen.

  • Beheerderbeheer: Geeft een beheerder de mogelijkheid de stemmingen te beheren, gebruikersregistraties goed of af te keuren en het stemproces te overzien.

Aanvankelijk had ik aan het gebruik van een volledige backend met MongoDB gedacht, maar ik wilde het simpel houden, dus heb ik localStorage gebruikt om gegevens te beheren voor deze eerste versie van het project.

  1. Login & Register Pagina’s: Gebruikers kunnen een account aanmaken of inloggen.

  2. Beheerder goedkeuring: Gebruikersregistratie vereist beheerder goedkeuring voordat ze kunnen stemmen.

  3. Stemmenstelsel: Geregistreerde gebruikers kunnen stemmen in actieve peilingen.

  4. Beheerderspaneel: Het beheerder kan peilingen aanmaken en beheren, gebruikersverzoeken bekijken en bepalen wie mag stemmen.

Ik begon door een eenvoudig inloggen en registratiesysteem te bouwen met HTML, CSS, JavaScript en localStorage voor het behandelen van gebruikersgegevens. Het beheerdersaccount was hardcoded, maar gebruikers konden registreren door hun volledige naam, stemmersID en wachtwoord in te vullen. Echter, snel realiseerde ik me dat het niet de beste idee was om iedereen toe te staan注册en en stemmen zonder beheerder goedkeuring.

om het platform veiliger te maken, introduceerde ik een beheerder goedkeuringssysteem. Elke keer dat een gebruiker zich registreert, wordt hun verzoek opgeslagen in localStorage en gemarkeerd als “in behandeling”. De beheerder kan deze verzoeken dan beoordelen en goedkeuren of afkeuren.

  • Tracking Pending Requests: Ik moest ervoor zorgen dat gebruikers die in afwachting van goedkeuring waren nog geen stemrecht hadden.

  • Approving Users: Zodra een gebruiker goedgekeurd werd, moest zijn gegevens worden verplaatst van de “in afwachting” lijst naar de “geregistreerde gebruikers” lijst in localStorage.

Ik heb een eenvoudig systeem opgezet waar:

  1. Registratieverzoeken werden opgeslagen in localStorage onder een speciaal sleutel (accountRequests).

  2. Als de beheerder een gebruiker goedkeurde, werden hun gegevens verplaatst naar de users lijst, wat hen toegang geeft tot het stemmen systeem.

  3. Indien afgewezen, bleef het verzoek in localStorage voor toekomstige verwijzingen, zodat de beheerder zijn beslissingen kon bijhouden.

De beheerderspagina maakte het mogelijk om dynamische peilingen te creëren, waarbij de beheerder meerdere stemopties kon toevoegen. Peilingsgegevens werden opgeslagen in localStorage en aan gebruikers getoond zodra ze waren ingelogd en goedgekeurd.

  • Peilingen worden gemaakt door de beheerder met een formulier dat dynamische opties mogelijk maakt. Het formulier stelt de beheerder in staat om zoveel opties toe te voegen als nodig zijn voor elke peiling.

  • Gebruikers kunnen deze peilingen vervolgens bekijken en hun stem uitbrengen.

Het stemsysteem was ontworpen om eenvoudig te zijn: zodra gebruikers waren ingelogd en goedgekeurd door de beheerder, konden ze de actieve peilingen zien en hun stem uitbrengen.

  • Voorkomen van dubbele stemmen: Ik moest ervoor zorgen dat gebruikers slechts één keer per peiling konden stemmen.

  • Resultaten opslaan: Stemmen werden opgeslagen in localStorage, gekoppeld aan de specifieke gebruiker en peiling.

Elke stemming was gekoppeld aan de gebruikers-ID en de specifieke enquête. Dit zorgde ervoor dat elke gebruiker maar één keer kon stemmen, en de resultaten werden veilig opgeslagen in localStorage.

Ik wilde ervoor zorgen dat gebruikers weten of hun registratie goedgekeurd, afgewezen of nog in behandeling was. Om dit te doen, heb ik een “Controleer Status” pagina toegevoegd waar gebruikers hun registratie ID konden invoeren om hun goedkeuringstatus te controleren.

  • Behandelen van de gebruikersstatus: Het bijhouden van elke registratieverzoek en het aan die verzoeken koppelen van de juiste status was lastig.

Elk registratieverzoek kreeg een unieke ID toegewezen, en gebruikers konden deze ID invoeren om te controleren of hun verzoek goedgekeurd, afgewezen of nog in behandeling was. Deze eenvoudige statuspagina verbeterde de gebruikerservaring door realtime feedback te geven op hun verzoek.

Initieel was ik niet zeker hoe ik de goedkeuringssysteem moest structureren. Na enkele pogingen en mislukkingen besloot ik localStorage te gebruiken om het goedkeuringsproces van de gebruikers te beheren. Dit maakte het systeem eenvoudig en stelde de beheerder in staat snel updates uit te voeren.

het toestaan van een beheerder om meerdere stemmingopties dynamisch toe te voegen was een uitdaging maar ook belohnend. Ik heb dit gerealiseerd door de beheerder toe te staan om polls te maken met zoveel opties als nodig, die vervolgens als arrays in localStorage werden opgeslagen.

Een gevat deel was het verzekeren dat gebruikers maar één keer per poll konden stemmen. Ik heb dit opgelost door stemmen aan de gebruikers-ID en de poll-ID te binden, zodat elke gebruiker maar één keer kon stemmen.

De bouw van deze stemmenplatform heeft me veel geleerd over het behandelen van gebruikersgegevens, het creëren van goedkeuringswerkstromen en het beheren van dynamische content met localStorage. Hier zijn enkele van de sleutelopdrachten:

  • Gebruikersbeheer: Ik heb geleerd hoe gebruikersaccounts te beheren, inclusief het afhandelen van uitstaande registraties en goedkeuringen.

  • localStorage voor Data Persistence: Dit was de eerste keer dat ik localStorage extensief gebruikte voor een project, en het was een uitstekende leerervaring. Het werkt goed voor kleine projecten, maar kan vervangen worden door een database zoals MongoDB voor scalability.

  • Bouwen van een Admin Paneel: Het creëren van een adminpagina om gebruikers en polls te beheren gaf me inzicht in de complexiteiten van de administratieve controle in een systeem.

Hoewel de huidige versie van de platform goed werkt voor kleinschalige stemming, denk ik eraan over om het over te schakelen naar een robuustere oplossing in de toekomst:

  • MongoDB Integratie: Voor grote projecten biedt de overschakeling naar MongoDB betere data duurzaamheid en schaalbaarheid.

  • Backend Implementatie: Het gebruik van Express.js voor de backend zou toelaat om de data veiliger af te handelen en de gebruikersaccounts en stemmen gemakkelijker te beheren.

Voor nu ben ik blij met hoe het platform eruit is gekomen. Het is eenvoudig, veilig en functioneel voor het bereik van het project.

Bekijk de live platform: Online Stemming Platform
Bekijk de code op GitHub: Stemming Systeem Repo

De bouw van deze online stemmingplatform was een geweldige leerervaring. Van het afhandelen van gebruikersregistratie en beheerdergoedkeuringen tot het creëren van dynamische enquêtes en de veiligheid van gegevens waarborgen, elke uitdaging heeft me geholpen te groeien als ontwikkelaar. Ik ben verheugd deze lessen mee te nemen in toekomstige projecten, en ik hoop dat dit bericht u inspireert om iets vergelijkaards te maken!

Dank voor het lezen, en schrijf gerust uw reacties of vragen onderstaand! 😄

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