【個人開発】お惣菜の商談記録管理アプリ【Rails】

# はじめに
未経験でディープロ(旧：DIVE INTO CODE)に入校し、4ヶ月の受講の集大成としてオリジナルアプリケーションを作成しました。
名前は「デリレコ」と言います。
前職（お惣菜の商品開発）の経験を元にした、お惣菜の商談記録が管理できるアプリケーションです。
&emsp;&emsp;&emsp;&emsp;<img width="250" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3237383/470a7dcf-672c-d40d-638f-37c29b1cc625.png">
アプリケーション：https://protected-coast-48892.herokuapp.com
GitHub：https://github.com/MayuKishimoto/deli_reco.git

# なぜ「デリレコ」を作ったのか
### 結論：商品の商談記録を管理するのが大変だったから！
<br>

前職の時にはこんな悩みがありました。

**1. 商品数が多い問題**
一事業所で、月に100アイテム以上の開発案件がありました。

**2. 過去の商談記録を探すのが大変問題**
商談情報は、商談日ごとに以下のようなエクセルファイルで作られていました。
過去の商談記録は、このファイルを一つずつ開いて探さなければいけませんでした。
&emsp;&emsp;<img width="500" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3237383/863ab92f-8f1c-30ed-4667-6baf918f67a2.png">

**3. 営業からのフィードバック手段がバラバラ問題**
商談のフィードバックが、メール、チャット、電話などバラバラだったため、重要な情報を見逃してしまうリスクがありました。
<br>

以上のことから、「商品ごとに商談記録が管理できるツールがあれば…！」と思い、「デリレコ」を作成しました。

# 「デリレコ」の使い方
流れは以下の通りです。
1. ログイン
2. 商品の新規開発依頼をする（営業）
3. 開発依頼を承認する（管理者）
4. 商談情報を登録する（開発）
5. 商談結果を登録する（営業）
6. 4,5のやり取りを繰り返す
7. 商品情報を確定する（営業）
<br>

#### 1. ログイン
部署や権限により、表示される項目が異なります。
- 営業：商品の開発依頼、商談結果の登録ができます。
- 開発：商談情報の登録ができます。
- 管理者：商品の開発依頼の承認ができます。

![スクリーンショット 2023-07-07 12.52.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3237383/a5e92dbf-b7b1-a323-a5d9-c3a6e45d4743.png)
<br>

#### 2. 商品の新規開発依頼をする（営業）
「営業用ゲストログイン」よりログインします。
![スクリーンショット 2023-07-07 12.58.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3237383/b1de465e-72a0-9388-9791-bb03511177d1.png)

「新規開発依頼ボタン」より、商品の開発依頼をします。
![スクリーンショット 2023-07-07 14.09.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3237383/68df6810-17f2-acb0-7815-782127663573.png)
開発依頼が登録されると、管理者権限を持つユーザーに通知メールが送られます。
<br>

#### 3. 開発依頼を承認する（管理者）
次は「管理者用ゲストログイン」にてログインします。
営業から送られてきた開発依頼の中身を確認します。
![スクリーンショット 2023-07-07 14.15.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3237383/fa09d67a-88bf-48a7-a342-132ca31f4c86.png)

依頼内容に問題がない場合は、画面下部の「開発担当者」よりこの商品を担当する開発のメンバーを選択し「申請状況」を「承認」に変更します。
「更新」ボタンを押すと、アサインされた開発メンバーに通知メールが送られます。
また、商品情報は「開発依頼一覧」から「商品情報一覧」に移動します。
![スクリーンショット 2023-07-07 14.20.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3237383/85ef94e4-913c-30fe-6143-f0daaa8c2b8a.png)
依頼内容に問題がある場合は、「申請状況」を「差戻」に変更し、差戻理由を記載して更新すると、依頼元の営業に通知メールが送られます。
<br>

#### 4. 商談情報を登録する（開発）
「開発用ゲストログイン」にてログインします。
たくさんの商品情報から自分の担当商品を検索することができます。
![スクリーンショット 2023-07-07 14.25.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3237383/61bfd6c8-bd62-39aa-4ccc-ce250b2842fc.png)

商品の「詳細」画面を開くと、先ほどの営業からの依頼が上部に記載されています。
![スクリーンショット 2023-07-07 14.28.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3237383/ceeaa02c-7d5e-f5a0-5d5b-557c8cc55a48.png)

「商談情報登録」フォームより、次回の商談に必要な情報を登録します。
![スクリーンショット 2023-07-07 14.38.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3237383/72645054-6aad-6db5-ee3c-3c369a015fd6.png)

登録した情報がフォームの右側に表示され、営業に商談情報が登録された通知メールが送られます。
この情報を元に、営業は商談をします。
![スクリーンショット 2023-07-07 14.39.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3237383/c7c6f507-2df9-c7a9-7ec9-0dd8efe7fb4b.png)
<br>

#### 5. 商談結果を登録する（営業）
商談が終わったら、営業は商談結果を入力します。
登録したら、開発に商談結果が登録された通知メールが送られます。
![スクリーンショット 2023-07-07 14.46.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3237383/38d65135-7119-90ef-b9f1-62d3ff06df8c.png)
<br>

#### 6. 4,5のやり取りを繰り返す
【開発】前回の商談結果を元に修正した内容を入力。
![スクリーンショット 2023-07-07 14.51.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3237383/98e8bfa0-d4cb-1895-e16f-bdab800a1760.png)

【営業】商談結果を入力。
![スクリーンショット 2023-07-07 15.01.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3237383/05124083-8310-c6be-e5fb-dd0c484667ab.png)
<br>

#### 7. 商品情報を確定する（営業）
商品の情報が確定したら、画面上部の「ステータス」部分より「確定」を選択します。
![スクリーンショット 2023-07-07 15.06.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3237383/9a895866-003e-622c-b512-29826dd1df5b.png)
商品情報が確定になると、商品情報の入力フォームなどが非表示になります。
<br>

### 結論：「デリレコ」を使うと…
**1. 商品数が多い問題**
→ 検索機能でサクッと検索！

**2. 過去の商談記録を探すのが大変問題**
→ 商品の中に商談情報が蓄積されているので、過去の記録が一目瞭然！

**3. 営業からのフィードバック手段がバラバラ問題**
→ やり取りのフローが一元化されている＆メール通知機能で情報を取りこぼさない！
<br>

# 「デリレコ」の作成について
### かかった日数
|  工程  |  日数  |
| ---- | ---- |
|  要件定義  |  12日  |
|  バックエンド  |  10日  |
|  フロントエンド  |  5日  |
|  テスト  |  3日  |
|  デプロイ  |  3日  |
|  合計  |  33日  |
<br>

### こだわった && 大変だったポイント
#### 1. 商品情報の中に商談記録を表示させたこと
商品情報の中に商談情報を蓄積するために、ルーティングのネストを三層構造にしました。
```ruby:config/routes.rb
resources :products do
  resources :negotiations do
    resources :results
  end
end
```

**ER図**
![スクリーンショット 2023-07-07 16.11.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3237383/59e2adba-63e8-612a-aa00-81b76d8f145e.png)
商談情報と商談結果の登録フォームを作るのに、コントローラのどこで`Negotiation`と`Result`のインスタンスを生成すれば良いのかに苦戦しました。

また、各フォームがパーシャルで入れ子になっていたので、取得した値を渡すための変数の設定が大変でした。都度変数の中身を確認しながら実装することで、商品情報→商談情報→商談結果の表現をすることができました。

「商品情報の中に商談情報を蓄積する機能」はこのアプリケーションの肝だったので、実現することができてよかったです。MVC構造の再確認にもなり、とても勉強になりました。
<br>

#### 2. 商品のステータスによって表示させる一覧を分けたこと
商品のステータスの状態により表示させるページや内容を変えたかったので、`namespace`でURL、コントローラ、ビューを分けました。
```app/models/product.rb
enum status: { 申請: 1, 承認: 2, 差戻: 3 }
```

```ruby:config/routes.rb
namespace :request do
  resources :products
end

resources :products
```
<br>

**未承認(ステータス：申請 or 差戻)の商品のルーティング**
|  Prefix  |  Verb  |  URI Pattern  |  Controller#Action  |
| ---- | ---- | ---- | ---- |
|  request_products  |  GET  |  /request/products(.:format)  |  request/products#index  |
|  request_products  |  POST  |  /request/products(.:format)  |   request/products#create  |
|  new_request_product  |  GET  |  /request/products/new(.:format)  |  request/products#new  |
|  edit_request_product  |  GET  |  /request/products/:id/edit(.:format)  |  request/products#edit  |
|  request_product  |  GET  |  /request/products/:id(.:format)  |  request/products#show  |
|  request_product  |  PATCH  |  /request/products/:id(.:format)  |  request/products#update  |
|  request_product  |  PUT  |  /request/products/:id(.:format)  |  request/products#update  |
|  request_product  |  DELETE  |  /request/products/:id(.:format)  |  request/products#destroy  |
<br>

**承認済み(ステータス：承認)の商品のルーティング**
|  Prefix  |  Verb  |  URI Pattern  |  Controller#Action  |
| ---- | ---- | ---- | ---- |
|  products  |  GET  |  /products(.:format)  |  products#index  |
|  products  |  POST  |  /products(.:format)  |   products#create  |
|  new_product  |  GET  |  /products/new(.:format)  |  products#new  |
|  edit_product  |  GET  |  /products/:id/edit(.:format)  |  products#edit  |
|  product  |  GET  |  /products/:id(.:format)  |  products#show  |
|  product  |  PATCH  |  /products/:id(.:format)  |  products#update  |
|  product  |  PUT  |  /products/:id(.:format)  |  products#update  |
|  product  |  DELETE  |  /products/:id(.:format)  |  products#destroy  |

コントローラでのアクションの書き分けが難しかったです。
また、未承認の商品の`link_to`や`form_with`のパスの指定に苦労しました。

# おわりに
要件定義からデプロイまで自分の手で一通りアプリケーションを作ってみて、今までスクールで学んできた点と点がこう繋がるのか！という発見がたくさんありました。
全てを自分でやっているからこそ直面する問題もあり、とても良い経験になりました。

引き続き学習を続けてスキルアップしていきたいと思っております。
最後までお読みいただきありがとうございました！