สิ่งที่ต้องเตรียม
1. Volt MX Foundry server
2. Volt MX Iris
3. Relational DB (MySQL is used in this paper)
ตั้งค่าฐานข้อมูล
การตั้งค่าฐานข้อมูล ในตัวอย่างนี้ ฉันจะใช้ไคลเอนต์บรรทัดคำสั่งในการเข้าถึงฐานข้อมูล คุณยินดีเป็นอย่างยิ่งที่จะใช้ GUI สำหรับการดูแลฐานข้อมูลของคุณ ฉันจะใช้บรรทัดคำสั่งเพื่อให้ผู้ใช้ทั้ง Windows และ UNIX (Linux) สามารถติดตามเอกสารนี้ได้
1. เข้าสู่ระบบเซิร์ฟเวอร์
mysql -u <ผู้ใช้ db> -p
<ป้อนรหัสผ่าน db>
2. สร้างฐานข้อมูล “testdb”
3. สร้างตาราง “ผู้ใช้” ด้วยข้อความสองคอลัมน์: “id” และ “รหัสผ่าน”
สร้างผู้ใช้ตาราง (ข้อความรหัส, ข้อความรหัสผ่าน);
4. เติมตารางด้วยผู้ใช้สองสามคนและรหัสผ่านของพวกเขา
แทรกลงในค่าผู้ใช้ (‘หนึ่ง’, ‘รหัสผ่าน1’);
แทรกลงในค่าผู้ใช้ (‘สอง’, ‘รหัสผ่าน2’);
แทรกลงในค่าผู้ใช้ (‘สาม’, ‘รหัสผ่าน3’);
5. ตรวจสอบเพื่อให้แน่ใจว่าตารางดูถูกต้อง เลือก * จากผู้ใช้;
การติดตั้งโรงหล่อ
ตอนนี้เราได้สร้างฐานข้อมูลและเติมข้อมูลแล้ว มากำหนดค่าเซิร์ฟเวอร์ Foundry ในพื้นที่เพื่อเข้าถึงฐานข้อมูลนี้
1. เข้าสู่ระบบเซิร์ฟเวอร์ด้วยผู้ดูแลระบบหรือผู้ใช้ที่ได้รับอนุญาตให้สร้างแอปพลิเคชันบนเซิร์ฟเวอร์ Foundry
2. สร้างใหม่หรือใช้แอปพลิเคชันที่มีอยู่เพื่อเข้าถึงฐานข้อมูลเชิงสัมพันธ์
3. เลือกหัวข้อ “บูรณาการ” และบริการ “กำหนดค่าใหม่” ในแอปพลิเคชันใหม่ของเรา
4. ป้อนข้อมูลนี้ลงในข้อกำหนดบริการใหม่:
ก. ชื่อ: <ชื่อบริการ>
ข. ประเภทบริการ: ฐานข้อมูลเชิงสัมพันธ์
ค. ฐานข้อมูล: <ประเภทฐานข้อมูลของคุณ>
ง. URL การเชื่อมต่อฐานข้อมูล: <URL การเชื่อมต่อฐานข้อมูลรวมถึงฐานข้อมูล>
จ. ID ผู้ใช้: <ผู้ใช้ฐานข้อมูล>
ฉ. รหัสผ่าน: <รหัสผ่านฐานข้อมูล>
ช. กรัม คลิกที่ “ทดสอบการเชื่อมต่อ”
5. หากคุณได้รับข้อความ “การเชื่อมต่อสำเร็จ” บนหน้าจอ ให้คลิก “บันทึก & เพิ่ม การดำเนินการ”
6. เลือกเพื่อรับข้อมูลจากฐานข้อมูลของเรา “testdb” และตาราง “ผู้ใช้” และเพิ่มการดำเนินการ
7. เลือกการดำเนินการใหม่ที่เราเพิ่งสร้างขึ้นจากบริการ
8. เลื่อนลงไปที่ด้านล่างของหน้าจอและเลือก “บันทึกและดึงการตอบสนอง” คุณจะเห็นว่าผลลัพธ์ของเราได้รับการกำหนดค่าสำหรับเราแล้วตามคำจำกัดความของฐานข้อมูล
9. ไปข้างหน้าและเผยแพร่แอปพลิเคชันนี้ก่อนที่เราจะดำเนินการต่อเพื่อสร้างแอปพลิเคชัน Volt MX Iris (Iris) เพื่อใช้บริการนี้
การสร้างแอปพลิเคชันและการรวม (Low Code)
โปรดเปิดตัวแก้ไข Volt MX Iris เพื่อสร้างแอปพลิเคชันผู้ใช้ปลายทางของคุณ
1. สร้าง “แอปพลิเคชันดั้งเดิม” ใหม่
2. ตรวจสอบให้แน่ใจว่ามีการใช้ “สถาปัตยกรรมอ้างอิง” ซึ่งเป็นค่าเริ่มต้นสำหรับแอปพลิเคชัน
3. จากนั้นคลิกที่ “สร้าง”
4. มุมมองเริ่มต้นคือมุมมอง “สตอรี่บอร์ด” เลือกใช้มุมมอง “ออกแบบ”
5. สำหรับวัตถุประสงค์ของบทความนี้ ฉันจะสร้างแอปพลิเคชันนี้เป็นแอปพลิเคชัน “เว็บที่ตอบสนอง/เดสก์ท็อป” เพื่อที่ฉันจะได้ถ่ายภาพหน้าจอของแอปพลิเคชันในระหว่างการพัฒนา การดำเนินการนี้จะเหมือนกับแอปพลิเคชัน “อุปกรณ์เคลื่อนที่” ทุกประการ แต่คุณจะต้องสร้างแบบฟอร์มในส่วน “อุปกรณ์เคลื่อนที่” แทน คุณยินดีเป็นอย่างยิ่งที่จะเพิ่มฟอร์มลงในทั้งมือถือและเว็บ/เดสก์ท็อปที่ตอบสนอง และสร้างการแปลทั้งสองแบบพร้อมกัน
6. ขั้นแรกให้เพิ่มคอนเทนเนอร์เลื่อนแบบยืดหยุ่นลงในแบบฟอร์ม แนวทางปฏิบัติที่ดีในแอปพลิเคชัน Volt MX ในการเพิ่มวิดเจ็ตของคุณไปยังคอนเทนเนอร์แบบยืดหยุ่น แทนที่จะเพิ่มลงในแบบฟอร์มโดยตรง คุณสามารถคลิกขวาและเลือกให้พอดีกับคอนเทนเนอร์กับพาเรนต์เพื่อให้สามารถเติมช่องว่างนั้นได้
7. จากนั้นเพิ่มวิดเจ็ตเซ็กเมนต์ไปยังคอนเทนเนอร์การเลื่อนแบบยืดหยุ่นตามด้วยป้ายกำกับสำหรับแต่ละเซ็กเมนต์ที่จะแสดง
8. เปลี่ยนชื่อวิดเจ็ตเป็นชื่อที่มีความหมายมากขึ้นเพื่อใช้อ้างอิงในการอ้างอิงของวิดเจ็ตเหล่านี้ (เมื่อป้อนชื่อใหม่ จะเปลี่ยนในบานหน้าต่างด้านซ้ายด้วย)
9. ตรวจสอบการเข้าถึงเซิร์ฟเวอร์ Foundry จาก Iris IDE ของเรา
ก. ในการกำหนดค่าตามความชอบของ Iris ตรวจสอบให้แน่ใจว่าเซิร์ฟเวอร์ Foundry ได้รับการปรับแต่ง (นี่คือเซิร์ฟเวอร์ในพื้นที่ในกรณีนี้)
10. ณ จุดนี้ การออกแบบพื้นฐานได้ถูกสร้างขึ้น ตอนนี้ เชื่อมต่อกับเซิร์ฟเวอร์ Foundry เพื่อเติมและแมปข้อมูล ก่อนอื่นให้เลือก “ข้อมูลและบริการ” และ “ใช้ที่มีอยู่” เพราะเราได้สร้างแอปพลิเคชันบนเซิร์ฟเวอร์ Foundry แล้ว:
11. เลือกตัวเลือก “DbAccessSvc” ที่สร้างไว้ก่อนหน้านี้ และ “เพิ่ม”
12. เป้าหมายสำหรับแอปพลิเคชันนี้คือการเติมข้อมูลใหม่เกี่ยวกับการแสดงผลแอปพลิเคชัน เมื่อต้องการทำสิ่งนี้ ให้สร้างการกระทำบน “init” ของแบบฟอร์ม (Form1 ในกรณีของเรา)
13. เพิ่มเพื่อเรียกใช้บริการ จากนั้นเมื่อเรียกใช้ฟังก์ชันนั้น ให้แมปผลลัพธ์กับตัวแปรในแบบฟอร์ม
ก. เรียกใช้บริการและเลือก “DbAccessSvc$testdb_users_get”
ข. เลือกเพื่อแมปผลลัพธ์จากการเรียกใช้บริการกับ “ข้อความ” ของป้ายกำกับในคอลเล็กชัน “rowData” ของเซ็กเมนต์บนแอปพลิเคชันและบันทึกการกำหนดค่า
14. ตรวจสอบให้แน่ใจว่าคุณกำลังสร้างผลลัพธ์ที่ถูกต้อง เลือก บิลด์ > การตั้งค่าการแสดงตัวอย่างแบบสด และตรวจสอบให้แน่ใจว่าคุณได้เลือกบิลด์ที่เหมาะสม เนื่องจากฉันได้สร้างสิ่งนี้สำหรับ Responsive Web/Desktop ฉันจึงเลือกสิ่งเดียวกัน
15. ดูผลลัพธ์ของคุณในการแสดงตัวอย่าง
การสร้างแอปพลิเคชันและการรวม (ด้วยรหัส)
โปรดเปิดตัวแก้ไข Volt MX Iris เพื่อสร้างแอปพลิเคชันผู้ใช้ปลายทางของคุณ
1. สร้าง “แอปพลิเคชันดั้งเดิม” ใหม่
2. ตรวจสอบให้แน่ใจว่ามีการใช้ “สถาปัตยกรรมอ้างอิง” ซึ่งเป็นค่าเริ่มต้นสำหรับแอปพลิเคชัน
3. จากนั้นคลิกที่ “สร้าง”
4. มุมมองเริ่มต้นคือมุมมอง “สตอรี่บอร์ด” เลือกใช้มุมมอง “ออกแบบ”
5. สำหรับวัตถุประสงค์ของบทความนี้ ฉันจะสร้างแอปพลิเคชันนี้เป็นแอปพลิเคชัน “เว็บที่ตอบสนอง/เดสก์ท็อป” เพื่อที่ฉันจะได้ถ่ายภาพหน้าจอของแอปพลิเคชันในระหว่างการพัฒนา. การดำเนินการนี้จะเหมือนกับแอปพลิเคชัน “อุปกรณ์เคลื่อนที่” ทุกประการ แต่คุณจะต้องสร้างแบบฟอร์มในส่วน “อุปกรณ์เคลื่อนที่” แทน คุณยินดีเป็นอย่างยิ่งที่จะเพิ่มฟอร์มลงในทั้งมือถือและเว็บ/เดสก์ท็อปที่ตอบสนอง และสร้างการแปลทั้งสองแบบพร้อมกัน
6. ขั้นแรกให้เพิ่มคอนเทนเนอร์เลื่อนแบบยืดหยุ่นลงในแบบฟอร์ม แนวทางปฏิบัติที่ดีในแอปพลิเคชัน Volt MX ในการเพิ่มวิดเจ็ตของคุณไปยังคอนเทนเนอร์แบบยืดหยุ่น แทนที่จะเพิ่มลงในแบบฟอร์มโดยตรง คุณสามารถคลิกขวาและเลือกให้พอดีกับคอนเทนเนอร์กับพาเรนต์เพื่อให้สามารถเติมช่องว่างนั้นได้
7. จากนั้นเพิ่มวิดเจ็ตเซ็กเมนต์ไปยังคอนเทนเนอร์การเลื่อนแบบยืดหยุ่นตามด้วยป้ายกำกับสำหรับแต่ละเซ็กเมนต์ที่จะแสดง
8. เปลี่ยนชื่อวิดเจ็ตเป็นชื่อที่มีความหมายมากขึ้นเพื่อใช้อ้างอิงในการอ้างอิงของวิดเจ็ตเหล่านี้ (เมื่อป้อนชื่อใหม่ จะเปลี่ยนในบานหน้าต่างด้านซ้ายด้วย)
9. ณ จุดนี้ เราต้องเริ่มเพิ่มโค้ดเล็กน้อยเพื่อให้แอปพลิเคชันของเราสามารถดึงข้อมูลจาก Foundry และเติมป้ายกำกับในส่วนของเรา ในการดำเนินการนี้ เราจำเป็นต้องแก้ไขคอนโทรลเลอร์สำหรับแบบฟอร์มนี้โดยเฉพาะ คลิกขวาที่แบบฟอร์มและเลือก “นำทางไปยังตัวควบคุม”
16. เริ่มต้นด้วยการสร้างโครงกระดูกสำหรับโค้ดของเรา
ก. เราต้องการสิ่งที่จะทำงานโดยอัตโนมัติเมื่อเข้าถึงแบบฟอร์ม
ข. เราจำเป็นต้องติดต่อเซิร์ฟเวอร์ Foundry และขอข้อมูลของเรา
ค. เราจำเป็นต้องรวบรวมและแสดงข้อมูลของเราต่อผู้ใช้ปลายทาง
ในคอนโทรลเลอร์ เรามี JSON ที่เราสามารถแทรก avascript เข้าไปโดยการสร้างฟังก์ชันที่ไม่ระบุชื่อเป็นคำจำกัดความของตัวแปร โปรดจำไว้ว่า ในแต่ละคู่ “Name : value” ใน JSON คุณต้องใส่ “,” คั่นระหว่างตัวคั่น
มีเหตุการณ์ FlexForm บางอย่างที่ถูกเรียกใช้เมื่อใช้แอปพลิเคชัน Volt MX หนึ่งในนั้นคือ “onNavigate” เหตุการณ์นี้ถูกเรียกเมื่อผู้ใช้นำทางไปยังแบบฟอร์มเฉพาะ นี่คือที่ที่เราจะเริ่มต้นการดำเนินการตามขั้นตอนที่ระบุไว้ข้างต้น
ฉันจะใส่คำสั่ง “alert(“”)” ลงในแอปพลิเคชันเพื่อให้มั่นใจว่าฉันสามารถปฏิบัติตามขั้นตอนของแอปพลิเคชันในการทดสอบได้
17. ณ จุดนี้ เราจะต้องไปที่เซิร์ฟเวอร์ Foundry อีกครั้งและรวบรวมข้อมูลบางอย่าง
ก. ไปที่บริการและรับโค้ดตัวอย่างชิ้นแรก (จากสองรายการ) แล้วคัดลอกและวางสิ่งนี้ลงในฟังก์ชัน reachOutToFoundry
ข. โค้ดตัวอย่างส่วนที่สองมาจากการทำงานของบริการ ตัดและวางโค้ดนี้ลงในฟังก์ชัน eachOutToFoundry ฉันจะเปลี่ยน “operationSuccess” และ “operationFailure” เป็น “displayResultsOnSuccess” และ “displayErrorOnFailure” ตามลำดับในรหัสของฉัน
18. ตอนนี้ ฉันจะใส่ฟังก์ชัน “displayResultsOnSuccess” นี่คือขั้นตอนของการสร้างสิ่งนี้
ก. ตรวจสอบเพื่อดูว่าการตอบกลับไม่ใช่ “null”
ฉัน. ตอบกลับ !== null
ข. ตรวจสอบเพื่อดูว่าฉันมีสถานะเป็น “0”
ฉัน. response.opstatus === 0
ค. ตรวจสอบเพื่อดูว่าคอลเลกชัน “ผู้ใช้” ไม่ใช่ “โมฆะ”
ฉัน. response.users !== null
ง. ตรวจสอบเพื่อดูว่ามีข้อมูลที่ส่งคืนในการตอบกลับหรือไม่
ฉัน. response.users.length > 0
จ. ตั้งค่า “id” ที่แมปกับป้ายกำกับของฉัน “lblDbResult”
ฉัน. this.view.segDbResults.widgetDataMap = {lblDbResult : “id”};
ฉ. ตั้งค่าคอลเลกชันทั้งหมดลงในวิดเจ็ตเซ็กเมนต์ของฉัน
ฉัน. this.view.segDbResults.setData (response.users);
19. สิ่งสุดท้ายที่เราต้องทำคือเข้าถึงเซิร์ฟเวอร์ Foundry จาก Iris IDE ของเรา
ก. ในการตั้งค่าของ Iris ตรวจสอบให้แน่ใจว่ามีการเติมเซิร์ฟเวอร์ Foundry (นี่คือเซิร์ฟเวอร์ภายในในกรณีนี้)
ข. เข้าสู่ระบบและเลือก “ใช้ที่มีอยู่” เพื่อค้นหาแอปการรวมของเราที่เราสร้างขึ้นบนเซิร์ฟเวอร์ Foundry และเพิ่มไปยังโครงการ Iris ของเรา
20. ตอนนี้ตรวจสอบให้แน่ใจว่าคุณกำลังสร้างผลลัพธ์ที่ถูกต้อง เลือก บิลด์ > การตั้งค่าการแสดงตัวอย่างแบบสด และตรวจสอบให้แน่ใจว่าคุณได้เลือกบิลด์ที่เหมาะสม เนื่องจากฉันได้สร้างสิ่งนี้สำหรับ Responsive Web/Desktop ฉันจึงเลือกสิ่งเดียวกัน
21. เมื่อฉันคลิก “บันทึกและเรียกใช้” ตัวอย่างจะถูกสร้างขึ้นและเรียกใช้ และเราจะนำเสนอผลลัพธ์ของเรา
เมื่อเข้ารหัสการแสดงผล “หยุดชั่วคราว” และแสดงคำสั่ง alert(“”)” ของเราเมื่อเราดูจนจบ
