AlphaWeft
เวิร์กโฟลว์

สร้าง dApp จากโฟลเดอร์เปล่าสู่หน้าจอที่ผ่านการทดสอบ

03
สร้างโครงสร้างโปรเจกต์

เริ่มต้นจากโฟลเดอร์โปรเจกต์ที่ว่างเปล่า

การสร้าง dApp เริ่มต้นจากโฟลเดอร์ที่มีเพียงไฟล์ ABI ของคอนแทรกต์ของคุณ เปิดโฟลเดอร์นี้เป็นโฟลเดอร์ทำงานของแชทใหม่ เลือก Ask first และอธิบายหน้าเว็บที่คุณต้องการ: ปุ่มเชื่อมต่อวอลเล็ต ยอดเงิน และบรรทัดแสดงสถานะธุรกรรม ตัวเอเจนต์จะสแกนโฟลเดอร์ เสนอการเปลี่ยนแปลงเป็นไฟล์แบบ diff และสร้างหน้าเว็บเฉพาะเมื่อคุณยอมรับการเปลี่ยนแปลงแต่ละครั้ง ตัดสินใจก่อนเริ่มว่าโปรเจกต์จะทำงานบนเครือข่ายใด เชนท้องถิ่นบนคอมพิวเตอร์ของคุณเหมาะสำหรับการทดลองครั้งแรกเพราะเหรียญบนเชนนั้นไม่มีมูลค่า และเครือข่ายทดสอบสาธารณะคือขั้นตอนถัดไปเมื่อหน้าเว็บทำงานได้แล้ว ใช้บัญชีชั่วคราวบนเครือข่ายใดก็ได้ อย่าใช้บัญชีที่มีเงินจริง และเก็บคีย์ส่วนตัวและ seed phrase ไว้นอกโฟลเดอร์ แชท และที่เก็บข้อมูล ผลลัพธ์คือหน้าเว็บขนาดเล็กที่ผ่านการทดสอบและไฟล์ README ที่ผู้อื่นสามารถทำตามได้

01

เปิดโฟลเดอร์

เลือกโฟลเดอร์โปรเจกต์เป็นโฟลเดอร์ทำงานของแชทใหม่และเลือก Ask first เพื่อให้การเปลี่ยนแปลงที่เขียนไฟล์ทุกการเปลี่ยนแปลงรอการตัดสินใจของคุณ วางไฟล์ ABI ในโฟลเดอร์นั้นก่อนเริ่ม

02

อธิบายหน้าจอ

เขียนข้อมูลว่าหน้าเว็บแสดงอะไรและต้องจัดการสถานะธุรกรรมใดด้วยประโยคภาษาธรรมดา ระบุฟังก์ชันคอนแทรกต์ที่เรียกและเครือข่ายที่ติดต่อ เช่น เชนท้องถิ่นของคุณ

03

ตรวจสอบแต่ละ diff

อ่านการเปลี่ยนแปลงไฟล์ที่เสนอในแชท จากนั้นยอมรับหรือปฏิเสธด้วยหมายเหตุสั้นๆ ขยายการ์ดเมื่อต้องการดู diff เต็ม และปฏิเสธสิ่งที่คุณไม่สามารถอธิบายได้ในประโยคเดียว

04

รันและตรวจสอบ

ให้ Shell รันคำสั่ง build และคำสั่ง test ของคุณ และอ่าน exit code บนแต่ละการ์ด เปิดหน้าเว็บกับเชนท้องถิ่นและเปรียบเทียบสิ่งที่แสดงกับสิ่งที่คาดไว้ แก้ไขสิ่งที่ล้มเหลวก่อนเพิ่มฟีเจอร์ถัดไป

ไฟล์ ABI เล็กๆ เพื่อเริ่มต้น

balance-abi.json
[
 {
  "type": "function",
  "name": "balanceOf",
  "stateMutability": "view",
  "inputs": [{ "type": "address", "name": "account" }],
  "outputs": [{ "type": "uint256" }]
 }
]

ส่วน JSON นี้อธิบายฟังก์ชันแบบอ่านอย่างเดียว balanceOf ซึ่งเป็นฟังก์ชันอ่านยอดเงินที่โทเค็น ERC-20 ใช้ มันรับ address ที่ชื่อ account และส่งคืน uint256 หน้าเว็บใช้ ABI แบบนี้เพื่อเรียกคอนแทรกต์ และไฟล์นี้ไม่มีคีย์หรือข้อมูลลับใดๆ บันทึกเป็น balance-abi.json ในโฟลเดอร์โปรเจกต์ แล้วแทนที่ด้วย ABI เต็มของคอนแทรกต์ของคุณเมื่อหน้าเว็บทำงานได้แล้ว เนื่องจากคอนแทรกต์จริงมักมีฟังก์ชันมากกว่านี้

คำแนะนำสำหรับการสร้าง dApp ครั้งแรก

สแกนโฟลเดอร์และอ่าน ABI

วิธีที่ดีในการเริ่มต้นเรียนรู้ web3 คือการอ่านไฟล์ ABI เล็กๆ ไฟล์เดียวก่อนเขียนอะไร ถามเอเจนต์ให้เปิด balance-abi.json read_file แสดงไฟล์ list_dir แสดงสิ่งที่เหลืออยู่ในโฟลเดอร์ และ grep ยืนยันชื่อฟังก์ชันที่ถูกต้อง จากนั้นเอเจนต์จะอธิบายในแชทว่า balanceOf เป็น view function: มันอ่านข้อมูลและส่งธุรกรรมไม่มีการเปลี่ยนแปลง ดังนั้นการเรียกมันจะไม่เปลี่ยนแปลงอะไรบนเชน ยังไม่มีข้อมูลถูกเขียน นอกจากนี้ยังระบุสิ่งที่หน้าเว็บต้องการ ได้แก่ การเชื่อมต่อกับ node ที่อยู่ของคอนแทรกต์ที่ติดตั้งแล้ว และบัญชีเพื่อตรวจสอบ ตรวจสอบแต่ละข้อความกับ JSON บนการ์ด เพราะโมเดลอาจอ่านผิดประเภทหรือตั้งชื่อฟังก์ชันที่ไม่มีในไฟล์ และขอการแก้ไขก่อนดำเนินการต่อ

เชื่อมต่อหน้าเว็บกับเชนท้องถิ่น

ขอหน้าเว็บที่อ่านยอดเงินของบัญชีทดสอบชั่วคราว write_file สร้าง app.js ด้วยการเรียกเชนท้องถิ่นผ่าน JSON-RPC และ edit_file เพิ่มบรรทัดสคริปต์ใน index.html คุณต้องมีเครื่องมือ cross chain สำหรับ dApp เฉพาะเมื่อมันติดต่อหลายเชน โปรเจกต์แรกบนเชนท้องถิ่นหนึ่งเชนไม่ต้องการสิ่งเหล่านี้ ดังนั้นอย่าใส่ไว้ในโหมด Ask first การเปลี่ยนแปลงทั้งสองรอเป็น diffs อ่านและยอมรับ Shell จะรันคำสั่ง build ของคุณ และการ์ดแสดง exit code จริง เปิดหน้าเว็บ เปรียบเทียบตัวเลขที่แสดงกับตัวเลขที่เชนท้องถิ่นรายงานสำหรับบัญชีเดียวกัน และถามเอเจนต์ให้แก้ไขหน้าเว็บหากทั้งสองต่างกัน เก็บที่อยู่เชนไว้ในที่เดียว เพื่อให้การเปลี่ยนเครือข่ายในภายหลังหมายถึงการแก้ไขบรรทัดเดียว

จัดการสถานะธุรกรรม

การเปลี่ยนจาก web2 เป็น web3 สำหรับนักพัฒนาส่วนใหญ่หมายถึงการเพิ่มวอลเล็ต เครือข่าย และสถานะธุรกรรมลงในหน้าจอที่คุณสร้างเป็นอยู่แล้ว ถามเอเจนต์เพื่อเพิ่มบรรทัดสถานะที่มี 5 สถานะ: ยังไม่ส่ง รอสัญญาณจากวอลเล็ต กำลังดำเนินการ ยืนยันแล้ว และล้มเหลว edit_file เปลี่ยนสคริปต์และไฟล์สไตล์ชีต และ grep หาทุกที่ที่สถานะยังขาดหายไป วอลเล็ตลงนาม; โค้ดของคุณไม่แตะต้องคีย์ส่วนตัวหรือ seed phrase นอกจากนี้ขอข้อความสำหรับวอลเล็ตที่หายไป เครือข่ายที่ผิด และการปฏิเสธการลงนาม เพราะผู้ใช้จริงจะพบสิ่งเหล่านี้ในไม่ช้า รันหน้าเว็บบนเครือข่ายทดสอบด้วยบัญชีชั่วคราว ปฏิเสธการลงนามโดยเจตนา และตรวจสอบว่าสถานะล้มเหลวปรากฏพร้อมข้อความที่ชัดเจน

ทดสอบจากนั้นเอกสารโปรเจกต์

ถามเอเจนต์เพื่อเขียนเทสต์หน้าเว็บสำหรับแต่ละสถานะและ README สั้นๆ ที่อธิบายวิธีรันโปรเจกต์ write_file สร้างไฟล์ทั้งสอง Shell รันคำสั่งเทสต์ของคุณ และการ์ดรายงาน exit code จริง นักพัฒนา dApp ที่กลับมาที่โปรเจกต์นี้หนึ่งเดือนต่อมาจะอ่าน README นั้นก่อน ดังนั้นตรวจสอบว่าระบุเฉพาะคำสั่งที่คุณใช้จริงและระบุว่าหน้าเว็บคาดหวังเครือข่ายใด ใช้โหมด Plan only ก่อนหากคุณต้องการเห็นรายการขั้นตอนก่อนสร้างไฟล์ใดๆ จากนั้นสลับเป็น Ask first เพื่อดำเนินการ อ่านแต่ละ diff รันเทสต์ด้วยตนเองหนึ่งครั้งบนเครือข่ายทดสอบด้วยบัญชีชั่วคราว และเก็บ README ไว้ข้างๆ ไฟล์ ABI เพื่อให้ทั้งสองสอดคล้องกัน

AlphaWeft สำหรับ Windows

เริ่มต้นโฟลเดอร์โปรเจกต์แรกของคุณ

ดาวน์โหลด AlphaWeft ↗