はじめに
ひとりLiveView Advent Calendar の9日目の記事です
この記事はElixir Conf US 2021の発表したシステムの構築と関連技術の解説を目的とした記事です
今回から少し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 -> simulatorxcodeをインストールしてくださいと言われる
以下の手順で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://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