Những gì bạn sẽ xây dựng, hãy xem tại mạng thử nghiệm Bitfinity và . bản demo trực tiếp 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 theo yêu cầu. Ưu đãi này miễn phí cho đầ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. vững chắc 300 ngườ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: https://www.youtube.com/watch?v=qV1mbFOtkxo&embedable=true 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 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 các video hướng dẫ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 ở thư mục gốc của dự án và bao gồm các khóa sau: .env 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ế và bằng ID dự án tương ứng của bạn. <YOUR_ALCHEMY_PROJECT_ID> <WALLET_CONNECT_PROJECT_ID> : : 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 để bắt đầu dự án. yarn dev 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: Tạo một thư mục ở thư mục gốc của dự án. store Bên trong , tạo hai thư mục: và . store actions states Bên trong , tạo tệp . states globalStates.ts https://Gist.github.com/Daltonic/157a49fef39e3a1ac8b9a8883c6213f8?embedable=true Bên trong , tạo tệp . actions globalActions.ts https://Gist.github.com/Daltonic/c2217eff616b28a2261888ba77c236e7?embedable=true Tạo tệp bên trong thư mục . globalSlices.ts store https://Gist.github.com/Daltonic/69a29357cf1b9484425776a6ad4b26dd?embedable=true Tạo một tệp bên trong thư mục . index.ts store https://Gist.github.com/Daltonic/7b3a9db8902d8ce831384ad42ca7231b?embedable=true Cập nhật tệp với nhà cung cấp Redux. pages/_app.ts https://Gist.github.com/Daltonic/ef67f453bc38c4038edc627644d25e2a?embedable=true Ứ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: Tạo một thư mục ở thư mục gốc của dự án. contracts Bên trong , tạo tệp và thêm mã hợp đồng bên dưới. contracts DappFund.sol https://Gist.github.com/Daltonic/4e3f367d2b3a2227c951e74f4d58cbe8?embedable=true Hợp đồng 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. DappFund Đây là bảng phân tích theo từng chức năng: : 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. constructor() : 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 mới và thêm nó vào ánh xạ . createCharity() CharityStruct charities : 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. updateCharity() : 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. deleteCharity() : 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. toggleBan() : 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 mới và thêm nó vào ánh xạ . 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. donate() SupportStruct supportersOf : 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ế. changeTax() : 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ề được liên kết với ID đã cho. getCharity() CharityStruct : 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 . getCharities() CharityStruct : 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 . getMyCharities() CharityStruct : 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 . getSupports() SupportStruct : 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. payTo() : 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. currentTime() 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ả: Tạo một thư mục ở thư mục gốc của dự án. scripts Bên trong , hãy tạo tệp và hạt rồi thêm các mã sau. scripts deploy.js seed.js Triển khai tập lệnh https://Gist.github.com/Daltonic/e4038d184c36bf69ac9b6b75da321ca1?embedable=true Tập lệnh hạt giống https://Gist.github.com/Daltonic/65ca0f2dfdf0ec91bfcf78f49654b36e?embedable=true 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. https://www.youtube.com/watch?v=mVxRzkvX_w0&embedable=true Tích hợp giao diện người dùng Đầu tiên, tạo một thư mục ở thư mục gốc của dự án và bên trong nó, tạo tệp . 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. services blockchain.tsx https://Gist.github.com/Daltonic/449b493fe7492386f6221329f3ee918b?embedable=true 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: : 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. getEthereumContracts() : Hàm này trả về chủ sở hữu của hợp đồng. getAdmin() , , : 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 đó. getCharities() getMyCharities() getCharity() : 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 đó. getSupporters() , : 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ó. createCharity() updateCharity() : 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ể. makeDonation() : Chức năng này cho phép chủ sở hữu tổ chức từ thiện xóa nó. deleteCharity() : Chức năng này cho phép chủ sở hữu hợp đồng cấm tổ chức từ thiện. banCharity() , : Đâ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. structuredCharities() structuredSupporters() Cập nhật tệp bên trong để bao gồm mạng bằng các mã sau. provider.tsx services bitfinity https://Gist.github.com/Daltonic/88476a8b642f0d1f879644ce7521e735?embedable=true 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: Cập nhật để lấy dữ liệu từ hàm . Số 1: Hiển thị tất cả các trang Charities pages/index.tsx getCharities() https://Gist.github.com/Daltonic/c7b5205c0a352e715ea6d369c4c5a739?embedable=true 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. Cập nhật để sử dụng hook để nhận tổ chức từ thiện của người dùng hiện tại. Số 2: Hiển thị tổ chức từ thiện của người dùng pages/projects.tsx useEffect() https://Gist.github.com/Daltonic/55de269f6d41727ad2ca283adfea241e?embedable=true Vui lòng lưu ý việc sử dụng hook để 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. useEffect() để sử dụng hàm để gửi biểu mẫu. Số 3: Tạo pages/donations/create.tsx createCharity() https://Gist.github.com/Daltonic/58f3f813b5ee8bad45815545734c7410?embedable=true để sử dụng các hàm , và để truy xuất tổ chức từ thiện và người ủng hộ theo Id. Số 4: Hiển thị pages/donations/[id].tsx getServerSideProps() getCharity() getSupporters() https://Gist.github.com/Daltonic/96c4908e8a5406ab4e85822bb16a4b6f?embedable=true Cập nhật để sử dụng hàm để truy xuất tổ chức từ thiện theo Id và điền vào các trường biểu mẫu. Số 5: Chỉnh sửa các tổ chức từ thiện hiện có pages/donations/edit/[id].tsx getCharity() https://Gist.github.com/Daltonic/045ec20e60ba4aaac4d9ae62620bff51?embedable=true Bạn có thấy hàm đượ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? getCharity() 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: Cập nhật để sử dụng hàm để gọi hàm . Số 1: Xử lý lệnh cấm từ thiện components/Ban.tsx handleBanning() banCharity() https://Gist.github.com/Daltonic/3890759a4c5a9d83b292c1e8cbb31d91?embedable=true Cập nhật để sử dụng các hàm và nhằm thực thi quy trình hủy niêm yết từ thiện. Số 2: Xử lý việc xóa từ thiện components/Delete.tsx handleDelete() deleteCharity() https://Gist.github.com/Daltonic/a9dd133448062c32990435e9a762d17d?embedable=true Cập nhật để sử dụng hàm để gửi khoản thanh toán đến hợp đồng thông minh bằng hàm . Số 3: Đóng góp cho tổ chức từ thiện components/Donor.tsx handleSubmit() makeDonation() https://Gist.github.com/Daltonic/9e82883fd17884330d2a82d5cf641eae?embedable=true 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 đó. 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 NavBtn https://Gist.github.com/Daltonic/38280dec93f6046187f4e438dbbb9007?embedable=true 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 thanh toán https://Gist.github.com/Daltonic/37f2724bec3380f9ff6dbf7771278541?embedable=true 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. Thành phần hỗ trợ https://Gist.github.com/Daltonic/59c6788386f9e0bc28b93094da25fa14?embedable=true 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ủ 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 . Nextjs 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 của chúng tôi. kênh YouTube 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!
