Membangun Aplikasi

Untuk membangun aplikasi, Anda harus membuat Tata Letak, Halaman, mengisinya dengan konten, dan mengatur interaksi aplikasi web.

Tata Letak

Sebelumnya, kami memperkenalkan konsep Layouts . Untuk memulai pembuatan tata letak, Anda harus terlebih dahulu menguraikan struktur aplikasi Anda dan mengidentifikasi templat halaman yang akan digunakan.

Jika Anda melewatkan sesuatu, jangan khawatir. Anda dapat menambah daftar tata letak jika diperlukan.

Daftar Tata Letak

Daftar Tata Letak menyediakan semua tata letak aplikasi web Anda. Di sini, Anda dapat melakukan berbagai operasi dan mengelola tata letak.

Untuk mengakses Daftar Tata Letak , pilih tab ke-4 pada toolbar kiri di Tab Desainer UI atau gunakan tombol pintasan 4 . Semua tata letak aplikasi Anda akan ditampilkan di sini.

Setiap aplikasi harus memiliki setidaknya satu tata letak. Saat Anda membuat aplikasi baru, satu atau beberapa layout akan otomatis dibuat tergantung pada template aplikasi yang dipilih. Salah satunya ditandai sebagai **default**.

Di Daftar Tata Letak, Anda dapat melakukan tindakan berikut pada tata letak:

• Pilih,
• tambah baru,
• ganti nama,
• duplikat,
• menghapus.

Tata Letak Bawaan

Tata letak Default dipilih secara otomatis dari daftar tata letak saat membuat halaman baru. Namun, ini bisa diganti dengan tata letak yang berbeda jika diperlukan.

Penggunaan tata letak default meningkatkan kecepatan pengembangan, jadi sebaiknya gunakan tata letak yang paling sering digunakan sebagai default. Perhatikan bahwa hanya satu tata letak yang dapat ditetapkan sebagai default dalam satu waktu. Mengganti tata letak default tidak mempengaruhi halaman yang ada kecuali tata letak awal dihapus.

Tata letak Default ditandai dengan ikon bintang biru di daftar tata letak.

Buat Tata Letak Baru

Anda dapat mendesain tata letak berbeda untuk jenis halaman berbeda. Ikuti langkah-langkah berikut untuk membuat tata letak baru:

• Tekan CTRL/⌘+L atau buka Daftar Tata Letak (pintasan 4 ) dari toolbar Kiri Perancang UI dan klik tombol Plus pada header panel.
• Berikan Nama Tata Letak di modal yang muncul. Kami merekomendasikan penggunaan judul yang mudah dibaca yang mencerminkan struktur tata letak untuk identifikasi cepat saat menetapkan tata letak pada halaman.
• Pilih Templat Tata Letak:
  • Basis: template kosong tanpa elemen tambahan, bagus untuk halaman tanpa navigasi, seperti halaman autentikasi atau kesalahan.
  • Sidebar Kiri: template dengan menu sidebar, cocok untuk panel admin, CMS, ERP, dll.
  • Menu Teratas: template dengan menu teratas, baik untuk situs web atau halaman arahan.
• Aktifkan pengaturan Tata Letak Default jika tata letak ini akan dijadikan default.
• Klik tombol Buat .

Tidak ada batasan jumlah tata letak yang dapat Anda buat.

Mengganti Nama Tata Letak

Untuk mengganti nama tata letak, klik dua kali pada nama tata letak, buat perubahan yang diperlukan, lalu tekan Enter untuk menyimpan atau Esc untuk mengembalikan perubahan.

Menduplikasi Tata Letak

Untuk menduplikasi tata letak, beserta konten dan pengaturannya:

1. Arahkan kursor ke tata letak yang ingin Anda duplikasi.
2. Klik ikon Duplikat.

Tata letak duplikat secara otomatis muncul dalam daftar dengan indeks ditambahkan ke namanya. Jika Anda menduplikasi tata letak yang disetel sebagai default, tata letak sumber tidak akan diganti dengan tata letak yang baru dibuat.

Menghapus Tata Letak

Untuk menghapus tata letak:

1. Arahkan kursor ke tata letak yang ingin Anda hapus.
2. Klik ikon Sampah.
3. Konfirmasi penghapusan.

Untuk menghapus tata letak yang tertaut dengan halaman mana pun, Anda harus menetapkan ulang tata letak untuk halaman tertaut sebelum menghapusnya. Hal ini dapat dilakukan melalui modal konfirmasi atau secara manual untuk setiap halaman.

Untuk menghapus tata letak default, Anda harus menyiapkan tata letak lain sebagai default.

❗️ Penting: Anda tidak dapat membatalkan operasi penghapusan tata letak.

pengaturan tampilan

Klik tata letak target di Daftar Tata Letak untuk mengakses pengaturannya dari Bilah Sisi Pengaturan kiri.

Dari header sidebar Pengaturan, Anda dapat mengganti nama tata letak yang dipilih dengan mengklik nama tersebut atau menghapusnya.

Anda dapat mengatur tata letak yang dipilih sebagai default dan melihat semua halaman tertaut di sini. Untuk mengedit halaman tertaut, klik halaman tersebut dalam daftar.

Selanjutnya, Anda dapat membangun beberapa logika bisnis untuk tata letaknya.

Logika Bisnis Tata Letak

Di tab logika bisnis, pilih pemicu untuk menetapkan tindakan. Ini akan membuka editor proses bisnis, yang berfokus pada pemicu yang dipilih.

Di sini, Anda dapat membuat alur tindakan untuk satu atau beberapa pemicu, seperti menerapkan navigasi, mengubah properti secara kondisional, mengubah visibilitas, mengirim data, dan banyak lagi. Lihat panduan kami tentang membangun proses bisnis untuk informasi lebih lanjut.

🔔 Untuk performa aplikasi yang optimal, bangun proses bisnis yang kompleks di sisi backend.

Mengedit Tata Letak

Tata letak, sebagai komponen global dan templat halaman, secara otomatis menerapkan semua modifikasi ke semua halaman tertaut.

Untuk mengedit tata letak, pilih item target dalam daftar tata letak dan tambahkan komponen apa pun yang diperlukan dari panel elemen UI dengan menyeret dan melepaskannya ke area kanvas.

Saat mengedit tata letak, ingatlah bahwa templat menyertakan komponen Penampung Halaman yang tidak dapat diubah. Ini menentukan penempatan konten halaman Anda di dalam template. Penampung Halaman disorot dalam warna hijau dan tidak dapat memuat komponen di dalamnya saat berada dalam mode pengeditan tata letak. Konten ditentukan langsung di halaman, dan ukuran Penampung Halaman ditentukan oleh komponen induknya.

Halaman

Setelah membuat tata letak yang diperlukan, waktu terbaik untuk mulai membuat halaman aplikasi web. Setelah membuat tata letak yang diperlukan, waktu terbaik untuk mulai membuat halaman aplikasi web. Setiap halaman aplikasi web menyediakan konten yang ditampilkan di browser web pengguna berdasarkan URL target.

Pohon Halaman

Pages Tree menunjukkan struktur situs web Anda — halaman situs Anda dan folder yang menampung halaman-halaman tersebut. Di sini, Anda dapat melakukan berbagai operasi dan mengatur halaman dan folder.

Untuk Membuka Pohon Halaman, pilih tab ke-3 dari toolbar Kiri Perancang UI atau tekan 3. Di sini akan ditampilkan semua halaman aplikasi Anda.

Setiap aplikasi harus memiliki setidaknya satu halaman. Saat Anda membuat aplikasi baru, satu atau beberapa halaman sudah dibuat tergantung template aplikasi yang dipilih.

Anda dapat melakukan tindakan berikut pada halaman dan folder:

• Pilih,
• tambahkan halaman atau folder baru,
• ganti nama,
• pindahkan halaman dan folder ke/keluar folder,
• duplikat,
• menghapus.

halaman indeks

Halaman Indeks adalah halaman awal aplikasi Anda. Saat aplikasi Anda berjalan, halaman ini akan dirender terlebih dahulu jika Anda tidak membuat pengalihan apa pun.

Halaman Indeks ditandai dengan ikon Rumah di pohon halaman dan tidak dapat dialihkan ke halaman lain. Secara default, halaman ini ditautkan dengan tata letak default yang dibuat secara otomatis, namun Anda dapat mengubahnya di Pengaturan Halaman.

Buat Halaman Baru

Untuk menambahkan halaman ke aplikasi web Anda:

1. Tekan CTRL/⌘+P atau buka Pohon Halaman (pintasan 3 ) dari toolbar Kiri Perancang UI dan klik tombol Tambah di header panel.
2. Berikan URL Halaman di modal yang muncul.
3. Pilih Folder Induk untuk halaman tersebut atau biarkan kolom tersebut kosong untuk menempatkan halaman di akar.
4. Pilih Tata Letak Halaman .
5. Klik tombol Buat .

💡 Untuk membuat rute bersarang tanpa membuat folder, berikan jalur lengkap ke halaman target di bidang URL Halaman, misalnya pengaturan/profil. Halaman Profil akan dibuat bersarang ke folder Pengaturan dalam hal ini.

Anda dapat membuat halaman dan folder tanpa batas untuk aplikasi web Anda.

🔔 Aplikasi web yang dibuat dengan AppMaster Studio menghasilkan perutean aplikasi berdasarkan URL halaman, jadi dalam bentuk pembuatan halaman, gunakan URL halaman dalam format yang benar dan, untuk pemahaman terbaik, gunakan URL yang ramah.

Buat Folder Baru

Anda dapat membuat folder untuk mengatur navigasi dan membangun router yang tepat untuk halaman-halaman tersebut. Untuk membuat folder baru:

• Tekan CTRL/⌘+SHIFT+P atau buka Pohon Halaman (pintasan 3) dari toolbar Kiri Perancang UI dan klik tombol Folder di header panel.
• Berikan Nama Folder di modal yang muncul.
• Pilih Folder Induk jika perlu untuk membuat router bersarang
• Klik tombol Buat .

Elemen UI

Antarmuka pengguna aplikasi Anda terdiri dari elemen: kolom masukan, tombol, gambar, kotak centang, kalender, gambar, dan ikon yang masing-masing memiliki tujuan tertentu.

AppMaster menawarkan editor visual drag-and-drop yang memungkinkan Anda memilih dan menempatkan elemen langsung di halaman alih-alih menulis kode dan langsung mempratinjaunya.

Menambahkan Elemen

Untuk menambahkan elemen ke kanvas:

1. Buka Panel Elemen UI dengan daftar elemen UI (pintasan 1 ).
2. Pilih elemen yang diperlukan atau gunakan bilah Pencarian.
3. Seret elemen yang dipilih ke halaman atau kanvas tata letak.

Untuk menempatkan elemen penarik di dalam target, letakkan elemen di atas elemen target.

Untuk menambahkan elemen sebelum atau sesudah elemen, seret elemen ke atas batas target hingga pemisah muncul.

Pembaginya bergantung pada arah wadah induk:

• Jika wadah induk Direction adalah Vertical , elemen akan ditambahkan dari atas atau bawah.
• Jika wadah induk Direction adalah Horizontal , elemen akan ditambahkan dari kiri atau kanan.

Sesuaikan Elemen

Setiap komponen yang Anda tambahkan ke kanvas dilengkapi dengan serangkaian pengaturan lengkap yang dapat disesuaikan. Dengan properti elemen, Anda dapat mengatur tampilan elemen dan data yang akan ditampilkan.

Untuk mengonfigurasi elemen:

• Pilih komponen target di kanvas.
• Arahkan ke panel Appearance, tab pertama di sidebar kanan.
• Di dalam panel, pilih item Pengaturan tertentu yang ingin Anda ubah.
• Masukkan nilai pilihan Anda di bidang yang ditentukan.

Kanvas merespons secara realtime, menampilkan penyesuaian Anda dengan segera.

Untuk panduan tambahan, arahkan kursor mouse Anda ke pengaturan sebentar untuk memunculkan tooltip, yang memberikan deskripsi singkat tentang fungsi pengaturan tersebut.

Di luar fitur interaktif ini, AppMaster meningkatkan kemampuan penyesuaian melalui blok proses bisnis khusus, Set Properties dan Set Data . Blok ini memberikan akses tingkat lanjut, memungkinkan Anda mengubah pengaturan setiap komponen secara terprogram di aplikasi web Anda.