| | ---
|
| | 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
|
| | ```sql
|
| | 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
|
| | ```sql
|
| | 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に登録**:
|
| | ```javascript
|
| | blockManager.add('my-custom-block', {
|
| | label: '新しいブロック',
|
| | category: 'Shop11 API',
|
| | content: '<div class="shop11-api-block">...</div>'
|
| | });
|
| | ```
|
| |
|
| | 2. **api-functions.jsに関数追加**:
|
| | ```javascript
|
| | 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. **イベントリスナーに登録**:
|
| | ```javascript
|
| | case 'myCustomAction':
|
| | myCustomFunction(e.target);
|
| | break;
|
| | ```
|
| |
|
| | ## 📊 API実行ログの確認
|
| |
|
| | ```javascript
|
| | // 直近50件のログを取得
|
| | getApiLogsFromSupabase(50).then(result => {
|
| | console.log(result.data);
|
| | });
|
| | ```
|
| |
|
| | または、Supabase Dashboardで直接確認:
|
| | ```sql
|
| | 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.
|
| |
|
| | ## 📞 サポート
|
| |
|
| | 問題が発生した場合は、ブラウザのコンソールログを確認してください。
|
| | |
