Alur kerja

Dan di sini kita sampai pada momen kunci dalam membuat aplikasi web. Lagi pula, semua yang telah kita lakukan sejauh ini hanyalah membuat gambar. Cukup lucu, mungkin, tapi sangat tidak berguna. Sekarang kita perlu melakukan hal utama. Hidupkan kembali, dan tambahkan reaksi pada tindakan kita.

Setiap komponen memiliki tab Workflow untuk tugas ini. Di dalamnya, Anda dapat membuat proses bisnis dan menentukan kondisi (pemicu) untuk peluncurannya. Mari kita buat proses bisnis seperti itu untuk tombol Calculate .

Pemicu

Membuat proses bisnis sangat mirip dengan apa yang sudah kita lihat di modul 4 saat kita membuat proses bisnis untuk backend. Ada kanvas umum, blok yang ditambahkan di sana, dan koneksi di antara mereka menentukan urutan tindakan. Perbedaan penting adalah bahwa alur kerja front-end memiliki banyak blok berbeda untuk memulai proses bisnis. Ini adalah pemicu yang memulai proses bisnis. Pemicu itu sendiri dapat berbeda untuk setiap komponen (tombol memiliki klik, tabel memiliki pembaruan data di dalamnya, dan daftar memiliki pilihan beberapa opsi), tetapi logika umum kerjanya sama dalam hal apa pun. Suatu peristiwa terjadi, dan peristiwa ini memulai proses bisnis yang sesuai.

Mari kita putuskan rencana umum. Apa yang perlu kita lakukan ketika tombol diklik:

• Tentukan nilai X dan Y. Dapatkan mereka dari bidang input yang sesuai.
• Luncurkan titik akhir untuk penghitungan dan berikan parameter X dan Y ke sana.
• Buat wadah hasil terlihat.
• Letakkan hasil perhitungan di bidang Label yang diperlukan.
  

Blok proses bisnis

Langkah pertama membutuhkan blok InputFloat Get Properties . Ini membaca nilai komponen saat ini, tidak hanya apa yang telah dimasukkan pengguna tetapi juga pengaturan lainnya (misalnya, pengaturan tampilan atau rentang nilai yang diizinkan). Kita perlu mendapatkan Value , tepatnya ini berisi data yang dimasukkan oleh pengguna. Setiap nilai dari bidang inputnya dan kami membutuhkan dua blok untuk ini (untuk X dan untuk Y). Di dalamnya, Anda harus memilih nilai Component ID pada input. Jika Anda tidak lupa untuk menentukan namanya saat membuat, tidak akan sulit untuk menemukan dan memilih komponen yang diperlukan.

Langkah selanjutnya adalah meluncurkan titik akhir. Di sinilah koneksi antara front-end dan backend terjadi, dan perintah untuk perhitungan dikirimkan dari browser ke server. Setiap titik akhir aplikasi kita direpresentasikan sebagai blok terpisah. Anda hanya perlu memilih yang Anda butuhkan dan menghubungkannya. Titik akhir ini diberi metode GET dan URL module4-basic selama modul kelima. Itu akan berada di bawah nama ini dalam daftar blok - Server request GET /module4-basic/

Tidak seperti komponen, titik akhir tidak perlu menyetel Endpoint ID (sudah diatur dengan benar secara default). Anda hanya perlu menerapkan input X dan Y yang diperoleh pada langkah sebelumnya.

Tugas selanjutnya adalah membuat wadah hasil terlihat. Untuk melakukannya, gunakan blok Container Update Properties . Di blok itu sendiri, pilih ID wadah yang diinginkan dan atur Visible = true .

Hal terakhir yang harus dilakukan adalah mendistribusikan 5 elemen hasil dari larik ke komponen aplikasi web yang sesuai. Kita tahu bahwa hasilnya harus selalu datang dalam urutan yang ditentukan secara ketat, jadi kita hanya perlu mengambil elemen secara berurutan dengan indeks yang diinginkan dan menetapkan nilainya ke komponen Label . Untuk melakukan ini, kami menggunakan blok Array Element (dengan indeks dari 0 hingga 4), toString (untuk mengonversi data Float menjadi String ), dan Label Update Properties untuk mengubah teks Label dan menampilkan hasilnya.

Anda mungkin telah memperhatikan bahwa ada dua opsi blok untuk memperbarui properti dari setiap komponen - Update Properties dan Set Properties . Perbedaan di antara keduanya sama seperti antara metode Patch dan Put di Rest API. Yang pertama hanya mengubah properti yang ditentukan secara eksplisit, sedangkan yang kedua menimpa semuanya.

Hasil akhir

Ini melengkapi penciptaan proses bisnis. Anda dapat menyimpan, mempublikasikan, dan memeriksa hasil akhir.

Jika semuanya dilakukan dengan benar, maka hasil akhirnya akan terlihat seperti ini: