Ruby on Railsでプロジェクト管理WEBアプリを開発

# はじめに
UdemyでRuby on Railsのコースを学習したので、そこで学んだ知識を生かしてWEBアプリを開発しました。


# ソースコード
GitHubで公開しています
https://github.com/Ryota7101/milestone.git

#主な機能　
* miliaによるマルチテナント機能
* タスク機能
* タスクへのカテゴリ付け
* ファイルアップロード機能
* プレミアム会員機能
* 管理者機能


# アプリ詳細

##　サインアップ
<img width="1417" alt="スクリーンショット 2019-08-16 15.52.29.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/239266/1e490e52-4e97-2325-674c-e6dab1c115e0.png">

サインアップ時にフリープランかプレミアムプランかを選択できます。
フリープランの場合はカード情報入力欄が表示されません。
<img width="1377" alt="スクリーンショット 2019-08-16 15.56.47.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/239266/7ba09eeb-e1f7-5009-6486-b5f46d438aab.png">

プレミアムプランに切り替えると、クレジットカード情報入力欄が表示されます。
※情報を登録して処理する機能を設定してないので、ここで入力した情報は保存されません。
<img width="1382" alt="スクリーンショット 2019-08-16 16.00.33.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/239266/c9a9143d-6849-46e5-49a2-488e8ce12a22.png">

## プロジェクト作成


<img width="1365" alt="スクリーンショット 2019-08-16 16.02.46.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/239266/6f2352d1-b430-247f-6127-93ea22fa21b8.png">


プロジェクトを作成すると、プロジェクト一覧に表示されます。
<img width="1389" alt="スクリーンショット 2019-08-16 16.04.00.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/239266/2c7502f9-40fb-66f5-65d2-3fc60c8d54b3.png">

プロジェクト詳細ページ
<img width="1385" alt="スクリーンショット 2019-08-16 16.04.59.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/239266/3a630992-42cd-9bb8-81f1-046997ba33ee.png">

## ファイルアップロード機能
テキストファイルや画像をアップできます。
※ただし、クラウドなど保存先を設定していないので、現状ではどこにもファイルは保存されません。
<img width="1376" alt="スクリーンショット 2019-08-16 16.09.37.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/239266/0043edd1-902d-72f4-cbd2-81645f9cdee9.png">

プロジェクトページにアップしたファイルが表示されます。
<img width="1378" alt="スクリーンショット 2019-08-16 16.10.12.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/239266/d7cd8924-b293-0a11-599b-3c638b4c46b3.png">

## タスク

タスク作成時にカテゴリ(後述)も指定できます。
<img width="1417" alt="スクリーンショット 2019-08-16 16.15.46.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/239266/bbb598c5-9182-2f3d-05a8-27c64d95e118.png">

<img width="1421" alt="スクリーンショット 2019-08-16 16.16.22.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/239266/0a5e894b-3133-378d-3c47-5ce235300d20.png">

作成したタスクがプロジェクトページに表示されます。
<img width="1396" alt="スクリーンショット 2019-08-16 16.16.51.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/239266/060d4a0d-72ea-8cdf-76d7-5742039d55ee.png">

## 管理者機能

Organization作成者は自動的に管理者として登録されます。
管理者がログインしてる場合は、ナビゲーションバーに
* メンバー追加
* プラン変更
* タスクのカテゴリ管理
のボタンが表示されます。

<img width="1415" alt="スクリーンショット 2019-08-16 16.17.30.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/239266/0b1b55c4-675d-6a1f-9144-1dc606730332.png">

## タスクのカテゴリ
タスクのカテゴリ管理(作成や削除)は管理者のみが行えます。
タスクを作成したり、タスクにカテゴリを設定するのは非管理者でも行えます。


<img width="1409" alt="スクリーンショット 2019-08-16 16.18.17.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/239266/2f973e0e-2812-680a-2eac-6994663f4f12.png">

カテゴリを作成すると、カテゴリ一覧ページに表示されます。
使用する場合は、タスク作成時にチェックを入れます。
<img width="1368" alt="スクリーンショット 2019-08-16 16.18.44.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/239266/0a54951a-6b6e-8392-a93f-bd4fe51e4f97.png">

## プラン変更

プランを途中で変更できます
<img width="1421" alt="スクリーンショット 2019-08-16 16.19.46.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/239266/f8d80d75-fa98-cbc2-2aea-97b4edb4f18e.png">

## メンバーを招待する

管理者はメンバーをプロジェクトに招待できます。
招待したい人の氏名やメールアドレスを入力すると、リンク付きのメールが相手に送信されます。
<img width="1429" alt="スクリーンショット 2019-08-16 16.21.21.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/239266/66f72104-3020-82f8-0bad-203ba3a315ee.png">

届いたメールのリンクをクリックすると、パスワード設定画面に移動するので、パスワードを入力します
<img width="1413" alt="スクリーンショット 2019-08-16 16.21.57.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/239266/f60253f9-e46f-7c10-be2c-ea5ae9f86009.png">

管理者がプロジェクトページを見ると、招待した相手の情報が表示されるので、Addボタンを押すと招待が完了します。
<img width="1418" alt="スクリーンショット 2019-08-16 16.26.27.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/239266/a53a3928-0372-c0c7-1698-a141a7d2dd40.png">


招待が完了すると、メンバー欄にメンバーの情報が表示されます。
<img width="1411" alt="スクリーンショット 2019-08-16 16.27.01.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/239266/c888db79-8dbc-d329-654a-87616cc5837b.png">

招待された相手がログインすると、管理者が作成したプロジェクトやファイル、タスクなどが表示されます。
※招待されたメンバーは管理者でないので、ナビゲーションバーにカテゴリ管理などのボタンは表示されません。
<img width="1419" alt="スクリーンショット 2019-08-16 16.28.00.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/239266/e9d2f5f6-7663-26b7-652c-b494a5aaa3c0.png">


<img width="1367" alt="スクリーンショット 2019-08-16 16.29.23.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/239266/76110ba2-ea51-f9d5-aa1f-214c4b491967.png">

## 別の組織を作成
試しに別の組織でサインアップして、これまで作成した情報が表示されないことを確認します。
<img width="1413" alt="スクリーンショット 2019-08-16 16.30.59.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/239266/07784a06-6687-b1ef-a5f3-8867477aa655.png">

これまでに作成した情報が表示されず、初期画面となっているため、組織ごとにデータが分かれてることがわかります。
<img width="1414" alt="スクリーンショット 2019-08-16 16.32.01.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/239266/5288f3ad-bc7a-2151-b627-91054e06a088.png">


# 終わりに
* Udemyのコースの内容が2015年ごろのもので、その通りにコードを描いても動かないことが多く、苦戦しました。(コースではRails4、著者は5で作成)

* 相変わらずコード書いて実際にweb上で動かして確認して・・とやってしまい、テストはおざなりになってしまった。。

* 実戦でRails使いたいです