畜産業界向けチャット・アプリ『Chumly(チャムリー)』の技術スタック

畜産関係者向けチャット・アプリケーション『Chumly(チャムリー)』の技術スタックをご紹介します。
今回はフロントエンド編です。

ハイライト

• React Native + Expoを使ってウェブを含むマルチ・プラットフォーム展開
• Expo GoをメインにすることでXcode/Android Studioを(ほぼ)使わずにネイティブ開発
• Stream Chatは楽しい

Chumlyとは？

Chumlyは畜産業に関わる皆さんのための、お仕事チャットです。

https://chumly.me

• チャット
• IoT x AIで牛を見守る『U-motion』と連携した、データ分析
• タスク管理

を提供します。U-motionの監視機能と連携して牛の体調アラートをチャットで受信できる、など畜産に特化したチャット機能を提供しています。

ウェブを含むマルチ・プラットフォーム展開

ChumlyはiOS/Android向けネイティブ・アプリとして提供されているほか、ウェブ版の提供も予定しています。

Chumlyの技術スタック

Expo + Expo Application BuildによるXcode/Android Studioなしのネイティブ開発

開発のベースはReact Native と Expoです。

https://docs.expo.dev/

ビルド・ツールとしてもExpoが提供するSaaS『EAS Build』を採用しています。
https://docs.expo.dev/build/introduction/

U-motion開発部は基幹となるサービスをReactベースのウェブ・アプリとして開発しています。エンジニアのリソースの効率化、コード資産の流用を目的としてネイティブ・アプリでもReactを開発の中心にしています。

もう一つのアプリケーションではReact NativeのBare Workflowを採用していましたが、Chumlyで新規にプロジェクトを作る際にExpo Managed Workflowを開発の中心とする方針を決めました。現在までのところ、必要な機能を提供できています。

Expo Managed Workflowを採用したことでXcodeやAndroid Studioを使うことがほぼなくなり、開発のフットワークを軽くすることができています。

ルーター

ルーティングにはReact Navigationを採用しています。

https://reactnavigation.org/

画面数が多くなってきて、ルーティングを記述したコードが煩雑になっていることもあり、今後はExpo Routerの採用も検討しています。

https://expo.github.io/router/docs/

チャット・バックエンド(一部フロントエンド)

チャットのバックエンドにはStream Chatを使っています
https://getstream.io/chat/

大量のデータ、リアルタイムのデータ更新など複雑なチャット・システムをSaaSとして提供しています。また、React Nativeを始めとして様々なプラットフォームで使えるクライアントUIがSDKとして提供されていて、ほんの1時間ほどのセットアップでひとまずチャット・アプリを起動することができます。純粋に「付加価値」の機能開発に専念できるのが魅力です。

使用感としては、Firebase FireStoreに権限管理とファイル・アップロードなどのアセット管理を実装したものに近いでしょうか。検索も機能として提供されていて、実はチャット以外の様々なアプリケーションの実装に使える使い勝手の良いSDKになっています。UIを少し変更することで「メモ帳」アプリケーションなども実装できます。

UIライブラリ

UIの開発にはNativeBaseというUIライブラリを使っています。
iOS/Android/Webで使えるReactベースのUIライブラリです。
https://nativebase.io/

弊社のU-motin(ウェブ・アプリ)ではReact + Chakra UIを採用していて、スタイリングの記述を統一できることから採用しました。

NativeBaseの開発元は、パフォーマンスの改善などを目的として全く新しいアーキテクチャのUIライブラリ「glustack-ui」の開発を発表していて、今後は移行を検討することになりそうです。
https://nativebase.io/blogs/the-future-of-nativebase

チャート

チャートの描画にはVictoryを採用しています。
https://formidable.com/open-source/victory/docs/native/

SVGベースのチャート・ライブラリで、React Nativeとウェブが両方サポートされています。
高速化が必要なケースがあり、ピンポイントで React Native Skiaを使う検討をしています。

https://shopify.github.io/react-native-skia/

状態管理

サーバの状態管理としてはRedux RTK Queryを使ってます。
一部、Redux Toolkitも使っています。
https://redux-toolkit.js.org/rtk-query/overview

なお、RTK QueryのコードはOpenAPIで記述したAPI仕様書から自動生成しています。
https://redux-toolkit.js.org/rtk-query/usage/code-generation

E2Eテスト

自動テストにはMagicPodを使っています。
https://magicpod.com/