【個人開発】フードデリバリー配達員の情報交換サイトを作りました。


# サービスの概要
【サイト名】
Fodeli Online

https://fodelionline.site/

![スクリーンショット 0004-02-24 4.27.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1794066/80a8464a-0909-adfe-eb2d-8039be9f72fb.png)


【コンセプト】
フードデリバリー配達員の情報交換や交流を目的としたサービス

【サービスの開発に至るまでの背景】
私自身、２社フードデリバリーで働いていた経験があり、出来高制ということもあり、注文が来なくて稼げない時期がありました。
一般的な会社だったら上司に仕事のコツを教えて貰えたりすると思いますが、完全個人のこの仕事では基本的には自分でコツを見つけていくしかありません。
そんな中で、配達員同士がもっと気軽に情報交換ができるサービスがあったらいいなと考え、このサービスを開発することにしました。

# アプリケーションの機能

ユーザー登録機能
　■ ログイン機能
　■ ログイン情報の保持
　■ ユーザー情報編集機能
　■ プロフィール画像変更機能(carrierwave)
　■ 検索機能
ツイートの投稿機能
　■ 投稿一覧表示機能
　■ 投稿詳細表示機能
　■ 画像投稿機能(carrierwave)
　■ コメントの投稿と削除機能
　■ いいね機能(Ajax)
　■ 検索機能
ページネーション機能(Kaminari)
オープンチャット機能
　■ コメントの投稿と削除機能(Ajax)
　■ 地域別絞り込み機能
個人チャット機能
　■ コメントの投稿と削除機能(Ajax)
DB テーブルのリレーション管理
DB トランザクション制御機能
通知機能(フォロワーがツイートした時など)
フォロー機能(Ajax)
単体テスト機能(Rspec)
統合テスト機能(Rspec)

# 技術的ポイント
・**RSpec**で Model, Request, System テスト記述(計 258examples)
・**Ajax**を用いた非同期処理（フォロー/未フォロー、ツイートに対するいいね機能などの切り替え表示）
・**Bootstrap**によるレスポンシブ対応
・**Rubocop**を使用したコード規約に沿った開発
・**15 個のモデル**をそれぞれ関連付けて使用

# 設計

### 画面設計(モックアップ)

![モックアップ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1794066/0369e2b3-1026-bdd8-3f30-e2b3ed102cf7.png)

### DB設計(ER図)

![db.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1794066/bb0acaef-3e70-a497-c76e-33eacaa91067.png)

# AWS(インフラ)構成図

![aws.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1794066/3e770b06-bfc7-339b-c8da-14e5428da7d2.png)

# 使用技術

Ruby 2.5.7
Ruby on Rails 5.2.3
PostgreSQL 11.14
Nginx
Puma
Docker/Docker-compose
Rspec
Bootstrap
Rubocop
AWS
　■ VPC
　■ EC2
　■ RDS
　■ Route53
　■ ALB
　■ SES

# 開発の流れ

### 一人擬似チーム開発の練習
チーム開発の練習として
【issue作成　→　branch作成　→ プルリク　→ マージ】
この流れで開発を進めました。（合計32issue）

![スクリーンショット 0004-02-23 23.17.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1794066/5dd58a8b-3397-7a09-7afb-80a25cbb0ff1.png)

### push前にテストとリンターでコードのチェック

Rspecで書いたテストがパスしたら、Rubocopでコードのチェックをし、修正が必要ならコードの修正。
その後、再度テストがパスしたらpushを実行しています。

# 開発環境から本番環境へデプロイまでの流れ
【開発環境】
dockerコンテナ起動→コーディング→githubにpush

【本番環境】
EC2にSSHでログイン→githubからpull→dockerコンテナ起動

# アプリケーションのデモ動画
### ユーザー関連
動画内容
■ユーザー新規登録登録
■ログイン&ログアウト
■プロフィール画面の紹介
■プロフィール編集機能
■パスワード再設定
■ユーザーをフォロー

<iframe width="560" height="315" src="https://www.youtube.com/embed/Rq0g6Ku-s68" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

### ツイート関連
動画内容
■ツイートの投稿と削除
■画像投稿
■コメント機能
■いいね機能
■検索機能

<iframe width="560" height="315" src="https://www.youtube.com/embed/p28eXQl0sBg" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

### チャット関連
動画内容
■個人チャット機能の紹介
■オープンチャット機能の紹介

<iframe width="560" height="315" src="https://www.youtube.com/embed/vAUYwapZ5cU" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>


# 参考にした教材
Rails

https://railstutorial.jp/

Ruby

https://www.amazon.co.jp/%E3%83%97%E3%83%AD%E3%82%92%E7%9B%AE%E6%8C%87%E3%81%99%E4%BA%BA%E3%81%AE%E3%81%9F%E3%82%81%E3%81%AERuby%E5%85%A5%E9%96%80-%E6%94%B9%E8%A8%822%E7%89%88-%E8%A8%80%E8%AA%9E%E4%BB%95%E6%A7%98%E3%81%8B%E3%82%89%E3%83%86%E3%82%B9%E3%83%88%E9%A7%86%E5%8B%95%E9%96%8B%E7%99%BA%E3%83%BB%E3%83%87%E3%83%90%E3%83%83%E3%82%B0%E6%8A%80%E6%B3%95%E3%81%BE%E3%81%A7-Software-Design/dp/4297124378/ref=sr_1_1_sspa?__mk_ja_JP=%E3%82%AB%E3%82%BF%E3%82%AB%E3%83%8A&crid=GLEBJ0IQYI04&keywords=ruby&qid=1645640496&sprefix=ruby%2Caps%2C207&sr=8-1-spons&psc=1&spLa=ZW5jcnlwdGVkUXVhbGlmaWVyPUEzUDhVN1JPRUcwRVM1JmVuY3J5cHRlZElkPUEwOTUzOTQ4N1hMQUJIUkZQWk9KJmVuY3J5cHRlZEFkSWQ9QVJRRjRQV1Q2MVJWMiZ3aWRnZXROYW1lPXNwX2F0ZiZhY3Rpb249Y2xpY2tSZWRpcmVjdCZkb05vdExvZ0NsaWNrPXRydWU=

HTML&CSS

https://www.amazon.co.jp/%E3%82%B9%E3%83%A9%E3%82%B9%E3%83%A9%E3%82%8F%E3%81%8B%E3%82%8BHTML-CSS%E3%81%AE%E3%81%8D%E3%81%BB%E3%82%93-%E7%AC%AC2%E7%89%88-%E7%8B%A9%E9%87%8E-%E7%A5%90%E6%9D%B1/dp/4797393157/ref=sr_1_13?__mk_ja_JP=%E3%82%AB%E3%82%BF%E3%82%AB%E3%83%8A&crid=285KT8HRAYFGN&keywords=html&qid=1645645603&sprefix=html%2Caps%2C282&sr=8-13

ITの基礎

https://www.amazon.co.jp/%E3%82%A4%E3%83%A9%E3%82%B9%E3%83%88%E5%9B%B3%E8%A7%A3%E5%BC%8F-%E3%81%93%E3%81%AE%E4%B8%80%E5%86%8A%E3%81%A7%E5%85%A8%E9%83%A8%E3%82%8F%E3%81%8B%E3%82%8BWeb%E6%8A%80%E8%A1%93%E3%81%AE%E5%9F%BA%E6%9C%AC-%E5%B0%8F%E6%9E%97-%E6%81%AD%E5%B9%B3/dp/4797388811/ref=sr_1_6?__mk_ja_JP=%E3%82%AB%E3%82%BF%E3%82%AB%E3%83%8A&crid=30PVHSCCN6T85&keywords=web&qid=1645645670&sprefix=web%2Caps%2C225&sr=8-6

Linux

https://www.udemy.com/course/unscared_linux/

git

https://www.udemy.com/course/unscared_git/

docker

https://www.udemy.com/course/aidocker/

AWS

https://www.udemy.com/course/aws-and-infra/

https://www.amazon.co.jp/Amazon-Services-%E5%9F%BA%E7%A4%8E%E3%81%8B%E3%82%89%E3%81%AE%E3%83%8D%E3%83%83%E3%83%88%E3%83%AF%E3%83%BC%E3%82%AF-%E3%82%B5%E3%83%BC%E3%83%90%E3%83%BC%E6%A7%8B%E7%AF%89-%E6%94%B9%E8%A8%823%E7%89%88/dp/4296105442/ref=sr_1_11?__mk_ja_JP=%E3%82%AB%E3%82%BF%E3%82%AB%E3%83%8A&crid=3KMUGH2JK6DIW&keywords=AWS&qid=1645640465&sprefix=aws%2Caps%2C312&sr=8-11