Booking System (Fixed)

予約システム（修正版）

このリポジトリには、以前の実装にあったいくつかの重大な問題に対処した、Andriana Delcheva 向け予約システムの修正版が含まれています。このシステムは Cloudflare Workers 上で動作し、Google Calendar および MCP Servers と連携します。

🛠️ 修正した問題

この実装では、元のシステムにあった以下の問題を解決しています。

1. 予約完了処理の修正 - ユーザーが日付を選択し、予約を正常に完了できるようになりました。
2. 確認メールの修正 - 予約が正常に完了すると、確認メールが送信されるようになりました。
3. Google Calendar 連携の修正 - 予約が Google Calendar に予定を作成するようになりました。
4. 空き状況確認の実装 - システムが予約を確定する前に、空き枠を確認するようになりました。
5. MCP サーバー連携の実装 - バックエンド処理で MCP Servers を使用し、機能を強化しました。

🌟 主な機能

• 複数ステップの予約プロセス - UX を向上させる、直感的なステップ形式の予約フロー
• リアルタイムの空き状況確認 - Google Calendar を確認し、競合を検出します
• 確認メールの自動送信 - 顧客に詳細を送信します
• Google Calendar 連携 - サービスの詳細を含む予定をカレンダーに作成します
• MCP サーバー連携 - 予約イベントを追跡し、処理機能を強化します
• 包括的なエラー処理 - ユーザーにわかりやすいフィードバックを提供します
• レスポンシブデザイン - モバイル端末とデスクトップ端末で動作します

🚀 デプロイ

前提条件

• Cloudflare Workers アカウント
• Calendar API を有効にした Google Cloud プロジェクト
• Calendar へのアクセス権を持つ Google サービスアカウント
• バックエンド処理用の MCP サーバー

セットアップ手順

1. リポジトリをクローンする

git clone https://github.com/Konstrex/booking-system-fixed.git
cd booking-system-fixed

2. 依存関係をインストールする

npm install

3. 環境変数を設定する

以下の環境変数は、wrangler.toml ファイルまたは Cloudflare のシークレットを使用して設定する必要があります。

• Google Calendar 連携

  • GOOGLE_CLIENT_EMAIL - すでに「[email protected]」に設定済みです
  • GOOGLE_PRIVATE_KEY - サービスアカウントの秘密鍵です
  • GOOGLE_CALENDAR_ID - 使用するカレンダーの ID です

• メール設定

  • EMAIL_FROM - 確認メールの送信元メールアドレスです
  • BUSINESS_NAME - ビジネス名です（すでに「Andriana Delcheva」に設定済みです）
  • BUSINESS_EMAIL - 返信先として使用するビジネス用メールアドレスです

• MCP サーバー連携

  • MCP_ENABLED - MCP 連携を有効にするには「true」に設定します
  • MCP_SERVER_URL - MCP サーバーの URL です
  • MCP_API_KEY - MCP サーバーで認証するための API キーです

4. Wrangler を使用してシークレットを設定する

機密情報には、Wrangler のシークレット管理を使用してください。

wrangler secret put GOOGLE_PRIVATE_KEY
wrangler secret put GOOGLE_CALENDAR_ID
wrangler secret put MCP_SERVER_URL
wrangler secret put MCP_API_KEY

5. Cloudflare Workers にデプロイする

npm run deploy:prod

📝 Google Calendar のセットアップ

Google Calendar 連携が正しく動作するように、以下を確認してください。

1. サービスアカウントを Google Calendar に追加し、適切な権限を付与します。

   • Google Calendar を開きます
   • カレンダーの設定に移動します
   • 「特定のユーザーと共有」で、サービスアカウントのメールアドレスを追加します。 [email protected]
   • 権限を「変更および共有の管理」に設定します

2. JWT 認証は、正しい token_uri を使用するように設定されています。 https://oauth2.googleapis.com/token

📧 メール設定

このシステムでは、メール通知の処理に MCP Servers を使用します。予約が正常に完了すると、以下の内容を含むメールが送信されます。

• 件名：「予約確認」
• 予約の詳細（日付、時刻、サービス）
• Google Calendar のリンク
• 予約参照番号

🤖 MCP サーバーの統合

MCP サーバーは、機能を強化するために使用されます。

1. イベント通知 - MCP に主要なイベントが通知されます。

   • 空き状況の確認
   • 予約の作成
   • 確認メール
   • カレンダーイベントの作成

2. エラー処理 - MCP は、監視とデバッグのために詳細なエラー情報を受け取ります。

3. 予約処理 - 設定されている場合、システムは予約プロセス全体を MCP に委任できます。

🧪 テスト

システムをローカルでテストするには：

npm run dev:local

エンドツーエンドテストでは：

1. 日付とサービスを選択します
2. 利用可能な時間枠を確認します
3. 顧客情報を入力します
4. 予約を完了します
5. 予約が Google Calendar に表示されることを確認します
6. 確認メールが届いたことを確認します

📚 技術的な実装の詳細

予約フローの修正

予約フローを全面的に見直し、予約時に API リクエストが 1 回だけ送信されるようにしました。主な改善点は次のとおりです。

• 各ステップで入力を検証する複数ステップのフォーム
• 最終的な予約リクエストでの API 呼び出しを 1 回に集約
• 予約に失敗した場合の明確なエラーメッセージ
• API 呼び出し中の読み込みインジケーター

Google Calendar 統合の修正

Google Calendar との統合では、次の処理を行うようになりました。

1. サービスアカウントで適切な JWT 認証を使用します
2. 予約前に既存のイベントを確認します
3. 予約情報をすべて含む詳細なカレンダーイベントを作成します
4. 日付と時刻を適切にフォーマットします
5. 参加者とリマインダーを追加します

エラー処理の強化

包括的なエラー処理を実装しました。

• 具体的なメッセージを含む入力検証エラー
• 再試行オプションを備えたネットワークエラー処理
• MCP 統合によるサーバーエラーのログ記録
• ユーザーにわかりやすいエラーメッセージ

📋 API エンドポイント

空き状況の確認

POST /api/availability

リクエスト本文：

{
  "date": "2025-03-15",
  "duration": 60
}

レスポンス：

{
  "success": true,
  "availableSlots": [
    { "startTime": "09:00", "endTime": "10:00" },
    { "startTime": "10:00", "endTime": "11:00" },
    /* ... */
  ]
}

予約

POST /api/book

リクエスト本文：

{
  "name": "John Doe",
  "email": "[email protected]",
  "phone": "+1234567890",
  "date": "2025-03-15",
  "time": "10:00",
  "services": [
    {
      "name": "Massage",
      "duration": 60,
      "price": 80
    }
  ],
  "notes": "Optional notes",
  "agreed": true
}

レスポンス：

{
  "success": true,
  "message": "Booking created successfully",
  "bookingId": "BK-JOHNDO-123456",
  "eventId": "calendar_event_id"
}

🔄 継続的な改善

今後の改善案は次のとおりです。

• 予約を管理するダッシュボードの追加
• 予約のキャンセル／日時変更機能の実装
• 決済機能の追加
• 顧客アカウントシステムの作成