オンライン投票プラットフォームの構築：困難、解決策、学習する关键

みなさん、こんにちは！👋 最近、大学のミニプロジェクトで、シンプルで安全なオンライン投票プラットフォームを作成しました。その方法を皆さんと共有したいと思います。ユーザー登録の管理から管理者承認システムの設定まで、このプロジェクトを通じて、JavaScriptとlocalStorageを使用した機能的なWebアプリケーションの構築について多くのことを学びました。このブログ記事では、プラットフォームの開発過程、直面した課題、そしてそれらをどのように克服したかについてご紹介します。

🎯 プロジェクト概要：何を作ろうとしたか

目標は、以下の機能を持つシンプルな投票プラットフォームを作成することでした：

ユーザー登録：投票者が自分の詳細情報を登録できるようにする。
投票：ユーザーが安全に投票できるようにする。
管理者コントロール：管理者が投票を管理し、ユーザー登録を承認/拒否し、投票プロセスを監督できるようにする。

最初は、MongoDBを使用したフルバックエンドの使用を検討しましたが、シンプルに保ちたかったので、このプロジェクトの初期バージョンではデータ管理にlocalStorageを使用しました。

🌟 主要機能：

ログインと登録ページ：ユーザーがアカウントを作成またはログインできる。
管理者承認: ユーザー登録には管理者の承認が必要で、承認されると投票することができます。
投票システム: 登録されたユーザーはアクティブな投票に投票できます。
管理者パネル: 管理者は投票を作成して管理し、ユーザーの要望を表示し、どのように投票することができるかを制御することができます。

🛠️ 開発プロセス: 私がプラットフォームを構築した方法

1. プロジェクトの設定

私はHTML、CSS、JavaScriptおよびlocalStorageを使用して、簡単なログインと登録システムを作成しました。管理者アカウントはハードコードされましたが、ユーザーは完全な名前、選挙機IDおよびパスワードを提供して登録することができました。しかし、すぐにどのようにも登録して投票することができることは、最善のアイデアではないと認識しました。

2. 登録に管理者承認の追加

プラットフォームをより安全にするために、私は管理者承認システムを導入しました。ユーザーが登録するたびに、彼らの要求がlocalStorageに格納され、「待ち受け」としてマークされます。管理者はそれらの要求を確認し、承認または否決することができます。

🚧 管理者承認に関する課題:

待機中のリクエストの追跡: 承認を待つユーザーがまだ投票できないようにしなければならない。
ユーザーの承認: 承認された後、ユーザーのデータは「待機中」リストから「登録済みユーザー」リストにlocalStorageに移動する必要があった。

✅ 解決策:

私は以下のような簡単なシステムを設定しました:

登録リクエストは特別なキー(accountRequests)に基づいてlocalStorageに保存されました。
管理者がユーザーを承認すると、彼らの詳細はusersリストに移動し、投票システムにアクセスを与えられました。
拒否された場合、リクエストはlocalStorageに保存され、将来の参照のために残されました。そのため、管理者はすべての決定を追跡できました。

3. 選挙の作成と管理

管理者ページでは、動的な投票を作成することができ、管理者が複数の投票オプションを追加することができました。投票のデータはlocalStorageに格納され、ユーザーがログインし、承認された後、表示されました。

📝 投票の作成:

投票は管理者によって作成され、動的な選択肢を許可するフォームで行われます。このフォームで管理者は、各投票に必要な数の選択肢を追加することができます。
それから、ユーザーはこれらの投票を表示し、投票を投じることができます。

4. 投票と結果の処理

投票システムは簡単に設計されています：ユーザーがログインし、管理者の承認を受けた後、アクティブな投票を見て、投票を投じることができます。

🗳️ 投票の挑戦:

重複投票の防止：私は、ユーザーが各投票にただ一回だけ投票できるようにする必要がありました。
結果の保存：投票はlocalStorageに保存され、特定のユーザーと投票に結合されました。

✅ 解決策:

すべての投票はユーザーIDと特定の投票に関連付けられており、これにより各ユーザーは一度だけ投票できるようにし、結果はlocalStorageに安全に保存されました。

5. ユーザー登録状況の表示

登録が承認されたか、拒否されたか、まだ待機中のかを用户提供することが重要でした。これを実現するために、“状態確認”ページを追加し、登録IDを入力して承認状態を確認することができました。

📋状態の課題:

ユーザー状態の保持:各登録リクエストを追跡し、正しい状態と関連付けることは困難でした。

✅解決策:

各登録リクエストに固有のIDを割り当て、このIDを入力すると、リクエストが承認されたか、拒否されたか、まだ待機中かを確認できます。この簡単な状態ページは、ユーザーのリクエストに対する実時間のフィードバックを提供して、ユーザーの体験を改善しました。

🔑キー課題と私が解決した方法

1. ユーザーのリクエストと管理者の承認の管理

最初心のとき、承認システムをどのように構築するかが分からなかった。試行錯誤を経て、localStorageを使用してユーザーの承認プロセスを管理することにし、システムを簡単にし、管理者が快速に更新できるようにしました。

2. 動的な投票の処理

管理者が動的に選択肢を追加することは困難であるが、奖赏的でした。これは管理者が必要な数の選択肢を持つ投票を作成することができるように実装し、それらはlocalStorage内の配列として保存されました。

3. 選挙の保存と重複選挙の防止

困ったことは、ユーザーが1つの投票にただ一回だけ投票できるようにすることでした。これは、選挙をユーザーIDと投票IDに紐付けることで解決しました。それにより、各ユーザーはただ一回投票できるようになりました。

💡 学んだこと

この投票プラットフォームの構築は、ユーザーデータの取り扱い、承認の workflow の作成、localStorage を使用した動的コンテンツの管理について多くを教えてくれました。以下は、いくつかの重要な学びの点です。

ユーザー管理: 予備登録や承認を処理する方法を学んだ。
localStorage を使用したデータ永続化: このプロジェクトで初めてlocalStorageを広く使用しました。それは小さなプロジェクトに適していますが、伸縮性のためにMongoDBのようなデータベースに置き換える必要があるかもしれません。
管理者パネルの構築: ユーザーと投票を管理する管理者ページを作成することで、システム内の管理控制の複雑さについて洞察を得ました。

🌟 将来の改善

現在のプラットフォームは小规模の投票にとって素晴らしい機能を提供していますが、将来はより健全な解決策に移行することを考えています:

MongoDBの統合: より大きなプロジェクトになると、MongoDBに移行することで、より良いデータ永続性とスケーラビリティを提供できます。
バックエンドの実装: Express.jsをバックエンドに使用することで、データの取り扱いをより安全に、ユーザーアカウントと投票の管理をより簡単にすることができます。

今のところ、プラットフォームの成果を満足しています。シンプルで、安全で、プロジェクトのスコープに适しています。

ライブプラットフォームをチェックする: オンライン投票プラットフォーム
GitHubでコードを探索する: 投票システムリポジトリ

簡単に言うと、🥜

このオンライン投票プラットフォームの開発は、素晴らしい学びの体験でした。ユーザー登録と管理者承認の処理から動的な投票の作成まで、データの安全を保証するために、それぞれの課題が私を開発者として成長させました。これらの学びを将来のプロジェクトに取り込むことに興奮しています。この投稿があなたに同様のものを作るインスピレーションを与えることを期待しています！

読んだありがとうございます。下にあるコメントや質問にお気軽にご参加ください！😄