畜産関係者向けチャット・アプリケーション『Chumly(チャムリー)』の技術スタックをご紹介します。
今回はフロントエンド編です。
ハイライト
- React Native + Expoを使ってウェブを含むマルチ・プラットフォーム展開
- Expo GoをメインにすることでXcode/Android Studioを(ほぼ)使わずにネイティブ開発
- Stream Chatは楽しい
Chumlyとは？
Chumlyは畜産業に関わる皆さんのための、お仕事チャットです。
- チャット
- IoT x AIで牛を見守る『U-motion』と連携した、データ分析
- タスク管理
を提供します。U-motionの監視機能と連携して牛の体調アラートをチャットで受信できる、など畜産に特化したチャット機能を提供しています。
ウェブを含むマルチ・プラットフォーム展開
ChumlyはiOS/Android向けネイティブ・アプリとして提供されているほか、ウェブ版の提供も予定しています。
Chumlyの技術スタック
Expo + Expo Application BuildによるXcode/Android Studioなしのネイティブ開発
開発のベースはReact Native と Expoです。
ビルド・ツールとしてもExpoが提供するSaaS『EAS Build』を採用しています。
U-motion開発部は基幹となるサービスをReactベースのウェブ・アプリとして開発しています。エンジニアのリソースの効率化、コード資産の流用を目的としてネイティブ・アプリでもReactを開発の中心にしています。
もう一つのアプリケーションではReact NativeのBare Workflowを採用していましたが、Chumlyで新規にプロジェクトを作る際にExpo Managed Workflowを開発の中心とする方針を決めました。現在までのところ、必要な機能を提供できています。
Expo Managed Workflowを採用したことでXcodeやAndroid Studioを使うことがほぼなくなり、開発のフットワークを軽くすることができています。
ルーター
ルーティングにはReact Navigationを採用しています。
画面数が多くなってきて、ルーティングを記述したコードが煩雑になっていることもあり、今後はExpo Routerの採用も検討しています。
チャット・バックエンド(一部フロントエンド)
チャットのバックエンドにはStream Chatを使っています
大量のデータ、リアルタイムのデータ更新など複雑なチャット・システムをSaaSとして提供しています。また、React Nativeを始めとして様々なプラットフォームで使えるクライアントUIがSDKとして提供されていて、ほんの1時間ほどのセットアップでひとまずチャット・アプリを起動することができます。純粋に「付加価値」の機能開発に専念できるのが魅力です。
使用感としては、Firebase FireStoreに権限管理とファイル・アップロードなどのアセット管理を実装したものに近いでしょうか。検索も機能として提供されていて、実はチャット以外の様々なアプリケーションの実装に使える使い勝手の良いSDKになっています。UIを少し変更することで「メモ帳」アプリケーションなども実装できます。
UIライブラリ
UIの開発にはNativeBaseというUIライブラリを使っています。
iOS/Android/Webで使えるReactベースのUIライブラリです。
弊社のU-motin(ウェブ・アプリ)ではReact + Chakra UIを採用していて、スタイリングの記述を統一できることから採用しました。
NativeBaseの開発元は、パフォーマンスの改善などを目的として全く新しいアーキテクチャのUIライブラリ「glustack-ui」の開発を発表していて、今後は移行を検討することになりそうです。
チャート
チャートの描画にはVictoryを採用しています。
SVGベースのチャート・ライブラリで、React Nativeとウェブが両方サポートされています。
高速化が必要なケースがあり、ピンポイントで React Native Skiaを使う検討をしています。
状態管理
サーバの状態管理としてはRedux RTK Queryを使ってます。
一部、Redux Toolkitも使っています。
なお、RTK QueryのコードはOpenAPIで記述したAPI仕様書から自動生成しています。
E2Eテスト
自動テストにはMagicPodを使っています。
Discussion