การแนะนำ
การเกิดขึ้นของ Bitcoin ไม่เพียงแต่ก่อให้เกิดความเจริญรุ่งเรืองของสกุลเงินดิจิทัลเท่านั้น แต่ยังเป็นการวางรากฐานสำหรับการพัฒนาเครือข่ายแบบกระจายอำนาจอีกด้วย การพัฒนาอย่างรวดเร็วของสาขาบล็อคเชนยังคงดึงดูดความสนใจของบุคลากรด้านเทคนิค และในขณะเดียวกัน ก็มีความต้องการการจัดหาบุคลากรด้านเทคนิคที่แข็งแกร่งขึ้น เมื่อนักพัฒนาส่วนหน้าแบบดั้งเดิมสำรวจสาขานี้ พวกเขาไม่เพียงแต่สามารถใช้ประโยชน์จากข้อได้เปรียบทางเทคนิคที่มีอยู่เท่านั้น แต่ยังขยายขอบเขตอาชีพของพวกเขาอีกด้วย บทความนี้มีจุดมุ่งหมายเพื่อให้คำแนะนำเชิงปฏิบัติสำหรับการเปลี่ยนแปลงทางเทคโนโลยีดังกล่าว โดยเน้นเป็นพิเศษที่ทักษะหลักและกลยุทธ์การเปลี่ยนแปลงในการพัฒนา DApp
ยุคใหม่ของเครือข่ายแบบกระจายอำนาจ
คุณสมบัติหลักของยุคบล็อกเชนคือการกระจายอำนาจ ความโปร่งใส การไม่งัดแงะ และการประยุกต์ใช้สัญญาอัจฉริยะ:
การกระจายอำนาจ: บล็อกเชนใช้เทคโนโลยีบัญชีแยกประเภทแบบกระจายเพื่อจัดเก็บข้อมูลบนหลายโหนดในเครือข่าย แทนที่จะมุ่งเน้นไปที่เซิร์ฟเวอร์หรือฐานข้อมูลเดียว ซึ่งหมายความว่าไม่มีจุดควบคุมเพียงจุดเดียว ซึ่งช่วยปรับปรุงความต้านทานการโจมตีและความปลอดภัยของข้อมูลของระบบ
ความโปร่งใสและไม่เปลี่ยนรูป: ธุรกรรมทั้งหมดบนบล็อกเชนเปิดกว้างและโปร่งใส และเมื่อบันทึกแล้ว จะไม่สามารถแก้ไขหรือลบได้ สิ่งนี้ให้ความมั่นใจในการติดตามธุรกรรมและความน่าเชื่อถือ
สัญญาอัจฉริยะ: โปรแกรมที่ดำเนินการตามเงื่อนไขของสัญญาโดยอัตโนมัติ โดยทำงานบนบล็อกเชนและประมวลผลธุรกรรมโดยอัตโนมัติโดยไม่ต้องใช้ตัวกลาง ช่วยเพิ่มฟังก์ชันการทำงานและความยืดหยุ่นของบล็อกเชนอย่างมาก
Solidity
// SPDX-License-Identifier: MIT
pragma solidity ^ 0.8.0;
contract SimpleStorage {
uint storeData; // กำหนดจำนวนเต็มที่ไม่ได้ลงนามเพื่อจัดเก็บข้อมูล
// ฟังก์ชั่นจัดเก็บหมายเลขบนบล็อคเชน
function set(uint x) public {
storedData = x;
}
// ฟังก์ชั่นเพื่อดึงหมายเลขที่เก็บไว้จาก blockchain
function get() public view returns (uint) {
return storedData;
}
}
Ethereum เป็นอีกหนึ่งนวัตกรรมบล็อคเชนที่สำคัญรองจาก Bitcoin ต่างจาก Bitcoin ตรงที่ Ethereum ไม่เพียงแต่เป็นสกุลเงินดิจิทัลเท่านั้น แต่ยังเป็นแพลตฟอร์มที่รองรับการพัฒนาสัญญาอัจฉริยะและแอปพลิเคชันแบบกระจายอำนาจ (DApps) DApp จะลบเซิร์ฟเวอร์รวมศูนย์แบบเดิม และการโต้ตอบของผู้ใช้จะเกิดขึ้นโดยตรงบนบล็อกเชน โมเดลนี้นำมุมมองใหม่มาสู่ความปลอดภัยของข้อมูล ความเป็นส่วนตัวของผู้ใช้ และการกระจายอำนาจ ตลอดจนความท้าทายและโอกาสใหม่สำหรับนักพัฒนาส่วนหน้า
สถาปัตยกรรมของแอปพลิเคชันแบบกระจายอำนาจ
สถาปัตยกรรมแอปพลิเคชันอินเทอร์เน็ตแบบดั้งเดิมจะต้องเป็นที่คุ้นเคยสำหรับผู้อ่าน สมมติว่านี่คือเว็บไซต์ช้อปปิ้งออนไลน์ ผู้ใช้จะเข้าถึงอินเทอร์เฟซที่ส่วนหน้าจัดทำโดยเบราว์เซอร์เพื่อดำเนินการเกี่ยวกับการช็อปปิ้งก่อน หากผู้ใช้ค้นหาคำสำคัญของผลิตภัณฑ์บางคำ ฝ่ายหลังจะรับผิดชอบในการประมวลผลตรรกะที่เกี่ยวข้อง กล่าวคือ ตอบสนองต่อคำขอจากส่วนหน้า และส่งคืนข้อมูลที่จำเป็นไปยังส่วนหน้าหลังจากดึงฐานข้อมูลแล้ว ฐานข้อมูลให้พื้นที่จัดเก็บข้อมูลที่เสถียรสำหรับแอปพลิเคชัน รวมถึงข้อมูลผลิตภัณฑ์ทั้งหมดและข้อมูลที่เกี่ยวข้องกับผู้ใช้ (เช่น เนื้อหาในตะกร้าสินค้า)
DApps ที่สร้างขึ้นบน blockchain นั้นแตกต่างโดยพื้นฐานจากแอปพลิเคชันแบบเดิม ความแตกต่างที่สำคัญที่สุดอยู่ที่การเปลี่ยนแปลงบทบาทของแบ็กเอนด์และฐานข้อมูล ที่นี่ สัญญาอัจฉริยะมีบทบาทเป็นแบ็กเอนด์แบบดั้งเดิม และบล็อกเชนจะเข้ามาแทนที่ฐานข้อมูลแบบเดิมและให้พื้นที่จัดเก็บข้อมูลแบบกระจายอำนาจ การทำงานร่วมกันอย่างใกล้ชิดระหว่างสัญญาอัจฉริยะและบล็อกเชนทำให้การจัดเก็บและการเรียกค้นข้อมูลมีความโปร่งใสและยากต่อการแก้ไข
แม้ว่าแบ็กเอนด์และฐานข้อมูลจะมีการเปลี่ยนแปลงอย่างมาก แต่ส่วนหน้าของแอปพลิเคชันแบบกระจายอำนาจยังคงรักษาความต่อเนื่องในบทบาทดั้งเดิม อินเทอร์เฟซผู้ใช้ยังคงเป็นสะพานสำหรับการโต้ตอบกับแอปพลิเคชัน ทุกการดำเนินการของผู้ใช้ ไม่ว่าจะเป็นการดำเนินการธุรกรรมหรือส่งคำขอข้อมูล จะถูกส่งโดยตรงไปยังสัญญาอัจฉริยะผ่านทางส่วนหน้า สัญญาอัจฉริยะเหล่านี้ถูกปรับใช้บนเครือข่ายบล็อกเชนที่กระจายทั่วโลก และโต้ตอบกับมันแบบเรียลไทม์ เพื่อให้มั่นใจถึงความคงที่และความเปิดกว้างของบันทึกธุรกรรมและสถานะสัญญาแต่ละรายการ
ในความเป็นจริง การสื่อสารระหว่างส่วนหน้าและสัญญาอัจฉริยะนั้นซับซ้อนกว่าที่แสดงในภาพ ซึ่งเราจะขยายความในเนื้อหาต่อไปนี้
เหมือนกัน: การพัฒนาส่วนต่อประสานกับผู้ใช้
จากที่กล่าวข้างต้น สำหรับวิศวกรส่วนหน้าที่มีประสบการณ์ในการพัฒนาเว็บ ทักษะการพัฒนาส่วนต่อประสานกับผู้ใช้สามารถถ่ายโอนได้: ทักษะพื้นฐาน เช่น HTML, CSS และ JavaScript ยังคงมีบทบาทสำคัญในกระบวนการพัฒนา DApp สำหรับความเชี่ยวชาญกรอบงานส่วนหน้าที่ทันสมัย ใน React หรือ Vue ยังสามารถปรับปรุงประสิทธิภาพการทำงานและคุณภาพของผลิตภัณฑ์ได้อย่างมาก เมื่อสร้างอินเทอร์เฟซ DApp แบบโต้ตอบที่ใช้งานง่าย
ตามหลักการของความโปร่งใสและความน่าเชื่อถือ DApps จำนวนมากจะเปิดซอร์สโค้ดส่วนหน้า ซึ่งยังอำนวยความสะดวกให้สมาชิกชุมชนมีส่วนร่วมในการสนับสนุนและการตรวจสอบโค้ด ปรับปรุงคุณภาพ ความปลอดภัย และความไว้วางใจของผู้ใช้แอปพลิเคชัน ตัวอย่างเช่น คลังส่วนต่อประสานผู้ใช้ของ Uniswap การแลกเปลี่ยนแบบกระจายอำนาจhttps://github.com/Uniswap/interfaceซึ่งสามารถใช้เป็นแหล่งเรียนรู้สำหรับนักพัฒนาเพื่อปรับปรุงความสามารถทางธุรกิจของตนได้
อย่างไรก็ตาม เมื่อเร็ว ๆ นี้ ผู้เขียนได้ลองใช้ generative AI เพื่อช่วยในการพัฒนาส่วนต่อประสานกับผู้ใช้ วิธีการโต้ตอบทั่วไปมากขึ้นคือการอัปโหลดภาพหน้าจอของร่างการออกแบบหรืออธิบายส่วนประกอบที่จะพัฒนาผ่านภาษาธรรมชาติ เท่าที่เกี่ยวข้องกับประสบการณ์ส่วนตัว vercel พัฒนาขึ้นv 0.devโดยพื้นฐานแล้วสามารถแก้ปัญหาการใช้งานเนื้อหาและเลย์เอาต์ของเพจแบบคงที่ แต่หากคุณต้องการสร้างโค้ดตามภาพหน้าจอ คุณยังต้องทำการปรับเปลี่ยนโดยละเอียด โดยรวมแล้ว generative AI สามารถปรับปรุงประสิทธิภาพการพัฒนาได้ในระดับหนึ่ง ควรสังเกตว่าในระหว่างการใช้งานควรให้ความสนใจกับความถูกต้องของเนื้อหาข้อความที่ AI ยอมรับ ในระหว่างการใช้งานผู้เขียนพบความไม่สอดคล้องกับร่างการออกแบบเป็นครั้งคราว
ความแตกต่าง: กลไกการรับรองความถูกต้องและการอ่านและการเขียนข้อมูล
ใน DApps วิธีการพิสูจน์ตัวตนแบบเดิม เช่น รหัสผ่านและโทเค็นจะถูกแทนที่ด้วยการเชื่อมต่อกระเป๋าสตางค์และลายเซ็นดิจิทัล สิ่งนี้ต้องการให้นักพัฒนาส่วนหน้าเข้าใจกลไกการตรวจสอบสิทธิ์ของผู้ใช้ ฝึกฝนทักษะในการโต้ตอบกับกระเป๋าเงิน และเข้าใจวิธีอ่านและเขียนข้อมูลจากเครือข่ายบล็อกเชน
เทคโนโลยี Wallet และการตรวจสอบตัวตนของผู้ใช้
ใน DApp การตรวจสอบตัวตนของผู้ใช้และวิธีการจัดการมีความแตกต่างโดยพื้นฐานจากเว็บไซต์แบบเดิมๆ กระบวนการนี้ดำเนินการผ่านกระเป๋าเงิน blockchain แทนที่จะใช้ชื่อผู้ใช้และรหัสผ่านแบบเดิม ที่อยู่กระเป๋าเงินทำหน้าที่เป็นตัวระบุเฉพาะของผู้ใช้ใน DApp และผู้ใช้สามารถใช้ที่อยู่กระเป๋าเงินเดียวกันเพื่อโต้ตอบกับ DApps หลายรายการ กระเป๋าเงินประกอบด้วยกุญแจคู่หนึ่ง: กุญแจสาธารณะและกุญแจส่วนตัว กุญแจสาธารณะ (เช่น ที่อยู่กระเป๋าเงิน) สามารถแชร์กับผู้อื่นเพื่อรับเงินได้ ในขณะที่กุญแจส่วนตัวเป็นความลับและใช้เพื่อลงนามในธุรกรรมและพิสูจน์ความเป็นเจ้าของ ของกองทุน
นักพัฒนาส่วนหน้าจะรวมอินเทอร์เฟซกระเป๋าสตางค์ไว้ใน DApp เพื่อให้แอปพลิเคชันสามารถระบุและโต้ตอบกับกระเป๋าสตางค์ของผู้ใช้ได้ เมื่อผู้ใช้พยายามโต้ตอบกับ DApp พวกเขาจะถูกขอให้เชื่อมต่อผ่านกระเป๋าเงินของพวกเขา การเชื่อมต่อกระเป๋าเงินโดยทั่วไปเกี่ยวข้องกับการลงนามข้อความพิสูจน์ว่าผู้ใช้มีรหัสส่วนตัวไปยังที่อยู่กระเป๋าเงินนั้น MetaMask เป็นหนึ่งในกระเป๋าเงินบล็อคเชนที่ได้รับความนิยมมากที่สุดที่สามารถติดตั้งเป็นปลั๊กอินของเบราว์เซอร์ได้ MetaMask หรือกระเป๋าเงินอื่นๆ สามารถรวมเข้ากับ DApps ได้อย่างง่ายดายโดยใช้ไลบรารี JavaScript เช่น Ethers.js นอกจากนี้ เครื่องมืออย่าง RainbowKit และ Web3 Modal ยังมีโซลูชันบูรณาการที่ใช้งานง่าย ซึ่งช่วยให้กระบวนการเชื่อมต่อของกระเป๋าเงินกระแสหลักต่างๆ ง่ายขึ้น
การโต้ตอบข้อมูลกับบล็อคเชน
นักพัฒนาส่วนหน้าควรคุ้นเคยกับกระบวนการใช้ fetch หรือ axios เพื่อสร้างและส่งคำขอไปยัง API แต่ในการพัฒนาบล็อกเชน โดยเฉพาะอย่างยิ่งเมื่อใช้ไลบรารี เช่น web3.js หรือ Ethers.js จำเป็นต้องมีการเรียนรู้เพิ่มเติม แนวคิดหลักบางประการ . ก่อนที่จะแนะนำโดยละเอียด เราจะมาเปรียบเทียบ web3.js หรือ Ethers.js ซึ่งเป็นไลบรารี JavaScript ที่ใช้บ่อยที่สุดสองไลบรารี:
โดยรวมแล้ว web3.js มีชุมชนที่ใหญ่ขึ้นและมีทรัพยากรที่สมบูรณ์ยิ่งขึ้นเนื่องจากการมีอยู่มายาวนานและการใช้งานอย่างแพร่หลาย ในขณะที่ Ethers.js ได้รับแรงผลักดันในการพัฒนาเนื่องจากการออกแบบที่ทันสมัย น้ำหนักเบา และการออกแบบ API ที่สะอาดตา ถูกใจผู้อ่าน นักพัฒนาสามารถเลือกไลบรารี JavaScript ที่เหมาะสมได้ตามความต้องการของโปรเจ็กต์และความชอบส่วนบุคคล
ผู้ให้บริการและผู้ลงนามเป็นแนวคิดหลักสองประการในการโต้ตอบระหว่างส่วนหน้าและบล็อกเชน และพวกเขามีบทบาทที่แตกต่างกันเมื่อโต้ตอบ
ผู้ให้บริการคืออินเทอร์เฟซที่เชื่อมต่อกับโหนดบล็อคเชน ช่วยให้คุณสามารถอ่านข้อมูลบล็อคเชนได้ ถือได้ว่าเป็นหน้าต่างแบบสอบถามที่สามารถรับสถานะของบล็อคเชนได้ เช่น ยอดคงเหลือในบัญชี ข้อมูลธุรกรรม สถานะสัญญาอัจฉริยะ เป็นต้น
Solidity
// web2: ส่งคำขอ GET ไปยัง API โดยตรง
const res = await axios.get('
autolink https://some-api.comautolink
');
// web3: อ่านข้อมูลออนไลน์ผ่านผู้ให้บริการ
const provider = ethers.getDefaultProvider('homestead');
const balance = await provider.getBalance("ethers.eth"); // อ่านยอดเงินในบัญชี
console.log (ยอดคงเหลือ: $ {ethers.utils.formatEther (ยอดคงเหลือ)} ETH); // การแปลงหน่วย
ผู้ลงนามคือเอนทิตีที่แสดงถึงอำนาจในการทำธุรกรรมและถือคีย์ส่วนตัวที่จำเป็นสำหรับการส่งธุรกรรม พูดง่ายๆ ก็คือ เมื่อคุณต้องการดำเนินการเขียน เช่น การส่งเหรียญ Ether หรือดำเนินการวิธีการสัญญาอัจฉริยะ คุณต้องมีผู้ลงนาม
Solidity
// web2: ส่งคำขอ POST ไปยัง API โดยตรง
const res = await axios.post('
autolink https://some-api.com/autolink
', { name: 'Satoshi' });
// web3: ลงนามการดำเนินการเขียนผ่านผู้ลงนาม
ผู้ลงนาม const = provider.getSigner(); // รับผู้ลงนาม
// สร้างวัตถุธุรกรรมและส่งผ่านผู้ลงนาม
const tx = await signer.sendTransaction({
to: "ที่อยู่ปลายทาง 0x",
value: ethers.utils.parseEther("1.0")
});
console.log(แฮชธุรกรรม: ${tx.hash}); // แฮชสามารถใช้เพื่อติดตามธุรกรรมบนบล็อกเชน
นอกเหนือจากกลไกการตรวจสอบตัวตนและการอ่านและเขียนข้อมูลแล้ว นักพัฒนาส่วนหน้ายังต้องให้ความสนใจกับรูปแบบธุรกรรมบล็อคเชนในระหว่างการพัฒนา DApp รวมถึงวงจรชีวิตของธุรกรรม ค่าธรรมเนียม Gas และการประมวลผลสถานะธุรกรรม
เส้นทางการเรียนรู้
• เรียนรู้พื้นฐานของ blockchain และ Ethereum และทำความเข้าใจพื้นฐาน
•เรียนรู้พื้นฐานสัญญาอัจฉริยะ (ABI วิธีการและคุณสมบัติ เหตุการณ์ และบันทึก)
https://docs.soliditylang.org/en/latest/index.html
https://www.wtf.academy/en/solidity-start
•เรียนรู้กลไกการเชื่อมต่อกระเป๋าเงินและกระเป๋าเงิน (ผู้ให้บริการ ผู้ลงนาม)
https://docs.ethers.org/v5/api/providers/
https://docs.ethers.org/v5/api/signer/
•สร้างเพจเพื่อรับทราบการเชื่อมต่อกระเป๋าสตางค์และการแสดงที่อยู่กระเป๋าสตางค์
https://docs.ethers.org/v5/getting-started/#getting-started--connecting
•สร้างเพจเพื่อโต้ตอบกับสัญญาบนเทสเน็ต
https://docs.ethers.org/v5/api/contract/
•เรียนรู้ขั้นตอนการออกโทเค็น ERC 20 และ ERC 721 รวมถึงกระบวนการอนุมัติ การโอน และการสร้างเหรียญ
https://ethereum.org/en/developers/docs/standards/tokens/erc-20/
บทสรุป
ทักษะการพัฒนาส่วนต่อประสานผู้ใช้ที่ถ่ายโอนได้เป็นข้อได้เปรียบที่ไม่เหมือนใครสำหรับนักพัฒนาส่วนหน้าในการเปลี่ยนมาใช้ Web3 ในเวลาเดียวกันนวัตกรรมที่เป็นเอกลักษณ์ของเทคโนโลยีบล็อคเชนทำให้เกิดความท้าทายต่อตัวเลือกนี้ ในสาขาที่กำลังเกิดใหม่นี้ บทบาทของการพัฒนาส่วนหน้าไม่ได้จำกัดอยู่ที่การใช้งานทางเทคนิคเท่านั้น ด้วยการสร้างประสบการณ์ผู้ใช้ที่ไม่เหมือนใครและเชื่อถือได้ ส่วนหน้าสามารถกลายเป็นส่วนสำคัญในการดึงดูดมูลค่าได้ ผู้เขียนได้รับความสนใจจากการเล่าเรื่องเชิงนวัตกรรมของ Web3 ตั้งแต่เริ่มต้น เริ่มเรียนรู้ด้วยความอยากรู้อยากเห็นและความสนใจ จากนั้นจึงพยายามฝึกฝนต่อไป และค่อย ๆ ชื่นชมเสน่ห์ของบล็อกเชนและศักยภาพในการเปลี่ยนแปลงที่นำมาซึ่ง ฉันหวังว่าบทความนี้จะสร้างแรงบันดาลใจให้กับผู้อ่านที่สนใจลองพัฒนาแอปพลิเคชันในสาขา Web3
