Alur Kerja Aplikasi Web

Di AppMaster Web Designer, Anda dapat mengonfigurasi logika bisnis untuk aplikasi web di sisi Frontend selain logika Backend . Fitur canggih ini memungkinkan Anda membuat aplikasi web dinamis dan canggih yang disesuaikan dengan kebutuhan bisnis spesifik.

Dalam konteks aplikasi web, proses bisnis mungkin mencakup otentikasi pengguna, pemrosesan data, transaksi online, manajemen konten, operasi layanan pelanggan, dan penyesuaian elemen UI bergantung pada kondisi.

Tiga Tingkat Logika Bisnis di AppMaster Web Designer:

• Pemicu Aplikasi: Ini adalah pemicu tingkat tinggi yang merespons peristiwa atau keadaan di seluruh aplikasi, yang memicu proses bisnis tertentu.
• Proses Bisnis Generik: Ini adalah serangkaian operasi yang telah ditentukan sebelumnya yang dapat diterapkan di berbagai bagian aplikasi, mengotomatiskan tugas, dan menyederhanakan alur kerja.
• Pemicu Elemen: Lebih terperinci dibandingkan pemicu aplikasi, pemicu ini terkait dengan elemen UI tertentu, mengaktifkan proses bisnis berdasarkan interaksi dengan elemen ini.

Dengan memanfaatkan tingkat logika bisnis ini, AppMaster Web Designer memberdayakan Anda untuk membuat aplikasi web yang tidak hanya menarik secara visual namun juga cerdas dan responsif terhadap kebutuhan dan perilaku pengguna.

🔔 Penting untuk memuat ulang pratinjau yang sedang berjalan setelah menambahkan logika bisnis baru untuk meluncurkan BP.

Pemicu Aplikasi

Pemicu Aplikasi di AppMaster Web Designer adalah pemicu tingkat tinggi yang merespons peristiwa atau status di seluruh aplikasi yang menjalankan eksekusi proses bisnis tertentu untuk meningkatkan fungsionalitas dan pengalaman pengguna.

AppMaster menawarkan beragam Pemicu Aplikasi, masing-masing dirancang untuk skenario tertentu:

• Saat Peluncuran Aplikasi: Diaktifkan saat aplikasi dijalankan, ideal untuk prosedur pengaturan awal.
• Navigasi Saat Aplikasi: Diaktifkan selama navigasi antar bagian aplikasi yang berbeda.
• On App Blur: Dipicu saat aplikasi kehilangan fokus, berguna untuk menjeda atau menyimpan tindakan.
• Fokus Pada Aplikasi: Dijalankan saat aplikasi kembali fokus, bagus untuk melanjutkan atau memperbarui konten.
• Di Aplikasi Tersembunyi: Diaktifkan ketika aplikasi diperkecil atau tidak terlihat di layar.
• Pada Aplikasi Terlihat: Diaktifkan saat aplikasi terlihat kembali, berguna untuk menyegarkan konten.
• On App Destroy: Dieksekusi selama proses penutupan aplikasi.
• Di Aplikasi Online: Dipicu ketika aplikasi mendeteksi status online, cocok untuk menyinkronkan data.
• Pada Aplikasi Offline: Diaktifkan saat aplikasi offline, mengaktifkan fungsi offline.
• Diperlukan Otentikasi Pada Aplikasi: Aktif setelah menerima respons "401 (Tidak Sah)", yang meminta autentikasi ulang pengguna.
• Di Terlarang di Aplikasi: Memicu respons "403 (Terlarang)", biasanya digunakan untuk kontrol akses dan izin.

Daftar pemicu Aplikasi yang tepat dapat diperluas dengan membuat Titik Akhir WebSocket di tingkat Backend aplikasi Anda.

Pemicu ini dapat digunakan untuk mengelola otorisasi pengguna saat peluncuran, memverifikasi hak akses, mengonfigurasi pengalihan setelah perubahan otorisasi, menangani kesalahan, dan banyak lagi, menjadikannya sangat diperlukan dalam membuat aplikasi web yang responsif dan aman.

Proses Bisnis Generik

Proses Bisnis Generik di AppMaster Web Designer dirancang khusus untuk merangkum operasi berulang dan logika redundan ke dalam alur yang berbeda. Setelah dibuat, proses bisnis ini dapat diintegrasikan secara mulus sebagai blok berbeda ke dalam setiap tingkat proses bisnis aplikasi web Anda.

Fitur Utama:

• Manajemen Alur Kerja yang Efisien: Dengan memindahkan tugas-tugas umum ke dalam Proses Bisnis Generik, Anda secara signifikan mengurangi duplikasi dan menyederhanakan alur kerja aplikasi Anda.
• Fungsionalitas Frontend: Sambil mencerminkan fungsionalitas proses bisnis Backend, Proses Bisnis Generik dijalankan secara unik di Frontend . Hal ini memungkinkan interaksi yang lebih cepat dan umpan balik langsung dalam antarmuka pengguna.

Kemudahan Penggunaan Kembali:

Untuk menggunakan Proses Bisnis Generik sambil membangun logika, cukup seret blok yang diinginkan dari grup BPs Buatan Pengguna ke kanvas Anda.

🔔 Pertimbangan Kinerja: Penting untuk dicatat bahwa untuk tugas yang kompleks dan membutuhkan banyak sumber daya, kami menyarankan untuk menjalankan proses ini di sisi server (Backend). Pendekatan ini memastikan kinerja dan efisiensi yang lebih baik, terutama untuk operasi yang menuntut komputasi atau memerlukan penanganan data sensitif secara aman.

Pemicu Elemen

Pemicu Komponen di AppMaster Web Designer sangat penting untuk menambahkan interaktivitas ke aplikasi web Anda. Pemicu ini terkait dengan elemen UI tertentu, mengaktifkan proses bisnis yang telah ditentukan sebelumnya sebagai respons terhadap interaksi pengguna. Setiap komponen dalam aplikasi Anda memiliki serangkaian pemicu yang dapat disesuaikan untuk menciptakan pengalaman pengguna yang dinamis dan menarik:

• Pemicu Umum: Komponen berbagi serangkaian pemicu standar seperti onCreate , onDestroy , onShow , dan onHide , yang merespons perubahan siklus hidup dan visibilitas komponen.
• Pemicu Khusus: Selain pemicu umum, komponen memiliki pemicu unik yang disesuaikan dengan fungsinya. Misalnya, Tombol mungkin memiliki pemicu onClick , Tabel mungkin merespons onUpdateData , dan Tab mungkin memiliki pemicu onTabSelect .

Meskipun beragam, prinsip dasarnya tetap konsisten: suatu peristiwa memicu proses bisnis terkait. Dengan menggunakan Pemicu Komponen secara efektif, Anda dapat membuat aplikasi web interaktif dan responsif yang bereaksi terhadap masukan pengguna secara realtime, meningkatkan pengalaman pengguna secara keseluruhan dan menjadikan aplikasi Anda lebih intuitif dan ramah pengguna.

Mengakses Pemicu

Untuk melihat dan mengonfigurasi pemicu komponen, pilih komponen di kanvas dan navigasikan ke tab 'Alur Kerja' di sidebar kanan. Di sini, Anda akan menemukan daftar pemicu yang tersedia. Mengklik salah satunya memungkinkan Anda melampirkan proses bisnis yang Anda inginkan ke dalamnya. Pemicu dengan logika terlampir disorot dengan warna biru untuk memudahkan identifikasi.

Menciptakan Proses Bisnis

Menyiapkan proses bisnis untuk pemicu komponen mengikuti pendekatan serupa dengan pembuatan proses bisnis backend, seperti yang terlihat di Modul 4. Anda akan menggunakan kanvas umum di mana blok yang mewakili tindakan berbeda ditambahkan. Koneksi antara blok-blok ini menentukan urutan tindakan, memungkinkan Anda membangun alur kerja yang kompleks secara intuitif.

Membangun Alur Kerja Aplikasi

Mari kita buat proses bisnis untuk tombol Hitung. Pertama, putuskan apa yang perlu kita lakukan ketika tombol diklik:

• Cari tahu nilai X dan Y. Dapatkan dari kolom input yang sesuai.
• Luncurkan titik akhir untuk perhitungan dan teruskan parameter X dan Y ke sana.
• Jadikan wadah hasil terlihat.
• Masukkan hasil perhitungan pada kolom Label yang wajib diisi.

Pilih elemen Calc Button kami di kanvas dan klik pada onClick Trigger.

Editor proses bisnis akan terbuka. Di sini kita akan membangun proses bisnis untuk tombol.

Dapatkan Nilai dari Input

Langkah pertama adalah mendapatkan nilai yang dimasukkan oleh pengguna. Untuk itu, AppMaster menyediakan blok Input Float Dapatkan Data, yang menampilkan 'Kunci Elemen' sebagai parameter masukannya dan mengeluarkan 'Nilai', yang pada dasarnya membaca nilai saat ini dari komponen yang ditentukan.

Karena kami memiliki dua kolom terpisah (mewakili nilai X dan Y), maka Anda perlu menggunakan dua blok 'Input Float Dapatkan Data' - satu untuk setiap kolom input.

Untuk mengaturnya:

• Seret dua Blok Input Float Dapatkan Data ke kanvas Anda untuk setiap kolom input.
• Atur Kunci Elemen untuk setiap blok agar sesuai dengan Input Float masing-masing. Ini menghubungkan blok ke elemen UI yang benar, memastikan blok tersebut membaca data yang benar.

Jika sebelumnya Anda mengganti nama elemen di Perancang UI saat membuat antarmuka, menemukan dan memilih komponen yang diperlukan untuk setiap blok menjadi mudah.

☝️ Mengganti nama elemen selama fase desain membantu mengidentifikasinya dengan mudah nanti selama konfigurasi logika bisnis.

Luncurkan Titik Akhir

Setelah pengambilan input pengguna, fase selanjutnya dalam alur kerja aplikasi web Anda adalah memulai Endpoint . Langkah penting ini membuat koneksi antara Frontend (antarmuka pengguna) dan Backend (proses sisi server) aplikasi web Anda, dan perintah untuk penghitungan dikirimkan dari browser ke server.

Titik akhir di AppMaster direpresentasikan sebagai blok proses bisnis yang berbeda dalam aplikasi. Untuk menggunakan titik akhir kami, cukup pilih yang sesuai dari daftar blok proses bisnis dan seret ke kanvas Anda.

Dalam modul 5 , kami mengonfigurasi titik akhir dengan metode GET dan menetapkannya sebagai URL dasar "module4-basic" . Anda akan menemukannya terdaftar sebagai - Permintaan server GET /module4-basic/ dan seret ke kanvas.

Tidak seperti komponen, titik akhir AppMaster tidak memerlukan pengaturan ID-nya, karena sudah ditentukan sebelumnya. Fitur ini menyederhanakan proses pengintegrasian titik akhir ke dalam logika bisnis Anda.

Langkah terakhir adalah memasukkan nilai X dan Y yang Anda peroleh dari langkah sebelumnya ke dalam Endpoint. Hal ini memungkinkan backend menerima dan memproses masukan ini, melakukan perhitungan yang diperlukan.

Keadaan Elemen UI

Langkah berikut dalam alur kerja aplikasi web Anda adalah mengelola visibilitas kontainer - khususnya, menampilkan kontainer yang menampilkan hasil dan menyembunyikan kontainer yang berisi petunjuk.

Berikut cara mencapainya:

1. Mulailah dengan menyeret dua blok Flex Update Properties ke kanvas Anda.
2. Untuk setiap blok Properti Pembaruan Fleksibel , tetapkan parameter Kunci Elemen yang sesuai dengan masing-masing wadah – satu untuk wadah hasil dan yang lainnya untuk wadah petunjuk.
3. Konfigurasikan parameter visibilitas dalam blok ini. Atur parameter Visible ke True untuk kontainer hasil, pastikan parameter tersebut terlihat setelah penghitungan. Sebaliknya, atur parameter ini ke False agar wadah petunjuk menyembunyikannya setelah penghitungan selesai.

Dengan menerapkan langkah-langkah ini, Anda membuat respons dinamis di antarmuka aplikasi Anda. Mengikuti tindakan pengguna, seperti mengklik tombol untuk melakukan perhitungan, aplikasi secara otomatis menyembunyikan wadah petunjuk dan menampilkan wadah hasil.

Hal ini tidak hanya meningkatkan pengalaman pengguna tetapi juga menjaga antarmuka aplikasi Anda tetap bersih dan fokus pada informasi yang relevan di setiap tahap interaksi.

Pratinjau Waktu Nyata

Untuk menilai kemajuan proses bisnis Anda, Anda dapat dengan mudah melihat pratinjau hasil antara:

1. Pertama, klik tombol Simpan & Keluar di dalam editor proses bisnis. Tindakan ini akan menyimpan alur kerja Anda saat ini dan menutup editor proses bisnis.
2. Jalankan pratinjau waktu nyata aplikasi web Anda untuk memeriksa interaksi dengan aplikasi seolah-olah aplikasi tersebut aktif.
3. Uji fungsinya dengan mengklik tombol Hitung .

Jika proses bisnis Anda telah diatur dengan benar, Anda akan melihat respons dinamis: wadah dengan petunjuk akan disembunyikan, dan secara bersamaan, wadah yang menampilkan hasilnya akan terungkap.

Metode pengujian ini menawarkan cara praktis dan cepat untuk memastikan bahwa proses bisnis Anda berfungsi sebagaimana mestinya, memungkinkan Anda melakukan penyesuaian yang diperlukan sebelum menyelesaikan aplikasi Anda.

Rendering Data

Setelah Anda berhasil menguji logika aplikasi Anda, inilah waktunya untuk menyempurnakan logika bisnis Anda lebih lanjut.

Langkah terakhir melibatkan menampilkan hasil perhitungan dalam antarmuka aplikasi web Anda. Kami akan memetakan data keluaran proses bisnis backend kami ke elemen UI yang relevan pada aplikasi web Anda.

Mengingat hasil dari backend dikembalikan dalam urutan yang telah ditentukan, tugas Anda adalah menyelaraskan setiap bagian data (elemen array) dengan elemen Blok Teks yang benar di UI Anda.

Untuk penanganan data, kami akan menggunakan blok berikut:

• Elemen Array : gunakan ini untuk mengakses elemen individual dalam array hasil. Anda memerlukan satu blok untuk setiap indeks, mulai dari 0 hingga 4.
• Ke Teks: karena data Anda dalam format Float, gunakan blok ini untuk mengubah nilai Float ini menjadi format teks yang sesuai untuk ditampilkan.
• Data Pembaruan Blok Teks: blok ini penting untuk mengisi blok teks di UI Anda dengan data teks yang dikonversi.

Blok ini akan mengekstrak data dari larik hasil, mengonversi data ke dalam format teks, lalu memperbarui blok teks terkait di UI Anda.

Berikut cara mengaturnya:

1. Tempatkan balok-balok ini di kanvas.
2. Di blok Elemen Array , masukkan array yang diterima dari titik akhir Anda (mulai dari 0).
3. Atur Indeks untuk menargetkan elemen yang sesuai dalam array.
4. Hubungkan Nilai keluaran Elemen Array ke blok Ke Teks .
5. Tentukan Kunci Elemen di Data Pembaruan Blok Teks ke elemen UI tempat Anda ingin data ditampilkan.
6. Hubungkan blok secara berurutan.

Gandakan urutan blok ini untuk setiap elemen dalam array yang ingin Anda tampilkan. Sesuaikan indeks di setiap blok 'Elemen Array' agar sesuai dengan elemen array yang berbeda.

Pastikan blok-blok ini juga terhubung secara berurutan.

Hasil Akhir

Ini menyelesaikan pembuatan proses bisnis.

Simpan proses bisnis Anda dan periksa hasil akhirnya di pratinjau. Jalankan Pratinjau Aplikasi pada rencana penerapan tempat Anda menerbitkan titik akhir Anda di Modul 5 .

🎉 Selamat atas pencapaian luar biasa ini!

Anda telah berhasil mengembangkan aplikasi web yang berfungsi penuh dengan logika bisnis dan antarmuka pengguna interaktif. Jika semuanya berjalan sebagaimana mestinya, Anda kini siap untuk mengambil langkah terakhir berikutnya yaitu memublikasikan aplikasi Anda dan membagikannya kepada pengguna.

Namun perjalanannya tidak berhenti sampai di sini. Ada banyak peluang untuk menyempurnakan aplikasi Anda lebih jauh! Anda dapat meningkatkan daya tarik visual dan pengalaman pengguna dengan menyesuaikan tampilan elemen UI atau memperluas logika aplikasi web Anda. Misalnya, Anda dapat membuat kolom wajib diisi dan menambahkan tombol untuk mengatur ulang kolom tanpa menghapus setiap input secara manual.