オンライン食料品店は、Webプログラミングプロジェクト向けのeコマースベースのWebアプリケーションです。私たちは、ユーザーが食料品アイテムに関する必要な情報を検索して見つけることができるサンプルを開発し、製品を購入するためにチェックアウトに進むことができます。ユーザーはアカウントを作成し、個人情報を更新し、過去のアクティビティ、注文、トランザクション、およびカートアイテムを確認できます。
https://github.com/parasgarg/online-grocery-store/
https://drive.google.com/file/d/0b79vfv-wa7ezme9wvmsxtepzmjg/view?usp = sharing
フロントエンド言語:HTML、CSS、およびクライアント側のJavaScriptフロントエンドフレームワーク:ブートストラップフロントエンドライブラリ:jQueryバックエンド:サーバー側のJavaScriptバックエンドフレームワーク:NodeJSおよびNPMデータベース:MongoDB他のライブラリ:TOTA11YおよびHTML検証ターツール:MS視覚コード、MS視覚コード、MS視覚コード、MS
"bcrypt": "^1.0.2"、 "body-parser": "^1.17.1"、 "connect-flash": "^0.1.1"、 "cookie-parser": "^1.4.3"、 "cookie-session": "^2.0.0-beta.1"、 "、"^4.15.2 "、"^4.15.2 "、"^4.15.2 "、 "Express-Passport": "^0.1.0"、 "Express-Passport-Logout": "^0.1.0"、 "express-session": "^1.15.2"、 "handlebars-intl": "^1.1.2"、 "handlebars-paginate": "^0.1.0"、 "mongodb": "^2.26": ""^2.26 ":" "^2.26": "^2.26"^26 "^26"^26 " "^1.0.0"、 "PATH": "^0.12.7"、 "randomstring": "^1.1.5"、 "uuid": "^3.0.1"、 "validator": "^7.0.0"、 "xss": "^0.3.3"
システムと環境のインストールと構成後。手順に従ってプロジェクトを実行する -
ユーザーSignup/Signin:ユーザーはあらゆる種類の購入を行うためにアカウントを作成する必要がありますが、プロジェクトやその他の検索をチェックするには、ユーザーのログインを必要としません。最初のユーザーを登録してログインする必要があります。アカウントを作成するには、ユーザーが[サインアップ]ボタンをクリックする必要があり、すべての登録を作成するためのアカウントフォーム要件を作成します。あなたがログインしたい場合、彼はサインインして私たちと一緒に設定された資格情報を提供する必要があります。ユーザーがパスワードを忘れた場合、新しいパスワードを再生するモジュールを提供します。忘れたモジュールのリンクは、サインインで見つけることができます。
ユーザーダッシュボード:ユーザー情報やその他の設定を変更するには、ダッシュボードパネルでモジュールを開発しましたが、ユーザーが自分の名前をクリックすると、ページの右上隅にこれらすべてのオプションを見つけることもできます。
2.1アカウント設定:このモジュールは、ユーザーのプロファイル情報とパスワード情報を変更するパネルを提供します。 2.2支払い設定:このモジュールは、ユーザーがカード情報を簡単に支払いおよび注文する機能を保存するのに役立ちます。 2.3ウォレット設定:このモジュールでは、ユーザーはカード情報を使用せずに現金を追加したり、購入したりすることで、電子キャッシュを維持できます。ユーザーは保存したカードから現金を追加したり、保存カード以外に使用できますが、ユーザーは1つのトランザクションで最大1000ドルを追加でき、10000ドル全体が許可されます。同時に、ユーザーは同じページでウォレットのアクティビティと詳細を確認できます。 2.4注文履歴:この機能は、ユーザーが過去のすべての購入や、購入日、購入した製品、支払い情報などのその他の詳細を確認するのに役立ちます。 2.5ニュースレター:ユーザーは、NewElettersを管理および購読または登録解除できます。 2.6ログアウト:ユーザーは、アカウントの悪用を回避するためにログアウトに成功できます。
ユーザーカート:ユーザーはアイテムを追加したり、アイテムを削除したり、各アイテムのQuatityを編集したりできます(製品ごとに最大5つの量が許可されます)。ここで、ユーザーは総支払い情報を確認し、チェックアウトに進むことができます。
Seach製品:ユーザーは、ページの上部にある検索バーに製品、ID、名前、ブランド、およびカテゴリを入力することでSeachを使用できます。
フィルタリングされた検索:ユーザーは、価格帯とカテゴリに従って検索を改善できます。この機能は、検索結果で利用できます。
カテゴリ検索:ユーザーは、ロゴのすぐ横にあるページの左上隅にあるカテゴリを選択することにより、カテゴリに従って製品を直接検索できます。
製品情報:ユーザーは、各製品のサムネイルの見出しまたは特定のビューボタンをクリックして製品情報を確認し、製品の詳細を発見し、アイテムの表示画像の下のカートボタンをクリックしてカートに追加できます。
その他:ユーザーが支払いモード、つまり保存したカード、新しいカード、ウォレットを選択できる偽のゲートウェイを実装しました。ユーザーは、リストされているモードのいずれかで金額を支払うことができ、またその支払い情報を下部にレビューしてから、支払いと最終ステップに進むことができます。これは、確認メッセージが表示され、トランザクションを生成するか、それを注文することです(ユーザーダッシュボードでも利用できます)。