То, что вы будете создавать, можно посмотреть в в тестовой сети Bitfinity и в . живой демонстрации репозитории git Введение Добро пожаловать в это подробное руководство, в котором мы создадим децентрализованную благотворительную платформу Web3 с использованием Next.js, Solidity и TypeScript. К концу этого урока вы будете иметь четкое представление о: Создание динамических интерфейсов с помощью Next.js Создание смарт-контрактов Ethereum с помощью Solidity Включение статической проверки типов с помощью TypeScript Развертывание и взаимодействие с вашими смарт-контрактами Понимание основ благотворительных платформ на основе блокчейна В качестве бонуса за участие в этом уроке вы можете легко выиграть копию нашей престижной книги о том, как стать востребованным разработчиком . Это предложение бесплатно для первых . Инструкции о том, как выиграть, смотрите в коротком видео ниже. Solidity 300 человек Предварительные условия Для сборки вместе со мной вам понадобятся следующие инструменты: Node.js Пряжа Гит Баш МетаМаска Next.js Солидность Инструментарий Redux CSS попутного ветра Чтобы настроить MetaMask для этого урока, посмотрите обучающее видео ниже: https://www.youtube.com/watch?v=qV1mbFOtkxo&embedable=true После завершения настройки вы имеете право получить бесплатную копию нашей книги. Чтобы заявить права на свою книгу, . заполните форму и отправьте подтверждение работы Посмотрите следующие , чтобы получить до 3 месяцев бесплатных курсов премиум-класса на обучающие видеоролики Академия наставников Dapp, в том числе: Курс по Fullstack NFT-минтингу Курс Fullstack NFT Marketplace Курс Fullstack Blockchain и т. д. Начните свое путешествие с Bitfinity сегодня. Испытайте быстрый, простой и беспроблемный процесс разработки, создав свое первое децентрализованное приложение для отслеживания благотворительных пожертвований. Разверните свои смарт-контракты в сети Bitfinity и окажите положительное влияние. С учетом сказанного, давайте перейдем к руководству и настроим наш проект. Настраивать Мы начнем с клонирования подготовленного репозитория внешнего интерфейса и настройки переменных среды. Выполните следующие команды: git clone https://github.com/Daltonic/dappFundsX cd dappFundsX yarn install git checkout no_redux_no_blockchain Затем создайте файл в корне проекта и включите в него следующие ключи: .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 Замените и на соответствующие идентификаторы вашего проекта. <YOUR_ALCHEMY_PROJECT_ID> <WALLET_CONNECT_PROJECT_ID> : : YOUR_ALCHEMY_PROJECT_ID получите ключ здесь WALLET_CONNECT_PROJECT_ID получите ключ здесь Наконец, запустите , чтобы запустить проект. yarn dev Наш интерфейс для этого проекта надежен и готов к некоторой интеграции смарт-контрактов, но нам понадобится Reduxify нашего приложения, чтобы обеспечить общее пространство данных. Создание магазина Redux На изображении выше представлена структура нашего хранилища Redux, она будет простой, поскольку мы не создаем какой-то слишком сложный проект. Мы настроим Redux для управления глобальным состоянием нашего приложения. Следуй этим шагам: Создайте папку в корне проекта. store Внутри создайте две папки: и . store actions states Внутри создайте файл . states globalStates.ts https://gist.github.com/Daltonic/157a49fef39e3a1ac8b9a8883c6213f8?embedable=true Внутри создайте файл . actions globalActions.ts https://gist.github.com/Daltonic/c2217eff616b28a2261888ba77c236e7?embedable=true Создайте файл в папке . globalSlices.ts store https://gist.github.com/Daltonic/69a29357cf1b9484425776a6ad4b26dd?embedable=true Создайте файл внутри папки . index.ts store https://gist.github.com/Daltonic/7b3a9db8902d8ce831384ad42ca7231b?embedable=true Обновите с помощью провайдера Redux. pages/_app.ts https://gist.github.com/Daltonic/ef67f453bc38c4038edc627644d25e2a?embedable=true Наше приложение было создано с помощью набора инструментов Redux, и мы вернемся к Redux при интеграции серверной части с внешним интерфейсом. Разработка смарт-контрактов Далее мы разработаем смарт-контракт для нашей платформы: Создайте папку в корне проекта. contracts Внутри создайте файл и добавьте приведенный ниже код контракта. contracts DappFund.sol https://gist.github.com/Daltonic/4e3f367d2b3a2227c951e74f4d58cbe8?embedable=true Контракт будет способствовать созданию, обновлению и пожертвованиям благотворительным организациям, а также выполнять административные функции, такие как изменение налога на благотворительность и запрет благотворительной деятельности. DappFund Вот разбивка по функциям: : эта функция устанавливает первоначальный налог на благотворительность при развертывании контракта. Он выполняется только один раз во время развертывания контракта. constructor() : эта функция позволяет пользователям создавать новую благотворительную организацию. Для этого требуется несколько параметров, таких как имя, описание, изображение, профиль и сумма благотворительной помощи. Он проверяет корректность этих параметров, затем создает новую и добавляет ее в сопоставление . createCharity() CharityStruct charities : эта функция позволяет владельцу благотворительной организации обновлять ее данные. Прежде чем обновлять сведения о благотворительной организации, он проверяет, существует ли благотворительная организация и является ли отправитель ее владельцем. updateCharity() : эта функция позволяет владельцу благотворительной организации пометить ее как удаленную. Он проверяет, что благотворительная организация существует и что отправитель является ее владельцем, прежде чем пометить ее как удаленную. deleteCharity() : эта функция позволяет владельцу контракта запретить или снять запрет на благотворительность. Он проверяет существование благотворительной организации, прежде чем изменить ее запрещенный статус. toggleBan() : эта функция позволяет пользователям делать пожертвования на благотворительность. Он проверяет, что благотворительная организация существует, не запрещена и еще не достигла цели по сбору средств. Затем он увеличивает общее количество пожертвований, создает новый и добавляет его в сопоставление . Он также обновляет собранную сумму и количество пожертвований на благотворительность. donate() SupportStruct supportersOf : эта функция позволяет владельцу контракта изменить налог на благотворительность. Перед обновлением налога проверяется, что новый процент налога действителен. changeTax() : эта функция позволяет любому получить подробную информацию о благотворительной организации. Он возвращает , связанный с данным идентификатором. getCharity() CharityStruct : эта функция позволяет любому получить подробную информацию обо всех активных благотворительных организациях. Он возвращает массив объектов . getCharities() CharityStruct : эта функция позволяет пользователю получить подробную информацию обо всех своих активных благотворительных организациях. Он возвращает массив объектов . getMyCharities() CharityStruct : эта функция позволяет любому получить подробную информацию обо всех сторонниках конкретной благотворительной организации. Он возвращает массив объектов . getSupports() SupportStruct : эта внутренняя функция используется для перевода средств. Он отправляет указанное количество эфира на указанный адрес. payTo() : эта внутренняя функция возвращает текущее время в секундах с начала эпохи Unix. Он используется для отметки времени пожертвований и благотворительных проектов. currentTime() Развертывание и развертывание контрактов Теперь давайте развернем наш смарт-контракт и заполним его фиктивными данными: Создайте папку в корне проекта. scripts Внутри создайте файлы и и добавьте следующие коды. scripts deploy.js seed.js Развернуть скрипт https://gist.github.com/Daltonic/e4038d184c36bf69ac9b6b75da321ca1?embedable=true Исходный скрипт https://gist.github.com/Daltonic/65ca0f2dfdf0ec91bfcf78f49654b36e?embedable=true Выполните следующие команды, чтобы развернуть контракт и заполнить его данными: 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 Если вы сделали это правильно, вы должны увидеть аналогичный результат, подобный приведенному ниже: На этом этапе мы можем начать интеграцию нашего смарт-контракта в наш интерфейс. https://www.youtube.com/watch?v=mVxRzkvX_w0&embedable=true Фронтенд-интеграция Сначала создайте папку в корне проекта и внутри нее создайте файл . Этот файл будет содержать функции для взаимодействия с нашим смарт-контрактом. services blockchain.tsx https://gist.github.com/Daltonic/449b493fe7492386f6221329f3ee918b?embedable=true Предоставленный код представляет собой реализацию TypeScript нашего сервиса блокчейна для взаимодействия с нашим смарт-контрактом. Этот сервис позволяет пользователям выполнять действия на нашей благотворительной платформе, включая создание и обновление благотворительных организаций, внесение пожертвований и многое другое. Вот разбивка по функциям: : эта функция получает экземпляры контракта Ethereum, с которыми будет взаимодействовать сервис. Он проверяет, есть ли у пользователя подключенная учетная запись Ethereum, и использует ее для взаимодействия с контрактом, в противном случае он использует случайно созданный кошелек. getEthereumContracts() : эта функция возвращает владельца контракта. getAdmin() , , : эти функции извлекают все благотворительные организации, благотворительные организации, созданные текущим пользователем, и конкретную благотворительную организацию по ее идентификатору соответственно. getCharities() getMyCharities() getCharity() : эта функция выбирает сторонников конкретной благотворительной организации по ее идентификатору. getSupporters() , : эти функции позволяют пользователю создать новую благотворительную организацию или обновить существующую благотворительную организацию соответственно. createCharity() updateCharity() : эта функция позволяет пользователю сделать пожертвование на конкретную благотворительную организацию. makeDonation() : эта функция позволяет владельцу благотворительной организации удалить ее. deleteCharity() : эта функция позволяет владельцу контракта запретить благотворительную деятельность. banCharity() , : это вспомогательные функции, которые структурируют возвращаемые данные из контракта в более удобный формат. structuredCharities() structuredSupporters() Обновите файл внутри , чтобы включить сеть , используя следующие коды. provider.tsx services bitfinity https://gist.github.com/Daltonic/88476a8b642f0d1f879644ce7521e735?embedable=true Страница, взаимодействующая со смарт-контрактом Далее мы свяжем функции службы блокчейна с соответствующими интерфейсами во внешнем интерфейсе: для получения данных из функции . Нет 1: отображение всех pages/index.tsx getCharities() https://gist.github.com/Daltonic/c7b5205c0a352e715ea6d369c4c5a739?embedable=true Обратите внимание, как Redux используется для хранения данных блокчейна перед их отображением на экране. Обновите , чтобы использовать ловушку для получения благотворительной деятельности текущего пользователя. Нет 2: Отображение благотворительной деятельности пользователя. pages/projects.tsx useEffect() https://gist.github.com/Daltonic/55de269f6d41727ad2ca283adfea241e?embedable=true Обратите внимание на использование перехватчика для получения информации о благотворительных организациях текущего пользователя и на то, как Redux используется для обработки и отображения данных из блокчейна в нескольких компонентах. Это будет повторяющийся шаблон на страницах и компонентах. useEffect() Обновите , чтобы использовать функцию для отправки форм. № 3: Создание новых благотворительных организаций. pages/donations/create.tsx createCharity() https://gist.github.com/Daltonic/58f3f813b5ee8bad45815545734c7410?embedable=true № 4: Отображение для использования функций , и для получения информации о благотворительной организации и сторонниках по идентификатору. pages/donations/[id].tsx единого обновления благотворительной организации getServerSideProps() getCharity() getSupporters() https://gist.github.com/Daltonic/96c4908e8a5406ab4e85822bb16a4b6f?embedable=true Обновите , чтобы использовать функцию для получения благотворительной помощи по идентификатору и заполнения полей формы. № 5: Редактирование существующих благотворительных организаций. pages/donations/edit/[id].tsx getCharity() https://gist.github.com/Daltonic/045ec20e60ba4aaac4d9ae62620bff51?embedable=true Вы видели, как функция использовалась для получения благотворительной помощи по идентификатору, а также как она использовалась для заполнения полей формы? getCharity() Компоненты со смарт-контрактом Как и на страницах выше, давайте обновим следующие компоненты для взаимодействия со смарт-контрактом: Обновите , чтобы использовать функцию для вызова функции . № 1: Обработка запрета на благотворительность components/Ban.tsx handleBanning() banCharity() https://gist.github.com/Daltonic/3890759a4c5a9d83b292c1e8cbb31d91?embedable=true , чтобы использовать функции и для выполнения процедуры исключения благотворительной организации из списка. № 2: Обработка удаления благотворительной организации Обновите components/Delete.tsx handleDelete() deleteCharity() https://gist.github.com/Daltonic/a9dd133448062c32990435e9a762d17d?embedable=true Обновите , чтобы использовать функцию для отправки платежа в смарт-контракт с помощью функции . № 3: Делаем пожертвования на благотворительность. components/Donor.tsx handleSubmit() makeDonation() https://gist.github.com/Daltonic/9e82883fd17884330d2a82d5cf641eae?embedable=true Другие компоненты Вот остальные компоненты, которые вам также следует обновить, поскольку в них интегрирован Redux. Просмотрите и обновите компонент, который позволяет пользователям перемещаться, удалять и редактировать информацию о благотворительной деятельности. Используйте Redux, чтобы вызвать модальное удаление при нажатии. Компонент NavBtn. https://gist.github.com/Daltonic/38280dec93f6046187f4e438dbbb9007?embedable=true Пересмотрите и обновите реализацию Redux, чтобы модальные окна пожертвований, поддержки и запрета запускались при нажатии соответствующих кнопок. Платежный компонент. https://gist.github.com/Daltonic/37f2724bec3380f9ff6dbf7771278541?embedable=true Просмотрите и обновите реализацию Redux, чтобы модальное окно поддержки закрывалось при нажатии кнопки закрытия. Компонент поддержки. https://gist.github.com/Daltonic/59c6788386f9e0bc28b93094da25fa14?embedable=true Благодаря внедрению этих обновлений все компоненты и страницы теперь подключены к смарт-контракту, что означает завершение проекта. Если ваш сервер все это время не работал, вы можете снова запустить его, запустив . Nextjs yarn dev Для дальнейшего обучения рекомендуем посмотреть полное видео этой сборки на нашем . YouTube-канале Заключение В этом уроке мы создали децентрализованную благотворительную платформу с использованием Next.js, Solidity и TypeScript. Мы настроили среду разработки, создали хранилище Redux и развернули смарт-контракт в блокчейне. Интегрировав смарт-контракт с интерфейсом, мы создали удобство взаимодействия с пользователем. В ходе обучения вы приобрели ценные навыки в создании приложений Web3, разработке смарт-контрактов и внедрении статической проверки типов. Теперь вы готовы создать свою собственную децентрализованную благотворительную платформу. Удачного программирования и раскрытия своих инноваций в мире Web3!
