Giới thiệu
Sự xuất hiện của Bitcoin không chỉ tạo nên sự thịnh vượng của tiền kỹ thuật số mà còn đặt nền móng cho sự phát triển của các mạng lưới phi tập trung. Sự phát triển nhanh chóng của lĩnh vực blockchain tiếp tục thu hút sự chú ý của nhân viên kỹ thuật, đồng thời có nhu cầu mạnh mẽ hơn về việc cung cấp nhân viên kỹ thuật. Khi các nhà phát triển front-end truyền thống khám phá lĩnh vực này, họ không chỉ có thể tận dụng những lợi thế kỹ thuật hiện có mà còn mở rộng tầm nhìn nghề nghiệp của mình. Bài viết này nhằm mục đích cung cấp hướng dẫn thực tế cho quá trình chuyển đổi công nghệ như vậy, đặc biệt tập trung vào các kỹ năng chính và chiến lược chuyển đổi trong phát triển DApp.
Kỷ nguyên mới của mạng lưới phi tập trung
Các tính năng cốt lõi của kỷ nguyên blockchain là phân cấp, minh bạch, không giả mạo và ứng dụng hợp đồng thông minh:
Phân cấp: Blockchain sử dụng công nghệ sổ cái phân tán để lưu trữ dữ liệu trên nhiều nút trong mạng thay vì tập trung vào một máy chủ hoặc cơ sở dữ liệu. Điều này có nghĩa là không có điểm kiểm soát duy nhất, cải thiện khả năng chống tấn công và bảo mật dữ liệu của hệ thống.
Tính minh bạch và bất biến: Tất cả các giao dịch trên blockchain đều công khai và minh bạch và sau khi được ghi lại, chúng không thể bị sửa đổi hoặc xóa. Điều này cung cấp sự đảm bảo về khả năng truy xuất nguồn gốc và độ tin cậy của giao dịch.
Hợp đồng thông minh: Các chương trình tự động thực hiện các điều khoản của hợp đồng, chạy trên blockchain và tự động xử lý các giao dịch mà không cần trung gian, giúp nâng cao đáng kể chức năng và tính linh hoạt của blockchain.
Solidity
// SPDX-License-Identifier: MIT
pragma solidity ^ 0.8.0;
contract SimpleStorage {
uint archiveData; // Định nghĩa một số nguyên không dấu để lưu trữ dữ liệu
// Hàm lưu trữ số trên blockchain
function set(uint x) public {
storedData = x;
}
// Hàm lấy số được lưu trữ từ blockchain
function get() public view returns (uint) {
return storedData;
}
}
Ethereum là một sự đổi mới blockchain lớn khác sau Bitcoin. Không giống như Bitcoin, Ethereum không chỉ là một loại tiền kỹ thuật số mà còn là nền tảng hỗ trợ phát triển các hợp đồng thông minh và các ứng dụng phi tập trung (DApps). DApp loại bỏ các máy chủ tập trung truyền thống và các tương tác của người dùng diễn ra trực tiếp trên blockchain. Mô hình này mang đến những quan điểm mới về bảo mật dữ liệu, quyền riêng tư của người dùng và phân cấp, cũng như những thách thức và cơ hội mới cho các nhà phát triển front-end.
Kiến trúc của các ứng dụng phi tập trung
Kiến trúc ứng dụng Internet truyền thống hẳn đã quen thuộc với độc giả. Giả sử đây là một website mua sắm trực tuyến, trước tiên người dùng truy cập vào giao diện được cung cấp bởi front end thông qua trình duyệt để thực hiện các thao tác liên quan đến mua sắm, nếu người dùng tìm kiếm một từ khóa sản phẩm nào đó thì back end sẽ chịu trách nhiệm xử lý logic tương ứng , nghĩa là đáp ứng yêu cầu từ giao diện người dùng. , và trả lại dữ liệu cần thiết cho giao diện người dùng sau khi truy xuất cơ sở dữ liệu. Cơ sở dữ liệu cung cấp khả năng lưu trữ ổn định cho ứng dụng, bao gồm tất cả thông tin sản phẩm và thông tin liên quan đến người dùng (chẳng hạn như nội dung giỏ hàng).
DApps được xây dựng trên blockchain về cơ bản khác với các ứng dụng truyền thống. Sự khác biệt đáng kể nhất nằm ở vai trò thay đổi của phần phụ trợ và cơ sở dữ liệu. Ở đây, hợp đồng thông minh đóng vai trò phụ trợ truyền thống và chuỗi khối thay thế cơ sở dữ liệu truyền thống và cung cấp khả năng lưu trữ dữ liệu phi tập trung. Sự hợp tác chặt chẽ giữa hợp đồng thông minh và blockchain giúp cho việc lưu trữ và truy xuất dữ liệu trở nên minh bạch và khó bị giả mạo.
Bất chấp những thay đổi sâu sắc về phần phụ trợ và cơ sở dữ liệu, phần giao diện người dùng của các ứng dụng phi tập trung vẫn duy trì tính liên tục trong vai trò truyền thống của nó. Giao diện người dùng vẫn là cầu nối tương tác với ứng dụng, mọi thao tác của người dùng dù là thực hiện giao dịch hay gửi yêu cầu dữ liệu đều được chuyển trực tiếp đến hợp đồng thông minh thông qua giao diện người dùng. Các hợp đồng thông minh này được triển khai trên mạng blockchain phân tán toàn cầu và tương tác với nó trong thời gian thực, đảm bảo tính bất biến và cởi mở của từng hồ sơ giao dịch và trạng thái hợp đồng.
Trên thực tế, giao tiếp giữa giao diện người dùng và hợp đồng thông minh phức tạp hơn những gì được thể hiện trong hình, chúng tôi sẽ mở rộng vấn đề này trong nội dung sau.
Tương tự: Phát triển giao diện người dùng
Dựa trên những điều trên, đối với các kỹ sư front-end có kinh nghiệm phát triển web, các kỹ năng phát triển giao diện người dùng có thể chuyển giao: các kỹ năng cơ bản như HTML, CSS và JavaScript tiếp tục đóng một vai trò quan trọng trong quá trình phát triển DApp; đối với các framework front-end hiện đại. trong React hoặc Vue cũng có thể cải thiện đáng kể hiệu quả công việc và chất lượng sản phẩm khi xây dựng giao diện DApp tương tác và thân thiện với người dùng.
Dựa trên các nguyên tắc minh bạch và tin cậy, nhiều DApp sẽ mở mã nguồn giao diện người dùng của họ, điều này cũng tạo điều kiện cho các thành viên cộng đồng tham gia đóng góp và đánh giá mã, cải thiện chất lượng, tính bảo mật và niềm tin của người dùng đối với ứng dụng. Ví dụ: kho giao diện người dùng của sàn giao dịch phi tập trung Uniswaphttps://github.com/Uniswap/interface, có thể được sử dụng làm tài nguyên học tập cho các nhà phát triển để cải thiện khả năng kinh doanh của họ.
Nhân tiện, gần đây tác giả đã cố gắng sử dụng Generative AI để hỗ trợ phát triển giao diện người dùng. Các phương pháp tương tác phổ biến hơn là tải lên ảnh chụp màn hình trang của bản phác thảo thiết kế hoặc mô tả các thành phần sẽ được phát triển thông qua ngôn ngữ tự nhiên. Theo kinh nghiệm cá nhân, vercel đã phát triểnv 0.devVề cơ bản, nó có thể giải quyết việc triển khai nội dung và bố cục của các trang tĩnh, nhưng nếu muốn tạo mã dựa trên ảnh chụp màn hình, bạn vẫn phải thực hiện các điều chỉnh chi tiết. Nhìn chung, AI tổng quát có thể cải thiện hiệu quả phát triển ở một mức độ nhất định. Cần lưu ý trong quá trình sử dụng cần chú ý đến tính chính xác của nội dung văn bản được AI nhận dạng, trong quá trình sử dụng tác giả thỉnh thoảng phát hiện có điểm không thống nhất với bản phác thảo thiết kế.
Sự khác biệt: Cơ chế xác thực và đọc ghi dữ liệu
Trong DApps, các phương thức xác thực truyền thống như mật khẩu và mã thông báo được thay thế bằng kết nối ví và chữ ký số. Điều này đòi hỏi các nhà phát triển front-end phải hiểu cơ chế xác thực của người dùng, nắm vững các kỹ năng tương tác với ví và hiểu cách đọc và ghi dữ liệu từ mạng blockchain.
Công nghệ ví và xác thực danh tính người dùng
Trong DApp, phương thức quản lý và xác thực danh tính người dùng về cơ bản khác với các trang web truyền thống. Quá trình này được thực hiện thông qua ví blockchain, thay vì thông qua tên người dùng và mật khẩu truyền thống. Địa chỉ ví đóng vai trò là mã định danh duy nhất của người dùng trong DApp và người dùng có thể sử dụng cùng một địa chỉ ví để tương tác với nhiều DApp. Ví chứa một cặp khóa chính: khóa chung và khóa riêng. Khóa chung (tức là địa chỉ ví) có thể được chia sẻ với người khác để nhận tiền, trong khi khóa riêng là bí mật và được sử dụng để ký giao dịch và chứng minh quyền sở hữu của Quỹ.
Các nhà phát triển front-end sẽ tích hợp giao diện ví trong DApp để ứng dụng có thể nhận dạng và tương tác với ví của người dùng. Khi người dùng cố gắng tương tác với DApp, họ sẽ được yêu cầu kết nối thông qua ví của mình. Việc kết nối ví thường bao gồm việc ký một tin nhắn chứng minh rằng người dùng sở hữu khóa riêng cho địa chỉ ví đó. MetaMask là một trong những ví blockchain phổ biến nhất có thể được cài đặt dưới dạng plugin trình duyệt. MetaMask hoặc các ví khác có thể dễ dàng tích hợp vào DApp bằng cách sử dụng các thư viện JavaScript như Ethers.js. Ngoài ra, các công cụ như RainbowKit và Web3 Modal cũng cung cấp các giải pháp tích hợp dễ thực hiện, đơn giản hóa hơn nữa quá trình kết nối của nhiều ví phổ thông khác nhau.
Tương tác dữ liệu với blockchain
Các nhà phát triển front-end nên làm quen với quy trình sử dụng tìm nạp hoặc axios để xây dựng và gửi yêu cầu tới API, nhưng trong quá trình phát triển blockchain, đặc biệt là khi sử dụng các thư viện như web3.js hoặc Ethers.js, cần phải học thêm. . Trước khi giới thiệu chi tiết, hãy so sánh web3.js hoặc Ethers.js, hai thư viện JavaScript được sử dụng phổ biến nhất:
Nhìn chung, web3.js có cộng đồng lớn hơn và tài nguyên phong phú hơn nhờ sự hiện diện lâu dài và được sử dụng rộng rãi, trong khi Ethers.js đã có được động lực phát triển nhờ thiết kế hiện đại, gọn nhẹ và thiết kế API gọn gàng hơn được người đọc yêu thích. Các nhà phát triển có thể chọn thư viện JavaScript phù hợp dựa trên nhu cầu dự án và sở thích cá nhân của họ.
Nhà cung cấp và người ký là hai khái niệm cốt lõi trong sự tương tác giữa giao diện người dùng và chuỗi khối và chúng đóng các vai trò khác nhau khi tương tác.
Nhà cung cấp là một giao diện được kết nối với nút blockchain, cho phép bạn đọc dữ liệu blockchain. Nó có thể được coi là một cửa sổ truy vấn thông qua đó có thể lấy được trạng thái của blockchain, chẳng hạn như số dư tài khoản, dữ liệu giao dịch, trạng thái hợp đồng thông minh, v.v.
Solidity
// web2: Gửi yêu cầu GET trực tiếp tới API
const res = await axios.get('
autolink https://some-api.comautolink
');
// web3: Đọc dữ liệu trên chuỗi thông qua nhà cung cấp
const provider = ethers.getDefaultProvider('homestead');
const balance = await provider.getBalance("ethers.eth"); // Đọc số dư tài khoản
console.log(balance: ${ethers.utils.formatEther(balance)} ETH); // Chuyển đổi đơn vị
Người ký là một thực thể đại diện cho thẩm quyền thực hiện giao dịch và nắm giữ khóa riêng cần thiết để gửi giao dịch. Nói một cách đơn giản, khi bạn cần thực hiện thao tác ghi, chẳng hạn như gửi tiền Ether hoặc thực hiện các phương thức hợp đồng thông minh, bạn cần có người ký.
Solidity
// web2: Gửi yêu cầu POST trực tiếp tới API
const res = await axios.post('
autolink https://some-api.com/autolink
', { name: 'Satoshi' });
// web3: Thao tác ghi dấu thông qua người ký
const signer = nhà cung cấp.getSigner(); // Lấy người ký
// Xây dựng đối tượng giao dịch và gửi nó qua người ký
const tx = await signer.sendTransaction({
to: "địa chỉ 0xdestination",
value: ethers.utils.parseEther("1.0")
});
console.log(transaction hash: ${tx.hash}); // Hàm băm có thể được sử dụng để theo dõi các giao dịch trên blockchain
Ngoài cơ chế xác minh danh tính và đọc và ghi dữ liệu, các nhà phát triển front-end cũng cần chú ý đến mô hình giao dịch blockchain trong quá trình phát triển DApp, bao gồm vòng đời giao dịch, phí Gas và xử lý trạng thái giao dịch.
lộ trình học tập
• Tìm hiểu những kiến thức cơ bản về blockchain và Ethereum cũng như hiểu các nguyên tắc cơ bản
•Tìm hiểu thông tin cơ bản về hợp đồng thông minh (ABI, phương thức và thuộc tính, sự kiện và nhật ký)
https://docs.soliditylang.org/en/latest/index.html
https://www.wtf.academy/en/solidity-start
•Tìm hiểu ví và cơ chế kết nối ví (nhà cung cấp, người ký)
https://docs.ethers.org/v5/api/providers/
https://docs.ethers.org/v5/api/signer/
•Tạo trang để nhận biết kết nối ví và hiển thị địa chỉ ví
https://docs.ethers.org/v5/getting-started/#getting-started--connecting
•Tạo trang để tương tác với hợp đồng trên mạng thử nghiệm
https://docs.ethers.org/v5/api/contract/
•Tìm hiểu quy trình phát hành mã thông báo ERC 20 và ERC 721, bao gồm các quy trình phê duyệt, chuyển nhượng và đúc tiền
https://ethereum.org/en/developers/docs/standards/tokens/erc-20/
Phần kết luận
Kỹ năng phát triển giao diện người dùng có thể chuyển đổi là một lợi thế đặc biệt để các nhà phát triển front-end chuyển sang Web3. Đồng thời, sự đổi mới độc đáo của công nghệ blockchain đặt ra những thách thức cho sự lựa chọn này. Trong lĩnh vực mới nổi này, vai trò của phát triển front-end không chỉ giới hạn ở việc triển khai kỹ thuật. Bằng cách tạo ra trải nghiệm người dùng độc đáo và đáng tin cậy, front-end thậm chí có thể trở thành mắt xích quan trọng trong việc nắm bắt giá trị. Tác giả đã bị thu hút bởi câu chuyện đổi mới của Web3 ngay từ đầu, bắt đầu tìm hiểu với sự tò mò và hứng thú, sau đó tiếp tục cố gắng thực hành và dần dần đánh giá cao sự hấp dẫn của blockchain cũng như tiềm năng thay đổi mà nó mang lại. Tôi hy vọng bài viết này sẽ truyền cảm hứng cho những độc giả quan tâm đến việc thử phát triển ứng dụng trong lĩnh vực Web3.
