トマサポ (TomaSupo)

トマト栽培モニタリングシステムのフロントエンドプロトタイプです。
IoT センサーと AI 診断を活用して、トマトの生育状況をリアルタイムで管理・可視化するウェブアプリケーションです。

機能概要

• ダッシュボード: 登録済みポット一覧と各センサー値（温度・土壌水分・窒素濃度）のリアルタイム表示（30秒自動更新）
• ポット詳細: センサー履歴グラフ（1〜30日間）・AI診断結果・CSVエクスポート
• 履歴: 全ポットまたは指定ポットの時系列データ分析（統計値・グラフ表示）
• 設定: プロフィール・通知・表示・データ管理の各種設定
• 認証: NextAuth.js による JWT セッション管理（メール＋パスワード）

技術スタック

カテゴリ	使用技術
フレームワーク	Next.js 15 (App Router, Turbopack)
UI ライブラリ	React 19, Radix UI, Tailwind CSS 4
グラフ	Recharts 3
認証	NextAuth.js 4
言語	TypeScript 5
アイコン	Lucide React

セットアップ

1. 依存関係のインストール

yarn install

2. 環境変数の設定

プロジェクトルートに .env.local を作成し、以下の変数を設定してください。

# NextAuth.js のシークレットキー（必須）
NEXTAUTH_SECRET=your-secret-key

# バックエンド API の URL（未設定時はモックデータを使用）
NEXT_PUBLIC_API_BASE_URL=https://your-api-endpoint.com

NEXTAUTH_SECRET はランダムな文字列を設定してください。以下のコマンドで生成できます。

openssl rand -base64 32

3. 開発サーバーの起動

yarn dev

http://localhost:3000 をブラウザで開いてください。

4. ビルド・本番起動

yarn build
yarn start

デモアカウント

⚠️ 開発専用: 以下のアカウントは開発・検証目的のみで使用してください。本番環境では使用しないでください。

役割	メールアドレス	パスワード
管理者	admin@tomasapo.com	admin123
農家	farmer@tomasapo.com	farmer123
デモ	demo@tomasapo.com	demo123

Note: 現在はモックデータで動作しています。バックエンド API に接続する場合は NEXT_PUBLIC_API_BASE_URL を設定し、src/lib/api.ts のモック実装を実際の API 呼び出しに置き換えてください。

プロジェクト構成

src/
├── app/                    # Next.js App Router ページ
│   ├── page.tsx           # ルートページ（認証状態に応じてリダイレクト）
│   ├── login/             # ログインページ
│   ├── dashboard/         # ダッシュボード
│   ├── pot/[id]/          # ポット詳細
│   ├── history/           # 履歴・分析
│   └── settings/          # ユーザー設定
├── components/
│   ├── ui/                # 汎用 UI コンポーネント
│   ├── layout/            # AppLayout・サイドバーナビゲーション
│   ├── auth/              # AuthGuard（ルート保護）
│   ├── PotCard.tsx        # ポット一覧カード
│   ├── PotDetail.tsx      # ポット詳細・グラフ
│   └── DiagnosisHistory.tsx # AI 診断履歴
├── hooks/                  # カスタム React Hooks
│   ├── usePots.ts
│   ├── usePotDetail.ts
│   ├── useSensorData.ts
│   └── useHistoricalData.ts
├── lib/
│   ├── api.ts             # API クライアント（モック実装含む）
│   ├── auth.ts            # NextAuth 設定
│   ├── mockData.ts        # 開発用ダミーデータ
│   └── utils.ts           # ユーティリティ関数
└── types/
    └── index.ts           # TypeScript 型定義

主要な型定義

// センサーデータ
interface SensorData {
  id: string;
  timestamp: string;
  temperature: number;      // 気温 (°C)
  soilMoisture: number;     // 土壌水分 (%)
  nitrogenLevel: number;    // 窒素濃度 (mg/L)
  potId: string;
}

// AI 診断結果
interface DiagnosisResult {
  id: string;
  timestamp: string;
  status: "good" | "warning" | "critical";
  message: string;
  recommendations: string[];
  potId: string;
}

// ポット情報
interface PotInfo {
  id: string;
  name: string;
  variety: string;           // 品種
  plantedDate: string;
  currentSensorData: SensorData | null;
  latestDiagnosis: DiagnosisResult | null;
}

ライセンス

このリポジトリは PBL2025 の学習目的で作成されたプロトタイプです。