วิธีสร้าง dApps ที่ปรับขนาดได้และสัญญาอัจฉริยะใน Ethereum พร้อมช่องสถานะอย่างเป็นขั้นเป็นตอน ส่วนที่ 1

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

คุณไม่ต้องรอการปรับปรุงในอนาคตในบล็อกเชน เทคโนโลยีอยู่ที่นี่และคุณสามารถใช้มันเพื่อสร้าง dApps ทุกชนิด ตอนนี้ช่องทางการของรัฐส่วนใหญ่จะใช้สำหรับเกมที่ใช้ blockchain ใน Ethereum

คิดว่าการพนันด้วยสกุลเงินดิจิตอล มีวิธีการเข้ารหัสข้อมูลเพื่อให้เปิดเผยในภายหลังซึ่งเป็นจุดสำคัญของระบบนี้

แชนเนลของรัฐคืออะไร

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

พวกเขาถูกเรียกว่า "สถานะ" เพราะการโต้ตอบแต่ละครั้งจะต้องมีสถานะที่สามารถอัปเดตได้ คิดคะแนนเกมหรือยอดเงินในธนาคาร

ทำไมพวกเขามีอยู่จริง?

ช่องรัฐถูกสร้างขึ้นเนื่องจากแอปพลิเคชัน ethereum ได้รับความนิยมเพิ่มขึ้นอย่างรวดเร็วทำให้บล็อกเชนไม่สามารถใช้งานได้เนื่องจากถูกพัฒนาด้วยการใช้งานในระดับปานกลาง อนุญาตให้ทำธุรกรรมอย่างต่อเนื่องโดยไม่ต้องจ่ายค่าแก๊สหรือรอให้คนขุดแร่ประมวลผลธุรกรรม

ซึ่งหมายถึงการทำธุรกรรมฟรีและรวดเร็ว

เราต้องการอะไรในการตั้งค่าช่องสัญญาณของรัฐ

  1. ผู้ใช้อย่างน้อย 2 คนที่จะโต้ตอบซึ่งกันและกัน ช่องต้องเปิดระหว่างผู้ใช้ 2 คนขึ้นไป คล้ายกับแอปพลิเคชันการแชท
  2. สัญญาอัจฉริยะที่มีตรรกะช่องสัญญาณของรัฐที่จะเปิดและปิด
  3. หากช่องสัญญาณของรัฐจะถูกใช้ในเกมผู้เล่นทั้งสองจะต้องมีผู้เล่นคอย สัญญาในอีเธอร์นั้นจะถูกเก็บไว้ในสัญญาอัจฉริยะเมื่อเปิดช่อง
  4. แอพพลิเคชั่นจาวาสคริปต์ที่จะสร้างข้อความที่ลงนามซึ่งจะถูกแลกเปลี่ยนระหว่างผู้ใช้
  5. Metamask หรือเครื่องมือที่คล้ายกันสำหรับการเซ็นข้อความ การเซ็นข้อความไม่ต้องเสียค่าใช้จ่ายและจะถูกดำเนินการทันที ผู้ใช้ทั้งสองฝ่ายจำเป็นต้องลงนามในข้อความเพื่อรับประกันว่า tehy นั้นเป็นผู้ที่สร้างธุรกรรมดังกล่าว
  6. อีเมลหรือแอปพลิเคชันภายนอกเพื่อแลกเปลี่ยนข้อความที่เซ็นชื่อเพื่อให้แอปพลิเคชันนั้นเป็นไปได้

พวกเขาทำงานอย่างไร

ช่องสัญญาณของรัฐค่อนข้างซับซ้อนในการตั้งค่าเพราะคุณต้องตรวจสอบให้แน่ใจว่าผู้เล่นทั้งสองได้รับการป้องกันในกรณีที่มีอะไรผิดพลาดนั่นคือสาเหตุที่เราต้องมีสัญญาที่ชาญฉลาด เหล่านี้คือขั้นตอน:

  1. ในช่องสถานะระหว่างผู้ใช้ 2 คนคนแรกใช้สัญญาสมาร์ทซึ่งจะ "เปิด" ช่อง
  2. คนที่สองทำหน้าที่ของสัญญาอัจฉริยะเพื่อ“ เข้าร่วม” ช่องสัญญาณสถานะนั้น”
  3. จากนั้นพวกเขาสามารถเริ่มแลกเปลี่ยนข้อความที่เซ็นชื่อสำหรับแอปพลิเคชัน ผู้ใช้ทั้งสองมีสิทธิ์เข้าถึงแอปพลิเคชันจาวาสคริปต์ที่กำหนดเองเพื่อสร้างข้อความด้วยข้อมูลที่พวกเขาจะทำในสัญญาที่ชาญฉลาด แต่ไม่ได้อยู่ในเครือ
  4. ความเร็วของการทำธุรกรรมขึ้นอยู่กับความเร็วที่ผู้ใช้แต่ละคนสามารถสร้างและเซ็นชื่อข้อความเหล่านั้น พวกเขาทำการแลกเปลี่ยนข้อความเล่นนอกสายจนกว่าพวกเขาจะตัดสินใจว่าเกมจบลงแล้ว
  5. เมื่อพวกเขาจบเกมทุกคนสามารถไปที่สัญญาอัจฉริยะและใช้งานฟังก์ชั่นเพื่อทำให้เสร็จซึ่งจะเป็นการเริ่มต้นของ "การเจรจาต่อรอง"
  6. ในขั้นตอนนี้ผู้ใช้ทั้งสองมีเวลาหมดเวลา 1 วันในการอัปโหลดข้อความล่าสุด 2 ข้อความที่พวกเขาต้องทำในสัญญาอัจฉริยะ สัญญาอัจฉริยะจะตรวจสอบข้อความล่าสุดและปล่อยเงินทุนเพื่อจบเกมตามข้อมูลนั้น แต่ละข้อความมีผลลัพธ์ของการโต้ตอบก่อนหน้าดังนั้นจึงปลอดภัยที่จะตรวจสอบข้อความล่าสุด

คุณจะประยุกต์ใช้สิ่งนี้ในสถานการณ์จริงได้อย่างไร?

ในคู่มือนี้ฉันจะแสดงวิธีสร้างช่องสถานะระหว่างผู้ใช้ 2 คนสำหรับเกม Ethereum โปรดจำไว้ว่าช่องสถานะสามารถใช้กับแอปพลิเคชันประเภทใดก็ได้ที่มี“ สถานะ” หรือตัวนับ นั่นเป็นเหตุผลว่าทำไมเกมจึงเหมาะ เนื่องจากคุณสามารถติดตามผู้ที่ชนะในแต่ละเกมจึงมีสถานะสำหรับแต่ละเกมที่สามารถอัปเดตได้

เราจะสร้างเกมลูกเต๋าโดยที่ผู้เล่น 1 เลือกหมายเลขของลูกเต๋าที่จะหลุดออกมาและผู้เล่น 2 ต้องเดาว่าจะชนะ พวกเขาจะสามารถเล่นเกมได้มากเท่าที่ต้องการโดยไม่ต้องทำธุรกรรมบน blockchain เราจะมีเว็บแอปเพื่อแสดงอินเทอร์เฟซ

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

  1. การสร้างแอปพลิเคชันเว็บแบบเห็นภาพ นี่คืออินเทอร์เฟซลักษณะของเกมที่ดูเหมือนกับผู้ใช้ภายนอก มันจะถูกใช้เป็นสื่อกลางในการแลกเปลี่ยนข้อความที่ลงนามสำหรับช่องรัฐ
  2. การสร้างฟังก์ชันที่จำเป็นในการเซ็นและเข้ารหัสข้อความ
  3. การสร้างสัญญาอัจฉริยะ

1. การสร้างแอปพลิเคชันเว็บแบบเห็นภาพ

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

ในกรณีนี้เราต้องการแสดงสิ่งที่คล้ายกันสำหรับผู้เล่นทั้งสอง ผู้เล่น 1 จะเห็นลูกเต๋า 6 ใบหน้าเป็นภาพและเขาจะต้องเลือกว่าจะให้ใครออกมาจากนั้นผู้เล่นคนที่สองจะต้องเลือกระหว่างใบหน้าเหล่านั้นและเขาจะสามารถเห็นผลได้

ดังนั้นกรอบงานจะเป็นดังนี้:

  1. ผู้เล่น 1 ไปที่เว็บแอปคลิกที่ปุ่มว่า“ เริ่มเกมใหม่” จากนั้นเขาก็ทำธุรกรรม metamask เพื่อปรับใช้และตั้งค่าสัญญาอัจฉริยะ เขาได้รับที่อยู่สัญญาอัจฉริยะซึ่งเขาสามารถส่งไปยังผู้เล่นอื่นเพื่อเริ่มเกม
  2. ผู้เล่น 2 ไปที่เว็บแอปคลิกที่ปุ่มที่ระบุว่า "เข้าร่วมเกมที่มีอยู่" พร้อมที่อยู่ตามสัญญาที่ได้รับจากผู้เล่น 1 จากนั้นเขาทำธุรกรรม metamask เพื่อตั้งค่าเกมที่มีอยู่แล้วและส่งสัญญา

ดังนั้นเริ่มต้นที่นั่น มาสร้างกล่องตรงกลางแอปเว็บด้วยปุ่ม 2 ปุ่ม สร้างโฟลเดอร์ชื่อลูกเต๋าและไฟล์ภายในชื่อ index.html นี่คือรหัส:

โดยค่าเริ่มต้นจะมีลักษณะอย่างไร 2 ปุ่ม


    
        
         เกมลูกเต๋า ethereum 
    
    
        
                                       

ในรหัสนั้นฉันเพิ่งสร้างโครงสร้าง HTML พื้นฐานด้วย div ที่มีปุ่มและชื่อ โปรดทราบว่า div มีคลาสที่เรียกว่าเนื้อหาหลักซึ่งเราจะใช้ในอีกสักครู่

มาทำให้สวยขึ้นด้วย css บ้าง สร้างไฟล์ชื่อ index.css ด้วยรหัสต่อไปนี้ (คุณสามารถคัดลอกและวางสิ่งนี้):

นี่คือลักษณะที่ปรากฏ
ร่างกาย {
    font-family: sans-serif;
}
.เนื้อหาหลัก {
    ขอบ: อัตโนมัติ;
    ความกว้างสูงสุด: 500px;
    สีพื้นหลัง: whitesmoke;
    การขยาย: 50px;
    รัศมีเส้นขอบ: 10px;
    จอแสดงผล: ตาราง;
    ตารางเทมเพลตแถว: 1fr 1fr;
    ตารางเทมเพลตคอลัมน์: 1fr 1fr;
    grid-column-gap: 10px;
}
.main-content h1 {
    กริดคอลัมน์: 1 / span 2;
}
ปุ่ม. main-content {
    เส้นขอบ: ไม่มี;
    สี: ขาว;
    สีพื้นหลัง: # 007dff;
    การขยาย: 20px;
    รัศมีเส้นขอบ: 5px;
    เคอร์เซอร์: ตัวชี้;
}
ปุ่ม. main-content: โฮเวอร์ {
    ความทึบ: 0.8;
}
ปุ่ม. main-content: active {
    ความทึบ: 0.6;
}

ฉันเพิ่มชื่อ h1 ใน html เพื่อให้ดูดีขึ้นโปรดอัปเดต html ของคุณโดยเพิ่มลิงก์ไปยัง css:



    
        
        
         เกมลูกเต๋า ethereum 
    
    
        
            

Ethereum Dice

                                       

คุณอาจสังเกตเห็นว่าฉันกำลังใช้ตาราง css ใหม่ นั่นเป็นเพราะส่วนใหญ่มีให้บริการสำหรับเบราว์เซอร์ขนาดใหญ่ดังนั้นจึงค่อนข้างปลอดภัยในการใช้งาน ณ จุดนี้เนื่องจากคนส่วนใหญ่จะเห็น CSS อย่างถูกต้อง

ฉันตัดสินใจว่าวิธีที่ดีที่สุดในการแสดงการกระทำต่อไปที่ผู้ใช้ต้องการคือการแสดง div ใน javascript พร้อมข้อมูลที่จำเป็น ดังนั้นเมื่อเขาคลิกที่ "เริ่มเกมใหม่" เขาจะเห็นกล่องถามเขาว่าเขาต้องการตั้งค่าสำหรับเกมมากแค่ไหน

เขาคลิกที่ "เข้าร่วมเกมที่มีอยู่" เขาจะถูกถามถึงสัญญาและที่อยู่สัญญาของเกมที่มีอยู่

นี่คือวิธีการตอบสนองของปุ่ม:

ลักษณะที่แอปพลิเคชันมีจาวาสคริปต์ธรรมดา

เพื่อให้เป็นไปได้ฉันได้สร้างไฟล์ index.js ด้วยตรรกะจาวาสคริปต์ นี่คือจาวาสคริปต์โปรดพิมพ์ด้วยมือของคุณหากคุณต้องการเรียนรู้เพิ่มเติม:

ให้ฉันอธิบายสิ่งที่ฉันทำที่นั่น:

  • ก่อนอื่นฉันสร้างฟังก์ชั่นที่เรียกว่า start () ซึ่งจะถูกดำเนินการทันทีเพื่อปิดเนื้อหาเพื่อให้ดีและมีอยู่ในฟังก์ชั่นใหญ่เดียว
  • จากนั้นฉันสร้างผู้ฟังเหตุการณ์ 2 เหตุการณ์ที่เปิดใช้งานเมื่อใดก็ตามที่ฉันคลิกปุ่มเริ่มหรือเข้าร่วมในไฟล์ html ปุ่มหนึ่งสำหรับปุ่ม # new-game และปุ่มอื่นสำหรับปุ่ม # join-game ฉันใช้ document.querySelector () ซึ่งเป็นหนึ่งในวิธีที่มีประสิทธิภาพที่สุดในการเลือกสิ่งใดในรหัส js ของคุณ
  • ภายในผู้ฟังฉันแสดงหรือซ่อนกล่อง div ของแต่ละองค์ประกอบที่เกี่ยวข้อง โดยทั่วไปการเลือกกล่องที่มี querySelector และลบหรือเพิ่มระดับที่ซ่อนอยู่ซึ่งมีการตั้งค่าใน css เพื่อแสดง: ไม่มี; .

จากนั้นเราสามารถเชื่อมต่อไฟล์ js กับ modifie index.html ของเรา:



    
        
        
         เกมลูกเต๋า ethereum 
    
    
        
            

Ethereum Dice

                         
            
                

คุณจะใช้ escrow เป็นจำนวนเท่าใดใน ETH หรือไม่

                             
            
                

ที่อยู่สัญญาอัจฉริยะของเกมที่มีอยู่คืออะไร

                             
            
        
        
    

ฉันทำตัวหนารหัสใหม่เพิ่ม ต่อไปนี้เป็น CSS ที่อัปเดตเพื่อจัดรูปแบบข้อมูลใหม่:

ร่างกาย {
    font-family: sans-serif;
}
. hidden {
    แสดง: ไม่มี;
}
.เนื้อหาหลัก {
    ขอบ: อัตโนมัติ;
    ความกว้างสูงสุด: 500px;
    สีพื้นหลัง: whitesmoke;
    การขยาย: 50px;
    รัศมีเส้นขอบ: 10px;
    จอแสดงผล: ตาราง;
    grid-template-rows: 1fr 80px อัตโนมัติ
    ตารางเทมเพลตคอลัมน์: 1fr 1fr;
    grid-column-gap: 10px;
}
.main-content h1 {
    กริดคอลัมน์: 1 / span 2;
}
ปุ่ม. main-content {
    เส้นขอบ: ไม่มี;
    สี: ขาว;
    สีพื้นหลัง: # 007dff;
    การขยาย: 20px;
    รัศมีเส้นขอบ: 5px;
    เคอร์เซอร์: ตัวชี้;
}
ปุ่ม. main-content: โฮเวอร์ {
    ความทึบ: 0.8;
}
ปุ่ม. main-content: active {
    ความทึบ: 0.6;
}
ปุ่ม. main-content: ปิดใช้งาน {
    ความทึบแสง: 0.5;
    สีพื้นหลัง: สีเทา;
    เคอร์เซอร์: อัตโนมัติ
}
.main-content input {
    ความกว้าง: 100%;
    รัศมีเส้นขอบ: 10px;
    การขยาย: 10px;
    เส้นขอบ: แสงสีเทาทึบ 1px;
}
.main-content div.new-game-setup, .main-content div.join-game-setup {
    กริดคอลัมน์: 1 / span 2;
}
# button- ดำเนินการต่อ {
    กริดคอลัมน์: 1 / span 2;
    margin-top: 20px;
}

ปุ่ม "ดำเนินการต่อ" ในขณะนี้ไม่ได้ทำอะไรเลยดังนั้นให้สร้างฟังก์ชันการทำงานเพื่อปรับใช้สัญญาอัจฉริยะใหม่และเปิดช่องสถานะเมื่อผู้ใช้ต้องการสร้างเกมใหม่ในส่วนถัดไป

2. การสร้างและเชื่อมต่อสัญญาอัจฉริยะเริ่มต้น

ได้เวลาสร้างสัญญาพื้นฐานที่ชาญฉลาดและเชื่อมต่อกับจาวาสคริปต์ของคุณโดยใช้ web3.js สำหรับตอนนี้เราต้องการเพียงตัวสร้างและข้อมูลพื้นฐานบางอย่าง เขียนรหัสนี้ด้วยมือของคุณเองในไฟล์ใหม่ชื่อ Dice.sol:

ความมั่นคงในระดับ pragma 0.4.25;
สัญญาลูกเต๋า {
    ที่อยู่สาธารณะ player1;
    ที่อยู่สาธารณะ player2;
    uint256 ผู้เล่นสาธารณะ 1 สัญญา;
    uint256 ผู้เล่นสาธารณะ 2 สัญญา;
    คอนสตรัค () เจ้าหนี้สาธารณะ {
        ต้องการ (msg.value> 0);
        player1 = msg.sender;
        player1Escrow = msg.value;
    }
    ฟังก์ชั่น setupPlayer2 () สาธารณะจ่าย {
        ต้องการ (msg.value> 0);
        player2 = msg.sender;
        player2Escrow = msg.value;
    }
}

มี 2 ​​ฟังก์ชั่นคอนสตรัคเตอร์ในการตั้งค่าที่อยู่และสัญญาของผู้เล่นคนแรกและฟังก์ชั่น setupPlayer2 () เพื่อตั้งค่าข้อมูลของผู้เล่นคนที่สอง

เราต้องการปรับใช้สัญญาและดำเนินการตัวสร้างด้วย msg.value ที่ระบุเมื่อผู้ใช้คลิกที่ปุ่ม“ ดำเนินการต่อ” ในการดำเนินการดังกล่าวเราจะต้องติดตั้ง web3.js ในสัญญาอัจฉริยะของเรา เนื่องจากเป็นวิธีหลักในการสื่อสารกับ blockchain บนเบราว์เซอร์

รับ web3.js ในโฟลเดอร์แอพของคุณจากที่นี่: https://github.com/ethereum/web3.js/blob/develop/dist/web3.js ซึ่งเป็นทางการอัปเดตรหัสการแจกจ่าย

ในการดาวน์โหลดสำหรับโครงการของคุณไปที่ลิงค์นั้นคลิกที่ raw เพื่อดูรหัสเต็มและคัดลอกรหัสเพื่อวางลงในไฟล์ใหม่ที่ชื่อว่า web3.js ภายในโฟลเดอร์โครงการของคุณ:

เปิดหน้าคลิกที่“ ดิบ” เลือกทั้งหมดด้วย ctrl + a คัดลอกรหัสและวางลงในไฟล์ใหม่ในโครงการของคุณชื่อ web3.js

คุณไม่จำเป็นต้องทำเช่นนั้นหากคุณใช้ metamask เนื่องจาก metamask ใช้เวอร์ชันของ web3.js ให้กับคุณ แต่มีประโยชน์ที่จะมีห้องสมุด web3 ในโครงการของคุณเพื่อโต้ตอบกับ blockchain หาก metamask ไม่สามารถใช้ได้

เรากำลังใช้ metamask เพื่อพูดคุยกับ blockchain อย่างไรก็ตามมันจะไม่ทำงานเมื่อคุณเปิดไฟล์ index.html บนเบราว์เซอร์ของคุณเพราะ metamask ไม่รองรับไฟล์: // ส่วนขยาย

จากนั้นเราต้องเรียกใช้เซิร์ฟเวอร์ท้องถิ่นที่จะให้บริการไฟล์ไปยัง http: // localhost: 8080 url เนื่องจาก metamask ไม่ทำงานเมื่อคุณเปิดไฟล์ index.html โดยตรง ในการทำเช่นนั้นให้เปิดเทอร์มินัลแล้วติดตั้งสิ่งนี้

npm ฉัน -g http- เซิร์ฟเวอร์

จากนั้นในโฟลเดอร์โครงการของคุณให้เรียกใช้ http-server เพื่อเริ่มเซิร์ฟเวอร์ท้องถิ่นสำหรับ index.html ของคุณ:

http เซิร์ฟเวอร์

ที่จะให้บริการไฟล์บน localhost: 8080 เพื่อให้คุณสามารถเข้าถึงและฉีด web3 จาก metamask

ด้วยวิธีการนี้ให้ความสำคัญกับการปรับใช้สัญญาที่เราเพิ่งสร้างขึ้นจากเว็บแอปของเราทันทีเมื่อผู้ใช้คลิกที่ 'ดำเนินการต่อ'

ในการปรับใช้สัญญาใหม่เราต้องการ ABI พารามิเตอร์คอนสตรัคเตอร์และไบต์ประมวลผล สิ่งเหล่านี้เป็นข้อกำหนดสำหรับ web3.js

  1. หากต้องการสร้าง ABI ไปที่ remix.ethereum.org ให้วางรหัสของคุณในส่วนหลักและคลิกที่ ABI:

ที่จะคัดลอกรหัส ABI ไปที่โฟลเดอร์โครงการของคุณและสร้างไฟล์ชื่อ contractData.js เพื่อวางโค้ดที่มีตัวแปรที่เรียกว่า abi ดังนี้:

2. ตอนนี้เราต้องใช้รหัสไบต์ของสัญญาอัจฉริยะของคุณ bytecode เป็นสัญญาสมาร์ทคอมไพล์ที่จะนำไปใช้กับ blockchain เราต้องการข้อมูลที่จะสามารถนำไปใช้งานได้ เพื่อให้ bytecode ได้รับการรีมิกซ์อีกครั้งและคลิกที่ปุ่มนี้:

ปุ่มคัดลอกรหัสของรหัสของคุณ

และสร้างตัวแปรอื่นภายใน contractData.js ที่เรียกว่า bytecode พร้อมกับข้อมูลดังนี้:

คุณสามารถคัดลอกรหัสเดียวกันนี้ได้หากสัญญาอัจฉริยะของคุณเหมือนกับที่ฉันสร้างไว้ด้านบน

นำเข้าไฟล์ javascript ใน html ของคุณก่อนที่ไฟล์ index.js เพื่อให้มีตัวแปร abi และ bytecode ให้ใช้งาน:

ก่อนที่จะสร้างสัญญาในจาวาสคริปต์เราจำเป็นต้องเพิ่มผู้ฟังเหตุการณ์ไปที่ปุ่มดำเนินการต่อในส่วน "เริ่มเกมใหม่":

สิ่งที่ฉันทำคือ:

  • ฉันเพิ่มรหัส ID ไปยังอินพุตที่ผู้ใช้ถูกถามว่าเขาต้องการใส่อีเธอร์ไว้เท่าใดในสัญญาและที่อยู่ของสัญญาหากเขาเข้าร่วมเกมที่มีอยู่
  • จากนั้นฉันเพิ่ม javascript import ด้านบน index.js เพราะเราต้องการให้ abi และ bytecode พร้อมใช้งานใน index.js เพราะมันจะต้องนำเข้าก่อน

จากนั้นเราเพิ่มตรรกะที่จำเป็นเพื่อให้ปุ่มนั้นทำงาน เราจะตรวจสอบว่าใส่ที่อยู่สัญญาใน HTML ว่างเปล่าหรือไม่

หากไม่ว่างเปล่าเราจะสมมติว่าผู้เล่นเริ่มเกมใหม่ที่น่าสนใจให้คุณเริ่มเกมโดยใช้ปุ่มเข้าร่วมหากคุณเว้นที่อยู่ว่างไว้

ก่อนที่ฉันจะแสดงรหัสทั้งหมดฉันต้องการอธิบายวิธีปรับใช้สัญญาโดยใช้ web3.js มันดูเรียบง่าย แต่ฉันติดอยู่ในบางพื้นที่

ดังนั้นเมื่อผู้ใช้คลิกที่“ เริ่มเกมใหม่” เขาให้จำนวนสัญญากับเราในอีเธอร์และที่อยู่ของเขาเราสามารถปรับสัญญาใหม่ด้วยฟังก์ชั่นนี้:

โดยพื้นฐานแล้วคุณจะสร้างอินสแตนซ์สัญญากับ abi และคุณดำเนินการเมธอด. new () สำหรับสัญญานั้นด้วย bytecode

จากนั้นในการติดต่อกลับคุณจะได้รับข้อผิดพลาดถ้ามีและวัตถุผลลัพธ์ วัตถุผลลัพธ์จะมี .address ของสัญญาที่ปรับใช้เมื่อมีการประมวลผลธุรกรรมโดย miners

ซึ่งหมายความว่าการเรียกกลับนี้จะถูกดำเนินการ 2 ครั้ง หนึ่งรายการเมื่อคุณดำเนินการสร้างสัญญาและอีกรายการหนึ่งเมื่อที่อยู่ของสัญญานั้นพร้อมใช้งาน

คุณสามารถตรวจสอบว่าที่อยู่ของสัญญามีให้บริการด้วยคำสั่งง่ายๆหรือไม่:

if (! result.address) {
    // การสร้างสัญญาเริ่มขึ้นแล้ว
} อื่น {
    // สัญญาถูกปรับใช้และคุณสามารถใช้ที่อยู่กับ result.address
}

นั่นเป็นวิธีที่คุณปรับใช้สัญญากับ web3

แต่ถ้าคุณต้องการเข้าถึงสัญญาที่มีอยู่ใน blockchain ล่ะ

นั่นคือสิ่งที่เราต้อง "เข้าร่วม" เกมลูกเต๋าเพื่อสร้างตัวอย่างสัญญา เพื่อจุดประสงค์นั้นเราต้องการ ABI และที่อยู่ของสัญญาเท่านั้นจึงไม่จำเป็นต้องใช้รหัสไบต์ นี่คือวิธีที่คุณทำใน web3:

สัญญา = web3.eth.contract (abi)
contractInstance = Contract.at (ที่อยู่ที่เลือก)

หลังจากนั้นคุณสามารถใช้งานฟังก์ชั่นของสัญญานั้นได้เช่น:

contractInstance.setupPlayer2 ({
  ค่า: web3.toWei (ค่าที่เลือก)
  ก๊าซ: 4e6
}, (ผิดพลาด, ผลลัพธ์) => {
    // ทำบางสิ่งหลังจากรันฟังก์ชั่น
})

คุณต้องการอินสแตนซ์ชื่อฟังก์ชันพารามิเตอร์หากมีและฟังก์ชันเรียกกลับเท่านั้น

เมื่อคุณเข้าใจวิธีการปรับใช้และการสร้างอินสแตนซ์ของสัญญาแบบสมาร์ทกับจาวาสคริปต์ฉันจะแสดงรหัสแอปพลิเคชันให้คุณเห็น:

ไม่สนใจทุกสิ่งข้างต้นสิ่งที่คุณต้องมุ่งเน้นคืออยู่ในบล็อคของผู้ฟัง button # button-continue ’:

document.querySelector ( '# ปุ่มดำเนินการต่อ'). addEventListener ()

เพราะคุณต้องใส่ใจกับสิ่งที่เกิดขึ้นเมื่อผู้เล่น 1 หรือผู้เล่น 2 คลิกที่ปุ่ม "ดำเนินการต่อ" นี่คือรายละเอียด:

  • เมื่อผู้เล่นคลิกที่ปุ่มนั้นผู้ฟังเหตุการณ์จะถูกดำเนินการ
  • ข้างในฉันได้รับค่าของอินพุตเพื่อตั้งค่า escrow และที่อยู่ของสัญญาที่ปรับใช้หากผู้เล่นเข้าร่วมเกมที่มีอยู่ นั่นคือตัวแปรที่เลือกแล้วและ addressSelected
  • จากนั้นฉันสร้างตัวแปรการตั้งค่าสัญญาด้วย abi ซึ่งจะต้องใช้สำหรับผู้เล่นทั้งสอง
  • หลังจากนั้นฉันจะดูว่ามีการตั้งค่าที่อยู่ของสัญญาที่ปรับใช้หรือไม่ หากที่อยู่ว่างหมายความว่าผู้เล่นคลิกที่ "เริ่มเกมใหม่" เนื่องจากในกรณีนั้นเขาจะไม่เห็นที่อยู่ที่ป้อน
  • ซึ่งหมายความว่าฉันปรับใช้เกมใหม่หรือสัญญาอัจฉริยะสำหรับผู้เล่นที่เลือกสัญญา
  • ผู้เล่นคนแรกนั้นจะเห็นที่อยู่ของสัญญาสมาร์ทที่ปรับใช้ เขาจะต้องแชร์ที่อยู่นั้นกับผู้เล่นคนอื่นเพื่อเริ่มเกมลูกเต๋าเนื่องจากคุณต้องการผู้เล่น 2 คน
  • หากเขาระบุที่อยู่แสดงว่าเขาต้องการเข้าร่วมเกมที่มีอยู่ เราสามารถทำได้โดยการสร้างอินสแตนซ์ของสัญญาอัจฉริยะโดยใช้ที่อยู่ของมันแล้วเรียกใช้งานฟังก์ชั่น setupPlayer2 ()
  • ฉันใช้ฟังก์ชัน setInterval เพื่อตรวจสอบทุก 1 วินาทีว่าการตั้งค่าเครื่องเล่น 2 เสร็จสมบูรณ์หรือไม่เพื่อเริ่มเกม

ที่ดี! ถ้าคุณทำจนถึงตอนนี้ก็หมายความว่าคุณได้รับมอบหมายและคุณกำลังเรียนรู้บางสิ่งบางอย่าง ส่วนที่ดีที่สุดอยู่ใกล้กว่าที่คุณคิด ในบทความถัดไปคุณจะเห็นวิธีการสร้างช่องรัฐสำหรับเกมของคุณใน javascript เพื่อสร้างแอปพลิเคชันกระจายอำนาจ Ethereum ที่ปรับขนาดได้

อย่าพลาดและเป็นคนแรกที่อ่านเมื่อเสร็จแล้ว เข้าร่วมรายการจดหมายพิเศษของนักพัฒนา Ethereum เพื่อรับการอัปเดตและข้อมูลโดยตรงจากฉันที่นี่: http://eepurl.com/dDQ2yX

ตอนที่ 2 มีให้บริการแล้วที่นี่: https://medium.com/@merunasgrincalaitis/how-to-create-scalable-dapps-and-smart-contracts-in-ethereum-with-state-channels-step-by-step- 690f71a9bf2f

หากคุณรู้สึกสับสนกับข้อมูลขั้นสูงเช่นนี้หรือคุณเพิ่งใหม่กับ Solidity และ Ethereum dapps ให้ตรวจสอบหนังสือของฉัน“ Ethereum Developer: Learn Solidity from Scratch” ที่นี่ https://merunas.io/