AI Web Page Studio
AI Web Page Studio
AI Web Page Studio adalah lingkungan pengembangan visual cerdas berbasis AI untuk membuat dan mengedit halaman web di dalam platform TechMaju. Studio ini menyediakan workspace komprehensif dengan pratinjau langsung, generasi kode berbantuan AI, serta manajemen sesi kolaboratif untuk membangun halaman web modern yang responsif.
Memahami AI Web Page Studio
Tujuan:
Memungkinkan developer dan content creator mendesain, membuat prototipe, dan mendistribusikan halaman web dengan cepat menggunakan instruksi berbahasa natural yang dipadukan dengan pengeditan kode tradisional.
Fungsi:
Workspace tiga panel:
- Session Management Pane – Mengelola beberapa sesi pengeditan
- Code Editor Pane – Editor multi-tab untuk HTML, CSS, JavaScript, Python
- AI Chat & History Pane – Chat AI, riwayat, dan pratinjau patch
Sesi dipertahankan secara persisten, dilengkapi preview aman, alat pemilihan elemen, dan patch cerdas.
Peran yang Dibutuhkan
- System Manager – Akses penuh
- Website Manager – Mengakses sesi milik sendiri
- AI Web Page Editor – CRUD penuh pada sesi sendiri
- TM AI Developer – CRUD penuh pada sesi sendiri
Komponen Inti
1. AI Web Page Studio Page
Antarmuka utama di /app/ai-web-page-studio.
Fitur:
- Layout responsif tiga panel
- Monaco Editor
- Live preview iframe
- Chat AI real-time
- Manajemen sesi
- Visual diff viewer
2. AI Studio Session DocType
Data sesi persisten.
| Field | Type | Deskripsi |
|---|---|---|
| Session Name | Data | Nama sesi |
| User | Link (User) | Pemilik sesi |
| Web Page | Link (Web Page) | Target halaman |
| Application | Link (My Application) | Aplikasi terkait |
| Active | Check | Status sesi |
| Draft HTML | Code (HTML) | Draft HTML |
| Draft CSS | Code (CSS) | Draft CSS |
| Draft JS | Code (JavaScript) | Draft JS |
| Draft Python | Code (Python) | Draft Python |
| Preview Route | Data | URL preview |
| Preview Expires At | Datetime | Kedaluwarsa preview |
| Last Selection | JSON | Data elemen terpilih |
| AI History | Table | Riwayat AI |
3. AI Studio Session Message
| Field | Type | Deskripsi |
|---|---|---|
| Sender | Check | User/AI |
| Usage Log | Link | Log AI |
| Payload | JSON | Isi pesan |
| Diff | JSON | Diff cache |
Operasi AI & Patch
HTML
- replaceInnerHTML
- insertBefore
- insertAfter
- prependChild
- appendChild
- setAttribute
- addClass
- removeClass
CSS
- appendRules
- updateRule
- removeRule
JavaScript
- appendCode
- updateFunction
- replaceContent
Python
- replaceContent
Validasi:
Patch terarah max 1200 karakter, mode penuh tanpa batas, selector root diblokir.
Prosedur
1. Mengakses Studio
Melalui menu TechMaju AI > AI Web Page Studio atau tombol “✨” pada Web Page.
2. Membuat Sesi Baru
- New Session atau
- Melalui Web Page → “✨” → sesi otomatis dibuat
3. Antarmuka
- Panel Kiri: daftar sesi
- Panel Tengah: editor kode (HTML, CSS, JS, Python)
- Panel Kanan: chat AI, history, patch, diff
4. Bekerja dengan AI
- (Opsional) pilih elemen dengan Element Picker
- Pilih model AI
- Beri instruksi natural language
- Tinjau patch
- Terapkan patch
5. Preview Mode
Preview menggunakan URL bertanda tangan (15 menit). Pembaruan otomatis dan seleksi elemen didukung.
6. Draft Management
Auto-save, revert, dan clear tersedia.
7. Commit ke Web Page
- Commit: menyimpan ke Web Page tanpa publikasi
- Publish: commit + langsung tayang
8. Siklus Hidup Sesi
Tersedia opsi Close, Activate, dan Delete.
9. Fitur Lanjutan
- Related DocTypes
- Reference Web Pages
- Component Filtering
- History Diff Caching
Best Practices
Workflow
- Mulai dari template
- Nama sesi deskriptif
- Satu fitur per sesi
- Tutup sesi selesai
AI
- Instruksi spesifik
- Gunakan elemen terpilih
- Review sebelum apply
- Iteratif
- Berikan konteks visual
Kualitas Kode
- Uji di dev
- Hindari XSS
- Aksesibilitas
- Konsistensi style
- Tambahkan komentar
Manajemen Sesi
- Commit rutin
- Gunakan preview
- Manfaatkan history
- Arsipkan sesi lama
Preview & Testing
- Regenerasi URL
- Uji responsivitas
- Cross-browser
- Monitor performa
Kolaborasi
- Share konteks
- Dokumentasikan keputusan
- Review oleh System Manager
Pemilihan Model AI
- Gunakan model kuat untuk layout kompleks
- Perhatikan biaya
- Eksperimen model
Keamanan & Compliance
- Jangan simpan secrets
- Validasi input
- Hormati permission Frappe
- Audit log AI
Optimasi
- Minimalkan ukuran draft
- Tutup preview bila tak digunakan
- Kurangi history berlebihan
- Kelompokkan perubahan
Troubleshooting
- Tidak punya akses → pastikan role benar
- Preview kadaluarsa → buat ulang URL
- Patch invalid → perbaiki instruksi
- Perubahan tidak muncul → cek auto-save / regenerate preview
- Session tidak terhubung ke Web Page → hubungkan terlebih dahulu
- Patch terarah terlalu besar → pecah instruksi
- AI history kosong → log terhapus
- Auto-save gagal → cek koneksi dan console browser