piyopiyo.exポータルチュートリアル １章～コマンド一発でWebアプリケーションを作ってみる～

本記事はpiyopiyo.exポータルチュートリアルの１章となります。

https://qiita.com/tuchiro/items/050e6b86afc35a843a7c

# 本章の目的

本章ではPhoenix標準のコマンドを使用し、デザインが入ってない状態で実行可能なWebアプリケーションを生成します。
また一部コードの修正により機能を変更します。

# コマンドラインを使ってデフォルト状態のMVC実装を生成する

phx.gen.Liveコマンドを使用してメッセージコンテキスト表示に必要なMVCの実装を作成します。

```shell-session:Console
mix phx.gen.live Messages Message messages display_name:string message:string deleted_at:naive_datetime
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/243163/f1cc52d9-5812-62e7-36d3-fbdce724ac6c.png)

正常に生成されたら、次に生成したプログラムに対応するテーブルを生成します。

```shell-session:Console
mix ecto.migrate
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/243163/f901c672-0586-97b1-77a5-2bbf8834214c.png)


生成されたデフォルトのエンドポイントをルーターに追加します

```Elixir:lib/phoenix_app_web/router.ex
  scope "/", PhoenixAppWeb do
    pipe_through :browser

    get "/", PageController, :index

    # add message default routing
    live "/messages", MessageLive.Index, :index
    live "/messages/new", MessageLive.Index, :new
    live "/messages/:id/edit", MessageLive.Index, :edit

    live "/messages/:id", MessageLive.Show, :show
    live "/messages/:id/show/edit", MessageLive.Show, :edit

  end
```

ここまでの作業でデフォルトで、パス/messagesへアクセスすると生成されたLivewViewページが動作します。

Replitで演習されている方は、Webview画面から「Open in a new tab」アイコンをクリックし、別タブで表示されたPhoenixアプリのURLの末尾に/messagesを追記することで該当画面に直接アクセスすることができます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/243163/08ef2a46-ae40-e923-9d0f-1ddae870561c.png)


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/243163/4468f431-7b8d-a91e-29e0-ee5778ba16c7.png)

New Messageをクリックするとメッセージ登録ダイアログが開きます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/243163/36013b8b-ca01-b35e-0e90-a96f9fd9ca53.png)

必要事項を入力し、Saveボタンをクリックするとメッセージが登録されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/243163/f2e1a221-ef56-125e-87c5-ae3989c9cdcf.png)

後の改修結果の確認の為、同様の操作を繰り返して全部で6個のメッセージを登録した状態

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/243163/c4e418d5-292e-6a64-71cf-4240ba42a3f0.png)



# モデル実装を修正する

既存のlist_messages/0関数を修正し、
- 引数なしの場合は 応答する件数を５件までとし、更新日時の降順に並べる
- 文字列"all"が引数指定された場合すべてのデータを更新日時の降順に並べる
の２つの関数を実装します。

```Elixir:lib/phoenix_app/message.ex
～中略～
# delete default list function
#  @doc """
#  Returns the list of messages.
#
# ion
#  ## Examples
#
#      iex> list_messages()
#      [%Mesage{}, ...]
#
#  """
#  def list_messages do
#    Repo.all(Mesage)
#  end

  # add here 
  def list_messages("all") do
    Message
    |> order_by(desc: :updated_at)
    |> Repo.all()
  end

  # add here
  def list_messages() do
    Message
    |> order_by(desc: :updated_at)
    |> limit(5) 
    |> Repo.all()
  end
～中略～
```

先ほどのmessages画面をリロードすると、件数が5件まで、かつ登録した逆順に変更されたことが確認できます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/243163/6e5ce5c0-5e65-8050-f6df-70d86e6e1408.png)

# 次の章

https://qiita.com/tuchiro/items/0a1090e432ccc2ff4e9a

# 関連情報

- MessagesMVC生成直後のリポジトリ断面

https://github.com/TakutoYoshimura/LiveViewJpTutorial_PiyoPiyoExPortal/releases/tag/v0.1.0-create-messages-mvc

- この演習完了時点のリポジトリ断面

https://github.com/TakutoYoshimura/LiveViewJpTutorial_PiyoPiyoExPortal/releases/tag/v0.1.1-modify-messages-functions