piyopiyo.ex #5:LiveViewでpiyopiyo.exの感想投稿サイトを作ろう!(2022/03/05)レポート


君がため春の野にいでて若菜摘むわがころも手に雪は降りつつ


Advent Calendar 2022 64日目1の記事です。
I'm looking forward to 12/25,2022
私のAdvent Calendar 2022 一覧


はじめに

Elixirを楽しんでいますか

2022/03/05(土)は、piyopiyo.ex #5:LiveViewでpiyopiyo.exの感想投稿サイトを作ろう!が開催されました。

YouTubeで配信 されていました
私は、YouTubeから参加しました。

elixir.jp Slackの#piyopiyo-exチャンネルに入っているとより楽しめます。

12:30 開始 Let's get started!!!

主催者お二人からの自己紹介。

@kn339264 なこさん
@t-yamanashi ワイエムエヌさん(ymn)

そして
@piacerex ピアちゃん

事前準備

今回のイベントでは、以下ができていることが前提です。

PostgreSQL

PostgreSQLは、Dockerで起動すると楽だとおもいます。

docker run -d --rm -p 5432:5432 -e POSTGRES_USER=postgres -e POSTGRES_PASSWORD=postgres postgres:13

Elixir

Elixir をインストールしておいてください。

Phoenixアプリの作成

mix local.hex
mix archive.install hex phx_new
mix phx.new piyopiyoex_portal
cd piyopiyoex_portal
mix setup

mix phx.server

私は以下のバージョンを使いました。

  • Elixir 1.13.1-otp-24
  • Erlang 24.2
  • Phoenix 1.6.6

Phoenixは、1.6系を使うと一番トラブルなくすすめられるとおもいます。
ということで、Elixirは1.12 or laterが必要です。


仕様検討

@kn339264 さんと @t-yamanashi さん、たまに @piacerex さんも参加して、検討をしました。
その様子を激写しました。

デプロイ

デプロイ先を検討。

セキュリティ

セキュリティ も検討。

13:33

チャイム が鳴って、@kn339264 なこさんは、宅配物を一瞬取りに行きました。

相棒

ハッピーマッサージャー

13:37

残り時間23分
ここからコーディング開始です。
果たして間に合うのか?
間に合うんです!!!

親の顔よりよく見るであろうPhoenixのデフォルト画面

mix phx.gen.live コマンド

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

lib/piyopiyoex_portal_web/router.ex を変更

上記、mix phx.gen.live コマンドを実行すると最後のほうにでてくるガイドをそのままコピペすればよいです。

lib/piyopiyoex_portal_web/router.ex
  scope "/", PiyopiyoexPortalWeb do
    pipe_through :browser

    get "/", PageController, :index
    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

mix ecto.migrate

これも、mix phx.gen.live コマンドを実行した最後にでてきます。
データベースに変更内容を伝えます。
俗にマイグレーションといわれるものです。

mix ecto.migrate

mix phx.server

再度、 mix phx.serverを起動してみましょう。
http://localhost:4000/messages にアクセスしてみましょう。

メッセージの一覧、作成、編集、削除の一通りの機能が、コマンドひとつでできあがっています
ということで、イベントの時間内 にすべての予定が 間に合いました

イベントの感想

参加者から寄せられた感想を厳選して、載せておきます!!!


環境構築を手厚くサポート。

次回予告

次回は作ったワイヤーフレームに沿って実装をします!
とのことです。

2022/04/02(土) 12:30 〜 の開催です。

piyopiyo.ex #6:LiveViewでpiyopiyo.exの感想投稿サイトを作ろう!続き


$\huge{さようなら〜}$


Wrapping up

Enjoy Elixir
$\huge{Enjoy\ Elixir🚀}$

2022/03/05(土)に開催された、piyopiyo.ex #5:LiveViewでpiyopiyo.exの感想投稿サイトを作ろう!のレポートを書きました。

elixir.jp Slackの#piyopiyo-exチャンネルにLet's join us! (れっつじょいなす)

以上です。

  1. @kaizen_nagoya さんの「「@e99h2121 アドベントカレンダーではありますまいか Advent Calendar 2020」の改訂版ではありますまいか Advent Calendar 2022 1日目 Most Breakthrough Generator」から着想を得て、模倣いたしました。