Desk Page Studio

Desk Page Studio adalah IDE berbasis web untuk membuat dan mengedit komponen Frappe Page dengan fitur editor kode visual, AI assistant, dan manajemen file terintegrasi.

Understanding the Desk Page Studio Page

Purpose: Desk Page Studio memungkinkan developer untuk membuat, mengedit, dan mengelola Frappe Pages secara visual melalui antarmuka web dengan dukungan Monaco Editor dan AI assistant (opsional). Halaman ini menyediakan alur kerja lengkap dari pembuatan halaman baru hingga commit perubahan ke filesystem.

Function: Halaman ini menyediakan IDE lengkap untuk: - Membuat Frappe Page baru dengan struktur file otomatis - Mengedit kode JavaScript halaman dengan syntax highlighting dan autocomplete - Melihat dan memfilter daftar halaman berdasarkan aplikasi dan tipe - Mengelola draft perubahan sebelum commit - Generate file yang hilang untuk halaman orphan - Sinkronisasi metadata dari file JSON - Track perubahan dalam Update Set untuk version control - Menggunakan AI assistant untuk membantu development (jika TechMaju AI terinstal)

Role Required

• System Manager
• TM Developer

Desk Page Studio Fields

Procedure

1. Navigasi ke TechMaju Core > Desk Page Studio

2. Melihat dan Memfilter Halaman:

   • Gunakan dropdown Application untuk filter berdasarkan aplikasi
   • Gunakan dropdown Type untuk filter berdasarkan tipe halaman:
     • All Pages: Semua halaman
     • System Generated: Halaman system (read-only)
     • Custom Pages: Halaman custom yang dapat diedit
   • Klik tombol Filter untuk toggle panel filter
   • Klik tombol Refresh untuk reload daftar halaman dari codebase

3. Membuat Halaman Baru:

   • Klik tombol '+ New Page'
   • Isi form dengan informasi berikut:
     • Page Name: Nama unik dengan format lowercase-with-hyphens (contoh: my-custom-page)
     • Title: Judul halaman yang ditampilkan
     • Application: Pilih module/aplikasi untuk halaman
     • Icon: Nama icon (contoh: fa fa-file) - opsional
     • Restrict To Domain: Domain restriction - opsional
     • Standard: Pilih Yes/No
     • System Page: Centang jika halaman system-generated
   • Klik Create
   • Sistem akan membuat struktur file otomatis:
     • {page_name}.json - Metadata halaman
     • {page_name}.js - JavaScript client code
     • {page_name}.py - Python server methods (boilerplate)
     • __init__.py - Python package initialization

4. Editing Halaman:

   • Klik nama halaman dari daftar untuk membuka di editor
   • Edit kode JavaScript di Monaco Editor
   • Gunakan syntax highlighting dan autocomplete
   • Status Modified akan muncul jika ada perubahan belum disimpan
   • Note: System Pages ditandai dengan badge biru dan read-only

5. Menggunakan AI Assistant (jika TechMaju AI terinstal):

   • Ketik instruksi di AI Chat panel
   • AI akan memberikan saran perubahan kode
   • Review diff sebelum apply perubahan
   • Accept atau reject setiap suggestion
   • History chat tersimpan di session

6. Menyimpan Draft:

   • Klik tombol 'Save Draft' untuk menyimpan perubahan ke session
   • Draft tersimpan di database, belum ke filesystem
   • Dapat di-reset dengan menu 'Reset Draft' (kembali ke last commit)

7. Commit Perubahan:

   • Klik tombol 'Commit' untuk menulis perubahan ke filesystem
   • Konfirmasi commit akan muncul
   • File yang akan ditulis:
     • {page_name}.json - Metadata terbaru
     • {page_name}.js - JavaScript code dari draft
     • {page_name}.py - Python code (jika ada)
     • __init__.py - Package initialization
   • Perubahan otomatis di-track dalam Update Set (jika developer mode aktif)
   • Cache akan dibersihkan dan build assets dijalankan di background

8. Mengelola File Hilang:

   • Orphan Page (badge merah): Halaman ada di database tapi tidak ada folder di codebase
     • Klik 'Sync from Codebase' untuk generate struktur file dari metadata
   • Missing Files (badge kuning): Beberapa file mandatory hilang
     • Klik 'Generate Missing Files' untuk create file yang hilang
   • File mandatory: .json, .js
   • File optional: .py, __init__.py

9. Menu Actions:

   • Reset Draft: Kembalikan draft ke versi last commit dari file
   • Sync Metadata: Update Page doctype dari file JSON (jika edit manual di luar Studio)
   • Page Settings: Buka form Page doctype di tab baru
   • Open Page: Buka halaman yang sedang diedit di tab baru

10. Sidebar Toggle:

    • Klik icon sidebar toggle untuk hide/show daftar halaman
    • Memberikan lebih banyak ruang untuk editor

Best Practices

• Selalu test di development environment sebelum commit ke production
• Gunakan Page Name yang deskriptif dengan format kebab-case (lowercase-with-hyphens)
• Save Draft secara berkala untuk menghindari kehilangan perubahan
• Review diff dari AI suggestions sebelum apply - jangan accept semua secara otomatis
• Commit perubahan secara atomic - satu fitur atau fix per commit
• Generate missing files sebelum commit untuk menghindari error
• Jangan edit System Pages - mereka read-only dan akan di-override saat upgrade
• Sync metadata jika melakukan perubahan manual pada file JSON di luar Studio
• Gunakan module yang tepat saat create halaman baru untuk organisasi yang baik
• Backup Update Set secara regular untuk version control yang baik
• Run 'bench build' manual jika auto-build gagal setelah commit
• Test halaman di browser setelah commit untuk memastikan tidak ada error runtime
• Gunakan AI Chat untuk boilerplate code dan refactoring suggestions, tapi selalu review hasilnya