はじめに

この記事は Elixirアドベントカレンダーのシリーズ４の7日目の記事です

4-6日目の記事でまっさらなPhoenix ProjectをElixirDesktopで動くようになりました
本記事は実際に画面の作成とDBマイグレーションについて解説します

開発時のErlangのバージョンについて

開発環境ですが、デスクトップアプリ、iOS、Androidで行うことができますがコンパイルするErlangのバージョンを指定する必要があります

iOS,Android
-> Erlangをスマホ上で動かすスタティックライブラリのバージョンが 25.0.4のため
Erlang 25.0.4を使用すること
デスクトップアプリ
-> 25.0.4はインストール時にアプリとして起動するためのWxWidgetのパスを解決してくれないため、それが対策された
Erlang 26.1.2を使用すること

開発環境

ネイティブ機能を使わない限りはデスクトップアプリがお手軽ですし、スマホの開発環境を整えなくても開発ができます
以下のコマンドで表示できます

iex -S mix

スマホのシミュレーターで実際試しながら開発する場合、ビルドスクリプトでprod環境でコンパイルされていてホットリロードが効きかないため、

デスクトップアプリ起動したPhoenixサーバーを各OSのWebviewをから表示する設定を行います

lib/bookshelf.ex

    {:ok, _} =
      Supervisor.start_child(sup, {
        Desktop.Window,
        [
          app: @app,
          id: BookshelfWindow,
          title: "bookshelf",
          size: {400, 800},
-          url: "http://localhost:#{port}"
+          url: "http://localhost:#{4000}"
        ]
      })

この設定を行って以下のコマンドでデスクトップアプリとPhoenixサーバーを起動し、再度ビルドを行ってください

iex -S mix

本記事ではデスクトップアプリで開発を進めます

CRUD作成

それではいつものコマンドでCRUD画面を作ります

mix phx.gen.live Shelves Shelf shelves name:string

今回は認証はしないのでそのまま貼り付けます

lib/bookshelf_web/router.ex

defmodule BookshelfWeb.Router do
  ...
  scope "/", BookshelfWeb do
    pipe_through :browser

    get "/", PageController, :home
    
    live "/shelves", ShelfLive.Index, :index
    live "/shelves/new", ShelfLive.Index, :new
    live "/shelves/:id/edit", ShelfLive.Index, :edit

    live "/shelves/:id", ShelfLive.Show, :show
    live "/shelves/:id/show/edit", ShelfLive.Show, :edit
  end
  ...
end

Migration周り

ElixirDesktopでは端末のSqliteファイルに対してmix ecto.migrateはできないので起動時にmigrationをするようにします

priv/repo/migrationsフォルダをlib/bookshelf/にコピーします

コピー後は、マイグレーションのexsファイルのモジュールはPhoenix起動時に実行できないので拡張子を、exsからexに変更します

repo.exのinitialize関数に実行するマイグレーションのモジュール名を追加します
Ecto.Migrator.upはマイグレーションを実行する関数で
第1引数はRepoモジュール
第2引数はマイグレーション番号、今回はファイル名のタイムスタンプ
第3引数は先ほどコピーしたマイグレーションファイルのモジュール名
をそれぞれ指定します

lib/bookshelf/repo.ex

defmodule Bookshelf.Repo do
  ...
  def migration() do
    Ecto.Migrator.up(Bookshelf.Repo, 20_231_207_144_335, Bookshelf.Repo.Migrations.CreateShelves)
  end
end

起動時に開くページを指定

現在だと起動時にトップページが開かれて、別のページに行けないのでので棚一覧が開くようにします

lib/bookshelf.ex

defmodule BookShelf do
  ...

  @app Mix.Project.config()[:app]
  def start(:normal, []) do
    ...
    {:ok, _} =
      Supervisor.start_child(sup, {
        Desktop.Window,
        [
          app: @app,
          id: BookshelfWindow,
          title: "Bookshelf",
          size: {400, 800},
-          url: "http://localhost:#{port}"
+          url: "http://localhost:#{port}/shelves"
        ]
      })
  end
end

CRUD画面が表示されデータを追加できました

最後に

本記事では、開発時の注意点、CRUD画面、DBマイグレーションにつて解説しました
ですが、このままだとブラウザのネイティブ機能でWebViewでは使えない削除時のComfirmダイアログが、表示されないため独自に実装を行います

本記事は以上になりますありがとうございました

ElixirDesktop CRUD画面作成とDBマイグレーションについて