Panduan pengembangKerangka umum
Desainer kustom YiDA terdiri dari lima area fungsional, seperti ditunjukkan di bawah ini: Desainer halaman kustom sangat mirip dengan desainer formulir dan mencakup lima area utama:- Bilah navigasi atas — Selain menyediakan kemampuan navigasi umum YiDA, bilah ini mendukung pengeditan nama halaman secara cepat, penyimpanan, Pratinjau, dan lainnya.
- Bilah alat kiri — Digunakan untuk konfigurasi halaman global. Menyediakan pohon garis besar, panel pustaka komponen, serta panel konfigurasi global lain seperti pengelolaan Sumber Data dan panel aksi.
- Bilah alat atas — Digunakan untuk mengonfigurasi area pengeditan visual, seperti mengganti bahasa internasionalisasi, beralih antara tampilan PC dan mobile, serta melihat Riwayat.
- Area pengeditan visual — Area operasi utama desainer. Menampilkan halaman yang sedang dibangun secara WYSIWYG dan mendukung interaksi seperti drag-and-drop dan klik untuk mempermudah pembangunan halaman.
- Bilah alat kanan — Digunakan untuk mengonfigurasi properti komponen yang dipilih. Terbagi menjadi tiga panel — Atribut, Style, dan Premium — yang masing-masing mewakili dimensi konfigurasi properti komponen yang berbeda.
Detail fitur
Gambar di atas menandai semua modul fungsional desainer kustom. Kami akan memperkenalkannya satu per satu di bawah ini.1. Entri cepat navigasi platform
Arahkan mouse ke ikon untuk membuka menu pintasan platform. Dari sana, Anda dapat berpindah dengan cepat ke halaman awal, My Apps, App Center, dan lainnya.2. Nama aplikasi
Menampilkan Nama aplikasi dari halaman yang sedang dibangun. Klik Nama aplikasi untuk berpindah ke halaman pengelolaan halaman aplikasi tersebut.3. Nama halaman
Menampilkan nama Halaman yang sedang dibangun. Klik ikon pensil untuk mengedit nama Halaman dengan cepat.4. Navigasi Pengaturan halaman
Klik tautan navigasi untuk mengakses dengan cepat halaman Pengaturan Halaman dan halaman konfigurasi penerbitan Halaman.5. Pergantian Bahasa internasionalisasi
Beralih antar Bahasa melalui dropdown. Saat ini didukung Bahasa Mandarin Sederhana dan Bahasa Inggris.6. Pergantian viewport tampilan
Beralih antara mode tampilan PC dan mobile. Desainer visual akan menyesuaikan tampilannya setelah pergantian.7. Urungkan & Ulangi
Desainer YiDA merekam operasi Anda dan mendukung tindakan urungkan (undo) dan ulangi (redo).8. Riwayat
Klik ikon Riwayat, lalu desainer akan menampilkan Riwayat penyimpanan terbaru Anda di sebelah kanan. Anda dapat memilih Versi tertentu untuk dikembalikan (roll back).9. Pencarian global
Desainer YiDA menyediakan fitur pencarian global yang cepat. Cari berdasarkan kata kunci untuk menemukan pengaturan tertentu.10. Pintasan
Klik ikon Pintasan untuk membuka dialog pintasan, tempat Anda dapat melihat daftar Pintasan yang didukung oleh desainer YiDA.11. Pengaturan Halaman
Klik tombol Pengaturan Halaman, lalu bilah alat kanan akan beralih ke panel Pengaturan Halaman, tempat Anda dapat mengonfigurasi properti dan gaya dari kontainer terluar Halaman.12. Pratinjau
Klik tombol Pratinjau. Informasi Halaman tersimpan secara otomatis, dan overlay Pratinjau diluncurkan di desainer Halaman untuk menampilkan Pratinjau Halaman yang sesungguhnya.13. Simpan
Simpan informasi Halaman yang telah diedit ke Sisi server.14. Pohon garis besar
Panel pohon garis besar memungkinkan Anda melihat hierarki komponen Halaman saat ini dengan jelas. Di panel ini, Anda dapat melakukan operasi berikut:- Klik untuk memilih Komponen: Ketika Anda mengklik node di pohon Komponen, Komponen terkait akan disorot di kanvas.
- Seret untuk memindahkan Komponen: Seret Komponen untuk mengubah posisinya. Drag-and-drop didukung antara pohon Komponen dan kanvas.
- Sembunyikan Komponen dengan cepat: Ketika Anda mengarahkan kursor ke node di pohon Komponen, ikon aksi pintasan akan muncul sehingga Anda dapat menyembunyikan Komponen dengan cepat.
15. Pustaka Komponen
Lihat daftar semua Komponen resmi yang tersedia untuk Halaman saat ini. Gunakan pencarian berdasarkan nama atau filter pustaka Komponen untuk menemukan Komponen yang Anda butuhkan dengan cepat. Anda juga dapat menyeret Komponen dari pustaka dan menambahkannya ke lokasi tertentu di area pengeditan visual.16. Templat Blokir
Blokir adalah kombinasi Komponen yang disusun berdasarkan aturan bisnis. Oleh karena itu, blokir dapat dianggap sebagai material berbutir lebih besar dibandingkan Komponen individual. Pustaka blokir bekerja mirip dengan pustaka Komponen, sehingga Anda dapat menyeret material blokir ke kanvas atau ke pohon Komponen.17. Sumber Data
Konfigurasikan Sumber Data Halaman. Halaman kustom YiDA mendukung dua jenis Sumber Data:- Variabel — Digunakan untuk pengelolaan status global Halaman.
- Remote API — Digunakan untuk mengelola permintaan data asinkron pada Halaman.
18. Panel aksi
Digunakan untuk menulis logika bisnis dalam kode JS. Mendukung sintaks ES6 secara penuh dan mencakup skenario konfigurasi berikut:- Konfigurasi siklus hidup halaman
- Konfigurasi fungsi handler tindakan
- Konfigurasi Fungsi bersama Halaman
19. Pengelolaan teks multibahasa
Digunakan untuk mengonfigurasi pustaka teks multibahasa untuk internasionalisasi. APIi18n juga disediakan untuk mengambil pustaka bahasa.
20. Konfigurasi Atribut Premium
Digunakan untuk mengonfigurasi Atribut Premium dari Komponen yang Dipilih, meliputi:- Render atau tidak: Mengaktifkan rendering bersyarat dinamis pada Komponen.
- Loop: Mengaktifkan konfigurasi rendering berulang pada Komponen.
- Pengenal Unik: Pengenal Unik dari Komponen, mirip dengan konsep
keydi React.
21. Konfigurasi Atribut Style
Pilih Komponen di kanvas, lalu edit gayanya di panel Style di sebelah kanan (setara dengan propertistyle pada Komponen React). Konfigurasi panel Style konsisten di semua Komponen dan dipetakan ke atribut gaya CSS Standar.
22. Konfigurasi properti komponen
Pilih Komponen di area pengeditan visual, lalu edit propertinya di panel Atribut di sebelah kanan (setara denganprops pada Komponen React). Desainer menampilkan panel konfigurasi Atribut yang berbeda berdasarkan pengaturan properti yang didefinisikan saat Komponen tersebut diintegrasikan.
23. Pusat Masukan
Menyediakan akses cepat ke dukungan dan konsultasi, meliputi pintasan berikut:- Konsultasi pra-penjualan
- Pengembangan kustom
- Ikuti akun resmi
- Masukan pengalaman Pengguna
- Dukungan Live
24. Area pengeditan visual
Area utama untuk pengeditan visual. Di kanvas, Anda dapat:- Klik untuk memilih Komponen: Pilih Komponen yang propertinya ingin Anda konfigurasikan di panel kanan.
- Seret untuk memindahkan Komponen: Seret material antara pohon Komponen dan kanvas untuk memindahkannya.
- Seret untuk menambahkan Komponen: Seret instance material dari pustaka Komponen atau pustaka blokir ke dalam area pengeditan.