ホーム>プログラミング関連>その他のソースコード
ダウンロード

アマゾナ EC ウェブサイト

アマゾナ

React & Node チュートリアル - 9 時間で完全な e コマース [2021]

アマゾンのような完全に機能する電子商取引 Web サイトを構築するための私の React と Node チュートリアルへようこそ。コード エディターを開き、MERN スタック (MongoDB、ExpressJS、React、Node.JS) を使用して電子商取引 Web サイトを構築するための今後数時間のフォローをしてください。

デモウェブサイト

  • Heroku : https://react-amazona.herokuapp.com

  • Heroku ミラー: https://react-amazona-mirror.herokuapp.com

あなたは学びます

  • HTML5 および CSS3: セマンティック要素、CSS グリッド、フレックスボックス

  • React: コンポーネント、プロップ、イベント、フック、ルーター、Axios

  • Redux: ストア、リデューサー、アクション

  • ノードとエクスプレス: Web API、ボディパーサー、ファイルアップロード、JWT

  • MongoDB: Mongoose、アグリゲーション

  • 開発: ESLint、Babel、Git、Github、

  • 導入: Heroku

  • React と Node のチュートリアルを見る

ローカルで実行

1. リポジトリのクローンを作成する

$ git clone [email protected]:basir/amazona.git
$ cd amazona

2.MongoDBのセットアップ

  • ローカル MongoDB

    • ここからインストールしてください

    • ルートフォルダーに.envファイルを作成します

    • MONGODB_URL=mongodb://localhost/amazona を設定します。

  • アトラス クラウド MongoDB

    • https://cloud.mongodb.com でデータベースを作成します

    • ルートフォルダーに.envファイルを作成します

    • MONGODB_URL=mongodb+srv://your-db-connection を設定します

3. バックエンドを実行する

$ npm install
$ npm start

4. フロントエンドを実行する

# open new terminal
$ cd frontend
$ npm install
$ npm start

5. シードユーザーと製品

  • これをクロムで実行します: http://localhost:5000/api/users/seed

  • 管理者のメールアドレスとパスワードが返されます

  • これをクロムで実行します: http://localhost:5000/api/products/seed

  • 6つのサンプル製品を作成します

6. 管理者ログイン

  • http://localhost:3000/signin を実行します。

  • 管理者のメールアドレスとパスワードを入力し、「サインイン」をクリックします

サポート

  • Q/A: https://webacademy.pro/amazona

  • 講師に連絡する: Basir

レッスン

  1. このコースの紹介

    1. あなたが何を構築するのか

    2. 何を学ぶのか

    3. 観客は誰ですか

  2. ツールのインストール

    1. コードエディタ

    2. ウェブブラウザ

    3. VS コード拡張

  3. ウェブサイトのテンプレート

    1. アマゾナフォルダを作成する

    2. テンプレートフォルダーを作成する

    3. インデックス.htmlを作成する

    4. デフォルトのHTMLコードを追加する

    5. style.css へのリンク

    6. ヘッダー、メイン、フッターを作成する

    7. スタイル要素

  4. ディスプレイ製品

    1. 製品ディビジョンを作成する

    2. 製品属性を追加する

    3. リンク、画像、名前、価格を追加

  5. React アプリを作成する

    1. npx create-react-app フロントエンド

    2. npm 開始

    3. 使用されていないファイルを削除する

    4. Index.html コンテンツを App.js にコピーする

    5. style.cssの内容をindex.cssにコピーします

    6. クラスを className に置き換えます

  6. Github でコードを共有する

    1. gitリポジトリを初期化する

    2. 変更をコミットする

    3. githubアカウントを作成する

    4. github にリポジトリを作成する

    5. ローカル リポジトリを github リポジトリに接続する

    6. 変更をgithubにプッシュする

  7. 評価と製品コンポーネントの作成

    1. コンポーネント/Rating.js を作成する

    2. 分割評価を作成する

    3. スタイル分割評価、スパン、および最後のスパン

    4. 製品コンポーネントの作成

    5. 評価コンポーネントを使用する

  8. 製品のビルド画面

    1. 反応ルーターダムをインストールする

    2. ホーム画面にBrowserRouterとRouteを使用する

    3. ホームスクリーン.jsを作成する

    4. そこに製品リストコードを追加します

    5. ProductScreen.js を作成する

    6. 製品詳細からApp.jsに新しいルートを追加

    7. 製品画像、情報、アクションの 3 つの列を作成します

  9. Node.JSサーバーの作成

    1. ルートフォルダーでnpm initを実行します

    2. package.json セットの種類を更新します: モジュール

    3. インポートに .js を追加する

    4. npm インストールエクスプレス

    5. サーバー.jsを作成する

    6. 開始コマンドをノード backend/server.js として追加

    7. 急行が必要

    8. バックエンドのルートの作成/戻りが準備できました。

    9. products.js をフロントエンドからバックエンドに移動する

    10. /api/products のルートを作成する

    11. 返品商品

    12. npm startを実行します

  10. バックエンドから製品をロードする

    1. HomeScreen.jsを編集する

    2. 製品、読み込み、エラーを定義します。

    3. useEffect を作成する

    4. async fetchData を定義して呼び出す

    5. axiosをインストールする

    6. /api/product からデータを取得します

    7. リストに表示します

    8. 読み込みコンポーネントを作成する

    9. メッセージボックスコンポーネントを作成する

    10. ホーム画面で使用する

  11. コードリンティング用に ESlint をインストールする

    1. VSCode eslint 拡張機能をインストールする

    2. npm install -D eslint

    3. ./node_modules/.bin/eslint --init を実行します。

    4. ./frontend/.envを作成する

    5. SKIP_PREFLIGHT_CHECK=true を追加

  12. Reduxをホーム画面に追加する

    1. npm install redux 反応-redux

    2. store.jsを作成する

    3. initState= {製品:[]}

    4. Reducer = (状態, アクション) => スイッチ LOAD_PRODUCTS: {products: action.payload}

    5. デフォルトの createStore(reducer, initState) をエクスポートします

    6. HomeScreen.js を編集する

    7. shopName = useSelector(state=>state.products)

    8. const ディスパッチ = useDispatch()

    9. useEffect(()=>dispatch({タイプ: LOAD_PRODUCTS、ペイロード: データ})

    10. ストアをindex.jsに追加

  13. Reduxを製品画面に追加

    1. 製品詳細の定数、アクション、リデューサーを作成する

    2. store.jsにリデューサを追加

    3. ProductScreen.js でアクションを使用する

    4. /api/product/:id をバックエンド API に追加

  14. ハンドル「カートに追加」ボタン

    1. ProductScreen.js でカートに追加を処理する

    2. CartScreen.js を作成する

  15. カートに追加アクションを実装する

    1. addToCart 定数、アクション、リデューサーを作成する

    2. store.jsにリデューサを追加

    3. CartScreen.js でアクションを使用する

    4. chartItems.length をレンダリングする

  16. ビルドカート画面

    1. カート項目とカートアクションの 2 つの列を作成します

    2. カートアイテムの長さ === 0 ?カートは空です

    3. 商品画像、名前、数量、価格を表示

    4. 「チェックアウトに進む」ボタン

    5. カートから削除アクションを実装する

  17. カートから削除アクションを実装する

    1. RemoveFromCart 定数、アクション、リデューサーを作成する

    2. store.jsにリデューサを追加

    3. CartScreen.js でアクションを使用する

  18. MongoDB でサンプル ユーザーを作成する

    1. npmインストールマングース

    2. mongodbに接続する

    3. config.jsを作成する

    4. npm インストール dotenv

    5. MONGODB_URL をエクスポート

    6. モデル/userModel.js を作成する

    7. userSchema と userModel を作成する

    8. ユーザールートを作成する

    9. シードサンプルデータ

  19. MongoDB でサンプル製品を作成する

    1. モデル/productModel.js を作成する

    2. productSchema と productModel を作成する

    3. 製品ルートの作成

    4. シードサンプルデータ

  20. サインイン バックエンドの作成

    1. /signin API を作成する

    2. メールアドレスとパスワードを確認する

    3. トークンを生成する

    4. JSON Webトークンをインストールする

    5. dotenv をインストールする

    6. トークンとデータを返す

    7. ポストマンを使ってテストする

  21. サインイン画面をデザインする

    1. サインイン画面の作成

    2. 電子メールとパスワードのフィールドをレンダリングする

    3. サインイン定数、アクション、リデューサーを作成する

    4. ユーザーログインに基づいてヘッダーを更新

  22. サインインアクションの実装

    1. サインイン定数、アクション、リデューサーを作成する

    2. store.jsにリデューサを追加

    3. SigninScreen.js でアクションを使用する

  23. 登録画面作成

    1. /api/users/register の API を作成する

    2. 新しいユーザーをデータベースに挿入する

    3. ユーザー情報とトークンを返す

    4. 登録画面の作成

    5. フィールドの追加

    6. スタイルフィールド

    7. App.jsに画面を追加

    8. レジスターアクションとリデューサーを作成する

    9. 検証をチェックしてユーザーを作成する

  24. 配送画面作成

    1. CheckoutSteps.js コンポーネントを作成する

    2. 配送フィールドを作成する

    3. 配送定数、アクション、リデューサーを実装する

  25. 決済画面の作成

    1. 支払いフィールドを作成する

    2. 配送定数、アクション、リデューサーを実装する

  26. デザイン発注画面

    1. 設計注文の概要フィールド

    2. デザインオーダーアクション

  27. 発注APIの作成

    1. createOrder API

    2. オーダーモデルの作成

    3. オーダールーターの作成

    4. ポストオーダールートを作成する

  28. PlaceOrder アクションの実装

    1. 注文ボタンのクリックを処理します

    2. 発注定数、アクション、リデューサを作成する

  29. 注文作成画面

    1. /api/orders/:id のオーダー API をビルドする

    2. OrderScreen.jsを作成する

    3. useEffect のディスパッチ注文詳細アクション

    4. useSelector を使用してデータをロードする

    5. 注文画面などのデータを表示する

    6. 注文詳細定数、アクション、リデューサーを作成します

  30. PayPalボタンを追加

    1. PayPalからクライアントIDを取得する

    2. .env ファイルに設定します

    3. /api/paypal/clientId フォームからルートを作成します

    4. api.jsでgetPaypalClientIDを作成する

    5. OrderScreen.js に PayPal チェックアウト スクリプトを追加

    6. ペイパルボタンを表示

  31. 注文支払いの実装

    1. 支払い後に注文を更新する

    2. api.jsでpayOrderを作成する

    3. orderRouter.js で /:id/pay のルートを作成する

    4. 支払い命令後に再レンダリングする

  32. 注文履歴の表示

    1. 顧客注文 API を作成する

    2. getMyOrders の API を作成する

    3. プロフィール画面に注文を表示する

    4. スタイルの注文

  33. ユーザープロフィールを表示する

    1. ユーザー詳細 API を作成する

    2. ユーザー情報を表示する

  34. ユーザープロフィールを更新する

    1. ユーザー更新 API を作成する

    2. ユーザー情報を更新する

  35. 管理者ビューの作成

    1. 管理者メニューの作成

    2. バックエンドで管理ミドルウェアを作成する

    3. フロントエンドで管理ルートを作成する

  36. 製品一覧

    1. 商品一覧作成画面

    2. 減速機をストアに追加

    3. 画面に商品を映す

  37. 製品の作成

    1. 製品APIを構築する

    2. build 「製品の作成」ボタン

    3. プロダクトを定義する 定数、アクション、リデューサーを作成する

    4. 商品一覧画面のアクションを使用する

  38. ビルドプロダクト編集画面

    1. 編集画面を作成する

    2. 状態を定義する

    3. フィールドを作成する

    4. 製品の詳細をロードする

    5. ルートに追加する

  39. 製品を更新する

    1. 更新APIを定義する

    2. 製品更新定数、アクション、リデューサを定義する

    3. 商品編集画面でアクションを使用する

  40. 製品画像をアップロードする

    1. npm インストールマルチター

    2. アップロードルーターを定義する

    3. アップロードフォルダーを作成する

    4. フロントエンドをハンドルします

  41. 製品の削除

    1. バックエンドで削除 API を作成する

    2. 作成、削除定数、アクション、リデューサー

    3. 商品一覧画面で使用します

  42. リストの注文

    1. 注文リストAPIを作成する

    2. オーダー一覧画面作成

    3. 減速機をストアに追加

    4. 画面に商品を映す

  43. 注文の削除 2. 注文削除アクションとリデューサーを作成します。 3. 注文削除アクションを注文リストに追加します。

  44. 注文の配達

    1. 配信オーダーの定数、アクション、リデューサーを作成する

    2. 注文詳細画面に注文配信アクションを追加

  45. Heroku にパブリッシュ

    1. gitリポジトリを作成する

    2. Heroku アカウントを作成する

    3. Heroku CLI をインストールする

    4. Heroku ログイン

    5. Heroku アプリ:アマゾナの作成

    6. ビルドスクリプトの package.json を編集する

    7. プロファイルの作成

    8. mongodb アトラス データベースを作成する

    9. heroku 環境変数でデータベース接続を設定する

    10. コミットしてプッシュする

  46. ユーザーをリストする

    1. リストユーザー用のAPIを構築する

    2. ユーザーリスト作成画面

    3. 注文詳細定数、アクション、リデューサーを作成します

  47. ユーザーの削除

    1. ユーザーを削除するための API を構築する

    2. 注文詳細定数、アクション、リデューサーを作成します

    3. UserListScreen でアクションを使用する

  48. ユーザーの編集

    1. 更新ユーザー向けの API を構築する

    2. 編集画面UIの作成

  49. 販売者ビューの実装

    1. 売り手メニューを追加

    2. 販売者ルートを作成する

    3. 売り手の製品をリストする

    4. 売り手の注文をリストアップする

    5. 販売者を商品リストと詳細画面に追加

  50. 販売者ページの作成

    1. 販売者ページを作成する

    2. 製品コンポーネントと製品画面を更新する

    3. 製品ルートを更新する

  51. トップセラーカルーセルを追加

    1. 反応カルーセルをインストールする

    2. トップセラー向けのアクションとリデューサーを実装する

    3. ホーム画面のデータで反応カルーセルを使用する

  52. 1 人の販売者から商品を強制的に注文する

    1. 注文時に 1 人の販売者から購入するように addToCart アクションを更新します

  53. 検索ボックスと検索画面を作成する

    1. Header.jsで検索バーを作成する

    2. スタイルを追加する

    3. 送信フォームを処理する

    4. 解析URLを編集してクエリ文字列を取得します

    5. 名前で検索できるように製品リスト API を更新する

  54. 詳細検索フィルターの追加 1. カテゴリでフィルター 2. 価格帯でフィルター 3. 平均評価でフィルター

  55. 詳細検索を完了します 1. 価格でフィルターします 2. 評価でフィルターします 3. 価格、評価などで並べ替えます

  56. 製品の評価とレビュー 1. 製品の評価 2. アクションとリデューサーの作成

  57. Google マップ上の住所を選択 1. Google マップの資格情報を作成します 2. Google API キーを使用して .env ファイルを更新します 3. Google API をフロントエンドに送信するための API を作成します 4. マップ画面を作成します 5. Google API を取得します 6. getUserLocation 7. @react- をインストールしますgoogle-maps/api 8. 配送画面で使用する 9. チェックアウト画面に地図を適用する

  58. バグ修正: ローカルで問題なく実行可能

    1. data.js に販売者情報を追加します

    2. 販売者としての管理者情報を含むシード製品データ

    3. ユーザーの更新時に isSeller と isAdmin を修正

    4. ユーザーの詳細から認証を削除する

  59. ページネーションの実装

    1. バックエンドの製品ルーターにページネーションを追加する

    2. フロントエンドのアクションとリデューサーにページ番号を適用する

    3. 検索画面にページ番号を表示する

  60. mailgun による電子メール注文の受信 1. mailgun アカウントの作成 2. mailgun にドメインを追加して検証 3. mailgun-js をインストール 4. env ファイルに API キーを設定 5. orderRouter で支払い注文を変更 6. 電子メールを送信

  61. ダッシュボード作成画面

    1. バックエンドでチャートデータを作成する

    2. チャート作成画面

  62. 顧客とのライブチャットの実装

    1. ソケット IO を使用してバックエンドを作成する

    2. チャットボックスコンポーネントを作成する

    3. サポート画面を作成する

  63. React 17、Router 6、Mongoose 6 へのアップグレード

    1. バックエンド

    2. すべてのパッケージをアンインストールしてインストールします

    3. mongoose connect のオプションを削除する

    4. メールガンを try catch の順序でラップします。

    5. フロントエンド

    6. すべてのパッケージをアンインストールしてインストールします

    7. 検索ボックスから削除する

    8. すべてを包み込む

    9. <Route element={}> に置き換えます

    10. <Route element={ }/> に置き換えます

    11. 交換してください

    12. PrivateRoute、AdminRoute、および SellerRoute を更新する

    13. Push() を useNavigate の navigate() に置き換えます。

    14. props.match.params.id を const params = useParams(); に置き換えます。

    15. props.location.search を const { search } = useLocation(); に置き換えます。および URLSearchParams

    16. props.match.path を const {pathname} = useLocation(); に置き換えます。

    17. ChatBox、SupportScreen の useEffect に userInfo を配置します

拡大する
追加情報
関連アプリ
おすすめ
関連情報 すべて