Cardus アプリ - オープンソースの個人インベントリ管理アプリケーション

私が作ったもの

Cardusは、ユーザーがアイテムの倉庫を作成して管理できるウェブアプリです。ユーザーは倉庫にアイテムを追加し、どの箱にどのアイテムが入っているかをすぐに特定できます。ユーザーは倉庫やコンテナを他のユーザーと共有することもでき、共同作業が可能です。

アプリのリンク

ウェブ: https://cardus-app.vercel.app/

Play ストア: 未定

説明

Cardus Appは、モバイルユーザー向けのウェブ開発の限界に挑戦するウェブアプリプロジェクトです。このアプリはReactフレームワークであるNext.jsで構築され、Vercelにデプロイされています。このアプリはPWAでもあるため、モバイルデバイスにインストールできます。このアプリはTrusted Web Activityも使用しており、Androidデバイスにインストールできます。また、このアプリはGoogle Cloud Platformを使用して画像を保存し、TensorFlow.jsモデルを実行してアイテム画像内のオブジェクトを自動検出します。

このアプリはネイティブアプリのようにシームレスに動作することを目指しています。オンボーディング画面、美しいトランジション、スムーズなアニメーションがあります。このアプリにはダークモードも搭載されており、現代のアプリには必須です。

ソースコードへのリンク

Cardus App: GitHubリポジトリ

寛容なライセンス

Apache-2.0ライセンス

背景

⚡ 問題点

収納箱にラベルを付けるのが難しい
収納箱がどこにあるのか分かりにくい
どの収納箱にどのアイテムが入っているのか分かりにくい

個人の倉庫/収納を管理するのは難しいです。

💡 解決策

ユーザーがアイテムの倉庫を作成して管理できるウェブアプリを作成する
ユーザーは倉庫にアイテムを追加し、どの箱にどのアイテムが入っているかをすぐに特定できる
ユーザーは倉庫や箱を他のユーザーと共有することもでき、共同作業が可能

開発方法

📚 テックスタック

Next.js
React
MongoDB
Google Cloud Platform
TensorFlow.js
PWA
Trusted Web Activity

📖 プロセス

まず、Next.jsアプリを作成し、その後MongoDB Atlasクラスターを作成しました。MongoDBとの通信を簡単にするために、Prismaを使ってORMを使用しました。モバイルウェブアプリに焦点を当てているため、デスクトップ版はしばらくの間は考慮していません。PWA、ボトムナビゲーションバー、トップバー、ダークモードを実装しました。また、Trusted Web Activityも実装し、Androidデバイスにインストールできるようにする予定です。

開発中に多くの問題に直面しました。Google Cloud Storage APIをサーバーレス関数と一緒に使用するのは大変でした。これだけでも、多くの障害に直面しました。一部はフォーラムを読むことで解決できますが、一部は回避策が必要です。ユーザーは賢い機能を好むため、このアプリもインテリジェントにしたいと考えています。画像内のオブジェクトを検出できるようにしたいので、TensorFlow.jsを使用しています。また、QRコードをスキャンできるようにしたいので、ZXingを使用しています。

📝 習得したこと

Next.jsを使ってウェブアプリを構築する方法
MongoDB Atlasを使ってデータを保存する方法
Google Cloud Platformを使って画像を保存する方法
TensorFlow.jsを使ってブラウザでモデルを実行する方法
PWAを使ってアプリをインストール可能にする方法
Trusted Web Activityを使ってアプリをAndroidデバイスにインストール可能にする方法