Phoenix 1.6.0でSqlite3を使ってみる

##はじめに
Phoenix 1.6.0でSqlite3が使えるので簡単なLiveViewで動くページを作ります

##この記事の実行環境
```
$ elixir -v
Erlang/OTP 24 [erts-12.0] [source] [64-bit] [smp:8:8] [ds:8:8:10] [async-threads:1] [jit]

Elixir 1.12.2 (compiled with Erlang/OTP 22)

$ mix phx.new -v
Phoenix installer v1.6.0
```

##プロジェクト作成
```--database sqlite3``` を指定するとSQLite3用になります。

```
$ mix phx.new sample --database sqlite3
* creating sample/config/config.exs
* creating sample/config/dev.exs
        〜  中略　〜
* creating sample/priv/static/images/phoenix.png
* creating sample/priv/static/favicon.ico

Fetch and install dependencies? [Yn] Y
* running mix deps.get
* running mix deps.compile

We are almost there! The following steps are missing:

    $ cd sample

Then configure your database in config/dev.exs and run:

    $ mix ecto.create

Start your Phoenix app with:

    $ mix phx.server

You can also run your app inside IEx (Interactive Elixir) as:

    $ iex -S mix phx.server
```

##DB作成

```
$ cd sample

$ mix ecto.create
Compiling 14 files (.ex)
Generated sample app
The database for Sample.Repo has been create
```

```ブロジェクト名.db``` ファイルが作成されていることを確認

```
$ ls
README.md  _build  assets  config  deps  lib  mix.exs  mix.lock  priv  sample_dev.db  test
```

##サーバ起動確認

```
$ mix phx.server

[info] Running SampleWeb.Endpoint with cowboy 2.9.0 at 127.0.0.1:4000 (http)
[debug] Downloading esbuild from https://registry.npmjs.org/esbuild-linux-64/-/esbuild-linux-64-0.12.18.tgz
[info] Access SampleWeb.Endpoint at http://localhost:4000
[watch] build finished, watching for changes...
```

http://localhost:4000/ にアクセスします。
![Screenshot from 2021-10-12 20-23-01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/295814/7658fed9-c5ab-a142-7eb8-824ed3d67e06.png)


確認後サーバは一度落とします。
Ctrl+C を２回

```
[info] GET /
[debug] Processing with SampleWeb.PageController.index/2
  Parameters: %{}
  Pipelines: [:browser]
[info] Sent 200 in 127ms
^C
BREAK: (a)bort (A)bort with dump (c)ontinue (p)roc info (i)nfo
       (l)oaded (v)ersion (k)ill (D)b-tables (d)istribution
^C
```

##LiveViewのページを作ります
```
$ mix phx.gen.live Accounts User users name:string
* creating lib/sample_web/live/user_live/show.ex
* creating lib/sample_web/live/user_live/index.ex
* creating lib/sample_web/live/user_live/form_component.ex
* creating lib/sample_web/live/user_live/form_component.html.heex
* creating lib/sample_web/live/user_live/index.html.heex
* creating lib/sample_web/live/user_live/show.html.heex
* creating test/sample_web/live/user_live_test.exs
* creating lib/sample_web/live/modal_component.ex
* creating lib/sample_web/live/live_helpers.ex
* creating lib/sample/accounts/user.ex
* creating priv/repo/migrations/20211012112657_create_users.exs
* creating lib/sample/accounts.ex
* injecting lib/sample/accounts.ex
* creating test/sample/accounts_test.exs
* injecting test/sample/accounts_test.exs
* creating test/support/fixtures/accounts_fixtures.ex
* injecting test/support/fixtures/accounts_fixtures.ex
* injecting lib/sample_web.ex

Add the live routes to your browser scope in lib/sample_web/router.ex:

    live "/users", UserLive.Index, :index
    live "/users/new", UserLive.Index, :new
    live "/users/:id/edit", UserLive.Index, :edit

    live "/users/:id", UserLive.Show, :show
    live "/users/:id/show/edit", UserLive.Show, :edit


Remember to update your repository by running migrations:

    $ mix ecto.migrate

```
##lib/sample_web/router.exを修正する
```scope "/", SampleWeb do``` の中に上記のコマンド実行時に表示している内容に修正します



```lib/sample_web/router.ex
defmodule SampleWeb.Router do
  use SampleWeb, :router

   # 〜  中略　〜

  scope "/", SampleWeb do
    pipe_through :browser

    ##↓↓↓↓↓↓↓↓↓↓↓↓↓↓　追加
    live "/users", UserLive.Index, :index
    live "/users/new", UserLive.Index, :new
    live "/users/:id/edit", UserLive.Index, :edit

    live "/users/:id", UserLive.Show, :show
    live "/users/:id/show/edit", UserLive.Show, :edit
    #↑↑↑↑↑↑↑↑↑↑↑↑↑↑　追加

    get "/", PageController, :index
  end

  # 〜  中略　〜
end
```

##マイグレーションし、サーバ起動

```
$ mix ecto.migrate
Compiling 13 files (.ex)
Generated sample app

20:36:07.098 [info]  == Running 20211012112657 Sample.Repo.Migrations.CreateUsers.change/0 forward

20:36:07.109 [info]  create table users

20:36:07.112 [info]  == Migrated 20211012112657 in 0.0s

$ mix phx.server

```

##動作確認
http://localhost:4000/users/
にアクセスします


「New　User」をクリック
![Screenshot from 2021-10-12 20-41-15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/295814/f77ae390-6121-9b13-2a3a-8247a1cf0fe0.png)

「Name」に好きな文字を入力し、「SAVE」をクリック

![Screenshot from 2021-10-12 20-41-58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/295814/e408aaa3-57a1-1e88-b8db-c277a61a7133.png)

![Screenshot from 2021-10-12 20-43-11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/295814/e8736f4e-2df4-434a-7f97-acdc6c38ed69.png)

![Screenshot from 2021-10-12 20-43-26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/295814/6c6d2ad8-18f3-3d26-237d-80c7c31cabe6.png)


これで動作確認できました

##おまけ
Ubuntu 20.04でsqlite3で登録した内容を確認

SQLite3をインストール

```
$ sdo apt install sqlite3
```

```sqlite3 ブロジェクト名.db``` でアクセス

```
$ sqlite3 sample_dev.db
SQLite version 3.31.1 2020-01-27 19:55:54
Enter ".help" for usage hints.

sqlite> 
```

select文で登録した内容を確認

```
sqlite> select * from users;
1|ほげほげ|2021-10-12T11:43:23|2021-10-12T11:43:23
sqlite> 
```