1
/
5

Sign up for free

This page is intended for users in Japan(English). Go to the page for users in United States.

tech campの最終課題作成で学んだことをストーリーにしてみました

10週間 tech campで様々学ばせていただきました

その集大成がチーム開発でのフリマアプリです

概要

テックキャンプの最終課題にて作成したアプリケーションを紹介します。また本資料では、自身で実装した箇所、および開発を通じて得られた経験についても紹介します。

アプリケーション概要

フリーマーケットのアプリケーションを作成しました

  • 接続先情報
    • URL http://18.177.31.19/
    • ID/Pass
      • ID: admin
      • Pass: eteam
    • テスト用アカウント等
      • 購入者用
        • メールアドレス: buyer0812@gmail.com
        • パスワード: buyer0812
      • 購入用カード情報
        • 番号: 4242424242424242
        • 期限: 1/23
        • セキュリティコード:123
      • 出品者用
        • メールアドレス名: seller0813@gmail.com
        • パスワード: seller0813
  • Githubリポジトリ

開発状況

  • 開発環境
    • Ruby/Ruby on Rails/MySQL/Github/AWS/Visual Studio Code
  • 開発期間と平均作業時間
    • 開発期間:7/21〜8/14
    • 1日あたりの平均作業時間:9
  • 開発体制
    • 人数:5
    • アジャイル型開発(スクラム)
    • Trelloによるタスク管理

動作確認方法

  • Chromeの最新版を利用してアクセスしてください。
    • ただしデプロイ等で接続できないタイミングもございます。その際は少し時間をおいてから接続ください。
  • 接続先およびログイン情報については、上記の通りです。
  • 同時に複数の方がログインしている場合に、ログインできない可能性がございます。
  • テストアカウントでログイン→ヘッダーからマイページボタン押下→出品するボタンを押下→商品出品
  • 確認後、ログアウト処理をお願いします。

開発担当箇所

担当箇所一覧と確認方法

  • DB設計
  • デプロイ
  • 住所登録機能(フロントエンド・バックエンド)
    • ウィザード形式のためユーザーを登録する際ご覧いただけます。
  • クレジットカード登録機能(フロントエンド・バックエンド)
    • ログイン後、マイページのクレジットカード登録ページでご覧いただけます。
  • 商品購入機能(フロントエンド・バックエンド)
    • 購入者用アカウントでログイン後、適当な商品を選択することで商品購入画面へ進めます。クレジットカード情報の入力を求められた際は、上記の購入用カード情報を入力することで購入できます。

各担当箇所の詳細

【DB設計】


 必要なテーブル、カラムの選定しアソシエーションの決定しました。
ER図の作成をし担当テーブルを作成しました。(住所・クレジットカード・購入)

【アカウント登録(ユーザー住所登録ページ)】
 ウィザード形式で住所を登録するページを作成しました。
ユーザー入力→住所入力へとウィザード形式でアカウント登録ができます。
住所登録に必要なテーブル・モデル・ルーティングを作成しました。
active_hashを使用し都道府県データを取得できるようにしました。
ユーザー情報をsessionに保持し住所モデルのインスタンスを作成し住所情報と、sessionに保持していたユーザー情報を保存することでウィザード形式としてアカウントを登録できます。
Rspecを使用し住所カラムのバリデーションテストを実行しました。


【デプロイ】


 アプリケーションをEC2のサーバにデプロイし、公開状態にしました。
Capistranoを利用した自動デプロイしBasic認証の実装しております。
S3を導入し、デプロイ担当者以外もローカル・本番環境で画像が保存できるようになっております。


【アカウント登録(ユーザー住所登録ページ)】


 ウィザード形式で住所を登録するページを作成しました。
ユーザー入力→住所入力へとウィザード形式でアカウント登録ができます。
住所登録に必要なテーブル・モデル・ルーティングを作成しました。
active_hashを使用し都道府県データを取得できるようにしました。
ユーザー情報をsessionに保持し住所モデルのインスタンスを作成し住所情報と、sessionに保持していたユーザー情報を保存することでウィザード形式としてアカウントを登録できます。
Rspecを使用し住所カラムのバリデーションテストを実行しました。



【クレジットカード機能】


 payjpを使用したクレジットカードの登録機能を実装しました。
クレジットカードへのアクセスキーを保存するモデル、コントローラ、ルーティングの作成しました。
カード登録時にpayjp側へカード情報と顧客情報を新規作成、登録した情報にアクセスする為のキーをDBへ保存する機能の実装を行いました。
DBのキーを利用してpayjpのクレジットカード情報を取得し、自分のカード情報(下4桁,期限など)を表示する機能も実装しております。



【商品購入機能】


 出品された商品をクレジットカード決済を用いて購入する機能を実装しました。
商品購入時にDBのキーを使ってpayjpの自分のカードを使用し、決済が完了する機能の実装と、決済が完了すると注文情報、売上情報のレコードを作成する処理の実装しました。



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

工夫した点

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

 順序としては、実装予定のマークアップ作業を全て先に終わらせ、その後バックエンドに移る工程で取り組みました。そのため、作業を行いながら、フリマアプリの機能の詳細や、バックエンド開発のイメージをつかむことができました。
 実装にあたり他の実装に影響があるであろう箇所は、slackやMTGで情報共有を徹底しておりました。(カラムの変更やgemのインストールなど)
 商品関係とその他のユーザー機能の実装にあたる担当者を分けたことで、担当箇所の知見が増え実装もスムーズにいったと思います。

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

 カリキュラムで学習がなかった機能の実装に重きをおいておりました。
また、苦手だと考えていたDB設計やデプロイを担当し学びを深めようと努めました。
アカウント登録機能はユーザー情報と住所情報をウィザード形式にて実装をしました。
購入機能ではpayjpを導入しました。

苦労した点

チームとして苦労した点

・GitHub
 作業当初は各々がマージする際にコンフリクトが頻発し、その解決策が分からず苦労しました。開発を進めていく中で、コンフリクトが起こる箇所があらかじめわかるようになり、連携を行いながらコンフリクトを完全ではありませんが、回避できるようになりました。
 また、コンフリクトは開発の際には必ず起こるものだと思うので、回避する力だけではなく、解除する力も身に付けて行きます。 
 今では焦ることもなく、冷静にコンフリクトに対応できるようになりました。

・チーム運営
 チーム開発の経験もなく手探りの中での作業だったため、軌道に乗るまで時間がかかったと思います。
 コードの書き方の共通ルールやルーティングなどを最初の段階で明確に決める必要がありました。可読性の無いコードを別の方が修正しているなど無駄な工程が生まれてしまっておりました。
 スプリントビュー時やミーティング時にチームとしてもっと明確にゴールを意識しておけば良かったのではないかと思います。
明後日までに商品投稿機能を実装するなど、曖昧な目標が多くタスク中でももっと刻んで目標設定をしておくことで、進捗具合も分かりチームとしてもっと助け合えたかと思いました。

個人として苦労した点

・DB設計
1人のユーザーが商品の出品、購入、さらにコメント、評価ができるという多機能なアプリケーションの開発が私には初めてでした。そのため、どのようなテーブルがあり、テーブル同士がどのような関係性なのかイメージしづらく、DB設計に苦労しました。
 他のDB設計担当者とで、必要と考えられるテーブルを全て考え、googleのdrawioとzoomを活用し、リアルタイムで書き出しや正規化を行いました。結果として、DB設計とER図の作成は2日で終わりましたが、開発を進めていく中で必要な、もしくは不要なテーブル、カラムに気がつきました。各機能の追加前後にその都度DB設計について見直しを行ったりすることで不要な作業を減らせたと思います。

・ウィザード形式のアカウント登録
 アカウント新規登録時にウィザード形式での実装を、ユーザー情報と住所情報とで分業で実装しました。私は住所情報の実装を担当しました。一つの機能の実装を2人で取り組むため連絡を密に取りコンフリクトが起こらないよう注意し進めました。2人で作業をしていたため実装の
スピードは早かったですが、エラーが起こった際にどちらが実装したものが原因なのかがわからない状況が多々ありました。相手の実装の内容は把握してはいますが、やはり一つの機能は、1人で実装した方が結果として、正確性も上がりより早く実装できたのではないかと思いました。

・商品購入機能の実装
 他の実装との兼ね合いが難しく感じました。商品詳細ページより商品IDを購入画面に引っ張ってくることで、該当の商品を購入することができるのですが、商品詳細ページの実装が終わっておらず実際に目で見て挙動を確認することが全実装の最後となってしまいました。
頭で考えていた挙動も実際に動かしてみるとエラーも多く、期限も差し迫っていたので
プレッシャーもありました。商品周りの実装をしていなかったためわからない部分も多く、
商品詳細ページができるまで他の実装に取り組みつつ、商品関係のコードを読むことや商品関係の実装を行っているチームメンバーに質問や確認をしておりました。結果としてアプリ全体の動きが掴めたので、本番環境での確認や細かいエラーの修正に役立ちました。

・チームとの付き合い方
 チームでの作業のため少なからずプレッシャーを感じ、自分のタスクを早く終わらせようとに手一杯でした。自分の実装が先に終わってしまい、他の実装を待つという場面もあり、結果的にスムーズに進まないという状況でした。もっと周りを見ていれば力になれることもあったかと思います。
 エラーで悩んでいた部分も他の方が解決方法を知っていたという場面もありました。もっとチームのメンバーと個別でもコミュニケーションを取り情報の共有をする必要があると思いました。
 毎朝、自分が作業するタスクの報告だけでなく、今こういった実装に悩んでいることや、

エラーが解決できないなど細部に渡って共有すれば良かったと思いました。

以上


エラーなど困難な場面も多かったですが、何より楽しかったです!

1 Likes
1 Likes