1
/
5

TECH CAMP 最終課題紹介

K tさんのプロフィール
K t
その他エンジニア
on 2020/06/27

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

アプリケーション概要

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

  • 接続先情報
    • URL http://54.178.226.20/
    • ID: admin
    • Pass: password
    • 購入者用アカウント
    • 　メールアドレス: b@test.com
    • 　パスワード: test44test
    • 　購入用カード情報
    • 　番号： 424242424242
    • 　期限： 5/22
    • 　セキュリティコード：1234
    • 出品者用アカウント
    • 　メールアドレス名: t@test.com
    • 　パスワード: test55test
  • Githubリポジトリ

開発状況

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

動作確認方法

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

担当箇所一覧と確認方法

  • DB設計
    • README.mdにてご覧いただけます。
  • ログイン、新規会員登録機能(サーバーサイド)
    • http://54.178.226.20/users/sign_inにアクセスするとログイン作業を行う事が出来ます。（ログイン済みの場合はトップページへ遷移致します）
    • http://54.178.226.20/users/sign_upにアクセスするとユーザーの新規登録を行う事が出来ます。（ログイン済みの場合はトップページへ遷移致します）
  • 商品詳細ページ(フロントエンド)



  • 商品編集ページ(フロントエンド)


  • 商品編集機能(サーバーサイド)
  • パンくず機能


各担当箇所の詳細

  • DB設計
    • 概要
      • 必要なテーブル、カラムの選定
      • アソシエーションの決定
    • 担当内容
      • 各テーブルの作成
      • モデルへのアソシエーションの記述
  • ログイン、新規会員登録機能(サーバーサイド)
    • 概要
      • ユーザー情報、プロフィール、住所の登録ができる
      • メールアドレス、パスワードを用いてログインができる
    • 担当内容
      • gem ‘devise’を使用したユーザー管理機能を実装
      • ウィザード形式によりユーザー情報、プロフィール、住所の登録ができるよう実装
  • 商品詳細ページ(フロントエンド)
    • 概要
      • 出品された商品の詳細が表示されるページ
    • 担当内容
      • haml、scssを使用したマークアップ作業
  • 商品カテゴリ機能
    • 概要
      • 商品詳細ページにてカテゴリの表示がされる
      • 商品出品、商品編集ページにてカテゴリ選択ができる
    • 担当内容
      • gem ‘ancestry’を使用した3階層のカテゴリ機能を実装
      • javascriptを使用した動的なカテゴリ選択が出来る
      • $rails db:seedによりカテゴリ一覧をDBに取り込むことが出来る
  • 商品編集ページ(フロントエンド)
    • 概要
      • 出品した商品情報が表示され、編集が出来るページ
    • 担当内容
      • haml、scssを使用したマークアップ作業
      • 出品した商品情報が表示されている
  • 商品編集ページ(サーバーサイド)
    • 概要
      • 出品者のみが編集を行える
      • 画像の差し替えが出来る
      • 商品の情報を変更し完了ボタン押すことで保存が出来る
    • 担当内容
      • javascriptを使用し画像を1枚ずつ差し替える事が出来る
      • カテゴリの再選択が出来る
      • 表示された商品情報の変更が保存される
      • 入力必須項目が未入力の場合はエラーメッセージが表示される
  • パンくず機能
    • 概要
      • 現在表示されているページがわかりやすいようヘッダー下に階層を表示
    • 担当内容
      • gem ‘gretel’を使用したパンくず機能の実装

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

工夫した点

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

　3回/日、定時に必ずデイリースクラムと打ち合わせを実施し、進捗確認だけでなくメンバー各々で発生したエラーとその解決までを共有した事で、同様のエラーが発生した場合に早期解決に繋がりました。また、定時以外にもZOOMやSlackを用いて頻繁に情報共有を行った事で、お互いの知識不足を補うことができ、コンフリクトのスムーズな解消等が可能となりました。

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

スクラムマスターとして、メンバーの進捗状況や能力を鑑みながらタスクの割り振りを行いました。計画的にタスクを割り振った事で、メンバーからは自分が何を行えば良いのか明確でやりやすかった、という声が聞かれました。

苦労した点

①チームとして苦労した点

・DB設計
開発を進めていく中で、カラムの削除、追加や属性の変更が発生しました。その際にお互いのデータベースへの反映がうまくいかず、マイグレーションファイルの取り扱いや記述に関して全員で再び学習する必要がありました。DB設計は共通認識を高めるために全員で行いましたが、もう少し時間をかけ、ひとつひとつの実装を想定しカラムやアソシエーションの精査を行うべきでした。

・同一ページの複数名での実装
　カテゴリ機能実装の際、他のメンバーが作成した商品出品ページにそれを挿入する形で行ったところ、ビューの調整が必要となり、さらにカテゴリ機能実装後に商品出品機能の実装を他のメンバーが行ったところ、カテゴリ機能が動作しない等の事象が発生しました。同一ページを複数名で実装する場合はコードの記述をしっかりと読み解く技術の向上が必要だと感じました。

・GitHub
　作業当初、各々がマージする際のコンフリクトの解消の際は、必要な記述の削除が発生しないよう確認作業の為に複数名を費やすような形になっていました。それにより作業のストップやコンフリクトの解消時間の増加が発生していました。しかし、開発を進めていく中でコンフリクトが起こる箇所があらかじめわかるようになったことや、ひとりひとりのスキルアップによりその解消時間が短縮されていきました。

②個人として苦労した点

・商品編集機能実装
　商品編集ページでの画像の差し替え機能の実装において、その方法を検索した結果、2通りありそのどちらの方法も実施してみた事で時間がかかってしまいました。1パターン目はコントローラーでの記述が多く、非常にコードの可読性が悪いものになってしまい、2パターン目に一からやり直すことにしました。挑戦することは大事ですが、納期の迫っている中、より最適な方法を選択する能力が必要だと感じました。

以上

開発 サーバーサイド フロントエンド チーム開発
6 いいね！
6 いいね！