[2023年12月版]ElixirDesktopでスマホアプリを作る - Phoenix1.7のアプリを起動(モバイルアプリ化する)

こんにちは！
プログラミング未経験文系出身、Elixirの国に迷い込んだ？！見習いアルケミストのaliceと申します。
今回はElixirDesktop Phoenix1.7のアプリをWindows11 + WSL2で動かす手順をまとめなおします。

# 目的
Phonenix+LiveViewでCRUD機能のあるアプリを実装してエミュレータやスマホ実機で動かしたい。

## 実行環境
Windows 11 ＋ WSL2 ＋ Ubuntu 22.04
Elixir v1.15.7-otp-26 
Erlang v26.1.2 
Phoenix v1.7.3

# 今回やりたいこと
Phoenix1.7をElixirDesktopの環境で動かしたい。
前回、デスクトップ(PC)での動作確認ができたので、android-studioのプロジェクトを作ってモバイル(SP)での動作確認をしたい。

# android-studioプロジェクトの作成
## android-example-appのリポジトリをクローン
プロジェクトのルートディレクトリまで戻って、android側の設定をしていきます。
```bash:shell
cd .. #todo_rootディレクトリまで戻る
git clone git@github.com:elixir-desktop/android-example-app.git
```

現在のディレクトリ構成は以下の通りです。
```
todo_root
　├todo_app
　└android-example-app
```
## run_mixの変更
run_mix[^5]内で今回使用しないスクリプトをコメントアウトします。
使用するプロジェクトを先ほど作成したtodo_appに切り替えます。
```diff_shell:android-example-app/app/run_mix
#!/bin/bash
set -e

BASE=`pwd`
APP_FILE="$BASE/src/main/assets/app.zip"
export MIX_ENV=prod
export MIX_TARGET=android

- if [ ! -d "elixir-app" ]; then
-   git clone https://github.com/elixir-desktop/desktop-example-app.git elixir-app
- fi

- # using the right runtime versions
- if [ ! -f "elixir-app/.tool-versions" ]; then
-   cp .tool-versions elixir-app/
- fi

- cd elixir-app
+ cd ../../todo_app

if [ ! -d "deps/desktop" ]; then
  mix local.hex --force
  mix local.rebar
  mix deps.get
fi

- if [ ! -d "assets/node_modules" ]; then
-   cd assets && npm i && cd ..
- fi

if [ -f "$APP_FILE" ]; then
  rm "$APP_FILE"
fi

mix assets.deploy && \
  mix release --overwrite && \
  cd "_build/${MIX_TARGET}_${MIX_ENV}/rel/todo_app" && \
  zip -9r "$APP_FILE" lib/ releases/ --exclude "*.so"
```

## run_mixの実行
先にrun_mixを単体で走らせて、リリースビルドを作成しておきます。
```diff_shell:android-example-app/app
./run_mix
```


## run_mixをブランクにする
run_mixをそのままにしてAndroid StudioのRunボタン（Android Studioの画面右上にある、緑色の▷ボタン）を押すと、再びビルドが走ってしまいます。
現時点ではrun_mixを実行済みでリリースビルドが出来上がり済のため、run_mixはもう使用しません。
よって、run_mixは別名でバックアップとして取っておき、run_mixそのものはブランクにします。
```bash:shell
cp run_mix run_mix_build
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/677280/b8ab8558-698c-5a64-390a-7b3f0413a3b6.png)


## Android Studioを起動
Android Studioを起動します。
```bash:shell
~/android-studio/bin/studio.sh
```

run_mixとrun_mix_buildがあることを確認してファイルを開きます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/677280/e831951b-4417-f74f-fdcf-92e6a6dd9101.png)


## Android Studioでapkファイルを作る
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/677280/77e7ebad-309e-ab39-f784-bbe7801cbb3b.png)

# 実機転送する
googleドライブにapkファイルをアップロード→実機でダウンロード
※セキュリティの問題が発生する場合はこちらをご参照ください

https://qiita.com/Alicesky2127/items/623628ef64a3295fd8c5#%E5%AE%9F%E6%A9%9F%E3%81%AB%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB%E3%81%A7%E3%81%8D%E3%81%AA%E3%81%84%E3%81%A8%E3%81%8D

Phoenix1.7が起動しました！(^▽^)/
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/677280/b114a1b6-6e62-2e12-5f03-0a0a01a8d6ea.png)


----------------------
以降はエラーが出た場合にどう対応したかのログです。
## エラー内容1
エラー文
`SDK location not found. Define a valid SDK location with an ANDROID_HOME environment variable or by setting the sdk.dir path in your project's local properties file at '/home/alice/StudioProjects/todo_root/android-example-app/local.properties'.`

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/677280/93fa4db4-e016-198a-314d-2871c0288138.png)

とはいえ、`local.properties`に記載はちゃんとされている。むむむ...
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/677280/4d2a9eeb-8004-4cf2-06c9-4356f6058de3.png)


### 対応方法
#### Android Studioで開くディレクトリを変えた
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/677280/e831951b-4417-f74f-fdcf-92e6a6dd9101.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/677280/96e80c80-a47e-2363-211b-ef76570dfb5f.png)

...ということはAndroid StudioがSDKのある場所(path)を読み込めなかったのかな。


# ～Elixirの国のご案内～
↓Elixirって何ぞや？と思ったらこちらもどぞ。Elixirは先端のアレコレをだいたい全部できちゃいます:laughing::sparkles::sparkles:

https://qiita.com/piacerex/items/09876caa1e17169ec5e1

↓ゼロからElixirを始めるなら「エリクサーチ」がおすすめ！私もエンジニア未経験から学習中です。

https://elixir-lang.info/topics/entry_column


↓[We Are The Alchemists, my friends!:bouquet:](https://qiita.com/torifukukaiou/items/6bcd5bbb80df9e594e9e "Awesome-san's Awesome article")[^10]
Elixirコミュニティは本当に優しくて温かい人たちばかり！
私が挫折せずにいられるのもこの恵まれた環境のおかげです。
まずは気軽にコミュニティを訪れてみてください。[^11]


https://speakerdeck.com/elijo/elixirkomiyunitei-falsebu-kifang-guo-nei-onrainbian

[^0]:前回の記事はandroid-example-appを動かす環境構築を目的としており、android-example-appのREADMEにてElixir, Erlangをバージョン指定されていたためそちらに合わせていました。

[^2]: sqlite3の導入。参考にさせていただきました。 https://qiita.com/t-yamanashi/items/ef4c5bcab4a130105760

[^3]: 外部とはローカルホスト（同一マシン）以外を指す。

[^4]: https://github.com/elixir-desktop/desktop/blob/5927dc42d97305c43cad523b905153b687434219/lib/desktop/os.ex#L21

[^5]: run_mixとは
ダウンロードしたリポジトリ内のrun_mixはビルドスクリプトといって、
1.GitHubからexampleをcloneしてくる
2.ライブラリのインストール等を行う
3.リリース(prod環境ビルド)に必要な処理を行う
4.Zipで圧縮
5.Android側が読み込むようにしてある場所にコピー
以上の処理をまとめて走らせてくれるシェルスクリプトのこと。
https://qiita.com/Alicesky2127/items/5f9a1c6496b1c083720f#run_mix%E3%82%92%E5%AE%9F%E8%A1%8C%E3%81%99%E3%82%8B
※なお、今回は1.についてはコメントアウトして実施しないようにしている。

[^10]: @torifukukaiouさんのAwesomeな名言をお借りしました。Elixirコミュニティを一言で表すと、これに尽きます。


[^11]: @kn339264さんの素敵なスライドをお借りしました。Elixirコミュニティはいろんな形で活動中！