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

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

🎯 סקירת הפרויקט: מה התכוונתי לבנות

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

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

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

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

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

🌟 תכונות מרכזיות:

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

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

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

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

🛠️ תהליך פיתוח: איך בניתי את הפלטפורמה

1. הגדרת הפרויקט

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

2. הוספת אישור מנהל לרישומים

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

🚧 אתגרים עם אישור מנהל:

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

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

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

✅ פתרון:

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

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

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

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

3. יצירה וניהול משאלות

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

📝 יצירת סקרים:

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

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

4. ניהול הצבעות ותוצאות

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

🗳️ אתגרים בהצבעה:

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

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

✅ פתרון:

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

5. הצגת מצב הרישום של המשתמש

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

📋 אתגרי המצב:

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

✅ פתרון:

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

🔑 אתגרים עיקריים ואיך פתרתי אותם

1. ניהול בקשות משתמשים ואישורי מנהל

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

2. טיפול בסקרים דינמיים

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

3. אחסון קולות ומניעת הצבעה כפולה

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

💡 מה למדתי

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

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

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

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

🌟 שיפורים עתידיים

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

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

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

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

---

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

---

בקצרה 🥜

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

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