# Chapter1 課題2

前回作成した学習記録アプリの欠点が見つかりました
それはデータが永続化していないこと。リロードするとすべてのデータが消えてしまうのです
あなたはデータを永続化してあなたのスマートフォンから実際にサービスを利用できるよう取り組むことにしました

# MVP1
データベースから学習記録データを取得して初期表示する

## TODO
- [x] 課題1で作成したアプリを[Vite](https://ja.vitejs.dev/)で作ったReact+JavaScriptの環境の上に作り直してください(コードはコピペでOK)
- [x] [Supabase](https://supabase.com/)のアカウントを作成する
- [x] 新規プロジェクトを作成する(プロジェクト名はstudy-record、データベースパスワードは適当でOK)
- [x] Table Editorで以下のテーブルを作成する

テーブル名 : study-record

|column|type|option|
|---|---|---|
|id|uuid||
|title|varchar|non null|
|time|int4|non null|

ここでtitleやtimeは課題1で自分がつけた名前にすること


- [x] テストデータを3つ作成する

|title|time|
|---|---|
|記録1|10|
|記録2|2|
|記録3|4|

- [x] RLSをDisableに設定する
誰でも読み取れる権限にする(disableにしないと権限がないと読み取れない)
https://qiita.com/Sicut_study/items/1ab87c0c182fc42ad824

こうなっていればOK

- [x] 学習アプリを読み込んだ際に1度データベースから情報を取得してユーザーはみることができる
- [x] クライアントを設定する
supabaseからのデータは[subapase-client](https://supabase.com/docs/reference/javascript/installing)を利用することで可能
https://supabase.com/docs/reference/javascript/initializing
これをみてクライアントの初期設定を行う(他の記事なども参考にすること)
[この動画](https://youtu.be/CZlZgRo0bZ4?si=uE9pje_lqepzZjqi)の14分〜が参考になります
- [x] .envでシークレット情報を管理する
クライアントの設定で紹介した動画では.env.localですが、.envで進めてください。
.envについては[こちら](https://for.kobayashiii.dev/articles/nqbaxkkf8)を読んで理解してみる
環境変数の読み込みに関しては以下も参考にする(VITEプロジェクトは環境変数名を命名規則に乗っ取らないと読み込めない)
https://ja.vitejs.dev/guide/env-and-mode.html
動画で.env.localにしていますが、.envというファイル名に変更してください。違いは各自調べること
- [x] .gitignoreに.envを追加する
プロジェクトURLや鍵などは.envで管理して.gitignoreに追加すること(pushすると悪用されるため)
- [x] Githubにpushして.envがリポジトリに含まれていないかを確認する
- [x] データベースからデータを取得してuseStateの初期値にする(サイト読み込み時に1回だけ)

以下のようになればOK


- [x] データ読み込みのタイミング(useEffect)時にLoading画面がでること(loadingのステートをtrue/falseで表示する画面を変える)

# MVP2
学習記録を追加する際にデータベースにも記録する

## TODO
- [x] 登録を押したらsupabaseのテーブルにもデータを作成してみることができる(リロードしたら追加したデータも初期表示される)

# MVP3
- [x] 登録したデータを削除できる
- [x] 記録の横に削除ボタンをみることができる
- [x] 削除ボタンを押すとデータが削除される(idを参照して削除できるようにする、追加して削除してもできることを確認)
- [x] supabaseのテーブルからも削除される

# MVP4
アプリをデプロイしてスマホから利用できる
- [x] [Firebase](https://firebase.google.com/?hl=ja)のアカウントを作成する
- [x] Firebaseのプロジェクトを作成する
- [x] ウェブアプリに登録
- [x] Firebase Cliのインストール
- [x] firebase login
- [x] firebase init hostingをする
- [x] アプリをビルドする(npm run build)
- [x] デプロイする (firebase deploy)
[記事](https://zenn.dev/yumemi_inc/articles/2020-10-06-react-firebase-deploy)を参考にデプロイする(firebase sdkの設定も紹介しているが不要

リンクからアクセスできたら成功(スマホからも確認)


[今回の模範解答アプリ](https://study-record-b2afd.web.app/)

- [x] [makeコマンド](http://omilab.naist.jp/~mukaigawa/misc/Makefile.html)でデプロイできるようにする(Macは標準で入っています)
- [x] makeコマンドをインストールする

        # Ubuntu
        $ sudo apt install make

- [x] Makefileを作成する
以下のコマンドを実行してファイルを作成

        $ touch Makefile

以下の内容を貼り付ける

        deploy:
            npm run build
            firebase deploy

- [x] 学習アプリを一部変更する(見た目に見える部分であればどこでもOK、タイトル変えたりボタン名変えたり)
- [x] makeコマンドで一発でデプロイする

        $ make deploy

make deployでnpm run buildとfirebase deployを2つ実行してくれる
- [x] 新しい変更がデプロイされて反映しているかをチェックする

デプロイしたらURLをGithubに追加してください


# MVP5

開発者はアプリをgit pushするだけで本番に自動デプロイ(cd)することができる

- [x] アプリを CI/CDすることができる
- [x] GithubActionsでHelloWorldをすることができる
[ハンズオン](https://qiita.com/Teach/items/d2c4d7bec98228df1807)を実施する
- [x] Push時にhelloWorldする
調べてみるとすぐわかるはず
- [x] Reactをビルドすることができる
- [x] Firebaseにデプロイができる

デプロイしたアプリを再度アクセスして開ければ成功

※ 一工夫しないとCDでのデプロイはできません

それぞれのステップで何をしているか理解しておくこと

https://zenn.dev/jinwatanabe/articles/4026d373383739

# MVP6

CICDに向けて自動テスト(CI)を作成します

- [x] Jestとreact-testing-libraryを導入する
https://hackmd.io/65Ei6ID0TNG-jCiKJdiDKw

- [x] タイトルが表示されている
- [x] フォームに学習内容と時間を入力して登録ボタンを押すと新たに記録が追加されている
数が1つ増えていることをテストする
- [x] 削除ボタンを押すと学習記録が削除される
数が1つ減っていることをテストする
- [x] 入力をしないで登録を押すとエラーが表示される
- [x] パイプラインにCIのステップを追加する

# MVP7

- [x] READMEを作成する
自分で好きなように書いてください
最低限必要な項目
- サービス名
- サービスの説明
- 環境設定の方法(.envなど)
- 起動の仕方
https://qiita.com/Sicut_study/items/3b762364c95e4673bfbe
- [x] 記事を1本投稿する