Phoenixで作るGPS Logging System 9 Expo setup

# はじめに
[ひとりLiveView Advent Calendar](https://qiita.com/advent-calendar/2021/liveview_alone) の9日目の記事です

この記事は[Elixir Conf US 2021](https://www.elixirconf.com/)の[発表](https://www.youtube.com/watch?v=vHNqZmLLTj4)したシステムの構築と関連技術の解説を目的とした記事です

今回から少しPhoenixから離れてExpo(react native)でGPS Loggerのクライアントを作成していきます
本記事は以下の4つを解説します

- expoとは
- setup
- ディレクトリ構成
- ライブラリインストール

# Expo とは
react-nativeのフレームワークで、豊富なライブラリでiOS,Android,Web,Electronなど複数のプラットフォームでアプリケーションを開発できます

JavaScriptとReactで開発ができるので、新た言語を覚えることなく気軽にクロスプラットフォームなアプリを作れるのが推しポイントです

# setup
nodejsのバージョンは16系を使用してください
nodeJSは以下のサイトからインストーラーを使用するかnvm等を使用してください
* https://nodejs.org/ja/download/
* https://github.com/nvm-sh/nvm#installing-and-updating  

nvm例

```
nvm install --lts 
nvm use --lts 
```
関連ライブラリをインストールします

```
npm install -g yarn expo-cli eslint
```

# project init
blankを選択、typescriptがいい方は下のblankを選択してください

```
expo init live_logger
? Choose a template: › - Use arrow-keys. Return to submit.
    ----- Managed workflow -----
❯   blank               a minimal app as clean as an empty canvas
    blank (TypeScript)  same as blank but with TypeScript configuration
    tabs (TypeScript)   several example screens and tabs using react-navigation and TypeScript
    ----- Bare workflow -----
    minimal             bare and minimal, just the essentials to get you started
```

# 起動

```
expo start
```

上記を実行するとMetro Bundlerが`http://localhost:19002/`で立ち上がります
### 実行デバイス
サイドバーにRun ~ で３つ実行するデバイスがあるので、お手元の環境に合わせて実行してください
Run on Andoroid/iOS を実行する前にシミュレーターは起動しておいてください
## android
### install
* 以下からAndroid Studioをダウンロード  
https://developer.android.com/studio/?hl=ja
* do not import settingで次に進む
* kotlinのupdateをきかれるのでupdateする
* 再起動してWelcome画面に戻るのでNextで進めていく
* standardを選択
* お好きなテーマを選択
* finish ダウンロードが開始されるので暫し待つ

### setup
* project > More Actions > ADV Managerを選択
* デバイスが表示されるので acionsの再生ボタンを押して起動

### 起動しない場合
* create virtual device
* pixel4を選択
* recomendされているimageをdownload
* imageを選択してnext
* finish してデバイスを起動

## browser
ブラウザのデベロッパーツールを開く
スマートフォンモードにする

## ios  
* xcodeをインストールする  
  app storeからinstall後以下を実行  

```
xcode-select --install
```

* シミュレーターを起動する    
  xcode -> open developer tools -> simulator


* xcodeをインストールしてくださいと言われる  
以下の手順でCommand Line toolsを有効化する  
 xcode -> preferences -> Locations tab -> Command Line tools -> select Xcode


# ディレクトリ構成
ちょっとしたアプリなのでそこまで大仰にせずゆるく分けます

```
.
├── api -> バックエンドや外部サービスとの通信設定
├── assets -> 画像ファイル
├── components -> コンポーネント
├── constants -> 定数ファイル
├── context -> store, reducer関連
├── navigation -> ルーティング関連
└── screens -> 画面
```

# ライブラリインストール

navigation周り

```
expo install react-native-screens react-native-safe-area-context
yarn add @react-navigation/native 
yarn add @react-navigation/bottom-tabs
yarn add @react-navigation/native-stack
```

UIライブラリ

```
yarn add react-native-elements react-native-vector-icons
```

データ永続化

```
expo install expo-secure-store
```

地図・位置データ

```
expo install react-native-maps expo-location
```
API通信

```
yarn add axios
```

# 最後に
これで準備が整いましたので次から認証部分の実装に入っていきます

# コード
https://github.com/thehaigo/live_logger_expo/tree/day9

# 参考サイト
https://expo.dev/
https://docs.expo.dev/
https://reactnative.dev/
https://reactnative.dev/docs/components-and-apis
https://reactnavigation.org/docs/getting-started
https://reactnativeelements.com/
https://qiita.com/zaburo/items/a26ab82e0b5b7fe8faa7