島本 雄一

谷田辺 協平

平野 孝太朗

本当に簡単な経歴

メルカリコピーサイト

勤怠管理

最初はポートフォリオ作ろうとしたが、誰も使わない作品作ることに疑問だったので知り合いのとこ巡って今困ってること、こんなのあったらいいなを聴きに行きました。
その中で今使ってる勤怠管理を変えたいと言う声があったので作ることになりました。

今あるものより少しでも便利になれば依頼者の方も違うことに使える時間も増える。
その時間を使って依頼者がお客様により良いサービスを提供できる。
お客様も嬉しい。
こんないい循環になれば最高です。

要望,,,既存の管理アプリでは扶養の上限が表示されず計算が面倒なので一覧で出して欲しい

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


アプリケーション情報
アプリケーション概要
フリーマーケットアプリケーションである「メルカリ」のコピーサイトを作成しました
接続先情報
http://13.115.79.120
ID/Pass
ID: admin
Pass: t58teamc
テスト用アカウント等
購入者用
メールアドレス: buyer_user@gmail.com
パスワード: buyer_user
購入用カード情報
番号：4242424242424242
期限：
ユーザー名：
セキュリティコード：
出品者用
メールアドレス名: seller_user@gmail.com
パスワード: 1111111
Githubリポジトリ
https://github.com/tora0621/freemarket_sample_58c

開発状況
開発環境
ruby/Ruby on Rails/MySQL/Github/AWS/sublimeText3
開発チーム
開発期間と平均作業時間
開発期間：約4週間
1日あたりの平均作業時間：約9時間
開発体制
人数：5名
アジャイル型開発（スクラム）
Trelloによるタスク管理

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


開発担当箇所
担当箇所一覧と確認方法
新規登録,ログインページ(フロントエンド,バックエンド)
新規登録,ログイン機能
payjp
新規会員登録または出品用アカウントでご覧いただけます。





出品詳細ページ(フロントエンド)
写真選択後ご覧いただけます。




商品購入機能,クレジットカード登録(バックエンド,バックエンド)
新規登録,もしくは商品購入の際ご覧いただけます。



各担当箇所の詳細
 新規登録,  ログイン機能(フロントエンド,バックエンド)
概要
会員登録の一連の流れ
担当内容
haml,scssを使用しフロント作成
Ruby on Railsのgem ‘devise’の便利なメソッドは使いつつ作成
メルカリ同様電話番号登録まででも会員登録済みになるよう作成
モデル、コントローラ、ルーティングの作成し各テーブルごとに切り分けて管理
sessionを用いたデータ保持
各モデルごとにバリデーション作成
必要に応じてDBの見直し,カラムの追加
単体テスト(バリデーション）


出品詳細ページ(フロントエンド)
概要
商品選択後に表示

担当内容　
haml,scssを使用し商品詳細のマークアップ作業を行った。

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


開発を通じて得られた知見
工夫した点
①チームとして工夫を行った点
　フロント部分に関しては命名規則などを全員で共有し、その後の機能実装や可読性を意識することで作業効率を高めた。
　バックエンドは作業分担の際どうしても取得するスキルに偏りが出てしまったので、各々が担当した箇所は他のメンバーにも共有できるようアウトプットの時間を設けた。
　またチーム全体としてミーティングを毎日実施し、進捗報告や役に立った記事などの共有を行い積極的にコミュニケーションを取っていた。

②個人として工夫を行った点
　エラーや不具合で作業が進まないときは一度自分で小さいアプリを作ってみたり、デバックしどこまでできているかを細かく確認した。
　基本的にメンターに聞くのでなく多少時間かかっても自分でなんとかしたかったので、試す,失敗する,原因究明,また試すを絶えず繰り返していた。



苦労した点

①新規登録、ログイン
　メルカリのように新規登録の際データの保持をし登録をするアプリを作るのは初めての経験で、仕組みは簡単に理解できたが最初は思ったように動かず苦戦しました。
　自分で何度か小さなアプリを作ってみたり、デバックしながら記述を少しずつ変えて試しては失敗してまた試すを繰り返して何とか実装できました。
　そのおかげで多少時間はかかってしまったが理解が深まり,今まで何となく使っていたgemがいかに便利で自分が理解できていなかったことがわかりとても有意義な時間でした。

②チーム開発
　複数人での開発は全員初めてで、どうすればチームとして効率的か最初は試行錯誤しながら作業していた。作業割りはもちろんビューの崩れや細かい修正などで他の人のコードを見て直したり、一週間おきにチームの進捗次第で目標の修正を行い何とか完成しました。
　正直、個人的にはエラーメッセージなどのユーザーにとってわかりやすい機能を実装したり経験のない機能実装をできなかったのが悔しかったが、チーム開発でしか得られないものがたくさんあったのでその点はよかったです。

平野孝太朗