Cách xây dựng nền tảng từ thiện phi tập trung với Next.js, TypeScript và Solidity

Những gì bạn sẽ xây dựng, hãy xem bản demo trực tiếp tại mạng thử nghiệm Bitfinity và kho git .

Giới thiệu

Chào mừng bạn đến với hướng dẫn toàn diện này, nơi chúng tôi sẽ xây dựng Nền tảng từ thiện phi tập trung Web3 bằng cách sử dụng Next.js, Solidity và TypeScript. Đến cuối hướng dẫn này, bạn sẽ hiểu rõ về:

• Xây dựng giao diện động với Next.js
• Tạo hợp đồng thông minh Ethereum với Solidity
• Kết hợp kiểm tra kiểu tĩnh bằng TypeScript
• Triển khai và tương tác với các hợp đồng thông minh của bạn
• Hiểu các nguyên tắc cơ bản của nền tảng từ thiện dựa trên blockchain

Như một phần thưởng khi tham gia hướng dẫn này, bạn có thể dễ dàng giành được một bản sao cuốn sách uy tín của chúng tôi về việc trở thành nhà phát triển vững chắc theo yêu cầu. Ưu đãi này miễn phí cho 300 người đầu tiên, để được hướng dẫn cách giành chiến thắng, hãy xem video ngắn bên dưới.

Điều kiện tiên quyết

Bạn sẽ cần cài đặt các công cụ sau để xây dựng cùng với tôi:

• Node.js
• Sợi
• Git Bash
• MetaMask
• Next.js
• Độ rắn chắc
• Bộ công cụ Redux
• CSS theo gió

Để thiết lập MetaMask cho hướng dẫn này, vui lòng xem video hướng dẫn bên dưới:

Sau khi hoàn tất thiết lập, bạn đủ điều kiện nhận bản sao sách miễn phí của chúng tôi. Để yêu cầu sách của bạn, vui lòng điền vào biểu mẫu để gửi bằng chứng công việc của bạn .

Xem các video hướng dẫn sau để nhận được các khóa học cao cấp miễn phí lên tới 3 tháng trên

Học viện cố vấn Dapp, bao gồm:

• Khóa học khai thác NFT Fullstack
• Khóa học về thị trường NFT Fullstack
• Khóa học chuỗi khối Fullstack
• vân vân.

Hãy bắt đầu hành trình của bạn với Bitfinity ngay hôm nay. Trải nghiệm quy trình phát triển nhanh chóng, đơn giản và không rắc rối khi bạn xây dựng dApp Theo dõi quyên góp từ thiện đầu tiên của mình. Triển khai các hợp đồng thông minh của bạn vào mạng Bitfinity và tạo ra tác động tích cực.

Như đã nói, hãy chuyển sang phần hướng dẫn và thiết lập dự án của chúng ta.

Cài đặt

Chúng ta sẽ bắt đầu bằng cách sao chép kho lưu trữ giao diện người dùng đã chuẩn bị sẵn và thiết lập các biến môi trường. Chạy các lệnh sau:

 git clone https://github.com/Daltonic/dappFundsX cd dappFundsX yarn install git checkout no_redux_no_blockchain

Tiếp theo, tạo tệp .env ở thư mục gốc của dự án và bao gồm các khóa sau:

 NEXT_PUBLIC_RPC_URL=http://127.0.0.1:8545 NEXT_PUBLIC_ALCHEMY_ID=<YOUR_ALCHEMY_PROJECT_ID> NEXT_PUBLIC_PROJECT_ID=<WALLET_CONNECT_PROJECT_ID> NEXTAUTH_URL=http://localhost:3000 NEXTAUTH_SECRET=somereallysecretsecret

Thay thế <YOUR_ALCHEMY_PROJECT_ID> và <WALLET_CONNECT_PROJECT_ID> bằng ID dự án tương ứng của bạn.

YOUR_ALCHEMY_PROJECT_ID : Nhận chìa khóa tại đây WALLET_CONNECT_PROJECT_ID : Nhận chìa khóa tại đây

Cuối cùng, chạy yarn dev để bắt đầu dự án.

Giao diện người dùng của chúng tôi cho dự án này rất chắc chắn và sẵn sàng cho một số tích hợp hợp đồng thông minh, nhưng chúng tôi sẽ cần Reduxify ứng dụng của mình để kích hoạt không gian dữ liệu được chia sẻ.

Xây dựng cửa hàng Redux

Hình ảnh trên thể hiện cấu trúc của cửa hàng Redux của chúng tôi, nó sẽ đơn giản vì chúng tôi không tạo một số dự án quá phức tạp.

Chúng ta sẽ thiết lập Redux để quản lý trạng thái toàn cầu của ứng dụng. Thực hiện theo các bước sau:

1. Tạo một thư mục store ở thư mục gốc của dự án.
2. Bên trong store , tạo hai thư mục: actions và states .
3. Bên trong states , tạo tệp globalStates.ts .

4. Bên trong actions , tạo tệp globalActions.ts .

5. Tạo tệp globalSlices.ts bên trong thư mục store .

6. Tạo một tệp index.ts bên trong thư mục store .

7. Cập nhật tệp pages/_app.ts với nhà cung cấp Redux.

Ứng dụng của chúng tôi đã được gói gọn trong bộ công cụ Redux và chúng tôi sẽ xem lại Redux khi tích hợp phần phụ trợ với giao diện người dùng.

Phát triển hợp đồng thông minh

Tiếp theo, chúng tôi sẽ phát triển hợp đồng thông minh cho nền tảng của mình:

1. Tạo một thư mục contracts ở thư mục gốc của dự án.
2. Bên trong contracts , tạo tệp DappFund.sol và thêm mã hợp đồng bên dưới.

Hợp đồng DappFund sẽ tạo điều kiện thuận lợi cho việc tạo, cập nhật và quyên góp cho các tổ chức từ thiện, cũng như các chức năng hành chính như thay đổi thuế từ thiện và cấm tổ chức từ thiện.

Đây là bảng phân tích theo từng chức năng:

1. constructor() : Hàm này đặt thuế từ thiện ban đầu khi hợp đồng được triển khai. Nó chỉ được thực hiện một lần trong quá trình triển khai hợp đồng.
2. createCharity() : Chức năng này cho phép người dùng tạo một tổ chức từ thiện mới. Nó yêu cầu một số thông số như tên, mô tả, hình ảnh, hồ sơ và số tiền từ thiện. Nó kiểm tra xem các tham số này có hợp lệ không, sau đó tạo CharityStruct mới và thêm nó vào ánh xạ charities .
3. updateCharity() : Chức năng này cho phép chủ sở hữu tổ chức từ thiện cập nhật thông tin chi tiết. Nó kiểm tra xem tổ chức từ thiện có tồn tại không và người gửi có phải là chủ sở hữu của tổ chức từ thiện hay không trước khi cập nhật thông tin chi tiết về tổ chức từ thiện.
4. deleteCharity() : Chức năng này cho phép chủ sở hữu tổ chức từ thiện đánh dấu nó là đã xóa. Nó kiểm tra xem tổ chức từ thiện có tồn tại không và người gửi có phải là chủ sở hữu của tổ chức từ thiện hay không trước khi đánh dấu tổ chức đó là đã xóa.
5. toggleBan() : Chức năng này cho phép chủ sở hữu hợp đồng cấm hoặc bỏ cấm một tổ chức từ thiện. Nó kiểm tra xem tổ chức từ thiện có tồn tại hay không trước khi chuyển trạng thái bị cấm.
6. donate() : Chức năng này cho phép người dùng quyên góp cho tổ chức từ thiện. Nó kiểm tra xem tổ chức từ thiện có tồn tại, không bị cấm và chưa đạt được mục tiêu gây quỹ hay không. Sau đó, nó tăng tổng số tiền quyên góp, tạo một SupportStruct mới và thêm nó vào ánh xạ supportersOf . Nó cũng cập nhật số tiền quyên góp được và số lượng quyên góp của tổ chức từ thiện.
7. changeTax() : Chức năng này cho phép chủ sở hữu hợp đồng thay đổi thuế từ thiện. Nó kiểm tra xem phần trăm thuế mới có hợp lệ hay không trước khi cập nhật thuế.
8. getCharity() : Chức năng này cho phép mọi người lấy thông tin chi tiết về tổ chức từ thiện. Nó trả về CharityStruct được liên kết với ID đã cho.
9. getCharities() : Chức năng này cho phép mọi người lấy thông tin chi tiết về tất cả các tổ chức từ thiện đang hoạt động. Nó trả về một mảng các đối tượng CharityStruct .
10. getMyCharities() : Chức năng này cho phép người dùng lấy thông tin chi tiết về tất cả các tổ chức từ thiện đang hoạt động của họ. Nó trả về một mảng các đối tượng CharityStruct .
11. getSupports() : Chức năng này cho phép mọi người lấy thông tin chi tiết của tất cả những người ủng hộ một tổ chức từ thiện cụ thể. Nó trả về một mảng các đối tượng SupportStruct .
12. payTo() : Chức năng nội bộ này được sử dụng để chuyển tiền. Nó gửi số lượng Ether được chỉ định đến địa chỉ đã cho.
13. currentTime() : Hàm nội bộ này trả về thời gian hiện tại tính bằng giây kể từ Kỷ nguyên Unix. Nó được sử dụng để đánh dấu thời gian quyên góp và sáng tạo từ thiện.

Hợp đồng triển khai và gieo hạt

Bây giờ, hãy triển khai hợp đồng thông minh của chúng ta và điền vào đó một số dữ liệu giả:

1. Tạo một thư mục scripts ở thư mục gốc của dự án.
2. Bên trong scripts , hãy tạo tệp deploy.js và hạt seed.js rồi thêm các mã sau.

Triển khai tập lệnh

Tập lệnh hạt giống

3. Chạy các lệnh sau để triển khai hợp đồng và cung cấp dữ liệu cho nó:

    yarn hardhat node # Run in terminal 1 yarn hardhat run scripts/deploy.js # Run in terminal 2 yarn hardhat run scripts/seed.js # Run in terminal 2

Nếu bạn làm đúng, bạn sẽ thấy kết quả tương tự như bên dưới:

Tại thời điểm này, chúng ta có thể bắt đầu tích hợp hợp đồng thông minh vào giao diện người dùng của mình.

Tích hợp giao diện người dùng

Đầu tiên, tạo một thư mục services ở thư mục gốc của dự án và bên trong nó, tạo tệp blockchain.tsx . Tệp này sẽ chứa các chức năng tương tác với hợp đồng thông minh của chúng tôi.

Mã được cung cấp là bản triển khai TypeScript của dịch vụ chuỗi khối để tương tác với hợp đồng thông minh của chúng tôi. Dịch vụ này cho phép người dùng thực hiện các hành động trên nền tảng từ thiện của chúng tôi, bao gồm tạo và cập nhật các tổ chức từ thiện, quyên góp, v.v.

Đây là bảng phân tích theo từng chức năng:

1. getEthereumContracts() : Hàm này lấy các phiên bản hợp đồng Ethereum mà dịch vụ sẽ tương tác. Nó kiểm tra xem người dùng có tài khoản Ethereum được kết nối hay không và sử dụng tài khoản đó để tương tác với hợp đồng, nếu không, nó sẽ sử dụng ví được tạo ngẫu nhiên.
2. getAdmin() : Hàm này trả về chủ sở hữu của hợp đồng.
3. getCharities() , getMyCharities() , getCharity() : Các hàm này lần lượt tìm nạp tất cả các tổ chức từ thiện, các tổ chức từ thiện do người dùng hiện tại tạo và một tổ chức từ thiện cụ thể theo ID của tổ chức đó.
4. getSupporters() : Hàm này tìm nạp những người ủng hộ một tổ chức từ thiện cụ thể theo ID của tổ chức đó.
5. createCharity() , updateCharity() : Các chức năng này cho phép người dùng tạo tổ chức từ thiện mới hoặc cập nhật tổ chức từ thiện hiện có.
6. makeDonation() : Chức năng này cho phép người dùng quyên góp cho một tổ chức từ thiện cụ thể.
7. deleteCharity() : Chức năng này cho phép chủ sở hữu tổ chức từ thiện xóa nó.
8. banCharity() : Chức năng này cho phép chủ sở hữu hợp đồng cấm tổ chức từ thiện.
9. structuredCharities() , structuredSupporters() : Đây là các hàm trợ giúp cấu trúc dữ liệu trả về từ hợp đồng thành định dạng dễ sử dụng hơn.

Cập nhật tệp provider.tsx bên trong services để bao gồm mạng bitfinity bằng các mã sau.

Trang tương tác với hợp đồng thông minh

Tiếp theo, chúng tôi sẽ liên kết các chức năng trong dịch vụ blockchain với các giao diện tương ứng của chúng ở giao diện người dùng:

Số 1: Hiển thị tất cả các trang Charities Cập nhật pages/index.tsx để lấy dữ liệu từ hàm getCharities() .

Lưu ý cách Redux được sử dụng để lưu trữ dữ liệu blockchain trước khi nó được hiển thị trên màn hình.

Số 2: Hiển thị tổ chức từ thiện của người dùng Cập nhật pages/projects.tsx để sử dụng hook useEffect() để nhận tổ chức từ thiện của người dùng hiện tại.

Vui lòng lưu ý việc sử dụng hook useEffect() để truy xuất tổ chức từ thiện của người dùng hiện tại và cách Redux được sử dụng để xử lý và hiển thị dữ liệu từ chuỗi khối trên nhiều thành phần. Đây sẽ là một mẫu lặp lại trên các trang và thành phần.

Số 3: Tạo pages/donations/create.tsx để sử dụng hàm createCharity() để gửi biểu mẫu.

Số 4: Hiển thị pages/donations/[id].tsx để sử dụng các hàm getServerSideProps() , getCharity() và getSupporters() để truy xuất tổ chức từ thiện và người ủng hộ theo Id.

Số 5: Chỉnh sửa các tổ chức từ thiện hiện có Cập nhật pages/donations/edit/[id].tsx để sử dụng hàm getCharity() để truy xuất tổ chức từ thiện theo Id và điền vào các trường biểu mẫu.

Bạn có thấy hàm getCharity() được sử dụng để truy xuất tổ chức từ thiện theo Id cũng như cách nó được sử dụng để điền vào các trường biểu mẫu không?

Các thành phần có Hợp đồng thông minh

Giống như chúng tôi đã làm với các trang ở trên, hãy Cập nhật các thành phần sau để tương tác với hợp đồng thông minh:

Số 1: Xử lý lệnh cấm từ thiện Cập nhật components/Ban.tsx để sử dụng hàm handleBanning() để gọi hàm banCharity() .

Số 2: Xử lý việc xóa từ thiện Cập nhật components/Delete.tsx để sử dụng các hàm handleDelete() và deleteCharity() nhằm thực thi quy trình hủy niêm yết từ thiện.

Số 3: Đóng góp cho tổ chức từ thiện Cập nhật components/Donor.tsx để sử dụng hàm handleSubmit() để gửi khoản thanh toán đến hợp đồng thông minh bằng hàm makeDonation() .

Các thành phần khác

Đây là những thành phần còn lại bạn cũng nên cập nhật vì có tích hợp Redux trong đó.

Thành phần NavBtn Xem xét và cập nhật thành phần cho phép người dùng điều hướng, xóa và chỉnh sửa thông tin từ thiện. Sử dụng Redux để kích hoạt chế độ xóa khi nhấp vào.

Thành phần thanh toán Xem xét và cập nhật việc triển khai Redux để kích hoạt quyên góp, ủng hộ và cấm các phương thức khi nhấp vào các nút tương ứng.

Thành phần hỗ trợ Xem xét và cập nhật việc triển khai Redux để đóng chế độ hỗ trợ khi nhấp vào nút đóng.

Bằng cách triển khai các bản cập nhật này, tất cả các thành phần và trang hiện được kết nối với hợp đồng thông minh, đánh dấu sự hoàn thành của dự án.

Nếu máy chủ Nextjs của bạn ngừng hoạt động trong thời gian này, bạn có thể khởi động lại nó bằng cách chạy yarn dev .

Để tìm hiểu thêm, chúng tôi khuyên bạn nên xem video đầy đủ về công trình này trên kênh YouTube của chúng tôi.

Phần kết luận

Trong hướng dẫn này, chúng tôi đã xây dựng Nền tảng từ thiện phi tập trung bằng cách sử dụng Next.js, Solidity và TypeScript. Chúng tôi thiết lập môi trường phát triển, xây dựng cửa hàng Redux và triển khai hợp đồng thông minh lên blockchain. Bằng cách tích hợp hợp đồng thông minh với giao diện người dùng, chúng tôi đã tạo ra trải nghiệm người dùng liền mạch.

Trong suốt hướng dẫn, bạn đã đạt được những kỹ năng quý giá trong việc xây dựng ứng dụng Web3, tạo hợp đồng thông minh và kết hợp kiểm tra kiểu tĩnh.

Bây giờ, bạn đã sẵn sàng tạo Nền tảng từ thiện phi tập trung của riêng mình. Chúc bạn viết mã vui vẻ và giải phóng sự đổi mới của bạn trong thế giới Web3!