wasmbuilder.app
1.0.0
โครงการนี้เป็นเครื่องมือ GUI อย่างง่ายสำหรับการสร้างส่วนประกอบ WebAssembly จากส่วนประกอบ WebAssembly อื่น ๆ
ในการสร้างโครงการนี้จะต้องติดตั้งเครื่องมือต่อไปนี้ในเครื่อง:
ในการติดตั้งการพึ่งพาของโครงการให้เรียกใช้คำสั่งต่อไปนี้:
$ make setup สิ่งนี้จะติดตั้งเครื่องมือบรรทัดคำสั่ง cargo component (หากยังไม่ได้ติดตั้ง)
ในการเรียกใช้แอปพลิเคชันในเครื่องให้เรียกใช้คำสั่งต่อไปนี้:
$ make run โดยค่าเริ่มต้นแอปพลิเคชันจะทำงานบนพอร์ต 3000 เปิดเว็บเบราว์เซอร์และนำทางไปยัง http://localhost:3000 เพื่อดูแอปพลิเคชัน
แอปพลิเคชันเป็นแอปพลิเคชั่นตอบสนองหน้าเดียวที่รวมกับพัสดุ
มันใช้ส่วนประกอบ WebAssembly (นำไปใช้ใน Rust) ซึ่งรับผิดชอบในการแยกวิเคราะห์ไฟล์ส่วนประกอบ WebAssembly และรักษาสถานะกราฟองค์ประกอบ
แอปพลิเคชัน React รักษาสถานะของส่วนต่อประสานผู้ใช้และทำให้มั่นใจได้ว่าสถานะกราฟภายในจะถูกเก็บไว้ในการซิงค์กับการแสดงภาพของกราฟ
อินเทอร์เฟซผู้ใช้ของแอปพลิเคชันได้รับการพัฒนาโดยคนที่ไม่ใช่นักออกแบบ (หรือแม้แต่มีทักษะการพัฒนาส่วนหน้าพื้นฐาน) มันไม่สวย แต่ใช้งานได้™ การร้องขอแบบดึงเพื่อปรับปรุงอินเทอร์เฟซยินดีต้อนรับมากที่สุด!
ปัจจุบันวิธีที่ง่ายที่สุดในการสร้างส่วนประกอบของแต่ละเว็บคือการใช้องค์ประกอบสนิมและสินค้า
ในอนาคตจะได้รับการสนับสนุนภาษาการเขียนโปรแกรมอีกมากมายและเนื่องจากส่วนประกอบ WebAssembly เป็นภาษาที่ไม่เชื่อเรื่องภาษาพวกเขาจะสามารถใช้งานได้โดยแอปพลิเคชันนี้
เริ่มแรกแอปพลิเคชันจะไม่มีส่วนประกอบ WebAssembly ในไลบรารีส่วนประกอบ
คลิกปุ่ม Add Component เพื่อเพิ่มส่วนประกอบใหม่ลงในไลบรารีและเลือกไฟล์ WebAssembly Component ( .wasm ) ที่ต้องการ
อีกทางเลือกหนึ่งคือการเพิ่มส่วนประกอบของ WebAssembly File-Representation File ( .wat ) สามารถเพิ่มลงในไลบรารีได้
หากต้องการดูรายละเอียดเกี่ยวกับส่วนประกอบคลิกที่ส่วนประกอบในไลบรารี
ในการสร้างอินสแตนซ์ส่วนประกอบให้ลากส่วนประกอบจากไลบรารีไปยังพื้นผิวการออกแบบ
สิ่งนี้จะสร้างอินสแตนซ์ของส่วนประกอบที่สามารถเชื่อมต่อกับอินสแตนซ์อื่น ๆ ในกราฟ
แต่ละอินสแตนซ์ของส่วนประกอบมีชุดของการนำเข้าและการส่งออก การส่งออกและนำเข้าสามารถเชื่อมต่อได้โดยการลากการเชื่อมต่อระหว่างวงกลมและสี่เหลี่ยมที่เป็นตัวแทนของพวกเขา
ตัวอย่างตัวอย่าง:
ในตัวอย่างนี้อินสแตนซ์ของส่วนประกอบ middleware จะนำเข้าอินสแตนซ์ชื่อ backend และส่งออกห้าประเภทและฟังก์ชั่นที่ชื่อว่า execute
วงกลม I ที่มุมขวาบนแสดงถึงอินสแตนซ์ของตัวเองและสามารถใช้เชื่อมต่อกับการนำเข้าในอินสแตนซ์อื่นที่ใช้การนำเข้าอินสแตนซ์ที่ตรงกัน
ในที่สุดช่องทำเครื่องหมายในมุมซ้ายบนสามารถใช้เพื่อส่งออกอินสแตนซ์ (ดูด้านล่าง)
ในการเชื่อมต่อสองอินสแตนซ์ให้ลากการเชื่อมต่อจากวงกลมของการส่งออกในอินสแตนซ์หนึ่งไปยังสี่เหลี่ยมจัตุรัสของการนำเข้าที่ตรงกันในอินสแตนซ์อื่น
ชื่อไม่จำเป็นต้องจับคู่ แต่ประเภทของรายการจะต้องเข้ากันได้กับอีกประเภทหนึ่ง
การเชื่อมต่ออินสแตนซ์เป็นรูปแบบความสัมพันธ์การพึ่งพาระหว่างสองอินสแตนซ์: อินสแตนซ์การส่งออกรับประกันว่าจะได้รับการสร้างอินสแตนซ์ก่อนอินสแตนซ์การนำเข้า
การเชื่อมต่อตัวอย่าง:
ในตัวอย่างนี้อินสแตนซ์ของส่วนประกอบ service เชื่อมต่อกับการนำเข้า backend ของอินสแตนซ์ขององค์ประกอบ middleware
เมื่อส่วนประกอบถูกสร้างขึ้นสำหรับกราฟนี้อินสแตนซ์ service จะถูกสร้างอินสแตนซ์ก่อนอินสแตนซ์ middleware ซึ่งจะได้รับอินสแตนซ์ service สำหรับอาร์กิวเมนต์แบ็ backend เอนด์อินสแตนซ์
ขณะนี้อินสแตนซ์เดียวในกราฟอาจถูกกำหนดให้เป็นอินสแตนซ์ในการส่งออก
การส่งออกทั้งหมดในอินสแตนซ์ที่กำหนดนั้นจะถูกส่งออกโดยตรงจากส่วนประกอบผลลัพธ์
หากต้องการกำหนดอินสแตนซ์ในการส่งออกให้คลิกช่องทำเครื่องหมายที่มุมซ้ายบนของอินสแตนซ์
หากไม่มีการตรวจสอบอินสแตนซ์ส่วนประกอบผลลัพธ์จะไม่มีการส่งออกใด ๆ
ในการดาวน์โหลดส่วนประกอบที่แสดงถึงสถานะปัจจุบันของกราฟให้คลิกปุ่ม Download Component
ให้ชื่อส่วนประกอบและคลิกปุ่ม Download เบ .wasm ว์เซอร์ส่วนประกอบใหม่จะถูกดาวน์โหลดโดยเบราว์เซอร์ของคุณ
หากช่องทำเครื่องหมาย define component dependencies ยังคงตรวจสอบส่วนประกอบใด ๆ ที่อ้างอิงในกราฟจะถูกฝังอยู่ในส่วนประกอบผลลัพธ์ ยกเลิกการเลือกช่องทำเครื่องหมายเพื่อนำเข้าส่วนประกอบแทน (หมายเหตุ: WasMtime ไม่สนับสนุนการนำเข้าส่วนประกอบในปัจจุบัน)
โดยค่าเริ่มต้นส่วนประกอบผลลัพธ์จะถูกเพิ่มลงในไลบรารีส่วนประกอบของแอปพลิเคชันและสามารถลากจากไลบรารีไปยังพื้นผิวการออกแบบเพื่อสร้างอินสแตนซ์ใหม่
