yps並走備忘録　Task6　既存コードからアプリケーションを作成する（To Do List)

いよいよ本格的にWebアプリケーションを作成します。
今回の開発ではWebアプリの定番CRUD操作も入ってきますし、Laravelのミドルウェアも使います。

また開発でも機能単位での開発になるのでこのタスクからは本格的にgit-flowを使うことが推奨されています。
>参考：[git-flow図解](https://qiita.com/ohnaka0410/items/7c7fa20710dfd72b7d7a)

git-flowはWeb開発の現場では当たり前に使われているそうなので、この機会に慣れておきたいですね！
#注意事項
2020年/20/19日現在Laravel 8のリリースにより最新版のLaravelを導入した場合本記事やリンク先の参考記事の通りの実装だと動かなくなる可能性があるのでLaravelのプロジェクト作成時には以下のコマンドで7.25.0で作成することをおススメします。
`cd /var/www/html` //まずはアプリを公開するnginxの公開ディレクトリに移動
`composer create-project --prefer-dist laravel/laravel myapp2 "7.25.0"` //Laravelを7.25.0バージョンで構築します

#まずは認証系を作っていきましょう

下記参考記事をなぞりながら認証機能を導入していきます
>参考：[Laravel 6.x laravel/uiを利用してbootstrap 4を適用する] (https://blog.hrendoh.com/laravel-6-setup-bootstrap4-with-laravel-ui/)

`cd myapp2`
`composer require laravel/ui "2.*"` //フロント側のログインのテンプレートを一発で導入できるLaravel/uiを入れます
`npm install`　
`php artisan ui bootstrap --auth`
`npm install cross-env` 
`npm install`
`npm run dev`

npm run devでエラーが出た場合は下記コマンドで対応
`rm ./package-lock.json`
`rm -rf ./node_modules/`
`npm install`

**補足：** npm run devは導入したjsやcss等のライブラリやフレームワークをビルドするコマンド、上記の場合で言うとimportしたbootstrap関連のscss,jsファイルなどをまとめていい感じにpublicに配置してくれます。
なお、ビルドには多少時間かかるので面倒な場合は一先ずbladeとかに書きなぐっておいて、後ほどSassやjsファイルに突っ込んでビルドするのもいいかもしれないです。

>参考：
[dotenvとcross-envで環境変数を設定して開発環境の処理を切り替える](https://www.tam-tam.co.jp/tipsnote/program/post17589.html)
[npm run devに関して：Readouble](https://readouble.com/laravel/5.4/ja/mix.html)

ここまでやったら一先ず新しく構築したアプリへ公開ディレクトリを移しておきましょう

`sudo vi /etc/nginx/conf.d/default.conf`

```
/var/www/html/yps/public;
　　　　　　↓
/var/www/html/myapp2/public;
```
※3か所くらいあります

WebサーバーとPHP-FPMを再起動
`sudo systemctl restart nginx && sudo systemctl restart php-fpm`
キャッシュクリア
`php artisan cache:clear &&php artisan config:clear && php artisan route:clear &&php artisan view:clear`
`composer clear-cache && composer dump-autoload --optimize`
※上記のコマンドは割と使うので.bashrc等でエイリアスに指定しておくのがおススメ

オーナーとディレクトリ権限変更
`sudo chown -R centos:nginx /var/www/`
`sudo chmod -R 777 storage/ bootstrap/cache/`
※このコマンドも新しいファイルやディレクトリ作ったり、ファイルを移動したりすると稀に使うのでエイリアス登録推奨

ここまでやると画面右上にLOGIN REGISTERという認証用のリンクが出ているはずです。
<hr>
**いざ！アプリ構築！**
いよいよ、アプリを構築していきます。
とはいえ、いきなりだと何から手を付けていいか分からないと思うので、最初はハンズオンで…

`php artisan make:model Task -m` //-mオプションでマイグレーションファイルも同時に作成します

>参考：[Readouble:マイグレーション](https://readouble.com/laravel/7.x/ja/migrations.html)
（ザックリ言うとDBとやり取りするのを任せるファイル、このファイルを通じてLaravelではSQLのデータ型やカラムの構造などを含めたデータベース操作を行います）

**アプリで使うデータベースを作成**
`mysql -u root -p`
`create database myapp2db;`
`exit`

**作成したDBをLaravelと連携させます**
`vi .env`

```
//下記を編集
DB_DATABASE=myapp2db                                                                                
DB_USERNAME=root
DB_PASSWORD="パスワード"
```

**設定が終わったら実際に接続します**
`php artisan migrate`
//念のためテーブルがちゃんと作られているか確認
`mysql -u root -p -D myapp2db`
`show tables;`

```
※tasksテーブルが作成されています
+--------------------+
| Tables_in_myapp2db |
+--------------------+
| failed_jobs        |
| migrations         |
| password_resets    |
| tasks              |
| users              |
+--------------------+
```

あとは下記参考リンクのコードを模写しながらタスク管理アプリを実装します。
なお、本タスクのクリア要件は

- ユーザー登録後に送信されたメールで認証したユーザーのみログイン可能
- ログイン後にタスク一覧画面に変遷
- タスク一覧及び個別画面はログインしていないと見られない
- ログアウト機能の実装

だそうです。

>参考：
[サンプルソース(GitHub)](https://github.com/hrendoh/laravel-ui-bootstrap-tasks)
※サンプルソースに一部修正が必要な個所があります↓
[クリア要件：画面の変遷](https://github.com/yotaro-ok/yps/issues/16#issuecomment-687560678)

#補足
gmailによる認証はセキュリティの関係でハマりやすいのと、別アカウントを取る手間もあるのでおススメは下記ブログで紹介されているmailtrapというWebサービス。メール関係の実装のテストなんかに気軽に使えて便利です。

>参考:[2020-09-05 yps学習記録その6](https://paca-gatsby.netlify.app/2020-09-05/)



簡単にできてしまった方は追加機能開発をしてみるのがおススメです。（結構沼れます）
- タスクのソート機能
- 期限を過ぎたタスクの色変更
- メールでの期限通知
- 検索機能
- ユーザーにタスクを紐づけ
- その他モロモロ

>参考：[Laravel-Todoアプリに一週間機能追加チャレンジ](https://paca-gatsby.netlify.app/laravel-todoapp-studylog/)

私は
- ソート機能（ライブラリ使用）
- 表示色変更
- ユーザーに紐づけ（自分の物しか見られない）
上記に加えて下記参考リンクのカレンダー機能をガッチャンコしてみました（これがかなりの沼だった…）

>参考：[Laravelの教科書：カレンダーアプリを作ろう](https://note.com/laravelstudy/m/m7f68f7db4055)

具体的には上記参考リンクの臨時休業の設定に当たる部分を流用して簡易的なシフトの入力（日勤、夜勤、休み）を入力できるようにしました。
もう少し発展させて管理者画面から操作できるようにしてあげればシフト管理アプリとしても使えそうですね…今後の課題として作り込みをゆっくりやっていきたいと思います。

Task6は結構カスタマイズのしがいもあると思うので、是非色々自分好みのカスタマイズを行ってみましょう！