Ubuntu 22.04 にElixirDesktopの開発環境を作成しよう

↓こちらをUbuntuで動かす方法を記述します

https://github.com/elixir-desktop/android-example-app

## 前提事項

↓こちらのElixirのインストールまで終わっている前提です

https://qiita.com/t-yamanashi/items/9cb46beed0506edf26c6

理想は実機、実機でないVM等での場合はか必ずネットワークはNATでなくてブリッジ等で接続してください
AndroidにアプリをWifi経由で転送する場合は同じネットワークアドレスでないと転送できませんでした

KVM（VM）でブリッジの設定方法はこちらです

https://qiita.com/t-yamanashi/items/b052a46863c8694a8143

他のVMでもブリッジまたは、外部接続の表記の設定があると思います

KVMで動かす時はKVMでメモリは16GB割当ないとエミュレータが起動しませんでした
## インストールをはじめましょう
「OS（Ubuntu 22.04）のインストールから初める仕事用Elixir開発環境の作成方法」で環境構築している場合は
差分は、「Android Studio + NDK」のみです

Android Studioをダウンロードします

https://developer.android.com/studio

2022/12/17時点

Download Android Studio

![Screenshot from 2022-12-17 18-56-51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/295814/02b26240-cbde-8bec-d80a-4d8aa28d54e3.png)

![Screenshot from 2022-12-17 18-57-54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/295814/f8febeb9-3a24-6bac-8279-9cb3de4f71ff.png)


「I have read and agree with the above terms and conditions」をチェック
「Download Android Studio Dolphin | 2021.3.1 Patch 1 for Linux」
のボタンをクリックしダウンロード

ダウンロードしたファイルを解凍する（ホームディレクトリ/ダウンロードにある前提）
```
$ cd ~/ダウンロード
$ tar zxvf android-studio*.tar.gz 
$ mv android-studio ~/
$ cd ../
```

Android Studioを起動する

```
$ cd android-studio/bin
$ ./studio.sh
```

## 画面に従って設定をする

OKをクリック
![Screenshot from 2022-12-17 19-09-52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/295814/7f265f71-bdd7-a56f-7363-7a5922f5b0db.png)


Don't sendをクリック
![Screenshot from 2022-12-17 19-10-38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/295814/29484c16-e673-9b2a-b467-b2eb7a480f88.png)

Nextをクリック
![Screenshot from 2022-12-17 19-11-20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/295814/474e3094-80b8-61a9-c684-8da08623205c.png)

Nextをクリック
![Screenshot from 2022-12-17 19-11-53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/295814/fb3125c7-6d6b-2a3c-98ac-3955e1f4d772.png)

Nextをクリック
![Screenshot from 2022-12-17 19-12-17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/295814/037c4d4c-f920-c8df-e32d-5c4bd147b743.png)

Nextをクリック
![Screenshot from 2022-12-17 19-12-37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/295814/9e0efdd5-7724-1462-9374-22ec2b676645.png)

Acceptを選択しNextをクリック
![Screenshot from 2022-12-17 19-13-06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/295814/038a54aa-9538-aef2-34ab-3dafb5f82caa.png)

Finishをクリック
![Screenshot from 2022-12-17 19-14-11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/295814/de52c265-b9f3-c87c-674c-cd5add571e86.png)

ダウンロードが始まるからしばらくまつ
![Screenshot from 2022-12-17 19-14-41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/295814/c3fee6c0-ff2f-c34f-2e94-9134435e7eb0.png)

Finishをクリック
![Screenshot from 2022-12-17 19-19-25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/295814/38e4f78e-3849-a795-4f32-34aafbfb21f7.png)

## NDKのインストール

More ActionのSDK　Managerをクリック

![Screenshot from 2022-12-17 19-20-19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/295814/1428f20b-692c-2076-d888-fc112c873b6d.png)

SDK ToolsタブのNDKをチェックし、Applyをクリック
![Screenshot from 2022-12-17 19-21-21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/295814/876956d8-cfd4-5eca-ce57-720278d07209.png)

OKをクリック
![Screenshot from 2022-12-17 19-23-10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/295814/bf4e38b4-3db8-b4e7-26e8-9b62853e1f45.png)

ダウンロードが終わるまでまつ
![Screenshot from 2022-12-17 19-23-36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/295814/7df5896f-329c-ca8f-4094-77d4a231778f.png)

Finishをクリック
![Screenshot from 2022-12-17 19-24-54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/295814/2e68da89-0740-c895-3461-730472a351f1.png)

OKをクリック
![Screenshot from 2022-12-17 19-25-16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/295814/1b4a6cb1-60be-c145-6d51-fcbdbadff3a6.png)

## gitでandroid-example-appをcloneする

「New」-「Project from Version Control...」をクリック
![Screenshot from 2022-12-17 19-25-47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/295814/b7ff9b1e-5cf4-4af6-467c-2edef262d29b.png)

URLに`https://github.com/elixir-desktop/android-example-app.git`を入力しCloneをクリック

![Screenshot from 2022-12-17 19-27-34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/295814/e19dff00-74b7-f0ab-efe4-4c60da9c621b.png)

Cloneが終わるまでまつ
![Screenshot from 2022-12-17 19-28-07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/295814/05116688-5de7-61f7-6acb-2e5ebe360519.png)

Trust　Projectをクリック
![Screenshot from 2022-12-17 19-28-34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/295814/4c743a5a-9e82-d45f-d3a2-d261b1394ddd.png)

プロジェクトが読み込まれました
![Screenshot from 2022-12-17 19-29-28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/295814/7d59631e-ce7a-e479-c066-d753b90747a5.png)

FileメニューのSettingsを選択
![Screenshot from 2022-12-17 19-31-38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/295814/8d361164-c590-533a-316c-31221dbd030c.png)

Build、Execution,Deployment→Build　Tools→Gradleを選択し
Gradel　JDKが下記のようにJDKの11が選択されていることを確認しOK
※選択されてない場合は選択してください

![Screenshot from 2022-12-17 19-33-00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/295814/b12d1d44-babb-a2ea-15a0-b0edd4e1f3d2.png)

Android Studio画面下のステータスが動いているので落ち着くまでまつ
![Screenshot from 2022-12-17 19-36-38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/295814/620a3986-a816-eb38-087d-94efb509a037.png)

## サンプル起動

緑の▶をクリックするとエミュレータがたちあがります、数分まつ
![Screenshot from 2022-12-17 19-56-19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/295814/04c2b0b9-7e30-b278-7f1f-48b8385c9d96.png)

立ち上がりました
![Screenshot from 2022-12-17 19-59-42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/295814/19c5a2a8-cd28-94c2-d303-f6de4f74df3f.png)

## スマホ本体にアプリを転送しよう

まずスマホ側を開発者モードにして転送する準備が必要です

設定を開く
![Screenshot_20221217-194252345.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/295814/6371a3ac-5bef-cc51-6a9d-73c405576a96.jpeg)

下にスクロールするとシステムがあるのでタップ
![Screenshot_20221217-194257143.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/295814/b46a277e-cbaa-de0e-3de6-812949440427.jpeg)

デバイス情報をタップ
![Screenshot_20221217-194306267.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/295814/763d50bf-d69a-82ed-df0f-0d8faf911c45.jpeg)

ソフトウェアバージョンをタップ
![Screenshot_20221217-194319349.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/295814/0e62ef47-b875-b8e7-24c0-1561e1ef5858.jpeg)

ビルド番号を連続でタップ
![Screenshot_20221217-194328854.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/295814/3349beb1-ff99-d83d-df0d-73caee416a49.jpeg)

連続でタップするとこのような表示になります、そのごパスコード（スマホ所有者が決めたパスコード）を入力
![Screenshot_20221217-194405151.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/295814/42139c45-41d6-7250-c9c4-d0efc0be0a9e.jpeg)

開発者モードが有効になりました
![Screenshot_20221217-194427754.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/295814/b7fb912c-3613-10ee-25a0-fc8d9711a5e6.jpeg)

システム→開発者向けオプションをタップ
![Screenshot_20221217-194603957.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/295814/c922a694-43a8-5599-5941-3bd052a9a256.jpeg)

ワイヤレスデバッグを有効にするにしてタップする
![Screenshot_20221217-194625532.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/295814/cb239d24-2032-ab94-6b48-91bff6dedcfb.jpeg)

ワイヤレス　デバッグの画面が表示したら　QRコードによるデバイスのペア設定をタップ
![Screenshot_20221217-194635816.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/295814/5a47b307-39c8-b947-e0dc-b3d207e7cac9.jpeg)

## Android StudioでWifiの設定をする

Pair Devices Using Wi-Fiをクリック

![Screenshot from 2022-12-17 20-12-04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/295814/13e7536c-57b9-009e-ac90-f2bc449d23cf.png)

表示したQRコードをスマホに読ませる
![Screenshot from 2022-12-17 20-13-53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/295814/6157157b-2e64-6cb1-307d-9a4043d2334b.png)

スマホは下記の画面が表示している
![screenshot_20221217-202716661.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/295814/55ea9cba-28c0-0d0c-f3aa-12539f358207.jpeg)


QRコードを読ませた後スマホは下記の画面になります
![Screenshot_20221217-201439915.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/295814/555a7c8d-9d0b-aef4-d505-1be1db606dab.jpeg)


成功すると下記の画面になります、そしてCloseをクリックします
![Screenshot from 2022-12-17 20-14-44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/295814/8b74936d-af90-9e20-f975-47251515404b.png)

スマホの実機が選択されてることを確認して▶をクリック
![Screenshot from 2022-12-17 20-16-31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/295814/974920af-dec2-2f73-45d9-5b735a64adc3.png)

スマホでアプリが起動しました
![Screenshot_20221217-201730793.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/295814/00ad3458-0738-1b7f-2ff6-7c03f022f468.jpeg)