フリマアプリ

◆アプリケーション情報◆

＜アプリケーション概要＞

フリーマーケットのアプリケーションを作成しました。
接続先情報
- http://18.178.70.175/
- ID/Pass
  - ID: admin
  - Pass: 2222
- テスト用アカウント等
  - 出品者用
    - メールアドレス: aaa@aaa
    - パスワード: test1111
  - 購入者用
    - メールアドレス名: bbb@bbb
    - パスワード: test2222
  - 購入用カード情報
    - 番号：4242424242424242
    - 期限：10/23
    - セキュリティコード：123
Githubリポジトリ
- https://github.com/0223ms/freemarket_sample_66a

【開発状況】

開発環境
- Ruby/Ruby on Rails/MySQL/Github/AWS/Visual Studio Code
開発期間と平均作業時間
- 開発期間：2ヶ月
- 1日あたりの平均作業時間：約5時間
開発体制
- 人数：2名
- アジャイル型開発（スクラム）
- Trelloによるタスク管理

【動作確認方法】

Chromeの最新版を利用してアクセスしてください。
- ただしデプロイ等で接続できないタイミングもございます。その際は少し時間をおいてから接続してください。
接続先およびログイン情報については、上記の通りです。
同時に複数の方がログインしている場合に、ログインできない可能性があります。
出品方法は以下の手順で確認できます。

　テストアカウントでログイン▶︎トップページから出品ボタン押下▶︎商品情報入力

　▶︎商品出品

購入方法は以下の手順で確認できます。

テストアカウントでログイン▶︎トップページから商品検索▶︎商品選択▶︎商品購入

確認後、ログアウト処理をお願いします。

【各担当箇所の詳細】

本番環境にデプロイ　
- 担当内容
  - EC2に紐付けたElastic IPから正常に動いているアプリケーションの動作が確認できる。
  - Capistranoを利用した自動デプロイができている。
  - Basic認証が実装されている。

トップページ（商品一覧ページ）
- 担当内容（バックエンド）
  - 画像素材が表示されている。画像がリンク切れなどになっていない。
  - 出品した商品の一覧表示ができている。かつ「画像/価格/商品名」の3つの情報について表示できている。
  - 売り切れたことがわかるようになっている。
  - ログアウト状態でも商品一覧ページを見ることができる。

ユーザー登録、ログイン機能の実装
- 担当内容（マークアップ・バックエンド）
  - deviseによるユーザー認証
  - sessionを用いたウィザード形式のビュー遷移
  - jQuery Validation Pluginを用いた動的なバリデーションチェック
  - マイページの動的変化
  - ログイン・ログアウトができる
  - エラーハンドリング

●　ユーザーマイページ

　 ○ 担当内容（マークアップ）

　　　　　　　　■　ログアウトページが存在する。

　　　　　　　　 ■　クレジットカード登録ページが存在する。

商品詳細機能の実装
- 担当内容（フロントエンド・バックエンド）
  - 出品者にしか商品の情報編集・削除のリンクが踏めないようになっている。
  - 出品者以外にしか商品購入のリンクが踏めないようになっている。
  - エラーハンドリング

商品情報編集
- 担当内容（フロントエンド・バックエンド）
  - 商品情報（画像・商品名・商品画像など）を変更することができる。
  - 何も編集せずに更新をしても画像無しの商品にならない。
  - 投稿者だけが編集ページに遷移できるようになっている。
  - 画像やカテゴリーの情報など、すでに登録されている商品情報は編集画面を開いた時点で、もれなく表示されるようになっている。
  - エラーハンドリング

商品削除　
- 担当内容（バックエンド）
  - 商品出品者のみが商品を削除できる。

商品購入機能
- 担当内容（フロントエンド・バックエンド）
  - クレジットカードへのアクセスキーを保存するモデル、コントローラ、ルーティングの作成
  - payjpを導入し、カード登録時にpayjp側へカード情報と顧客情報を新規作成
  - 登録した情報にアクセスする為のキーをDBへ保存する機能の実装
  - DBのキーを利用してpayjpのクレジットカード情報を取得し、自分のカード情報(下4桁,期限など)を表示する機能の実装
  - 商品購入時にDBのキーを使ってpayjpの自分のカードを使用し、決済が完了する機能の実装
  - 決済が完了すると注文情報、売上情報のレコードを作成する処理の実装

【開発を通じて得られた知見】

＜工夫した点＞

①チームとして工夫を行った点

　下記2点の工夫をしました。

□コミュニケーションの円滑化

　コロナウィルスの蔓延という状況により、チームメンバーとのコミュニケーションが全てオンライン上で行われました。

その為、メンバー同士がストレスとならない距離感を保ちつつ、タスクの負担が偏らないように調整しました。その結果、2名での開発体制でしたが、通常4名程度の制作物を完成させることが出来ました。

□生産性をあげる為の工夫の徹底

　マークアップのタスクを作業した人が引き続き、バックエンドの作業を行うよう進めました。フロントエンドの状況を把握出来ている為、円滑なバックエンド開発をする事が出来ました。また、進行を把握する為に、毎日Slack（＝ビジネスチャット）を用いて、進行状況把握シートに記入をしました。その結果、どこでトラブルが起きているか、どこを進行しているのかが開発の進め方と情報共有が徹底され、生産性の効率化に繋がりまた。

②個人として工夫を行った点

　商品を購入した決済機能としてpayjpを用いる事や、jQueryを用いたエラーメッセージの表示、if文を用いた条件分岐を工夫する事により、機能実装のクオリティを高めました。これまでのカリキュラムで実装経験のない機能でしたが、より高いクオリティの高い制作物を完成させる為に工夫を凝らしました。

＜苦労した点＞

①生産性の向上

・人数の問題

　2名での開発体制でしたため、主体性を持って1人で2人分の開発をする気概で開発を進めました。結果、実装範囲を網羅でき、全体像を掴む事が出来ました。

・時間の問題

　1日の時間の使い方を見直す為に、毎日30分は1日を何に使うかを決める時間を作りました。自分自身の空いている時間の効率化を図り、仕事の行き帰りの電車の通勤時間、休憩時間等の隙間時間を開発に当てました。そのため、不要な誘い等は断り、開発に集中する事が出来ました。

・技術力不足の問題

　自分自身で調べる事は勿論、フリマアプリを完成させた先輩・メンターからアドバイスを頂き、理解する為に必要な時間を短縮させる事や、足りない技術力を補いました。

上記のように自己分析を事前に行い、人数・時間・技術力の3つの問題に対し、即決・即断・即行動を実行する事により、生産性の向上に成功しました。

②GitHub