Mở thư mục
Chọn thư mục dự án làm thư mục làm việc của một cuộc trò chuyện mới và chọn Ask first, để mọi thay đổi ghi vào tệp đều chờ quyết định của bạn. Đặt tệp ABI vào thư mục đó trước khi bắt đầu.
Quy trình làm việc
Tạo dApp từ thư mục rỗng đến giao diện đã kiểm thử
03
Bắt đầu từ một thư mục dự án rỗng
Để tạo dApp, hãy bắt đầu với một thư mục chỉ chứa tệp ABI của hợp đồng của bạn. Mở thư mục đó làm thư mục làm việc của một cuộc trò chuyện mới, chọn Ask first và mô tả trang bạn muốn: một nút kết nối ví, hiển thị số dư và dòng trạng thái giao dịch. Agent sẽ quét thư mục, đề xuất các tệp dưới dạng diff và chỉ tạo trang sau khi bạn chấp nhận từng thay đổi. Hãy quyết định trước khi bắt đầu nơi dự án sẽ chạy. Một chuỗi cục bộ (local chain) trên PC của bạn rất phù hợp cho lần thử đầu tiên vì các coin trên đó không có giá trị, còn mạng test công cộng là bước tiếp theo sau khi trang hoạt động. Hãy sử dụng các tài khoản tạm (throwaway accounts) trên cả hai loại mạng, không bao giờ dùng tài khoản chứa tiền thật, và giữ mọi private key cùng seed phrase ra khỏi thư mục, cuộc trò chuyện và kho lưu trữ. Kết quả là một trang web nhỏ, đã được kiểm thử và một file README mà người khác có thể làm theo.
Mô tả giao diện
Viết rõ dữ liệu trang cần hiển thị và các trạng thái giao dịch nó phải xử lý bằng các câu văn đơn giản. Đặt tên hàm hợp đồng mà trang sẽ gọi và mạng mà trang giao tiếp với, ví dụ như chuỗi cục bộ của bạn.
Xem lại từng diff
Đọc mọi thay đổi tệp được đề xuất trong cuộc trò chuyện, sau đó chấp nhận hoặc từ chối nó bằng một ghi chú ngắn. Mở rộng thẻ (card) khi bạn muốn xem diff đầy đủ và từ chối bất cứ thứ gì bạn không thể giải thích trong một câu.
Chạy và kiểm tra
Để Shell chạy lệnh build và lệnh test của bạn, sau đó đọc mã thoát (exit code) trên mỗi thẻ. Mở trang đối với chuỗi cục bộ và so sánh những gì nó hiển thị với những gì bạn mong đợi. Sửa những phần thất bại trước khi thêm tính năng tiếp theo.
Một tệp ABI nhỏ để bắt đầu
Đọc balanceOf từ ABI và hiển thị kết quả trên trang.
- read_file
balance-abi.jsonloaded - write_file
app.jssaved - edit_file
index.html+4 dòng - Shell
your build commandexit 0
đợi bạn xác nhận trước khi thực hiện bước tiếp theoTừ chốiChấp nhận
balance-abi.json
[
{
"type": "function",
"name": "balanceOf",
"stateMutability": "view",
"inputs": [{ "type": "address", "name": "account" }],
"outputs": [{ "type": "uint256" }]
}
]Đoạn JSON này mô tả một hàm chỉ đọc, balanceOf, hàm đọc số dư mà các token ERC-20 sử dụng. Nó nhận một địa chỉ có tên là account và trả về giá trị uint256. Front-end sử dụng ABI như thế này để gọi hợp đồng, và tệp không chứa key hay bí mật nào. Lưu nó dưới dạng balance-abi.json trong thư mục dự án, và thay thế nó bằng ABI đầy đủ của hợp đồng của bạn một khi trang hoạt động, vì một hợp đồng thực tế thường có nhiều hàm hơn.
Hướng dẫn chi tiết cho dApp đầu tiên
Quét thư mục và đọc ABI
Một cách tốt để bắt đầu học web3 là đọc một tệp ABI nhỏ trước khi viết bất cứ thứ gì. Hãy yêu cầu agent mở balance-abi.json. read_file sẽ hiển thị nội dung tệp, list_dir sẽ hiển thị những gì khác trong thư mục và grep sẽ xác nhận chính xác tên của hàm. Agent sau đó sẽ giải thích trong cuộc trò chuyện rằng balanceOf là một view function: nó chỉ đọc dữ liệu và không gửi giao dịch, vì vậy việc gọi nó không làm thay đổi gì trên chuỗi. Chưa có dữ liệu nào được ghi. Nó cũng liệt kê những gì trang sẽ cần, cụ thể là kết nối đến một node, địa chỉ của hợp đồng đã triển khai và một tài khoản để tra cứu. Hãy kiểm tra từng thông tin đối với JSON trên thẻ, vì một model có thể đọc sai một loại dữ liệu hoặc đặt tên một hàm mà tệp không chứa, và hãy yêu cầu sửa chữa trước khi tiếp tục.
Kết nối trang với chuỗi cục bộ
Yêu cầu tạo một trang đọc số dư của một tài khoản kiểm thử tạm thời. write_file sẽ tạo app.js với một lệnh gọi đến chuỗi cục bộ của bạn qua JSON-RPC, và edit_file sẽ thêm một dòng script vào index.html. Bạn chỉ cần các công cụ cross chain cho dApp khi nó giao tiếp với nhiều chuỗi; một dự án đầu tiên trên một chuỗi cục bộ không cần chúng, vì vậy hãy bỏ qua. Ở chế độ Ask first, cả hai thay đổi đều chờ dưới dạng diff. Hãy đọc chúng và chấp nhận chúng. Shell sau đó sẽ chạy lệnh build của bạn, và thẻ sẽ hiển thị mã thoát thực tế. Mở trang, so sánh số nó hiển thị với số chuỗi cục bộ của bạn báo cáo cho cùng một tài khoản, và yêu cầu agent sửa trang nếu hai số khác nhau. Hãy giữ địa chỉ chuỗi ở một nơi cố định, vì vậy việc thay đổi mạng sau này chỉ cần chỉnh sửa một dòng code.
Xử lý các trạng thái giao dịch
Chuyển đổi từ web2 sang web3 đối với dev chủ yếu là thêm một ví, một mạng và một trạng thái giao dịch vào các giao diện mà bạn đã biết cách xây dựng. Hãy yêu cầu agent thêm một dòng trạng thái với 5 trạng thái: chưa gửi, đang chờ ví, pending, confirmed và failed. edit_file sẽ thay đổi script và bảng kiểu (style sheet), và grep sẽ tìm bất kỳ nơi nào trạng thái vẫn còn thiếu. Ví sẽ ký; mã của bạn không bao giờ chạm vào private key hay seed phrase. Hãy cũng yêu cầu các thông báo cho trường hợp ví bị thiếu, mạng sai và chữ ký bị từ chối, vì một người dùng thực sẽ gặp những trường hợp này sớm hay muộn. Hãy chạy trang trên một mạng test với một tài khoản tạm thời, từ chối một chữ ký có chủ đích và kiểm tra xem trạng thái failed có xuất hiện với một thông báo rõ ràng hay không.
Kiểm thử, sau đó tài liệu hóa dự án
Yêu cầu agent viết một bài kiểm tra front-end cho mỗi trạng thái và một README ngắn giải thích cách chạy dự án. write_file sẽ tạo cả hai tệp, Shell sẽ chạy lệnh test của bạn và thẻ sẽ báo cáo mã thoát thực tế. Một nhà phát triển dApp quay lại dự án một tháng sau sẽ đọc README đó trước, vì vậy hãy kiểm tra xem nó chỉ liệt kê các lệnh bạn thực sự sử dụng và nó có ghi rõ mạng nào mà trang mong đợi hay không. Hãy sử dụng chế độ Plan only trước nếu bạn muốn xem danh sách các bước trước khi bất kỳ tệp nào được tạo, sau đó chuyển sang Ask first để thực hiện nó. Đọc từng diff, tự chạy các bài kiểm tra một lần trên một mạng test với các tài khoản tạm thời, và giữ README bên cạnh tệp ABI để cả hai vẫn đồng bộ.
