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


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

また開発でも機能単位での開発になるのでこのタスクからは本格的にgit-flowを使うことが推奨されています。

参考:git-flow図解

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を適用する

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で環境変数を設定して開発環境の処理を切り替える
npm run devに関して:Readouble

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

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という認証用のリンクが出ているはずです。



いざ!アプリ構築!
いよいよ、アプリを構築していきます。
とはいえ、いきなりだと何から手を付けていいか分からないと思うので、最初はハンズオンで…

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

参考:Readouble:マイグレーション
(ザックリ言うと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)
※サンプルソースに一部修正が必要な個所があります↓
クリア要件:画面の変遷

補足

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

参考:2020-09-05 yps学習記録その6

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

参考:Laravel-Todoアプリに一週間機能追加チャレンジ

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

参考:Laravelの教科書:カレンダーアプリを作ろう

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

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