Skip to main content
Tutorial ini memandu Anda membangun dan menerbitkan demo sederhana menggunakan halaman kustom YiDA. Hasil akhirnya seperti berikut: Saat pengguna memasukkan nama pada bidang input dan mengklik tombol Generate, aplikasi otomatis menghasilkan sapaan dan menampilkannya di bawah tombol. Setiap langkah dijelaskan secara rinci. Jika Anda memiliki pertanyaan tentang fitur produk YiDA selama proses ini, lihat Panduan Pengguna YiDA. Sekarang, mari bangun demo dari awal.
Anda dapat melihat demo Live di Hello Example, dan memeriksa implementasinya di desainer Komponen Kustom.

​
Langkah 1: Buat aplikasi YiDA

Pertama, buat aplikasi di ruang kerja YiDA (lihat Panduan Pengguna untuk detailnya). Lewati langkah ini jika Anda sudah memiliki aplikasi yang akan digunakan. Pada contoh berikut, kami membuat aplikasi kosong bernama demo example:

​
Langkah 2: Buat halaman kustom

Selanjutnya, buat halaman kustom untuk mengimplementasikan demo. Karena kita belum memerlukan templat halaman, klik Skip pada layar pemilihan templat untuk langsung membuka desainer halaman kustom: Berikut tampilan desainer halaman kustom YiDA. Untuk gambaran fitur yang lebih rinci, lihat Dokumentasi Desainer. Anda dapat mengganti nama halaman saat ini setelah masuk ke desainer:

​
Langkah 3: Seret komponen dan konfigurasikan atributnya

Demo ini sangat sederhana dan hanya berisi tiga komponen. Seret komponen tersebut dari panel pustaka komponen ke kanvas. Untuk opsi konfigurasi komponen yang lebih lengkap, lihat Dokumentasi Komponen:
  • Input Field - Digunakan untuk memasukkan nama. Setel atribut Title menjadi “Nama”.
  • Button - Digunakan untuk membaca nama yang dimasukkan dan menghasilkan sapaan. Setel atribut Title menjadi “Generate”.
  • Text - Digunakan untuk menampilkan sapaan. Untuk tampilan yang lebih baik, atur margin atas menjadi 20px dan ukuran font menjadi 20px pada panel gaya, seperti terlihat di bawah ini.

​
Langkah 4: Buat variabel global

Mulai langkah ini, kita mengimplementasikan logikanya. Pertama, buat variabel global untuk menyimpan sapaan (untuk detail penggunaan variabel global, lihat Dokumentasi Variabel Global). Buat variabel global bernama helloWord, seperti terlihat di bawah ini:

​
Langkah 5: Ikat peristiwa klik tombol

Saat pengguna mengklik tombol, kita perlu membaca isi bidang input dan menampilkan sapaan yang dihasilkan di bawahnya. Bagian ini menjelaskan cara mengikat peristiwa dan menghasilkan sapaan: 1. Ikat peristiwa klik ke tombol. Seperti terlihat di bawah ini, fungsi JS otomatis dibuat di panel aksi setelah pengikatan (Anda juga dapat menyesuaikan nama fungsinya). 2. Gunakan API getValue untuk membaca isi bidang input. YiDA menyediakan sekumpulan YiDA JSAPI yang lengkap. Seperti terlihat di bawah ini, ambil input pengguna berdasarkan pengenal unik komponen bidang input: 3. Susun sapaan, lalu gunakan API setState untuk memperbarui variabel global dan memicu render ulang halaman. Kode lengkap untuk onClick adalah sebagai berikut:

​
Langkah 6: Ikat Text ke variabel Sumber Data

Pada langkah terakhir, ikat variabel global ke atribut Content komponen Text agar dapat ditampilkan, seperti terlihat di bawah ini:

​
Langkah 7: Pratinjau dan terbitkan

Demo kini telah selesai. Klik tombol Preview di sudut kanan atas desainer untuk melihat pratinjaunya: Setelah pratinjau, klik tombol Save untuk menyimpan halaman. Anda kemudian dapat mengklik tombol Access di sudut kanan atas aplikasi untuk membuka halaman demo yang baru saja Anda bangun:

​
Kesimpulan

Anda telah menyelesaikan demo Panduan cepat. Kunjungi Hello Example untuk melihat hasil Live-nya. Contoh ini memperkenalkan alur kerja dasar halaman kustom YiDA. Untuk tutorial lebih lanjut, lihat Tutorial TodoMVC.