【Rails】ポートフォリオ

# E-tripp

<img width="1680" alt="e-trrip_readme" src="https://user-images.githubusercontent.com/80377991/126860385-922d7ada-d863-4dbf-98ca-dda032f736b9.png">

# 🗾はじめに
　今回のこのポートフォリオは**転職を目的**として作成しました。ただ作成するのではなく、<font color="Red">**現場を意識してdevelopからブランチを切り最後にmasterでデプロイをする開発工程**</font>で行いました。

　また、だらだら作っていてはいつまで経っても転職活動ができないと考え、自分で<font color="Red">**納期日(完成予定日)と、工程をAプラン(終わったら転職活動スタート)・Bプラン(転職活動中)と分けて取り組む**</font>ようにしました。以下はAプランの実装で、制作期間は<font color="Red">**約1ヶ月**</font>です。

#💡制作背景
### **課題**
- 旅行プランを作るのに、色々なサイトを探して決めるのが大変とパートナーが不満にしていました。そして<font color="Red">**簡単に計画を作りたい**</font>という要望を叶えたいと考えました。

### **解決方法**
- 時間や場所をクリックで選択、登録し簡単スケジュール化

### **目的**
- 簡単に旅行プランを立てる
- パートナーの<font color="Red">**要望を叶える、笑顔にさせる**</font>
- 継続的なサービス展開(ビジネス)

### この課題の解決として誕生したのが<font color="Blue">『E-tripp』</font>です。
![E-tripp_top](https://user-images.githubusercontent.com/80377991/125796420-ff0cc0a9-24cf-4316-8169-405a2c1af82c.gif)

# サイトURL
### https://arcane-forest-90597.herokuapp.com/

# 🗺アプリ概要
- **クリックするだけで簡単に旅行プランを制作できる**アプリです。

# 💻開発環境

- Ruby 2.7.3
- Ruby on Rails 6.1.3
- PostgreSQL 13.2(DB)
- Github
- Visual Studio Code
- JavaScript
- jQuery
- bootstrap4.5.1
- Heroku

# ✈️実装機能

|  | 機能 | Gem |
| :-: | :-: | :-: |
| ① | ログイン機能 | devise |
| ② | ゲストログイン機能 | ✖︎ |
| ③ | プラン作成機能(CRUD) | cocoon |
| ④ | いいね機能(Ajax) | ✖︎ |
| ⑤ | いいねカウント機能(Ajax) | ✖︎ |
| ⑥ | コメント機能(Ajax) | ✖︎ |
| ⑦ | 検索機能 | ransack |
| ⑧ | ページネーション機能 | kaminari |
| ⑨ | 画像アップロード機能　　| carriewave |
| ⑩ | 管理者機能 | activeadmin |

# ✏️ER図
<img width="940" alt="ER図" src="https://user-images.githubusercontent.com/80377991/125774810-ee446f91-3312-43b1-b061-dff96ddb2509.png">

## <font color="Blue">**苦労した点**</font>
### 多対多のアソシエーション
- 今回一番苦労しました。１対多のアソシエーションはすぐに理解する事ができたのですが、<font color="Red">**多対多のアソシエーションに一番時間を費やしました。**</font>中間テーブルによってどっちが複数持てるのか、外部キーはどこが所有するのか等、非常に迷いました。解決策として<font color="Red">**やりたいことを図や絵や言葉で表現**</font>(例；plan→schedule→spot)しながら進めていくことで、無事に解決する事ができました。


# 🗻トップページ
![E-tripp_top](https://user-images.githubusercontent.com/80377991/125796420-ff0cc0a9-24cf-4316-8169-405a2c1af82c.gif)

## <font color="DarkOrange">**工夫した点**</font>
### **①ページ切り替え**
<font color="Red">**ログインの有無**</font>で、ページにボタンを追加していろいろなページに移動できるようにしました。

### **②シンプル**
ユーザーが見やすいようにGIF画像を取り入れました。最初は動画を取り入れたのですが、<font color="Red">**読み込みに時間がかかる、ユーザーがクリックする手間**</font>といった課題が出たので、それを解決するためにGIF画像を採用しました。

## <font color="Blue">**苦労した点**</font>
### **デプロイ先で画像が表示されない**
ローカル環境では表示されていた画像が、デプロイ先では表示されませんでした。原因は、自動デプロイの際に<font color="Red">**画像がコンパイルされ、パスが変わる**</font>とのことで、assets_pathを記述したことで無事に表示されました😄

# 🗓プラン作成画面
![plan](https://user-images.githubusercontent.com/80377991/125779845-6398774c-7f9d-4c4e-9b32-aabbe90890a6.gif)

## <font color="DarkOrange">**工夫した点**</font>
### **①プランに複数のスポットを追加可能に**
ユーザーが<font color="Red">**複数のスポットを登録**</font>できたら良いと思い、<font color="Red">**『スポットを追加』のボタン**</font>を押すことで、スポットのフォームを追加できるよう実装しました。時間も一緒</span>に登録できます。

### **②既存のスポットをセレクトボックスで選択**
ユーザーの<font color="Red">**入力負担を減らそう**</font>と思い、スポットをセレクトボックスで選択できるよう実装しました。
<font color="Red">**今後は画像をクリックしたらフォームに登録**</font>できるような実装をしていきたいと考えています。💪

            
## <font color="Blue">**苦労した点**</font>
### **中間テーブルの追加したカラムに時間を登録**
多対多のアソシエーションにおいて、いいね機能等は中間テーブルにFKのみで実装できたが、今回はFKと時間のカラムが追加されたことで中間テーブルにデータが中々保存できませんでした。時間がかかりましたが、<font color="Red">**form_wtihの中にfields_forを追加**</font>したことで無事に解決できました😄


# 🔍プラン詳細画面
![plan_show](https://user-images.githubusercontent.com/80377991/125780905-0bc78667-f34e-4d02-b95f-addd9847a1b0.gif)

## <font color="DarkOrange">**工夫した点**</font>
### **①プランが見やすいようタイムライン化**
ユーザーが<font color="Red">**すぐに時間と場所を確認**</font>できたらいいと思い、タイムライン化で実装しました。
編集機能で順番を入れ替えることもできます。

### **②画像をクリックでスポット詳細ページへ**
ユーザーはすぐに場所の情報を知りたいと思い、<font color="Red">**行く場所をクリックすることで詳細ページに移動**</font>できるよう実装しました。

## <font color="Blue">**苦労した点**</font>
### **plan詳細ページからspot詳細ページに移動**
plan詳細ページからspot詳細ページに移動したかったのですが、解決に時間がかかりました。初めはplanからuserにリンクをつけての移動ができたので、同じようにすればいいと考えましたが、<font color="Red">**前者は多対多で後者が１対多の関係**</font>だったので、やりたいことが違うとわかりました。原因は<font color="Red">**引数の数**</font>でした。引数を2つ設定したことで無事に解決することができました😄

# 🏰スポット詳細画面
![spot_list](https://user-images.githubusercontent.com/80377991/125780437-aa016554-3f46-4b03-b6aa-8e5b9d6cd043.gif)

## <font color="DarkOrange">**工夫した点**</font>
### **いいねボタンとコメント機能をAjax化**
いいねボタンとコメント機能を<font color="Red">**Ajax化**</font>したことで、ページが切り替わる時の<font color="Red">**ユーザーの待ち時間と、サーバーへの負担を減す**</font>ようにしました。

## <font color="Blue">**苦労した点**</font>
### **Ajaxが機能しない**
コメント機能の作成と削除をAjax化にしたかったのですが、<font color="Red">**リロードしないと動かない現象**</font>が起こりました。原因は<font color="Red">**jqueryが正しく読み込まれていない**</font>ことでした。読み込む場所が違っており正しい位置にしたことで無事に解決できました😄

#💪今後実装予定(Bプラン)

- テスト(Rspec)
- N+1問題
- AWSへデプロイ
- タグ機能
- 無限スクロール機能
- ページネーションのAjax化
- 画像をクリックしたらフォームに登録できる機能

# さいごに
- パートナーにこのアプリを使ってもらい、<font color="Red">**喜んでもらい、笑顔にする**</font>ことができました。また、<font color="Red">**もっとこうした方がいいといったアドバイス(要望)**</font>を頂いたので、ユーザー側からの意見として参考に修正していきたいと思います。

- 制作にあたっては、納期日(完成予定日)意識したことで、予定日の週は追い込まれることを経験しました。余裕を持った計画の逆算が必要だと感じました。

- またエラーに対しては仮説を立て調べ上げ、<font color="Red">**8割は自力で解決**</font>することができました。詰まっていたところが<font color="Red">**自力で解決できたときはとても嬉しかった**</font>です。

- 今後は継続的なサービス展開ができるように開発をしていきたいと考えています。