Привет всем! 👋 Недавно я работал над простой и безопасной онлайн-платформой для голосования для моего мини-проекта в колледже и хотел бы поделиться, как я это сделал. От управления регистрацией пользователей до настройки системы одобрения администратором, этот проект научил меня многому о создании функциональных веб-приложений с использованием JavaScript и localStorage. В этом посте я проведу вас через разработку платформы, расскажу о проблемах, с которыми я столкнулся, и как я их преодолел.
🎯 Обзор проекта: Что я собирался построить
Цель состояла в создании простой платформы для голосования, которая могла бы обрабатывать:
-
Регистрация пользователей: Позволить избирателям зарегистрироваться с их данными.
-
Голосование: Позволить пользователям безопасно голосовать на опросах.
-
Управление администратором: Дать возможность администратору управлять опросами, одобрять/отклонять регистрацию пользователей и контролировать процесс голосования.
Сначала я рассматривал возможность использования полноценного бэкенда с MongoDB, но хотел упростить задачу, поэтому использовал localStorage для управления данными в этой начальной версии проекта.
🌟 Основные функции:
-
Страницы входа и регистрации: Пользователи могут создать учетную запись или войти в систему.
-
Проверка администратором: Регистрация пользователя требует подтверждения администратором, прежде чем они смогут голосовать.
-
Система голосования: Зарегистрированные пользователи могут голосовать в активных опросах.
-
Панель администратора: Администратор может создавать и управлять опросами, просматривать запросы пользователей и контролировать, кто может голосовать.
🛠️ Processus de développement : comment j’ai construit la plateforme
1. Configuration du projet
J’ai commencé en construisant un simple système de login et deregistration en utilisant HTML, CSS, JavaScript et localStorage pour gérer les données utilisateurs. L’compte administrateur a été codé à la main, mais les utilisateurs pouvaient s’inscrire en fournissant leur nom, carte d’électeur et mot de passe. Cependant, je me suis rapidement rendu compte que laisser n’importe qui s’inscrire et voter sans approbation de l’administrateur n’était pas une bonne idée.
2. Ajout d’une approbation admin pour les inscriptions
Pour rendre la plateforme plus sécurisée, j’ai introduit un système d’approbation admin. Lorsque quelqu’un s’inscrit, leur demande est stockée dans localStorage et marquée comme “en attente”. L’admin peut ensuite l’examiner et l’approuver ou le rejeter.
🚧 Défis avec l’approbation admin :
-
слежение за ожидающими утверждения запросами: нужно было убедиться, что пользователи, ожидающие утверждения, еще не могут голосовать.
-
Утверждение пользователей: Как только пользователь будет утвержден, его данные должны быть перемещены из списка “ожидающих” в список “зарегистрированных пользователей” в localStorage.
✅ решение:
Я настроил простой систему, где:
-
Запросы регистрации сохранялись в localStorage под специальным ключом (
accountRequests). -
Когда администратор утверждает пользователя, их данные перемещаются в список
users, чтобы предоставить им доступ к системе голосования. -
Если запрос отклонен, он остается в localStorage для未来的ного использования, что позволяет администратору следить за всеми решениями.
3. создание и управление опросами
Админ-страница позволяла создавать динамические опросы, где админ мог добавлять неограниченное количество вариантов голосования. Данные опросов сохранялись в localStorage и показывались пользователям после входа в систему и подтверждения админом.
📝 Создание опросов:
-
Опросы создаются админом с помощью формы, которая позволяет добавлять динамические варианты. Форма позволяет админу добавлять как много вариантов, сколько нужно для каждого опроса.
-
Пользователи могут затем просмотреть эти опросы и проголосовать.
4. Обработка голосования и результатов
Система голосования была разработана для того, чтобы быть простой: как только пользователь входил в систему и был подтвержден админом, он мог увидеть активные опросы и проголосовать.
🗳️ Задачи при голосовании:
-
Предотвращение дублирования голосов: Я должен был убедиться, что пользователи могут голосовать только один раз за один опрос.
-
Сохранение результатов: Голоса сохранялись в localStorage, связанные с конкретным пользователем и опросом.
✅Решение:
Каждая голосовая кампания была связана с идентификатором пользователя и конкретным опросом. Это обеспечило, что каждый пользователь мог проголосовать только один раз, а результаты сохранялись безопасно в localStorage.
5. Отображение статуса регистрации пользователя
Я хотел убедиться, что пользователи знают, была ли их регистрация одобрена, отклонена или еще ожидает проверки. Для этого я добавил страницу “Проверить статус”, где пользователи могли ввести свой идентификатор регистрации, чтобы проверить свой статус.
📋 Ситуации статусов:
- Сохранение статуса пользователя: Трудно было следить за каждым запросом регистрации и связывать его с correct status.
✅Решение:
Каждый запрос регистрации был назван уникальным идентификатором, и пользователи могли ввести этот идентификатор, чтобы узнать, была ли их просьба одобрена, отклонена или еще ожидает проверки. Эта простая страница статусов улучшила пользовательский опыт, давая реально-временные ответы на их запросы.
🔑 Ключевые проблемы и как я их решил
1. Управление запросами пользователей и админской активации
Вначале я не был уверен, как структурировать систему активации. после нескольких экспериментов, я решил использовать localStorage для управления процессом активации пользователей. Это сделало систему проще и позволило админу быстро обновлять данные.
2. Обработка динамических опросов
Позволять админу добавлять многочисленные варианты голосования динамически было сложным, но и при этом вознаграждающим. Я реализовал это тем, что позволил админу создавать опросы с нужным количеством вариантов, которые затем сохранялись в localStorage в виде массивов.
3. Хранение голосов и предотвращение дублирования голосов
Одной из сложных частей было обеспечение того, что пользователь может голосовать только один раз на один опрос. Я решил эту проблему, связав голоса с идентификатором пользователя и идентификатором опроса, чтобы каждый пользователь мог проголосовать только один раз.
💡 What I Learned
Строительство этой системы голосования научило меня многому о обработке пользовательских данных, создании workflow-ов аккредитации и управлении динамическим содержимым с использованием localStorage. Вот некоторые из ключевых выводов:
-
Управление учетными записями пользователей: Я научился, как управлять учетными записями пользователей, включая обработку ожидающих утверждения регистраций и аккредитаций.
-
localStorage для сохранения данных: Это был мой первый опыт широкого использования localStorage в проекте, и это был отличный учебный опыт. Он работает хорошо для небольших проектов, но может быть заменен базой данных, такой как MongoDB, для масштабирования.
-
Создание админ-панели: Create an admin page to manage users and polls gave me insight into the complexities of administrative control in a system.
🌟 Будущие улучшения
Хотя текущая версия платформы отлично работает для небольших масштабов голосования, я рассматриваю возможность миграции на более надежное решение в будущем:
-
Интеграция MongoDB: Для более крупных проектов миграция на MongoDB предложит лучшую сохранность данных и масштабируемость.
-
Реализация Бэкенда: Использование Express.js для бэкенда позволит более безопасную обработку данных и более легкое управление пользовательскими аккаунтами и опросами.
На данный момент я доволен тем, как вышла платформа. Она простая, безопасная и функциональная для данного проекта.
Посмотрите на живую платформу: Онлайн Платформа для Голосования
Исследуйте код на GitHub: Репозиторий Системы Голосования
Вкратце 🥜
Создание этой онлайн-платформы для голосования было фантастическим опытом обучения. От обработки регистрации пользователей и административных одобрений до создания динамических опросов и обеспечения безопасности данных, каждый вызов помог мне расти как разработчику. Я с нетерпением жду применения этих знаний в будущих проектах, и я надеюсь, что этот пост вдохновит вас на создание чего-то похожего!
Спасибо за чтение, и не стесняйтесь делиться своими мыслями или вопросами ниже! 😄