Expo と Amplifyを使ってWeb とアプリを同時開発した話 @coa00

自己紹介 coa00 (あおきこうへい） ● フロントエンド/UIUX が専門で、デザインとかもやります。 ● フリーで主にフロントエンドのディレクションから開発までやってき ました。 ● メディアアートが大好きで Arduino, GLSLとかやっていました。 ● 2020年から O:という会社で CTOやってます。 Twitter: coa00 https://qiita.com/coa00

Expo Amplify でえもいマネージメントツールをつくりま した

１コードでマルチプラットフォーム対応

Amplifyとは - AWSの各サービスと結合してワンクリックで公開で きるアプリケーション構築環境 - JavaScript、React、Angular、Vue、Next.js、 Android、iOS、React Native、Ionic、Flutter に対 応

Amplify 構成 - 標準的な流れにしたがうと、認証 はCognito、ストレージはS3、 API は AppSyncを使う - Web, アプリ同様の構成が適用 可能 - AppSync はリアルタイム処理を 得意としており、アプリケーション むけ。

認証の実装方法 - Amplify UI Componentsが用意されており、簡単な 実装で認証の実装ができる。（ハイブリットとなると Web とネイティブで使うライブラリをわける必要があ る）

アプリケーション構成 ● Web は React Native Web ● ネイティブは React Native React Native Web 優秀である程度、Webでも快適に動きました。 ● UI ライブラリ ○ React Native Paper ○ Material UI (Webだけ）

Webとネイティブの動作わけ ● WebをすべてRNでつくってしまうと体験 的におとってしまうところがでてしまう。 ● ファイル拡張子をつかってコンポーネント をだしわけすることができる。 ● Props を同一にすると意識することなく 使える。

自動公開 ＆Deploy ● Amplify には標準でCode Deploy環境がついており、そこに expo の publish を追加するだ け、Webとアプリの自動公開が可 能(OTA) ● Webの公開と同時にアプリの更 新がはいるので超らくらく。

プッシュ通知 ● Amplify は lambda の作成が可能。スケ ジュール動作もできる。 ● expo-server-sdk を中でよぶことで、push通 知を送信する。 ● 大量の通知には Amazon Pinpoint を使う

Amplify はまりどころ ● Amplify の UI がネイティブとWebでかなり違う。 ● AppSync のサブスクライブを停止しないとタイムアウトエラーでアプリケー ションが落ちる ● AppSync のサブスクライブをこまめにとめないと 同時接続数100をつかい きてしまう。

ごせいちょうありがとうございました