Blue Print: Universal Crypto Grid Manager

Berikut adalah susunan Blue Print Proyek: Universal Crypto Grid Manager yang bisa Anda copy-paste langsung ke halaman WordPress (Gunakan Gutenberg Block: Table dan Code agar rapi).

📘 Blue Print: Universal Crypto Grid Manager

Status: In Development | Platform: WordPress + n8n | Exchange Target: Crypto Exchange (Indodax API Ready)

1. Arsitektur Data (MySQL)

Tabel ini dirancang dengan presisi 8 desimal (DECIMAL 18,8) untuk mendukung akurasi transaksi aset crypto.

TabelFungsi UtamaKey Fields
wp_grid_strategiesKonfigurasi strategi per pair.pair_name, lower_price, upper_price, grid_quantity, status
wp_grid_levelsTitik eksekusi harga (grid lines).level_price, side (Buy/Sell), order_status, last_order_id
wp_grid_logsCatatan transaksi yang berhasil.execution_price, quantity, fee, timestamp

2. API & Security Layer

Sistem menggunakan komunikasi tertutup antara WordPress dan n8n.

  • Endpoint Namespace: grid-manager/v1
  • Security Header: X-API-KEY (Internal token yang disetel di dashboard).
  • Encryption: Secret Key Exchange dienkripsi menggunakan standar wp_salt() di database.
  • Endpoints:
    • GET /pending-orders: Diambil oleh n8n untuk mengecek harga pasar.
    • GET /exchange-keys: Diambil oleh n8n untuk otentikasi ke bursa.
    • POST /update-status: n8n melaporkan jika order berhasil dieksekusi.
    • POST /add-log: Mencatat histori transaksi.

3. Logika Kerja (n8n Workflow)

Alur otomasi yang akan dijalankan setiap menit:

  1. Fetch Data: n8n memanggil WP API untuk melihat list grid aktif.
  2. Market Check: n8n mengambil harga Real-time dari bursa.
  3. Comparison: Jika Market Price menyentuh/melewati Level Price:
    • Generate Signature HMAC-SHA512 (untuk Indodax).
    • Kirim instruksi Buy atau Sell ke Bursa.
  4. Sync: Jika sukses, n8n update status di WordPress dan kirim Toast Notification.

4. Antarmuka Pengguna (UI/UX)

  • Framework: Bootstrap 5.
  • Dashboard Components:
    • Summary Cards: Total Profit, Active Grids, Total Logs.
    • Action Center: Tombol ‘Generate Levels’ & ‘Emergency Stop’.
    • Real-time Alerts: Sistem Toast Notification untuk update instan tanpa refresh halaman.
  • Settings Page: Pengaturan API Key Exchange & n8n Access Token.

5. Rencana Tahapan Pengembangan (Roadmap)

  1. Tahap 1: Setup Database Handler & Fondasi Plugin (Status: Next Step).
  2. Tahap 2: Encryption & Security Management Page.
  3. Tahap 3: REST API Custom Routes.
  4. Tahap 4: Grid Logic & Calculation Engine.
  5. Tahap 5: Bootstrap Dashboard & UI Implementation.
  6. Tahap 6: Integrasi n8n & Toast Notifications.

Catatan Proyek:

“Pastikan setiap kali menambah strategi baru, Pair Name mengikuti format exchange (contoh: btc_idr) dan lakukan pengetesan koneksi API sebelum mengaktifkan status Grid ke ‘Active’.”

Tips untuk Halaman WordPress Anda:

Anda bisa menyisipkan Screenshot Airtable yang sudah Anda buat sebelumnya sebagai referensi visual awal di bawah tabel database.

Prompt Cursor: Tahap 1 (Database & Fondasi Plugin)

“Act as an expert WordPress Developer. Create the core structure for a plugin named ‘Universal Crypto Grid Manager’.

1. Main Plugin File: > – Setup the standard WordPress plugin header.

  • Ensure the file cannot be accessed directly using ABSPATH.
  • Include an activation hook that triggers the database creation.

2. Database Schema (Custom Tables): Use $wpdb and dbDelta to create these 3 tables with DECIMAL(18,8) for high precision:

  • {prefix}grid_strategies: grid_id (Primary Key), pair_name (Varchar 20), lower_price, upper_price, amount_per_grid, status (Enum: Active, Paused, Completed), and created_at.
  • {prefix}grid_levels: level_id (Primary Key), grid_id (Foreign Key), level_price, side (Enum: Buy, Sell), order_status (Enum: Pending, Placed, Filled, Canceled), and last_order_id.
  • {prefix}grid_logs: log_id (Primary Key), grid_id, execution_price, quantity, fee, side, and timestamp.

3. Core Logic & Helper:

  • Implement a helper function sanitize_pair_name that converts pair names to lowercase and ensures they use an underscore format (e.g., btc_idr or eth_usdt).
  • Create a basic admin menu controller that will hold our ‘Dashboard’ and ‘Settings’ pages later.

4. Clean Code: > – Organize the code using a modular approach.

  • Use WordPress coding standards and ensure the SQL queries are properly formatted for dbDelta (one space after PRIMARY KEY, etc.).”

Langkah Setelah Eksekusi di Cursor:

  1. Save File: Setelah Cursor menghasilkan kode, simpan file tersebut.
  2. Aktifkan Plugin: Pergi ke dashboard WordPress Anda > Plugins, lalu klik Activate pada ‘Universal Crypto Grid Manager’.
  3. Verifikasi Database: Jika Anda memiliki akses ke phpMyAdmin, pastikan 3 tabel baru dengan prefix wp_grid_... (atau sesuai prefix Anda) sudah muncul dengan struktur DECIMAL(18,8).
  4. Cek Menu: Pastikan menu baru “Grid Manager” sudah muncul di sidebar admin WordPress Anda.

Setelah Tahap 1 ini berjalan lancar (tabel sudah terbuat), beri tahu saya agar kita bisa lanjut ke Tahap 2: Manajemen API Key & Encryption.

Tahap 2 berfokus pada pembuatan halaman Settings untuk menyimpan API Key dan Secret Key dari exchange secara aman. Kita tidak akan menyimpan Secret Key dalam bentuk teks biasa (plain text), melainkan akan dienkripsi.

Silakan buka Cursor, buat file baru di dalam folder plugin Anda dengan nama includes/settings-page.php (atau biarkan Cursor menentukan lokasinya), lalu masukkan prompt ini:

Prompt Cursor: Tahap 2 (Security & API Key Management)

“Now, let’s build the Settings & Security page for the ‘Universal Crypto Grid Manager’ plugin.

1. Admin Page UI:

  • Create a sub-menu under ‘Grid Manager’ called ‘Settings’.
  • Use Bootstrap 5 classes for the layout (wrap the content in a div with id crypto-grid-app to avoid WP CSS conflicts).
  • Create a clean card-based UI for ‘Exchange Credentials’ and ‘n8n Security’.

2. Exchange Credentials Fields:

  • Add fields for ‘API Key’ and ‘Secret Key’.
  • Use password-type inputs for both, with a ‘Show/Hide’ toggle button (eye icon).
  • Encryption: Write a function to encrypt the Secret Key using wp_salt() and openssl_encrypt before saving it to wp_options. Write a corresponding decryption function.

3. n8n Security Field:

  • Add a field for ‘Internal API Token’. This is a secret string that n8n must send in the header to access our endpoints.
  • Provide a ‘Generate Random Token’ button next to this field.

4. Implementation Details:

  • Use the register_setting, add_settings_section, and add_settings_field WordPress APIs for standard data handling.
  • Add a ‘Save Settings’ button with a Bootstrap success style.
  • Ensure all inputs are properly sanitized using sanitize_text_field before saving.
  • Add a Toast Notification (from our previous plan) to show ‘Settings Saved Successfully’ after the user clicks save.”

Apa yang harus Anda periksa setelah ini:

  1. Enkripsi: Coba simpan sebuah string di field Secret Key, lalu cek di database (wp_options). Pastikan isinya berupa kode acak yang tidak bisa dibaca langsung.
  2. Toggle Mata: Pastikan tombol ‘Show/Hide’ berfungsi agar Anda bisa memverifikasi key yang Anda masukkan tanpa takut terlihat orang lain.
  3. Bootstrap Style: Pastikan tampilan halaman Settings ini terasa modern dan berbeda dari tampilan standar WordPress yang kaku.

Setelah Tahap 2 ini selesai, beri tahu saya. Kita akan lanjut ke Tahap 3: Membuat REST API Endpoints agar n8n bisa mulai menarik data dari WordPress.

Tahap 3 adalah membangun REST API Endpoints. Ini adalah “pintu khusus” yang memungkinkan n8n untuk mengambil data strategi, membaca API Key (setelah didekripsi), dan melaporkan hasil trading kembali ke WordPress.

Silakan buka Cursor, buat file baru includes/api-routes.php, dan gunakan prompt detail ini:

Prompt Cursor: Tahap 3 (REST API Bridge for n8n)

“Now, let’s build the REST API Endpoints to connect our WordPress plugin with n8n.

1. API Setup:

  • Register a custom namespace grid-manager/v1 using the rest_api_init hook.
  • Implement a custom authentication function that checks for the X-API-KEY header. It must match the ‘Internal API Token’ we saved in the Settings page (Tahap 2).

2. Create 4 Specific Endpoints:

  • GET /pending-orders:
    • Logic: Fetch all records from wp_grid_levels where order_status is ‘Pending’. Include the associated pair_name from wp_grid_strategies.
  • GET /exchange-keys:
    • Logic: Decrypt and return the Exchange API Key and Secret Key.
    • Security: Ensure this endpoint is strictly protected by the X-API-KEY check.
  • POST /update-status:
    • Parameters: level_id, new_status (Placed/Filled/Canceled), and last_order_id.
    • Logic: Update the wp_grid_levels table accordingly.
  • POST /add-log:
    • Parameters: grid_id, price, quantity, side, fee.
    • Logic: Insert a new record into the wp_grid_logs table.

3. Technical Requirements:

  • Use rest_ensure_response() for all outputs.
  • Add error handling: Return a 401 Unauthorized if the API Key is wrong, and 404 Not Found if a requested Grid ID doesn’t exist.
  • Ensure all POST data is sanitized using sanitize_text_field or absint.”

Cara Verifikasi Tahap 3:

Setelah kode dihasilkan dan disimpan, Anda bisa mengetesnya tanpa n8n terlebih dahulu menggunakan aplikasi seperti Postman atau Insomnia:

  1. URL: https://website-anda.com/wp-json/grid-manager/v1/pending-orders
  2. Header: Tambahkan X-API-KEY dengan token yang Anda buat di halaman Settings tadi.
  3. Hasil: Jika muncul JSON berisi daftar order (atau array kosong jika belum ada data), berarti pintu sudah terbuka!

Apa Selanjutnya?

Setelah n8n bisa “ngobrol” dengan WordPress melalui API ini, kita akan lanjut ke Tahap 4: Logic Kalkulasi Grid. Ini adalah fungsi yang akan membagi rentang harga (Lower & Upper) menjadi garis-garis grid secara otomatis.

Sekarang, mari kita masuk ke Tahap 4: Logic Kalkulasi Grid (Core Feature). Ini adalah bagian yang paling “pintar” dari plugin Anda, di mana WordPress akan menghitung garis-garis harga beli dan jual secara otomatis.

Silakan buka Cursor, buat file baru includes/grid-logic.php, dan gunakan prompt detail ini:

Prompt Cursor: Tahap 4 (Grid Calculation Engine)

“Now, let’s build the Grid Calculation Logic for the ‘Universal Crypto Grid Manager’. This logic will divide the price range into specific levels and save them to the database.

1. Core Function generate_grid_levels($grid_id):

  • Fetch the strategy details from wp_grid_strategies based on the $grid_id.
  • Inputs: lower_price, upper_price, grid_quantity.
  • Calculation:
    • Calculate the price interval: (upper_price - lower_price) / (grid_quantity - 1).
    • Loop through the quantity to create an array of price points.

2. Smart Side Assignment:

  • To determine if a level is ‘Buy’ or ‘Sell’, we need the current market price.
  • Add an optional parameter $current_market_price to the function.
  • Rule:
    • If level_price < current_market_price → Side = ‘Buy’.
    • If level_price > current_market_price → Side = ‘Sell’.

3. Database Integration:

  • Before inserting new levels, delete any existing levels for that $grid_id to avoid duplication.
  • Insert each calculated level into wp_grid_levels with order_status = 'Pending'.

4. Admin UI Integration:

  • Add a ‘Generate’ button (using Bootstrap style) to each row in the Strategy List (which we will build in the Dashboard).
  • Use an AJAX call so that when the button is clicked, it triggers this calculation and shows a Toast Notification upon completion: ‘Successfully generated X grid levels for [Pair Name]’.

5. Security: Ensure the AJAX action is protected by a nonce check and only accessible to users with manage_options capability.”

Tips untuk Pengetesan:

Setelah Cursor selesai menulis kodenya:

Cek tabel wp_grid_levels. Jika muncul 10 baris harga yang rapi (misal: 900jt, 911jt, 922jt… dst), maka Tahap 4 Berhasil!

Masuk ke database manual atau buat satu baris data di wp_grid_strategies (misal: BTC/IDR, Lower: 900.000.000, Upper: 1.000.000.000, Qty: 10).

Panggil fungsi ini (atau klik tombolnya nanti).

Sekarang kita masuk ke bagian yang paling memuaskan secara visual: Tahap 5 (Dashboard & Monitoring UI).

Di tahap ini, kita akan menyatukan semua potongan puzzle tadi ke dalam satu halaman dashboard yang modern menggunakan Bootstrap 5.

Silakan buka Cursor, buat file baru admin/dashboard-view.php, dan gunakan prompt detail ini:

Prompt Cursor: Tahap 5 (Bootstrap Dashboard UI)

“Now, let’s create a modern Monitoring Dashboard for the ‘Universal Crypto Grid Manager’. This page should be clean, responsive, and use Bootstrap 5.

1. Page Layout:

  • Wrap everything in a div with id crypto-grid-app to ensure CSS isolation.
  • Create a Top Header with the title ‘Trading Dashboard’ and a button ‘Add New Strategy’ that opens a Bootstrap Modal.

2. Summary Statistics (Cards):

  • Create a row of 3 cards using .card .shadow-sm:
    • Active Grids: Count of strategies with status ‘Active’.
    • Total Profit: Sum of profit from wp_grid_logs.
    • Open Orders: Count of levels with status ‘Pending’ or ‘Placed’.

3. Strategy List Table:

  • Build a table using .table .table-hover .align-middle.
  • Columns: Pair Name, Price Range (Lower – Upper), Grid Qty, Status (with colorful badges), and Actions.
  • Actions Column: Add buttons for ‘Start/Pause’, ‘Generate Levels’, and ‘Delete’. Use icons (FontAwesome/Bootstrap Icons).

4. Visual Elements:

  • Status Badges: Use .badge .rounded-pill. Green for Active, Yellow for Paused, Red for Completed.
  • Implement the Toast Container we planned earlier in the bottom-right corner.

5. Form Modal:

  • Create the ‘Add New Strategy’ modal with fields: Pair Name, Lower Price, Upper Price, Grid Quantity, and Amount per Grid.
  • Ensure the ‘Save’ button triggers an AJAX request to save the strategy and then reloads the table without a full page refresh.”

Apa yang Harus Anda Perhatikan:

  1. Mobile Friendly: Karena menggunakan Bootstrap, coba kecilkan jendela browser Anda. Pastikan tabel dan kartu statistik tetap terlihat rapi (responsif).
  2. User Experience (UX): Pastikan saat klik ‘Generate Levels’, muncul animasi loading kecil atau tombol menjadi disabled agar user tahu proses sedang berjalan.
  3. Clean Look: Hindari tampilan standar WordPress yang “abu-abu”. Gunakan padding yang luas (.p-4) dan border-radius yang lembut (.rounded-3) agar dashboard terasa seperti aplikasi modern.

Persiapan Tahap Terakhir:

Setelah Dashboard ini jadi, Anda sudah bisa mengontrol bot sepenuhnya dari WordPress. Langkah terakhir adalah Tahap 6: Integrasi n8n & Signature Logic.