diff --git a/README.md b/README.md new file mode 100644 index 0000000..26e80bf --- /dev/null +++ b/README.md @@ -0,0 +1,88 @@ +# Flet Multiplatform Project Hub + +## 概要 + +このリポジトリは、Fletフレームワークを使用したマルチプラットフォーム対応アプリケーションの開発基盤を提供するプロジェクトハブです。単一のコードベースからデスクトップ、ウェブ、モバイルアプリケーションを効率的に構築し、強力なPythonバックエンドAPI(FastAPIを利用)と連携させることを目的としています。 + +このプロジェクトは、開発者が迅速に高品質なマルチプラットフォームアプリケーションを立ち上げ、保守・拡張していく上での共通的な課題(開発環境の統一、UIとバックエンドの連携、CI/CDの整備など)を解決するためのテンプレート、ツール、ガイドラインを提供します。 + +## 主な特徴 + +- **マルチプラットフォームGUI**: [Flet](https://flet.dev/) を使用し、Pythonのみでインタラクティブなフロントエンドを構築。Windows, macOS, Linux, Web, (将来的にはiOS/Android) に対応。 +- **強力なバックエンドAPI**: [FastAPI](https://fastapi.tiangolo.com/) を採用し、高性能でモダンな非同期APIを提供。 +- **開発支援ツール**: コーディング、テスト、デプロイメントを支援する各種ツールを同梱。 +- **CI/CDパイプライン**: GitHub Actionsを使用した継続的インテグレーションとデプロイメントのワークフローを定義済み。 + +## プロジェクト構造 + +このリポジトリは、複数のコンポーネントとドキュメントから構成されています。 + +- `flet-multiplatform-app/`: + 主要なFlet GUIアプリケーションとFastAPIバックエンドAPIのソースコード、詳細なドキュメントが含まれています。このアプリケーションのセットアップ、開発、テストに関する詳細は、`flet-multiplatform-app/README.md` を参照してください。 +- `tools/`: + 開発効率を向上させるための各種スクリプトや補助ツール群が格納されています。詳細は `tools/README.md` を参照してください。 +- `.github/workflows/`: + CI (継続的インテグレーション) および CD (継続的デプロイメント) のためのGitHub Actionsワークフロー定義ファイルが格納されています。 +- 各種 `.md` ガイドファイル (ルートディレクトリ): + リポジトリ全体に関わる横断的なガイドや、特定のプラットフォームへのデプロイメント手順などを記載したマークダウンファイル群です。 + +## 技術スタック + +本プロジェクトで主に使用されている技術は以下の通りです。 + +- **プログラミング言語**: Python 3.13+ +- **GUIフレームワーク**: Flet +- **バックエンドAPIフレームワーク**: FastAPI +- **非同期処理**: Uvicorn (ASGIサーバー), asyncio +- **データベース (バックエンドAPI)**: SQLAlchemy (ORM), Alembic (マイグレーション) - (主に `flet-multiplatform-app` 内で使用) +- **型チェック**: Pydantic (データバリデーションと設定管理) +- **テスト**: Pytest, Pytest-Cov +- **コードフォーマット・リンター**: Black, isort, Flake8, MyPy + +(依存関係の詳細は各サブプロジェクトの `pyproject.toml` や `requirements.txt` を参照してください。) + +## はじめに (Getting Started) + +1. **リポジトリのクローン:** + ```bash + git clone https://github.com/your-username/your-repository-name.git + cd your-repository-name + ``` + (上記URLは実際のリポジトリURLに置き換えてください) + +2. **メインアプリケーションのセットアップと起動:** + 主要なFletアプリケーション (`flet-multiplatform-app`) のセットアップ方法、開発環境の構築、アプリケーションの起動手順については、以下のドキュメントを参照してください。 + * `flet-multiplatform-app/README.md` + * `flet-multiplatform-app/docs/getting_started.md` (日本語版は `GETTING_STARTED_JA.md`) + +## ドキュメンテーション + +このプロジェクトには、開発と運用を支援するための複数のドキュメントが用意されています。 + +- **アプリケーション開発ドキュメント (`flet-multiplatform-app/docs/`)**: + * `DEVELOPER_GUIDE.md`: 開発環境のセットアップ、コーディング規約、コントリビューション方法など。 + * `API_REFERENCE.md`: バックエンドAPIのエンドポイント仕様。 + * `DESIGN_GUIDELINES.md`: UI/UXデザインに関する指針。 + * `TUTORIAL.md`: アプリケーション機能開発のチュートリアル。 +- **デプロイメントガイド**: + * `android-flet-deployment-guide.md`: AndroidプラットフォームへのFletアプリケーションデプロイガイド。 + * `ios-flet-deployment-guide.md`: iOSプラットフォームへのFletアプリケーションデプロイガイド。 + * `web-flet-deployment-guide.md`: WebプラットフォームへのFletアプリケーションデプロイガイド。 +- **CI/CD & リリース**: + * `cicd-release-guide.md`: CI/CDパイプラインの概要とリリース手順。 +- **その他主要ガイド**: + * `architecture-design-guide.md`: プロジェクト全体のアーキテクチャ設計思想。 + * `security-checklist.md`: セキュリティに関するチェックリスト。 + * `testing-qa-guide.md`: テスト戦略と品質保証に関するガイド。 + +各ドキュメントは、それぞれの `.md` ファイルを参照してください。 + +## 貢献方法 (Contributing) + +このプロジェクトへの貢献に興味がある方は、`flet-multiplatform-app/docs/DEVELOPER_GUIDE.md` に記載されている開発ワークフロー、コーディング規約、プルリクエストの手順などを参照してください。 + +バグ報告や機能提案は、GitHubのIssuesを通じて行うことを推奨します。 + +## ライセンス + +このプロジェクトは MIT License の下で公開されています。詳細については、リポジトリ内の `LICENSE` ファイルを参照してください。もし `LICENSE` ファイルが存在しない場合は、プロジェクトオーナーにライセンス情報を確認してください。 diff --git a/flet-multiplatform-app/README.md b/flet-multiplatform-app/README.md index 1ecbdc8..7bc3a7d 100644 --- a/flet-multiplatform-app/README.md +++ b/flet-multiplatform-app/README.md @@ -9,51 +9,105 @@ ```text flet-multiplatform-app -├── src/ # アプリケーションのソースコード -│ ├── backend/ # バックエンド +├── pyproject.toml # Pythonプロジェクト定義、依存関係 (PEP 621) +├── pytest.ini # Pytest設定 +├── src/ # ソースコード +│ ├── __init__.py +│ ├── app.py # Flet UIの構造やカスタムコントロールを定義 +│ ├── flet_app.py # Flet UIアプリケーションのメインエントリーポイント +│ ├── main.py # FastAPIアプリケーションのエントリーポイント (src.backend.mainとは別) +│ ├── assets/ # 画像、フォントなどの静的アセット +│ ├── backend/ # バックエンドAPI (FastAPI) │ │ ├── __init__.py -│ │ ├── main.py # アプリケーションのエントリーポイント -│ │ ├── app.py # FastAPIアプリケーション -│ │ ├── api/ # APIルーター -│ │ ├── core/ # コア機能 -│ │ ├── models/ # データベースモデル -│ │ ├── schemas/ # Pydanticスキーマ -│ │ ├── services/ # ビジネスロジック -│ │ ├── tests/ # バックエンドテスト -│ │ ├── utils/ # ユーティリティ -│ │ └── config/ # 設定ファイル -│ └── frontend/ # フロントエンド -│ ├── main.py # フロントエンドのエントリーポイント -│ ├── components/ # UIコンポーネント -│ ├── pages/ # ページコンポーネント -│ └── utils/ # ユーティリティ -├── scripts/ # スクリプト +│ │ ├── app.py # FastAPIアプリケーションインスタンスの定義 +│ │ ├── main.py # バックエンドAPIの起動スクリプト +│ │ ├── alembic/ # Alembicデータベースマイグレーション用ディレクトリ +│ │ │ ├── versions/ # マイグレーションスクリプト +│ │ │ └── env.py # Alembic実行環境設定 +│ │ ├── alembic.ini # Alembic設定ファイル (こちらが主に使われる) +│ │ ├── api/ # APIルーター定義 +│ │ ├── core/ # 設定読み込み、共通ロジックなど +│ │ ├── db/ # データベースセッション、エンジン設定 +│ │ ├── models/ # SQLAlchemyデータベースモデル +│ │ ├── schemas/ # Pydanticデータスキーマ +│ │ └── tests/ # バックエンド固有のテスト +│ ├── components/ # Flet UIコンポーネント (共通部品など) +│ ├── config/ # アプリケーション全体の設定 +│ ├── services/ # ビジネスロジック層 +│ └── utils/ # 汎用ユーティリティ関数 +├── scripts/ # 各種スクリプト (テスト実行用など) │ ├── test.sh # テスト実行スクリプト (Linux/macOS) │ └── test.bat # テスト実行スクリプト (Windows) -├── tests/ # 統合テスト -│ ├── __init__.py -│ ├── conftest.py -│ └── test_*.py -├── .env # 環境変数 -├── .gitignore -├── pyproject.toml # 依存関係とプロジェクト設定 -├── pytest.ini # pytest設定 -└── README.md +├── tests/ # プロジェクト全体のテスト (統合テストなど) +│ ├── conftest.py # Pytest設定ファイル +│ └── ... +└── ... # .gitignore, .env.example などその他の設定ファイル ``` +(上記は主要なファイルとディレクトリの構造です。詳細なファイルは省略されている場合があります。) + +## 必要システム構成 +- Python 3.13 以上 +- Git + +## セットアップ + +1. **リポジトリのクローン:** + ```bash + git clone + cd flet-multiplatform-app + ``` + +2. **仮想環境の作成と有効化:** + ```bash + python -m venv .venv + # Windows: .\.venv\Scripts\activate + # macOS/Linux: source .venv/bin/activate + ``` + +3. **依存関係のインストール:** + 開発に必要な全ての依存関係(本体、テストツール、リンター等)をインストールするには、プロジェクトルート (`flet-multiplatform-app`) で以下を実行します: + ```bash + pip install -e .[dev] + ``` + アプリケーションの実行のみに必要な基本的な依存関係をインストールする場合は、以下を実行します: + ```bash + pip install . + ``` + +4. **環境変数の設定:** + `.env.example` ファイルを参考に `.env` ファイルを作成し、必要な環境変数を設定してください。 + +## アプリケーションの起動 + +開発時には、Flet UIアプリケーションとバックエンドAPIサーバーを個別に起動します。 + +1. **Flet UIアプリケーション:** + (`flet-multiplatform-app` ディレクトリから実行) + ```bash + flet run src/flet_app.py + ``` + +2. **バックエンドAPIサーバー:** + (`flet-multiplatform-app` ディレクトリから実行) + ```bash + python -m uvicorn src.backend.main:app --reload --port 8001 + ``` + (APIサーバーのポートはFletアプリと衝突しないように8001などを推奨) ## ドキュメンテーション ### オンラインドキュメント プロジェクトのドキュメントは [MkDocs](https://www.mkdocs.org/) を使用してビルド・公開できます。 +ドキュメント関連の依存関係は `pyproject.toml` の `[project.optional-dependencies.docs]` (仮の名称、必要に応じて追加) に定義するか、専用の `requirements-docs.txt` を使用します。 -#### ドキュメントのビルド +#### ドキュメントのビルド (例: `requirements-docs.txt` を使用する場合) 1. ドキュメント用の依存関係をインストールします: - -```bash -pip install -r requirements-docs.txt -``` + ```bash + pip install -r requirements-docs.txt + ``` + (または `pip install .[docs]` もし `pyproject.toml` に `docs` グループが定義されていれば) 2. ドキュメントをビルドします: @@ -81,15 +135,26 @@ mkdocs serve ### テストの実行方法 -1. テストに必要な依存関係をインストールします: - -```bash -pip install -r requirements-test.txt -``` +1. テストに必要な依存関係をインストールします(開発セットアップ `pip install -e .[dev]` に含まれています): + ```bash + # pip install -e .[dev] を実行していれば、通常は追加のインストールは不要です。 + # requirements-test.txt は pyproject.toml の [dev] グループと内容を確認し、統一を検討してください。 + # もし requirements-test.txt が独自の依存関係を持つ場合: + # pip install -r requirements-test.txt + ``` 2. テストを実行します: -**Windows の場合:** + **pytestコマンドを直接使用する場合 (推奨):** + `pyproject.toml` で `pytest` の設定が定義されています。プロジェクトルートで以下を実行します: + ```bash + pytest + ``` + 詳細なオプション (カバレッジレポート生成など) は `pyproject.toml` の `tool.pytest.ini_options.addopts` を参照してください。 + + **スクリプトを使用する場合:** + + **Windows の場合:** ```batch scripts\test.bat @@ -109,105 +174,30 @@ chmod +x scripts/test.sh #### カバレッジレポートの生成 +pytestの実行時にHTMLカバレッジレポートが `htmlcov/` ディレクトリに自動生成されます (`pyproject.toml` の設定による)。 ```bash -# テストを実行してカバレッジレポートを生成 -pytest --cov=src --cov-report=term-missing --cov-report=html - -# カバレッジレポートを表示(ブラウザで開く) -start htmlcov/index.html # Windows -open htmlcov/index.html # macOS +# pytest 実行後 +# Windows: start htmlcov/index.html +# macOS/Linux: open htmlcov/index.html ``` +ターミナルでのサマリーも表示されます。 #### カバレッジの目標 このプロジェクトでは、以下のカバレッジ目標を設定しています: - - **最小要件**: 70%以上(CIで強制) - **推奨**: 80%以上 - **理想**: 90%以上 -これらの目標は、コードの品質と保守性を確保するために設定されています。テストカバレッジは継続的インテグレーション(CI)プロセスで自動的に計測されます。 +カバレッジを改善するには、テストされていないコード行を特定し(`htmlcov`レポートで詳細を確認できます)、それらに対するテストケースを追加してください。 -#### カバレッジを改善するには +## その他のドキュメント -1. テストされていないファイルを特定: - ```bash - coverage report --show-missing - ``` - -2. 特定のファイルのカバレッジを確認: - ```bash - coverage html --include="path/to/file.py" - ``` +- **[開発者ガイド](./docs/DEVELOPER_GUIDE.md)**: より詳細な開発環境のセットアップ、コーディング規約、コントリビューション方法など。 +- **[デザインガイドライン](./docs/design_guidelines.md)**: UI/UX デザインに関するガイドライン。 +- **[Swagger UI (API Docs)]**: バックエンドAPIサーバー起動後、`/docs` エンドポイント (例: `http://localhost:8001/docs`) にてAPIドキュメントが利用可能です。 +- **[Redoc (API Docs)]**: バックエンドAPIサーバー起動後、`/redoc` エンドPOINT (例: `http://localhost:8001/redoc`) にて代替のAPIドキュメントが利用可能です。 -3. カバレッジが低いファイルに対してテストを追加してください。 - -## ドキュメント - -- [開発者ガイド](./docs/DEVELOPER_GUIDE.md) - 開発環境のセットアップやコントリビューション方法など -- [デザインガイドライン](./docs/design_guidelines.md) - UI/UX デザインのガイドライン - -## プロジェクト構成 - -``` -flet-multiplatform-app -├── src/ # アプリケーションのソースコード -│ ├── backend/ # バックエンド -│ │ ├── __init__.py -│ │ ├── main.py # アプリケーションのエントリーポイント -│ │ ├── app.py # FastAPIアプリケーション -│ │ ├── api/ # APIルーター -│ │ ├── core/ # コア機能 -│ │ ├── models/ # データベースモデル -│ │ ├── schemas/ # Pydanticスキーマ -│ │ ├── services/ # ビジネスロジック -│ │ ├── tests/ # バックエンドテスト -│ │ ├── utils/ # ユーティリティ -│ │ └── config/ # 設定ファイル -│ └── frontend/ # フロントエンド -│ ├── main.py # フロントエンドのエントリーポイント -│ ├── components/ # UIコンポーネント -│ ├── pages/ # ページコンポーネント -│ └── utils/ # ユーティリティ -├── scripts/ # スクリプト -│ ├── test.sh # テスト実行スクリプト (Linux/macOS) -│ └── test.bat # テスト実行スクリプト (Windows) -├── tests/ # 統合テスト -│ ├── __init__.py -│ ├── conftest.py -│ └── test_*.py -├── .env # 環境変数 -├── .gitignore -├── pyproject.toml # 依存関係とプロジェクト設定 -├── pytest.ini # pytest設定 -└── README.md -├── docs # ドキュメント -│ ├── DEVELOPER_GUIDE.md # 開発者向けガイド -│ └── design_guidelines.md # デザインガイドライン -├── requirements.txt # 依存関係 -├── pyproject.toml # プロジェクト設定 -└── README.md # プロジェクトの概要 -``` - -## 使用方法 - -1. **依存関係のインストール** - プロジェクトのルートディレクトリで以下のコマンドを実行して、必要なパッケージをインストールします。 - ``` - pip install -r requirements.txt - ``` - -2. **アプリケーションの起動** - `src/main.py`を実行してアプリケーションを起動します。 - ``` - python src/main.py - ``` - -3. **テストの実行** - テストを実行するには、以下のコマンドを使用します。 - ``` - pytest tests/ - ``` ## 貢献 diff --git a/flet-multiplatform-app/docs/DEVELOPER_GUIDE.md b/flet-multiplatform-app/docs/DEVELOPER_GUIDE.md index 34d5938..180d14e 100644 --- a/flet-multiplatform-app/docs/DEVELOPER_GUIDE.md +++ b/flet-multiplatform-app/docs/DEVELOPER_GUIDE.md @@ -17,7 +17,7 @@ ### 前提条件 -- Python 3.10 以上 +- Python 3.13 以上 - Git - (オプション) Docker と Docker Compose(ローカルでのデータベースを使用する場合) @@ -25,7 +25,7 @@ 1. リポジトリをクローンします: ```bash - git clone https://github.com/your-username/flet-multiplatform-app.git + git clone https://github.com/your-repository/flet-multiplatform-app.git cd flet-multiplatform-app ``` @@ -41,9 +41,11 @@ ``` 3. 依存関係をインストールします: + プロジェクトのルートディレクトリ(`flet-multiplatform-app`)で以下を実行します。 ```bash - pip install -e ".[dev]" + pip install -e .[dev] ``` + これにより、プロジェクトが編集可能モードでインストールされ、開発に必要な全ての依存関係(テストツール、リンター等)も一緒にインストールされます。 4. 環境変数を設定します(必要に応じて `.env` ファイルを作成): ```env @@ -63,37 +65,75 @@ # マイグレーションを適用 alembic upgrade head ``` + (注意: `alembic.ini` とマイグレーションスクリプトは `src/backend/alembic/` 以下に配置されています。) + +### アプリケーションの起動 + +開発時には、Flet UIアプリケーションとバックエンドAPIサーバーを個別に起動する必要があります。 + +1. **Flet UIアプリケーションの起動 (開発モード):** + `flet-multiplatform-app` ディレクトリから以下を実行します。 + ```bash + flet run src/flet_app.py + ``` + これにより、Fletアプリケーションが起動し、ソースコードの変更が自動的にリロードされます。 + +2. **バックエンドAPIサーバーの起動 (開発モード):** + `flet-multiplatform-app` ディレクトリから以下を実行します。 + ```bash + python -m uvicorn src.backend.main:app --reload --port 8001 + ``` + これにより、バックエンドAPIサーバーがポート8001で起動し、ソースコードの変更が自動的にリロードされます。 + (FletのWebビューがデフォルトで8000番ポートを使用する場合があるため、バックエンドAPIには異なるポート番号(例: 8001)を指定することを推奨します。) + + *代替のFastAPIアプリケーションについて:* `src/main.py` にもFastAPIアプリケーションのエントリーポイントが存在しますが、これはFlet UIが主に使用する `src/backend/main.py` とは異なる目的である可能性があります。開発時は主に上記の `src.backend.main:app` を使用してください。 ## プロジェクトの構造 ``` flet-multiplatform-app/ -├── .github/ # GitHub Actions ワークフローファイル -├── .vscode/ # VS Code 設定ファイル -├── docs/ # ドキュメント -├── migrations/ # データベースマイグレーションファイル -├── src/ # ソースコード -│ ├── backend/ # バックエンド関連のコード -│ │ ├── api/ # API エンドポイント -│ │ ├── core/ # コア機能 -│ │ ├── db/ # データベース関連 -│ │ └── models/ # データモデル -│ ├── components/ # フロントエンドコンポーネント -│ │ ├── common/ # 共通コンポーネント -│ │ └── navigation/ # ナビゲーション関連コンポーネント -│ ├── config/ # 設定ファイル -│ ├── services/ # ビジネスロジック -│ ├── static/ # 静的ファイル -│ ├── styles/ # スタイルシート -│ └── utils/ # ユーティリティ関数 -├── tests/ # テストコード -├── .env.example # 環境変数のサンプル -├── .gitignore -├── .pre-commit-config.yaml # pre-commit 設定 -├── alembic.ini # Alembic 設定 -├── pyproject.toml # プロジェクト設定と依存関係 -└── README.md # プロジェクト概要 +├── .env # 環境変数 (実際の値は.envファイルに記述し、.env.exampleを元に作成) +├── .github/ # GitHub Actions ワークフローファイル +├── .vscode/ # VS Code 設定ファイル (オプション) +├── Dockerfile # Dockerイメージ構築用ファイル +├── README.md # プロジェクトの概要説明 +├── alembic.ini # Alembic設定ファイル (実際には src/backend/alembic.ini が主) +├── docs/ # プロジェクトドキュメント +│ ├── DEVELOPER_GUIDE.md # このファイル +│ └── ... +├── pyproject.toml # Pythonプロジェクト定義、依存関係 (PEP 621) +├── src/ # ソースコード +│ ├── __init__.py +│ ├── app.py # Flet UIの構造やカスタムコントロールを定義 +│ ├── flet_app.py # Flet UIアプリケーションのメインエントリーポイント +│ ├── main.py # FastAPIアプリケーションのエントリーポイント (src.backend.mainとは別) +│ ├── assets/ # 画像、フォントなどの静的アセット +│ ├── backend/ # バックエンドAPI (FastAPI) +│ │ ├── __init__.py +│ │ ├── app.py # FastAPIアプリケーションインスタンスの定義 +│ │ ├── main.py # バックエンドAPIの起動スクリプト +│ │ ├── alembic/ # Alembicデータベースマイグレーション用ディレクトリ +│ │ │ ├── versions/ # マイグレーションスクリプト +│ │ │ └── env.py # Alembic実行環境設定 +│ │ ├── alembic.ini # Alembic設定ファイル (こちらが主に使われる) +│ │ ├── api/ # APIルーター定義 +│ │ ├── core/ # 設定読み込み、共通ロジックなど +│ │ ├── db/ # データベースセッション、エンジン設定 +│ │ ├── models/ # SQLAlchemyデータベースモデル +│ │ ├── schemas/ # Pydanticデータスキーマ +│ │ └── tests/ # バックエンド固有のテスト +│ ├── components/ # Flet UIコンポーネント (共通部品など) +│ ├── config/ # アプリケーション全体の設定 (データベース接続情報など) +│ ├── services/ # ビジネスロジック層 +│ └── utils/ # 汎用ユーティリティ関数 +├── tests/ # プロジェクト全体のテスト (統合テストなど) +│ ├── conftest.py # Pytest設定ファイル +│ └── ... +├── .gitignore # Git管理対象外ファイル設定 +├── .pre-commit-config.yaml # pre-commitフック設定 +└── pytest.ini # Pytest設定ファイル ``` +(上記は主要なファイルとディレクトリの構造です。詳細なファイルは省略されている場合があります。) ## 開発ワークフロー diff --git a/flet-multiplatform-app/docs/GETTING_STARTED_JA.md b/flet-multiplatform-app/docs/GETTING_STARTED_JA.md index be0452e..624ccae 100644 --- a/flet-multiplatform-app/docs/GETTING_STARTED_JA.md +++ b/flet-multiplatform-app/docs/GETTING_STARTED_JA.md @@ -24,35 +24,36 @@ ## 前提条件 -- Python 3.9 以上 +- Python 3.13 以上 - Git -- Node.js 16 以上(Webフロントエンド開発の場合) -- Docker(コンテナ化された環境で実行する場合) +- Docker(オプション: コンテナ化された環境で実行する場合) ## セットアップ手順 1. リポジトリのクローン ```bash - git clone + git clone # ご自身のレポジトリURLに置き換えてください cd flet-multiplatform-app ``` 2. 仮想環境の作成と有効化 ```bash # Windows - python -m venv venv - .\venv\Scripts\activate + python -m venv .venv + .\.venv\Scripts\activate # macOS/Linux - python3 -m venv venv - source venv/bin/activate + python3 -m venv .venv + source .venv/bin/activate ``` + (注: 仮想環境のディレクトリ名として `.venv` を推奨します) 3. 依存関係のインストール + 基本的な依存関係をインストールするには、`flet-multiplatform-app` ディレクトリで以下を実行します: ```bash - pip install -r requirements.txt - pip install -r requirements-dev.txt # 開発用の依存関係 + pip install . ``` + 開発ツール(テスト、リンター等)を含む完全な開発環境をセットアップする場合は、`pip install .[dev]` を使用します。詳細は [開発者ガイド](./DEVELOPER_GUIDE.md) を参照してください。 ## 開発環境の構築 @@ -85,25 +86,24 @@ API_KEY=your-api-key ## アプリケーションの実行 -### 開発モードで起動 - -```bash -# バックエンドサーバーの起動 -uvicorn app.main:app --reload +開発時には、Flet UIアプリケーションとバックエンドAPIサーバーを個別に起動する必要があります。 -# フロントエンド開発サーバーの起動(別ターミナルで) -dev_app.py -``` +1. **Flet UIアプリケーションの起動 (開発モード):** + `flet-multiplatform-app` ディレクトリから以下を実行します。 + ```bash + flet run src/flet_app.py + ``` + これにより、Fletアプリケーションが起動し、UI関連のソースコードの変更が自動的にリロードされます。 -### 本番モードで起動 +2. **バックエンドAPIサーバーの起動 (開発モード):** + `flet-multiplatform-app` ディレクトリから以下を実行します。 + ```bash + python -m uvicorn src.backend.main:app --reload --port 8001 + ``` + これにより、バックエンドAPIサーバーがポート8001で起動し、API関連のソースコードの変更が自動的にリロードされます。 + (FletのWebビューがデフォルトで8000番ポートを使用する場合があるため、APIサーバーには異なるポート(例: 8001)を指定することを推奨します。) -```bash -# 依存関係のインストール -pip install -r requirements.txt - -# 本番サーバーの起動 -python -m uvicorn app.main:app --host 0.0.0.0 --port 8000 -``` +詳細な開発環境のセットアップやデバッグ方法については、[開発者ガイド](./DEVELOPER_GUIDE.md)を参照してください。 ## テストの実行 @@ -177,29 +177,49 @@ git push heroku main ## ディレクトリ構成 +プロジェクトの主要なディレクトリとファイルの構造は以下の通りです。 + ``` flet-multiplatform-app/ -├── app/ # アプリケーションコード -│ ├── api/ # APIエンドポイント -│ ├── core/ # コア機能 -│ ├── db/ # データベース関連 -│ ├── models/ # データモデル -│ ├── services/ # ビジネスロジック -│ └── main.py # アプリケーションエントリーポイント -├── tests/ # テストコード -│ ├── unit/ # 単体テスト -│ ├── integration/ # 統合テスト -│ ├── e2e/ # E2Eテスト -│ └── performance/ # パフォーマンステスト -├── scripts/ # 便利なスクリプト -├── static/ # 静的ファイル -├── templates/ # テンプレートファイル -├── .github/ # GitHub Actionsワークフロー -├── .env.example # 環境変数の例 -├── requirements.txt # 依存関係 -├── requirements-dev.txt # 開発用依存関係 -└── README.md # プロジェクト概要 +├── .env # 環境変数 (実際の値は.envファイルに記述し、.env.exampleを元に作成) +├── .github/ # GitHub Actions ワークフローファイル +├── Dockerfile # Dockerイメージ構築用ファイル +├── README.md # プロジェクトの概要説明 +├── docs/ # プロジェクトドキュメント +│ ├── GETTING_STARTED_JA.md # このファイル +│ └── ... +├── pyproject.toml # Pythonプロジェクト定義、依存関係 (PEP 621) +├── src/ # ソースコード +│ ├── __init__.py +│ ├── app.py # Flet UIの構造やカスタムコントロールを定義 +│ ├── flet_app.py # Flet UIアプリケーションのメインエントリーポイント +│ ├── main.py # FastAPIアプリケーションのエントリーポイント (src.backend.mainとは別) +│ ├── assets/ # 画像、フォントなどの静的アセット +│ ├── backend/ # バックエンドAPI (FastAPI) +│ │ ├── __init__.py +│ │ ├── app.py # FastAPIアプリケーションインスタンスの定義 +│ │ ├── main.py # バックエンドAPIの起動スクリプト +│ │ ├── alembic/ # Alembicデータベースマイグレーション用ディレクトリ +│ │ │ ├── versions/ # マイグレーションスクリプト +│ │ │ └── env.py # Alembic実行環境設定 +│ │ ├── alembic.ini # Alembic設定ファイル (こちらが主に使われる) +│ │ ├── api/ # APIルーター定義 +│ │ ├── core/ # 設定読み込み、共通ロジックなど +│ │ ├── db/ # データベースセッション、エンジン設定 +│ │ ├── models/ # SQLAlchemyデータベースモデル +│ │ ├── schemas/ # Pydanticデータスキーマ +│ │ └── tests/ # バックエンド固有のテスト +│ ├── components/ # Flet UIコンポーネント (共通部品など) +│ ├── config/ # アプリケーション全体の設定 (データベース接続情報など) +│ ├── services/ # ビジネスロジック層 +│ └── utils/ # 汎用ユーティリティ関数 +├── tests/ # プロジェクト全体のテスト (統合テストなど) +│ ├── conftest.py # Pytest設定ファイル +│ └── ... +├── .gitignore # Git管理対象外ファイル設定 +└── pytest.ini # Pytest設定ファイル ``` +(上記は主要なファイルとディレクトリの構造です。詳細なファイルは省略されている場合があります。) ## 開発ワークフロー @@ -251,13 +271,12 @@ git push origin feature/your-feature-name alembic upgrade head ``` -3. **フロントエンドの変更が反映されない** - ```bash - # キャッシュをクリアして再起動 - rm -rf __pycache__ - rm -rf .flet - python dev_app.py - ``` +3. **フロントエンドの変更が反映されない (Flet)** + FletアプリケーションでUIの変更が反映されない場合は、以下の手順を試してください: + - アプリケーションを再起動する。 + - ブラウザで実行している場合は、ブラウザのキャッシュをクリアする(Ctrl+Shift+R または Cmd+Shift+R)。 + - `flet run` を使用している場合、ターミナルにエラーメッセージが表示されていないか確認する。 + - `build` ディレクトリや `assets` 内のキャッシュが問題になることは稀ですが、最終手段として関連しそうな一時ファイルを確認することも考慮できます。 ## 貢献方法 diff --git a/flet-multiplatform-app/docs/api_reference.md b/flet-multiplatform-app/docs/api_reference.md index fd703b3..082093c 100644 --- a/flet-multiplatform-app/docs/api_reference.md +++ b/flet-multiplatform-app/docs/api_reference.md @@ -4,30 +4,140 @@ ## 基本情報 -- **ベースURL**: `http://localhost:8000/api/v1` -- **認証**: ベアラートークン認証を使用 +- **ベースURL**: `http://localhost:8000/api/v1` (ポートは設定により`8001`等に変更される場合があります) +- **認証**: 基本的にベアラートークン認証(OAuth2準拠)を使用します。各エンドポイントの説明に認証が必要か記載しています。 + *(注意: 現在、一部エンドポイントで認証機構の実装がTODOとなっている可能性があります。ドキュメントは意図された動作を記載しています。)* - **レスポンス形式**: JSON -## 認証 +## スキーマ定義 (主要なもの) -### ログイン +APIで使用される主要なデータ構造です。 -ユーザー認証を行い、アクセストークンを取得します。 +### Token + +アクセストークン情報。 -```http -POST /auth/login +```json +{ + "access_token": "string (JWT)", + "token_type": "string (bearer)" +} ``` -**リクエストボディ:** +### UserBase + +ユーザー情報の基本形。 ```json { - "username": "user@example.com", + "email": "string (user@example.com)", + "username": "string" +} +``` + +### UserCreate (UserBase を継承) + +ユーザー作成時のリクエスト。 + +```json +{ + "email": "string (user@example.com)", + "username": "string", "password": "string" } ``` -**成功時のレスポンス (200 OK):** +### UserUpdate (全てオプショナル) + +ユーザー更新時のリクエスト。 + +```json +{ + "email": "string (user@example.com)", + "username": "string", + "password": "string", + "is_active": "boolean", + "is_superuser": "boolean" +} +``` + +### UserResponse (UserBase を継承) + +ユーザー情報のレスポンス。 + +```json +{ + "id": "integer", + "email": "string (user@example.com)", + "username": "string", + "is_active": "boolean", + "is_superuser": "boolean" + // "created_at": "datetime", (例: "2024-07-30T10:00:00Z") + // "updated_at": "datetime" +} +``` + +### ItemBase + +アイテム情報の基本形。 + +```json +{ + "title": "string", + "description": "string (nullable)" +} +``` + +### ItemCreate (ItemBase を継承) + +アイテム作成時のリクエスト。 + +```json +{ + "title": "string", + "description": "string (nullable)", + "owner_id": "integer" +} +``` + +### ItemUpdate (ItemBase を継承、全てオプショナル) + +アイテム更新時のリクエスト。 + +```json +{ + "title": "string", + "description": "string (nullable)" +} +``` + +### ItemResponse (ItemBase を継承) + +アイテム情報のレスポンス。 + +```json +{ + "id": "integer", + "title": "string", + "description": "string (nullable)", + "owner_id": "integer" +} +``` + +## 認証 (Auth) + +### ログイン + +`POST /api/v1/auth/login` + +ユーザー認証を行い、アクセストークンを取得します。 + +**リクエストボディ (application/x-www-form-urlencoded):** + +- `username`: string (ユーザーのメールアドレスまたはユーザー名) +- `password`: string + +**成功時のレスポンス (200 OK):** `Token` ```json { @@ -36,65 +146,161 @@ POST /auth/login } ``` -## ユーザー +**エラーレスポンス:** + +- `401 Unauthorized`: 認証情報が不正な場合。 + +## ユーザー (Users) ### ユーザー一覧の取得 -ユーザーの一覧を取得します。管理者権限が必要です。 +`GET /api/v1/users/` -```http -GET /users/ -``` +ユーザーの一覧を取得します。 +**認証**: 必要 (管理者権限が意図されていますが、現状の実装では強制されていません) -**ヘッダー:** +**クエリパラメータ:** +- `skip` (integer, optional, default: 0): スキップするアイテム数。 +- `limit` (integer, optional, default: 100): 取得する最大アイテム数。 + +**成功時のレスポンス (200 OK):** `List[UserResponse]` + +```json +[ + { + "id": 1, + "email": "user@example.com", + "username": "example_user", + "is_active": true, + "is_superuser": false + } +] ``` -Authorization: Bearer + +### 新規ユーザー作成 + +`POST /api/v1/users/` + +新しいユーザーを作成します。 +**認証**: 不要 (ただし、本番環境では通常保護されます) + +**リクエストボディ:** `UserCreate` + +```json +{ + "email": "newuser@example.com", + "username": "new_user", + "password": "securepassword123" +} ``` -**成功時のレスポンス (200 OK):** +**成功時のレスポンス (201 Created):** `UserResponse` ```json { - "items": [ - { - "id": 1, - "email": "user@example.com", - "is_active": true, - "is_superuser": false - } - ], - "total": 1 + "id": 2, + "email": "newuser@example.com", + "username": "new_user", + "is_active": true, + "is_superuser": false } ``` -## アイテム +### 特定ユーザー情報の取得 -### アイテムの作成 +`GET /api/v1/users/{user_id}` -新しいアイテムを作成します。 +指定されたIDのユーザー情報を取得します。 +**認証**: 必要性が高いエンドポイントです (現状の実装では強制されていません) -```http -POST /items/ -``` +**成功時のレスポンス (200 OK):** `UserResponse` + +**エラーレスポンス:** + +- `404 Not Found`: ユーザーが見つからない場合。 + +### ユーザー情報の更新 + +`PUT /api/v1/users/{user_id}` -**ヘッダー:** +指定されたIDのユーザー情報を更新します。 +**認証**: 必要性が高いエンドポイントです (現状の実装では強制されていません) +**リクエストボディ:** `UserUpdate` + +```json +{ + "username": "updated_user_name", + "is_active": false +} ``` -Authorization: Bearer -Content-Type: application/json + +**成功時のレスポンス (200 OK):** `UserResponse` + +**エラーレスポンス:** + +- `404 Not Found`: ユーザーが見つからない場合。 + +### ユーザーの削除 + +`DELETE /api/v1/users/{user_id}` + +指定されたIDのユーザーを削除します。 +**認証**: 必要性が高いエンドポイントです (現状の実装では強制されていません) + +**成功時のレスポンス (204 No Content)** + +**エラーレスポンス:** + +- `404 Not Found`: ユーザーが見つからない場合。 + + +## アイテム (Items) + +### アイテム一覧の取得 + +`GET /api/v1/items/` + +アイテムの一覧を取得します。 +**認証**: 必要性が高いエンドポイントです (現状の実装では強制されていません) + +**クエリパラメータ:** + +- `skip` (integer, optional, default: 0): スキップするアイテム数。 +- `limit` (integer, optional, default: 100): 取得する最大アイテム数。 + +**成功時のレスポンス (200 OK):** `List[ItemResponse]` + +```json +[ + { + "id": 1, + "title": "サンプルアイテム", + "description": "これはサンプルアイテムです", + "owner_id": 1 + } +] ``` -**リクエストボディ:** +### 新規アイテム作成 + +`POST /api/v1/items/` + +新しいアイテムを作成します。 +**認証**: 必要 (現状の実装では強制されていません) + +**リクエストボディ:** `ItemCreate` ```json { "title": "新しいアイテム", - "description": "これは新しいアイテムです" + "description": "これは新しいアイテムです", + "owner_id": 1 } ``` -**成功時のレスポンス (201 Created):** +**成功時のレスポンス (201 Created):** `ItemResponse` ```json { @@ -105,39 +311,78 @@ Content-Type: application/json } ``` -## エラーレスポンス +### 特定アイテム情報の取得 -### 400 Bad Request +`GET /api/v1/items/{item_id}` -リクエストが不正な場合に返されます。 +指定されたIDのアイテム情報を取得します。 +**認証**: 必要性が高いエンドポイントです (現状の実装では強制されていません) -```json -{ - "detail": "Invalid request" -} -``` +**成功時のレスポンス (200 OK):** `ItemResponse` -### 401 Unauthorized +**エラーレスポンス:** -認証に失敗した場合に返されます。 +- `404 Not Found`: アイテムが見つからない場合。 + +### アイテム情報の更新 + +`PUT /api/v1/items/{item_id}` + +指定されたIDのアイテム情報を更新します。 +**認証**: 必要性が高いエンドポイントです (現状の実装では強制されていません) + +**リクエストボディ:** `ItemUpdate` ```json { - "detail": "認証情報が無効です" + "title": "更新されたアイテム名", + "description": "更新された説明" } ``` -### 404 Not Found +**成功時のレスポンス (200 OK):** `ItemResponse` + +**エラーレスポンス:** + +- `404 Not Found`: アイテムが見つからない場合。 + +### アイテムの削除 + +`DELETE /api/v1/items/{item_id}` -リソースが見つからない場合に返されます。 +指定されたIDのアイテムを削除します。 +**認証**: 必要性が高いエンドポイントです (現状の実装では強制されていません) + +**成功時のレスポンス (204 No Content)** + +**エラーレスポンス:** + +- `404 Not Found`: アイテムが見つからない場合。 + + +## エラーレスポンスの共通形式 + +一般的なエラーレスポンスは以下の形式です。 ```json { - "detail": "Item not found" + "detail": "エラーメッセージ" } ``` -## レート制限 +### 主なHTTPステータスコード + +- `200 OK`: リクエスト成功。 +- `201 Created`: リソース作成成功。 +- `204 No Content`: リソース削除成功などで、レスポンスボディなし。 +- `400 Bad Request`: リクエストが無効な場合 (例: バリデーションエラー)。 +- `401 Unauthorized`: 認証が必要だが提供されていない、または無効な場合。 +- `403 Forbidden`: 認証済みだが、リソースへのアクセス権限がない場合。 +- `404 Not Found`: 要求されたリソースが見つからない場合。 +- `422 Unprocessable Entity`: リクエストは正しいが、意味的に処理できない場合(FastAPIのデフォルトバリデーションエラー)。 + +## レート制限 (参考情報) -- 認証済みユーザー: 1分あたり60リクエスト -- 未認証ユーザー: 1分あたり10リクエスト +- (もし設定されていれば) 認証済みユーザー: 1分あたりXXリクエスト +- (もし設定されていれば) 未認証ユーザー: 1分あたりYYリクエスト +*(注意: レート制限は現状のコードからは確認できません。インフラ側や別途ミドルウェアで設定される場合があります。)* diff --git a/flet-multiplatform-app/docs/development_roadmap.md b/flet-multiplatform-app/docs/development_roadmap.md index 24b832f..a6ea4e1 100644 --- a/flet-multiplatform-app/docs/development_roadmap.md +++ b/flet-multiplatform-app/docs/development_roadmap.md @@ -97,23 +97,55 @@ ### 7.1 テストカバレッジの向上 - [ ] テストカバレッジ目標の設定(バックエンド: 85%以上、フロントエンド: 70%以上) + - `現状の課題:` バックエンド、フロントエンド共に現状のカバレッジは未計測。Fletのテスト作成の難易度やUI部分のテスト自動化範囲も考慮し、目標値の再検討が必要な可能性あり。 + - `サブタスク:` + - `[ ] 現状のテストカバレッジを計測・可視化する。(`pytest-cov`結果の詳細分析)` + - `[ ] バックエンドAPIの主要機能(認証、主要なCRUD操作、ビジネスロジック)のカバレッジを優先的に向上させる。` + - `[ ] Fletフロントエンドのテスト戦略を具体化し、現実的なカバレッジ目標とテスト手法(単体テスト、UIコンポーネントテストの可能性調査)を定める。` - [ ] カバレッジレポートの自動生成とCI/CDパイプラインへの統合 + - `現状:` 基本的なレポート生成は`pytest-cov`により設定済み。CIでのアーティファクト保存や閾値チェック連携を強化。 - [ ] カバレッジ閾値の強制(`pytest-cov` の `--cov-fail-under` の活用) + - `具体的なステップ:` CI/CDパイプラインに `--cov-fail-under=目標値` を設定し、段階的に目標値を引き上げる。 - [ ] カバレッジの可視化(Codecov や Coveralls との連携) + - `現状:` 未連携。連携によりプルリクエストごとのカバレッジ変動を追跡可能にする。 +- [ ] 単体テスト・結合テストの拡充計画策定と実行(特にビジネスロジックと複雑なUIコンポーネント) +- [ ] フロントエンドテスト戦略の具体化(Fletのテストの難易度を考慮し、現実的なカバレッジ目標とテスト手法を再検討) ### 7.2 ドキュメンテーションの充実 -- [ ] ユーザー向けドキュメントの作成(Getting Started, チュートリアル, トラブルシューティング) -- [ ] API ドキュメントの自動生成(Sphinx または MkDocs の設定) +- [ ] 既存ユーザー向けドキュメント(Getting Started, チュートリアル, トラブルシューティング)の定期的な見直しと更新、及び内容の統一化 + - `現状の課題:` 各ドキュメント間でPythonバージョン、依存関係のインストール方法、アプリケーションの起動コマンド等の情報に不整合が見られる。これらの情報を最新化し、統一する必要がある。(実施済み・継続対応) +- [ ] バックエンドAPIドキュメントの活用推進(FastAPIによる自動生成OpenAPIドキュメントの周知と利用方法整備) + - `現状:` FastAPIにより `/docs` `/redoc` が自動生成されている。これを開発者・利用者が活用しやすいように案内を強化。 +- [ ] Flet UIコンポーネントのPropsやイベントに関するドキュメント整備手法の確立(例: カスタムDocStringパーサー、または手動でのAPIリファレンス作成) + - `課題:` Fletのカスタムコンポーネントのインターフェースがコード以外から把握しづらい。 - [ ] コードコメントの充実(Google スタイルドキュストリングの徹底) + - `目標値:` プロジェクト内の主要モジュール・関数におけるGoogleスタイルDocstring網羅率80%以上。 + - `現状:` Docstringのスタイルや網羅率にばらつきあり。 - [ ] ドキュメントの多言語対応(英語・日本語) + - `現状の課題:` 英語と日本語のドキュメントが混在しており、翻訳の質や用語の一貫性に改善の余地がある。翻訳レビュープロセスの導入検討。 ### 7.3 エラーハンドリングの強化 - [ ] エラーコード体系の標準化(RFC 7807 準拠のエラー応答) + - `対象:` 主にバックエンドAPI。クライアント側でのエラー処理を容易にするため。 - [ ] エラーログの構造化(JSON フォーマットでの出力) + - `現状の課題:` ログフォーマットは部分的に標準化されているが(例: Uvicornのアクセスログ等)、アプリケーション全体のログ出力(特にエラーログ)で一貫した構造化JSONフォーマットが適用されているか確認と徹底が必要。 + - `目標:` 全てのアプリケーションログ(特にエラー関連)を構造化JSON形式で出力し、ログ分析ツールでの集計・分析を容易にする。 - [ ] エラー監視・アラートの仕組みの構築(Sentry や Datadog との連携) + - `具体的なステップ:` + - `[ ] 主要なエラー監視ツール(Sentry, Datadog, etc.)の機能比較と選定。` + - `[ ] 選定したツールとの連携プロトタイプを実装し、効果を検証。` + - `[ ] 本番環境への導入とアラート閾値の設定、通知体制の構築。` - [ ] リトライ・サーキットブレーカー・バルクヘッドパターンの実装 + - `対象:` 外部サービス連携部分(例: 外部API呼び出し)や、障害が連鎖しやすい箇所(例: データベース接続)を特定し、段階的に導入。 + - `現状:` 未実装。これらのパターンを導入することで、システムの堅牢性を向上させる。 +- [ ] Flet UIにおけるユーザーフレンドリーなエラー表示とフィードバック収集機構の検討 + - `課題:` 現状のFlet UIでは、予期せぬエラーが発生した場合のユーザーへの通知方法や、問題報告の手段が標準化されていない。 + - `具体的なステップ:` + - `[ ] UI上での共通エラーメッセージコンポーネントの設計。` + - `[ ] エラー発生時のログID表示と、それを用いた問い合わせフローの検討。` + - `[ ] (オプション) ユーザーからの直接フィードバック送信機能の検討。` ## 開発フロー diff --git a/flet-multiplatform-app/docs/getting_started.md b/flet-multiplatform-app/docs/getting_started.md index 154bda6..dcd29ba 100644 --- a/flet-multiplatform-app/docs/getting_started.md +++ b/flet-multiplatform-app/docs/getting_started.md @@ -4,16 +4,16 @@ Flet マルチプラットフォーム開発テンプレートへようこそ。 ## 前提条件 -- Python 3.8 以上 -- Node.js 16 以上(フロントエンド開発の場合) -- Docker(コンテナ環境で実行する場合) +- Python 3.13 以上 +- Git +- Docker(オプション: コンテナ環境で実行する場合) ## セットアップ手順 ### 1. リポジトリのクローン ```bash -git clone +git clone # リポジトリのURLに置き換えてください cd flet-multiplatform-app ``` @@ -21,19 +21,22 @@ cd flet-multiplatform-app ```bash # Windows -python -m venv venv -.\venv\Scripts\activate +python -m venv .venv +.\.venv\Scripts\activate # macOS/Linux -python3 -m venv venv -source venv/bin/activate +python3 -m venv .venv +source .venv/bin/activate ``` +(注: 仮想環境のディレクトリ名として `.venv` を推奨します) ### 3. 依存関係のインストール +プロジェクトの基本的な依存関係をインストールするには、`flet-multiplatform-app` ディレクトリで以下を実行します: ```bash -pip install -r requirements.txt +pip install . ``` +開発ツール(テスト、リンター等)を含む完全な開発環境をセットアップする場合は、開発者ガイドを参照し `pip install .[dev]` を使用してください。 ### 4. 環境変数の設定 @@ -49,22 +52,28 @@ SECRET_KEY=your-secret-key ## アプリケーションの実行 -### 開発モードで起動 +開発時には、Flet UIアプリケーションとバックエンドAPIサーバーを個別に起動する必要があります。 -```bash -python -m src.backend.main -``` +1. **Flet UIアプリケーションの起動 (開発モード):** + `flet-multiplatform-app` ディレクトリから以下を実行します。 + ```bash + flet run src/flet_app.py + ``` + これにより、Fletアプリケーションが起動し、UI関連のソースコード変更が自動的にリロードされます。 -### フロントエンドの開発サーバーを起動(別ターミナルで) +2. **バックエンドAPIサーバーの起動 (開発モード):** + `flet-multiplatform-app` ディレクトリから以下を実行します。 + ```bash + python -m uvicorn src.backend.main:app --reload --port 8001 + ``` + これにより、バックエンドAPIサーバーがポート8001で起動し、API関連のソースコード変更が自動的にリロードされます。 + (FletのWebビューがデフォルトで8000番ポートを使用する場合があるため、APIサーバーには異なるポート(例: 8001)を指定することを推奨します。) -```bash -cd frontend -npm install -npm run dev -``` +詳細な開発環境のセットアップやデバッグ方法については、[開発者ガイド](./DEVELOPER_GUIDE.md)を参照してください。 ## 次のステップ -- [チュートリアル](./tutorial.md)を参照して、アプリケーションの開発を始めましょう -- [API リファレンス](./api_reference.md)で利用可能なエンドポイントを確認 -- [トラブルシューティング](./troubleshooting.md)で一般的な問題の解決策を確認 +- [チュートリアル](./tutorial.md) を参照して、アプリケーションの開発を始めましょう。 +- [API リファレンス](./api_reference.md) で利用可能なエンドポイントを確認してください。 +- [トラブルシューティング](./troubleshooting.md) で一般的な問題の解決策を確認してください。 +- より詳細な開発情報については、[開発者ガイド](./DEVELOPER_GUIDE.md) を参照してください。