README.md

metadata

title: API Workflow Builder
emoji: 🚀
colorFrom: purple
colorTo: blue
sdk: gradio
sdk_version: 5.9.1
app_file: app.py
pinned: false
license: mit

🚀 API Workflow Builder

Visual page builder with API integration powered by GrapeJS and Supabase.

📋 概要

ドラッグ＆ドロップでAPIワークフロー画面を構築できるビジュアルエディタ。 Shop11 APIと連携し、商品・顧客・査定データを簡単に操作できます。

✨ 機能

📦 ページビルダー

• ドラッグ＆ドロップ: GrapeJSベースの直感的なエディタ
• リアルタイムプレビュー: 編集内容をその場で確認
• Supabase連携: ページデータをクラウドに保存
• HTML出力: 作成したページをHTMLファイルとしてダウンロード

🔌 APIブロック

Shop11 API連携ブロック

1. 地金チェック削除 (gold-check-delete)

   • エンドポイント: POST /api/shouhin/gold_check_id_delete
   • 商品IDを指定して地金チェックを削除

2. 査定タイトル生成 (satei-title)

   • エンドポイント: GET /api/satei_func/create_title/{product_id}
   • 商品IDから査定タイトルを自動生成

3. メール送信 (send-notification)

   • エンドポイント: POST /api/notification/mail
   • 宛先・件名・本文を指定してメール送信

4. 商品検索 (product-search)

   • エンドポイント: GET /api/auto_complete_refasta/ResultSearch
   • キーワードで商品を検索

5. 商品データテーブル (product-data-table)

   • 商品データを検索してテーブル表示
   • ソート・フィルタリング対応

6. 顧客検索テーブル (customer-data-table)

   • 顧客名・電話番号で検索
   • 顧客情報を一覧表示

7. 査定検索テーブル (satei-data-table)

   • 査定データを検索・表示
   • ステータス別バッジ表示

8. 商品登録フォーム (product-register-form)

   • エンドポイント: POST /api/shouhin/register
   • 新規商品をフォームから登録

💾 データ永続化

• Supabase Tables:
  • page_builder_pages: ページデータ保存
  • api_execution_logs: API実行履歴ログ
• LocalStorage: エディタの自動保存

🚀 使い方

1. アクセス

http://localhost/shop11/public/page-builder/

2. ブロックを追加

1. 左サイドバーから「Shop11 API」カテゴリを選択
2. 使いたいブロックをキャンバスにドラッグ＆ドロップ
3. ブロック内の入力フォームに値を入力
4. ボタンをクリックしてAPI実行

3. ページを保存

1. ヘッダーの「💾 保存」ボタンをクリック
2. ページ名を入力
3. Supabaseに保存 + HTMLファイルをダウンロード

4. ページを読込

1. ヘッダーの「📂 読込」ボタンをクリック
2. 過去に保存したページ一覧から選択
3. エディタに読み込まれます

5. プレビュー

• 「👁️ プレビュー」ボタンで新しいタブで表示確認

📁 ファイル構成

page-builder/
├── index.html           # メインエディタ画面
├── supabase-config.js   # Supabase接続設定
├── api-functions.js     # API呼び出し関数
├── .htaccess           # Apache設定
└── README.md           # このファイル

🔧 技術スタック

• フロントエンド: GrapeJS, Bootstrap 4.5.2, jQuery 3.5.1
• バックエンド: Laravel (Shop11), Supabase
• データベース: PostgreSQL (Supabase)
• ストレージ: Supabase Storage (将来実装予定)

🗄️ データベーススキーマ

page_builder_pages

CREATE TABLE page_builder_pages (
  id uuid PRIMARY KEY DEFAULT gen_random_uuid(),
  name text NOT NULL,
  html_content text,
  css_content text,
  components_json jsonb,
  created_at timestamp with time zone DEFAULT now(),
  updated_at timestamp with time zone DEFAULT now()
);

api_execution_logs

CREATE TABLE api_execution_logs (
  id uuid PRIMARY KEY DEFAULT gen_random_uuid(),
  api_name text NOT NULL,
  endpoint text NOT NULL,
  request_data jsonb,
  response_data jsonb,
  status text CHECK (status IN ('success', 'error')),
  executed_at timestamp with time zone DEFAULT now()
);

🔐 Supabase設定

環境変数

• SUPABASE_URL: https://rootomzbucovwdqsscqd.supabase.co
• SUPABASE_ANON_KEY: eyJhbGci... (supabase-config.jsに記載)

RLS (Row Level Security)

現在はテスト用に全アクセス許可。本番環境では認証を追加してください。

🎨 カスタマイズ

新しいAPIブロックを追加

1. index.htmlに登録:

blockManager.add('my-custom-block', {
    label: '新しいブロック',
    category: 'Shop11 API',
    content: '<div class="shop11-api-block">...</div>'
});

2. api-functions.jsに関数追加:

function myCustomFunction(button) {
    const block = button.closest('.shop11-api-block');
    // API呼び出し処理
    fetch('/api/my-endpoint', {...})
        .then(res => res.json())
        .then(data => {
            // Supabaseログ保存
            if (window.saveApiLogToSupabase) {
                saveApiLogToSupabase('API名', endpoint, requestData, data, 'success');
            }
        });
}

3. イベントリスナーに登録:

case 'myCustomAction':
    myCustomFunction(e.target);
    break;

📊 API実行ログの確認

// 直近50件のログを取得
getApiLogsFromSupabase(50).then(result => {
    console.log(result.data);
});

または、Supabase Dashboardで直接確認:

SELECT * FROM api_execution_logs 
ORDER BY executed_at DESC 
LIMIT 50;

🐛 トラブルシューティング

ブロックがドラッグできない

• ブラウザのキャッシュをクリア
• F5でページをリロード

APIエラーが発生する

• CSRF Tokenが正しく設定されているか確認
• Laravel側のルーティングを確認
• ネットワークタブでHTTPステータスコードを確認

Supabaseに保存できない

• Supabase接続情報が正しいか確認
• RLSポリシーでアクセスが許可されているか確認
• ブラウザコンソールでエラーメッセージを確認

🚧 今後の拡張予定

• Supabase Storageへのファイルアップロード
• 認証機能の追加
• ページバージョン管理
• コラボレーション機能
• カスタムコンポーネント作成UI
• ワークフロー自動化
• Hugging Face Spaceへのデプロイ

📝 ライセンス

MIT License (予定)

👤 作者

Created for API workflow automation and visual page building.

📞 サポート

問題が発生した場合は、ブラウザのコンソールログを確認してください。