商品購入機能の実装

[takadaisuki]

What

PAY.JPのAPIを利用して商品購入機能を作成した。

Why

外部のAPIを使うことによって、セキュリティをより強固なものにするため。

実装概要

商品をクレジットカード決済で購入する機能を実装から単体テストまで行い、コードレビューを依頼する。LGTMが出たら完了とする。

実装方針

• ブランチを作成する
• API導入
• クレジットカード決済での購入機能を実装する
• モデルの単体テストコードを書く。
• プルリクエストを作成してメンターにレビューを依頼する。
• LGTMをもらい、マージをする。
• デプロイをする。

実装条件

• [x] 必要な情報を適切に入力して「購入」ボタンを押すと、商品の購入ができること。
• [x] 商品出品時に登録した情報のうち、「商品名・商品画像・価格・配送料の負担」の4つの情報が、見本アプリと同様の形で表示されること。
• [x] ログイン状態の場合は、自身が出品していない販売中商品の商品購入ページに遷移できること。
• [x] ログイン状態の場合でも、自身が出品していない売却済み商品の商品購入ページへ遷移しようとすると、トップページに遷移すること。
• [x] ログイン状態の場合でも、自身が出品した商品の商品購入ページに遷移しようとすると、商品の販売状況に関わらずトップページに遷移すること。
• [x] ログアウト状態の場合は、商品購入ページに遷移しようとすると、商品の販売状況に関わらずログインページに遷移すること。
• [x] 購入が完了したら、トップページに遷移すること。
• [x] エラーハンドリングができること（入力に問題がある状態で「購入」ボタンが押された場合、情報は受け入れられず、購入ページでエラーメッセージが表示されること）。
• [x] エラーハンドリングによって購入ページに戻った場合でも、入力済みの項目（カード番号・有効期限・セキュリティコード以外）は消えないこと。
• [x] エラーハンドリングの際、重複したエラーメッセージが表示されないこと。

クレジットカード情報

• [x] クレジットカード情報は必須であり、右記のPAY.JPテストカードの情報で決済ができること（カード番号：4242424242424242　有効期限：今日より未来の日付　セキュリティコード：123）。
• [x] クレジットカードの情報は購入の都度入力させること。

配送先情報

• [x] 配送先の住所情報も購入の都度入力させること。
• [x] 郵便番号が必須であること。
• [x] 郵便番号は、「3桁ハイフン4桁」の半角文字列のみ保存可能なこと（良い例：123-4567　良くない例：1234567）。
• [x] 都道府県が必須であること。
• [x] 市区町村が必須であること。
• [x] 番地が必須であること。
• [x] 建物名は任意であること。
• [x] 電話番号が必須であること。
• [x] 電話番号は、10桁以上11桁以内の半角数値のみ保存可能なこと（良い例：09012345678　良くない例：090-1234-5678）。

他機能関連

• [x] 売却済みの商品は、画像上に「sold out」の文字が表示されるようになっていること（商品一覧機能）。
• [x] 売却済みの商品は、画像上に「sold out」の文字が表示されるようになっていること（商品詳細機能）。
• [x] ログイン状態の場合でも、売却済みの商品には、「商品の編集」「削除」「購入画面に進む」ボタンが表示されないこと（商品詳細機能）。
• [x] ログイン状態の場合でも、自身が出品した売却済み商品の商品情報編集ページへ遷移しようとすると、トップページに遷移すること（商品情報編集機能）。

補足情報

• 配布されたビューファイルに最初からコメントアウトで指示などが記されている場合があるが、それらは機能を実装できた時点で削除すること。
• 購入機能を実装する際は、「Formオブジェクトを用いた購入情報の登録機能」と「PAY.JPを用いたクレジットカードでの決済機能」という2つのタスクに分けて実装すると良い。
• 一度に複数のテーブルへ情報を保存する際は、以下のカリキュラムを参考にして、Formオブジェクトを使用すること。 最終課題補足カリキュラム Lesson1 「1つのフォームから複数のテーブルに情報を保存するアプリを作成しよう」
• クレジットカードでの決済機能は、以下のカリキュラムを参考にして、PAY.JPを使用すること。 最終課題補足カリキュラム Lesson1 「クレジット決済機能ミニアプリを作成しよう」
• 「ログイン状態の場合でも、自身が出品していない売却済み商品の商品購入ページへ遷移しようとすると、トップページに遷移すること」「ログイン状態の場合でも、自身が出品した商品の商品購入ページに遷移しようとすると、商品の販売状況に関わらずトップページに遷移すること」「ログアウト状態の場合は、商品購入ページに遷移しようとすると、商品の販売状況に関わらずログインページに遷移すること」という機能に関しては、URLを直接入力して確認すること。

注意事項

• 機能毎に、commitとpushを行うこと。
• 秘密鍵などは、値の見える状態でGitHubにpushしないこと。環境変数化してからcommitすること。
• このタスクに関係のないアクションやメソッドなどの記述は行わない（プルリクエストにて、適切な差分が表示されない原因となるため）。
• メンターにコードレビューを依頼すること。
• 機能の様子はGyazo GIFを用いて、テストコードが通っている様子はGyazoを用いて撮影し、それぞれのリンクをプルリクエストへ添付すること。
• Gyazoのリンクを添付する際は、何を撮影したGyazoのリンクか分かるように、リンクの前に説明を記載すること。
• コードレビューを依頼する前に、Rubocopを実行すること。
• コードレビューを依頼する際は、テストコードを書き終わってから依頼すること（テストコードの含まれていないレビューは対応しません。実際の開発現場でも同様の対応であるためです）。
• プルリクエストには、「What」と「Why」を記述すること（「What」と「Why」の記載されていないレビューは対応しません。実際の開発現場でも同様の対応であるためです）。
• LGTMが出るまでマージしないこと。
• LGTMが出る前に他の実装へ着手することは、推奨しない（Gitにおける複雑なコンフリクト等を引き起こす可能性があるためです）。

プルリクエストへ記載するgyazo

• [x] 必要な情報を適切に入力して「購入」ボタンを押すと、商品の購入ができる動画
• https://gyazo.com/bfc557125897d1962b479b305d8ad4e0
• [x] 入力に問題がある状態で「購入」ボタンが押された場合、情報は受け入れられず、購入ページでエラーメッセージが表示される動画
• https://gyazo.com/50689d8d3d346ead17be9370ef51e941
• [x] ログイン状態の場合でも、URLを直接入力して自身が出品していない売却済み商品の商品購入ページへ遷移しようとすると、トップページに遷移する動画
• https://gyazo.com/15f067c1cc2027e2e751467002b951b7
• [x] ログイン状態の場合でも、URLを直接入力して自身が出品した商品の商品購入ページに遷移しようとすると、商品の販売状況に関わらずトップページに遷移する動画
• https://gyazo.com/81f6bd693c67fd2cbc0536d13b19e5b9
• [x] ログアウト状態の場合は、URLを直接入力して商品購入ページに遷移しようとすると、商品の販売状況に関わらずログインページに遷移する動画
• https://gyazo.com/e0ecfe2a9b709da774f10a7ec0144deb
• [x] 売却済みの商品は、画像上に「sold out」の文字が表示される動画（商品一覧機能実装時に未実装であった場合）
• https://gyazo.com/7bbf1df8b3cfde84af4effa2b51df701
• [x] 売却済みの商品は、画像上に「sold out」の文字が表示される動画（商品詳細機能実装時に未実装であった場合）
• https://gyazo.com/3298acd33667fb4709d47f0b8059761c
• [x] ログイン状態の場合でも、売却済みの商品には、「商品の編集」「削除」「購入画面に進む」ボタンが表示されない動画（商品詳細機能実装時に未実装であった場合）
• https://gyazo.com/5ef94bd3b87e1d1e1c8e5c3fdea3d0e1
• [x] ログイン状態の場合でも、URLを直接入力して自身が出品した売却済み商品の商品情報編集ページへ遷移しようとすると、トップページに遷移する動画（商品情報編集機能実装時に未実装であった場合）
• https://gyazo.com/225dde60d94f4c3a00a56bf97fa14b02
• [x] テスト結果の画像
• https://gyazo.com/e8428d52ac63e22d3ca00e6f0617f17a

参考カリキュラム

• フォームオブジェクトの実装 発展カリキュラム Lesson2 「実践的なModelを学ぼう」 最終課題補足カリキュラム Lesson1 「1つのフォームから複数のテーブルに情報を保存するアプリを作成しよう」

• PAY.JPの使用方法 最終課題補足カリキュラム Lesson1 「クレジット決済機能ミニアプリを作成しよう」

• JSによるデータの取り扱い 発展カリキュラム Lesson4 「Ajaxでコントローラーにリクエストを送信しよう」

• フォームオブジェクトのRSpec 最終課題補足カリキュラム Lesson1 「クレジット決済機能ミニアプリを作成しよう」 "

[takadaisuki]

Formオブジェクトの実装及びテストコードの実装が完了しました。 PRの動画及び画像は最新の状態に更新しました。 ご確認ください。

[takadaisuki]

前回のレビュー時に、commitしていないものがありました。申し訳ございません。 改めて修正した挙動の確認に関しては以下のリンクからお願いいたします。 また、テスト結果の画像についてはPRを最新の状態に更新しました。ご確認ください。

・出品者が詳細画面を開いた時は、「購入画面に進む」ボタンは表示させない https://gyazo.com/aa4d8fd69b7e44f6f2c377703b1dba2c

・売り切れの場合は、編集・削除・購入ボタンがいずれも表示されない https://gyazo.com/beac08714af8bb21aeb8e13b857755ce

[takadaisuki]

テスト結果の画像についてはPRを最新の状態に更新しました。ご確認ください。