เวิร์กโฟลว์

และแล้วเราก็มาถึงช่วงเวลาสำคัญของการสร้างเว็บแอปพลิเคชัน ท้ายที่สุดแล้ว ทุกสิ่งที่เราทำมาจนถึงตอนนี้เป็นเพียงการสร้างภาพ ค่อนข้างน่ารัก แต่ค่อนข้างไร้ประโยชน์ ตอนนี้เราต้องทำสิ่งสำคัญ ฟื้นฟูและเพิ่มปฏิกิริยาต่อการกระทำของเรา

แต่ละส่วนประกอบมีแท็บ Workflow สำหรับงานนี้ คุณสามารถสร้างกระบวนการทางธุรกิจและกำหนดเงื่อนไข (ทริกเกอร์) สำหรับการเปิดตัวได้ มาสร้างกระบวนการทางธุรกิจสำหรับปุ่ม Calculate กันเถอะ

ทริกเกอร์

การสร้างกระบวนการทางธุรกิจนั้นคล้ายกับสิ่งที่เราเห็นในโมดูลที่ 4 เมื่อเราสร้างกระบวนการทางธุรกิจสำหรับแบ็กเอนด์ มีผืนผ้าใบทั่วไป บล็อกที่เพิ่มเข้ามา และการเชื่อมต่อระหว่างกันจะเป็นตัวกำหนดลำดับของการกระทำ ความแตกต่างที่สำคัญคือเวิร์กโฟลว์ส่วนหน้ามีบล็อกที่แตกต่างกันมากมายสำหรับการเริ่มต้นกระบวนการทางธุรกิจ สิ่งเหล่านี้คือตัวกระตุ้นที่เริ่มต้นกระบวนการทางธุรกิจ ตัวทริกเกอร์อาจแตกต่างกันสำหรับแต่ละองค์ประกอบ (ปุ่มมีการคลิก ตารางมีการอัปเดตข้อมูล และรายการมีตัวเลือกของตัวเลือกบางอย่าง) แต่ตรรกะทั่วไปของการทำงานจะเหมือนกันในทุกกรณี เหตุการณ์เกิดขึ้น และเหตุการณ์นี้เริ่มต้นกระบวนการทางธุรกิจที่สอดคล้องกัน

ตัดสินใจเกี่ยวกับแผนทั่วไป เราต้องทำอะไรเมื่อคลิกปุ่ม:

• ค้นหาค่า X และ Y รับได้จากช่องใส่ข้อมูลที่เกี่ยวข้อง
• เปิดใช้งานจุดสิ้นสุดสำหรับการคำนวณและส่งพารามิเตอร์ X และ Y ไปให้
• ทำให้คอนเทนเนอร์ผลลัพธ์มองเห็นได้
• ใส่ผลการคำนวณในช่อง Label ที่จำเป็น
  

บล็อกกระบวนการทางธุรกิจ

ขั้นตอนแรกต้องใช้ InputFloat Get Properties อ่านค่าปัจจุบันของส่วนประกอบ ไม่เพียงแต่ค่าที่ผู้ใช้ป้อนเท่านั้น แต่ยังรวมถึงการตั้งค่าอื่นๆ ด้วย (เช่น การตั้งค่ารูปลักษณ์หรือช่วงค่าที่อนุญาต) เราต้องได้รับ Value ตรงนี้มีข้อมูลที่ป้อนโดยผู้ใช้ แต่ละค่าจากฟิลด์อินพุต และเราต้องการสองช่วงตึกสำหรับค่านี้ (สำหรับ X และสำหรับ Y) คุณต้องเลือกค่า Component ID ที่อินพุต หากคุณไม่ลืมที่จะระบุชื่อเมื่อสร้าง การค้นหาและเลือกส่วนประกอบที่ต้องการนั้นไม่ใช่เรื่องยาก

ขั้นตอนต่อไปคือการเปิดตัวจุดสิ้นสุด นี่คือจุดที่การเชื่อมต่อระหว่างส่วนหน้าและส่วนหลังเกิดขึ้น และคำสั่งสำหรับการคำนวณจะถูกส่งจากเบราว์เซอร์ไปยังเซิร์ฟเวอร์ แต่ละจุดสิ้นสุดของแอปพลิเคชันของเราจะแสดงเป็นบล็อกแยกต่างหาก คุณเพียงแค่ต้องเลือกสิ่งที่คุณต้องการและเชื่อมต่อ ตำแหน่งข้อมูลนี้ได้รับการกำหนด GET และ URL module4-basic ระหว่างโมดูลที่ห้า จะอยู่ภายใต้ชื่อนี้ในรายการบล็อก - Server request GET /module4-basic/

อุปกรณ์ปลายทางไม่จำเป็นต้องตั้งค่า Endpoint ID ซึ่งแตกต่างจากคอมโพเนนต์ (ตั้งค่าไว้อย่างถูกต้องตามค่าเริ่มต้น) จำเป็นต้องใช้กับอินพุต X และ Y ที่ได้รับในขั้นตอนก่อนหน้าเท่านั้น

งานต่อไปคือการทำให้คอนเทนเนอร์ผลลัพธ์มองเห็นได้ ในการดำเนินการนี้ ให้ใช้บล็อก Container Update Properties ในบล็อกเอง ให้เลือก ID ของคอนเทนเนอร์ที่ต้องการและตั้งค่า Visible = true

สิ่งสุดท้ายที่ต้องทำคือกระจายองค์ประกอบผลลัพธ์ 5 รายการจากอาร์เรย์ไปยังส่วนประกอบที่สอดคล้องกันของเว็บแอปพลิเคชัน เราทราบดีว่าผลลัพธ์ควรมาตามลำดับที่กำหนดไว้อย่างเคร่งครัด ดังนั้นเราจำเป็นต้องเลือกองค์ประกอบที่มีดัชนีที่ต้องการตามลำดับ และกำหนดค่าให้กับองค์ประกอบ Label ในการทำเช่นนี้ เราใช้บล็อก Array Element (ที่มีดัชนีตั้งแต่ 0 ถึง 4), toString (เพื่อแปลงข้อมูล Float เป็น String ) และ Label Update Properties เพื่อเปลี่ยนข้อความ Label และแสดงผลลัพธ์

คุณอาจสังเกตเห็นว่ามีตัวเลือกการบล็อกสองตัวเลือกสำหรับการอัปเดตคุณสมบัติของคอมโพเนนต์ใดๆ - Update Properties และ Set Properties ความแตกต่างระหว่างวิธีเหล่านี้เหมือนกับระหว่างวิธี Patch และ Put ใน Rest API ตัวแรกเปลี่ยนเฉพาะคุณสมบัติที่ระบุอย่างชัดเจน ในขณะที่ตัวที่สองเขียนทับคุณสมบัติทั้งหมด

ผลลัพธ์สุดท้าย

เสร็จสิ้นการสร้างกระบวนการทางธุรกิจ คุณสามารถบันทึก เผยแพร่ และตรวจสอบผลลัพธ์สุดท้ายได้

หากทำทุกอย่างถูกต้องผลลัพธ์สุดท้ายควรมีลักษณะดังนี้: