️ בניית פלטפורמת הצבעה מקוונת: אתגרים, פתרונות ולמידות חשובות

מדריכים

היי לכולם! 👋 לאחרונה, עבדתי על פלטפורמת הצבעה מקוונת פשוטה ומאובטחת עבור מיני-פרויקט בקולג' שלי, ורציתי לשתף איך עשיתי את זה. החל מניהול רישומי משתמשים ועד להקמת מערכת אישור מנהל, פרויקט זה לימד אותי רבות על בניית אפליקציות אינטרנט פונקציונליות באמצעות JavaScript ו-localStorage. בפוסט בלוג זה, אנחה אתכם דרך תהליך הפיתוח של הפלטפורמה, האתגרים שנתקלתי בהם, וכיצד התגברתי עליהם.

המטרה הייתה ליצור פלטפורמת הצבעה פשוטה שיכולה לטפל ב:

  • רישומי משתמשים: לאפשר למצביעים להירשם עם הפרטים שלהם.

  • הצבעה: לאפשר למשתמשים להצביע בסקרים באופן מאובטח.

  • שליטת מנהל: לאפשר למנהל לנהל את הסקרים, לאשר/לדחות רישומי משתמשים, ולפקח על תהליך ההצבעה.

בהתחלה, שקלתי להשתמש בבק-אנד מלא עם MongoDB, אבל רציתי לשמור על פשטות, אז השתמשתי ב-localStorage לניהול נתונים עבור הגרסה הראשונית של הפרויקט.

  1. דפי התחברות והרשמה: משתמשים יכולים ליצור חשבון או להתחבר.

  2. אישור מנהל: הרשמת משתמש דורשת אישור מנהל לפני שהם יכולים להצביע.

  3. מערכת הצבעה: משתמשים רשומים יכולים להצביע בסקרים פעילים.

  4. לוח בקרה של מנהל: המנהל יכול ליצור ולנהל סקרים, לצפות בבקשות משתמש, ולשלוט מי יכול להצביע.

התחלתי בבניית מערכת התחברות ורישום פשוטה באמצעות HTML, CSS, JavaScript, ו-localStorage כדי לטפל בנתוני משתמש. חשבון המנהל היה מקודד, אך משתמשים יכלו להירשם על ידי מתן שם מלא, תעודת זהות, וסיסמה. אך מהר מאוד הבנתי שאפשר לאפשר לכל אחד להירשם ולהצביע ללא אישור מנהל לא היה הרעיון הטוב ביותר.

כדי להפוך את הפלטפורמה לבטוחה יותר, הצגתי מערכת אישור מנהל. כל עת משתמש רושם, בקשתו נשמרת ב-localStorage ומסומנת כ"בהמתנה." המנהל יכול אז לסקור ולאשר או לדחות את הבקשות האלה.

  • עקיבה אחר בקשות ממתינות

  • אישור משתמשים

    : לאחר האישור, פרטי המשתמש הועברו מהרשימה "ממתינים" לרשימת "משתמשים רשומים" בלוקאלסטורג'.

הקמתי מערכת פשוטה שבה:

  1. בקשות הרשמה אוחסנו בלוקאלסטורג' תחת מפתח מיוחד (accountRequests).

  2. כאשר המנהל אישר משתמש, הפרטים שלהם הועברו לרשימת users, מעניקים להם גישה למערכת ההצבעה.

  3. אם נדחה, הבקשה נשארה בלוקאלסטורג' לעיון עתידי, כך שהמנהל יוכל לעקוב אחר כל ההחלטות.

עמוד הניהול אפשר יצירת סקרים דינמיים, בהם המנהל יכול להוסיף אפשרויות הצבעה מרובות. נתוני הסקרים נשמרו ב-localStorage והוצגו למשתמשים לאחר התחברות ואישור.

  • סקרים נוצרים על ידי המנהל באמצעות טופס המאפשר אפשרויות דינמיות. הטופס מאפשר למנהל להוסיף כמה אפשרויות שצריך לכל סקר.

  • לאחר מכן משתמשים יכולים לצפות בסקרים אלה ולהצביע.

מערכת ההצבעה תוכננה להיות פשוטה: לאחר שמשתמשים נכנסו ואושרו על ידי המנהל, הם יכלו לראות את הסקרים הפעילים ולהצביע.

  • מניעת הצבעות כפולות: הייתי צריך לוודא שמשתמשים יוכלו להצביע פעם אחת בלבד לכל סקר.

  • שמירת תוצאות: הצבעות נשמרו ב-localStorage, קשורות למשתמש ולסקר הספציפי.

כל הצבעה קושרה לזיהוי המשתמש והסקר הספציפי. זה הבטיח שכל משתמש יכול להצביע רק פעם אחת, והתוצאות נשמרו בבטחה בתוך localStorage.

רציתי להבטיח שהמשתמשים יידעו אם רישומם אושר, נדחה או עדיין תלוי. לשם כך, הוספתי דף "בדוק מצב" שבו המשתמשים יכולים להזין את מזהה הרישום שלהם כדי לבדוק את מצב האישור.

  • שמירת מצב המשתמש: מעקב אחר כל בקשת רישום וקישורה למצב הנכון היה מורכב.

לכל בקשת רישום הוקצה מזהה ייחודי, והמשתמשים יכולים להזין מזהה זה כדי לבדוק אם בקשתם אושרה, נדחתה או עדיין תלויה. עמוד המצב הפשוט הזה שיפר את חוויית המשתמש על ידי מתן משוב בזמן אמת על הבקשה.

בהתחלה לא הייתי בטוח כיצד לארגן את מערכת האישור. לאחר ניסיון וטעות, החלטתי להשתמש בlocalStorage לניהול תהליך האישור של המשתמש. זה שמר את המערכת פשוטה וִאפשר עדכונים מהירים על ידי המנהל.

לאפשר למנהל להוסיף אפשרויות הצבעה מרובות באופן דינמי היה אתגר אך מספק. יישמתי זאת על ידי אפשרות למנהל ליצור סקרים עם כמה אפשרויות שנדרשות, אשר נשמרו כמערכים בלוקאלסטורג'.

חלק מאתגר היה לוודא שמשתמשים יוכלו להצביע רק פעם אחת בכל סקר. פתרתי את זה על ידי קשירת הקולות ל-ID של המשתמש ול-ID של הסקר, מה שמבטיח שכל משתמש יכול להצביע רק פעם אחת.

בניית פלטפורמת ההצבעה הזו לימדה אותי הרבה על ניהול נתוני משתמשים, יצירת זרימות אישור, וניהול תוכן דינמי עם localStorage. הנה כמה מהתובנות המרכזיות:

  • ניהול משתמשים: למדתי איך לנהל חשבונות משתמשים, כולל טיפול ברישומים ממתינים ואישורים.

  • localStorage לשמירת נתונים: זו הייתה הפעם הראשונה שלי בשימוש נרחב ב-localStorage עבור פרויקט, וזה היה חוויה לימודית נהדרת. זה עובד טוב עבור פרויקטים קטנים אך עשוי להיות צורך להחליף אותו במסד נתונים כמו MongoDB לצורך סקלאביליות.

  • בניית לוח ניהול: יצירת דף ניהול לניהול משתמשים וסקרים נתנה לי תובנות על המורכבויות של שליטה מנהלית במערכת.

בעוד שהגרסה הנוכחית של הפלטפורמה עובדת נהדר להצבעה בקנה מידה קטן, אני שוקל להעביר אותה לפתרון יותר חזק בעתיד:

  • אינטגרציה עם MongoDB: עבור פרויקטים גדולים יותר, מעבר ל-MongoDB יציע שמירת נתונים טובה יותר וסקלביליות.

  • יישום צד שרת: שימוש ב-Express.js עבור הצד האחורי יאפשר טיפול מאובטח יותר בנתונים וניהול קל יותר של חשבונות משתמשים וסקרים.

בינתיים, אני מרוצה מהתוצאה של הפלטפורמה. היא פשוטה, מאובטחת ופונקציונלית עבור היקף הפרויקט.

בדקו את הפלטפורמה החיה: פלטפורמת הצבעה מקוונת
גלו את הקוד ב-GitHub: מאגר מערכת ההצבעה

בניית הplatform המקוונת לבחירות היתה חוויה לימודית נפלאה. מעניין ברירוף ההרשמות של המשתמשים והאישורים של האדמיניסטרטורים ליצירת סקרים דינמיים ולוודאי בטחון המידע, כל אתגר עזר לי לגדול כפיית הפיתוח. אני מתרגשת לקחת את הלמידות האלה לפרוייקטים הבאים, ואני מקווה שהמאמר הזה ירים את הערימה לפניך לבניית משהו דומה!

תודה על הקריאה, ותרשו לעצמכם לשתף את הרעיונות או השאלות שלכם למטה! 😄

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