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

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

本章の目的

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

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

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

Console

mix phx.gen.live Messages Message messages display_name:string message:string deleted_at:naive_datetime

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

Console

mix ecto.migrate

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

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を追記することで該当画面に直接アクセスすることができます。

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

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

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

モデル実装を修正する

既存のlist_messages/0関数を修正し、

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

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件まで、かつ登録した逆順に変更されたことが確認できます。

次の章

関連情報

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

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