Ссылка на источник: https://mirror.xyz/0x769699506f972A992fc8950C766F0C7256Df601f/iqlB8bddq3Rgv7fFc455OfqMNDf6M0hIEo1dWqlkohY

1 Запустите версию 1.0 локально

Попытаемся запустить версию 1.0 локально.

Версия 1.0 не требует от нас особых действий. Нам просто нужно клонировать репозиторий и запустить её.

1.1 Загрузите код, переключите ветвь и инициализируйте подмодули

Сначала создайте форк:

https://github.com/leeduckgo/set-purpose
image-20211002001028548

Затем клонируйте его.

image-20211002001126440

# clone Repo / клонируйте репозиторий
git clone [forked repo]
# example: git clone https://github.com/WeLightProject/set-purpose.git
cd set-purpose
# Checkout another branch / проверьте другую ветвь
git checkout feat/v0x01
# Initialized submodules  / инициализируйте субмодули
git submodule update --init packages/hardhat/contracts

1.2 Установка зависимостей

yarn

1.3 Запуск локальной тестовой сети

yarn chain

[image-20211001211834038]

1.4 Задеплойте контракты!

yarn deploy

image-20211001220413508

1.5 Запустите приложение в другом терминале

yarn start

1.6 Откройте в браузере!

Доступ к приложению:

http: // localhost: 3000

Теперь вы можете видеть свое приложение.

image-20211001220814439

2 Развертывание исходного кода контракта

pragma solidity >=0.8.0 <0.9.0; // Solidity version
//SPDX-License-Identifier: MIT
​
import "hardhat/console.sol";
// The reason why we import console.sol : https://hardhat.org/tutorial/debugging-with-hardhat-network.html, simply that we can do console.log in our contract.
//import "@openzeppelin/contracts/access/Ownable.sol"; //https://github.com/OpenZeppelin/openzeppelin-contracts/blob/master/contracts/access/Ownable.sol
​
contract PurposeHandler { // Name of contract
​
//event SetPurpose(address sender, string purpose);
​
string public purpose = "Building Unstoppable Apps!!!"; // define and assign a variable purpose. This variable is directly stored on the blockchain. That is the unique feature of solidity: Assign is storing.
​
constructor() {
  // what should we do on deploy?
}
​
function setPurpose(string memory newPurpose) public {
    // A function that pass newPurpose as parameter
    // You can learn more about memory/storage:
    // https://learnblockchain.cn/2017/12/21/solidity_reftype_datalocation
    purpose = newPurpose; // Update purpose to be newPurpose
    console.log(msg.sender,"set purpose to",purpose);
    //emit SetPurpose(msg.sender, purpose);
}
}

3 Разверните свое приложение на Github-страницы.

Поскольку наше приложение web3.0 - это чисто фронт-энд приложение, нам не нужно покупать или арендовать сервер. Мы можем просто развернуть приложение на GitHub.

3.1 Переключите сеть на тестовую в приложении React

Ага! Вот первая часть, в которой нам нужно изменить наш код. Найдите следующий код в  packages/react-app/src/App.jsx:

const targetNetwork = NETWORKS.localhost; // <------- select your target frontend network (localhost, rinkeby, xdai, mainnet)

Переключите localhost на тестовую сеть, которую мы хотим развернуть, например ropsten.

const targetNetwork = NETWORKS.ropsten;

Затем мы обновляем страницу и видим, что появляется предупреждение о подключении к тестовой сети.

image-20211001232356720

Используйте Metamask для подключения к тестовой сети. Перед этим нам понадобится немного ETH для вызова контракта:

Кран Ropsten находится по ссылке:https://faucet.ropsten.be/

3.2 Переключите сеть на Ropsten в Hardhat

Это определяет, к какой сети мы подключаемся в Hardhat.

Перейдите в packages/hardhat/hardhat.config.js:

const defaultNetwork = "localhost";

Измените localhost на ropsten。

const defaultNetwork = "ropsten";

3.3 Повторно разверните контракта

Поскольку мы изменили сеть, нам нужно повторно задеплоить наш контракт. Нам нужно сгенерировать новый адрес в hardhat:

yarn run generate

Совет № 1：Вы можете увидеть все команды в package.json!

image-20211001234607175

Советы №2: основные команды:

git basic commands:git add . # add all changes
git commit -m "[msg]" # commit all changes
git push

Итак, теперь у нас есть новый адрес ETH 0x1c95a91e74872ead0a4c726712cfdfab3292f284. Мы будем использовать этот адрес для развертывания контрактов.

Давайте получим тестовый ETH для адреса:

image-20211001234619304

Затем запустите yarn deploy:

image-20211001234758890

Ок, теперь наш контракт находится в тестовой сети Ropsten!

https://ethereum.stackexchange.com/questions/65589/return-a-mapping-in-a-getall-function

Мы можем найти его на Etherscan:

image-20211001234830483

3.3 Создание статических веб-сайтов.

Сначала нам нужно создать новую ветку для размещения всех статические веб-сайты:

git checkout -b gh-pages

Лучше всего поместить эту ветку в другую папку, чтобы наши изменения в gh-pages не повлияли на другие файлы:

git checkout feat/v0x01
git worktree add ../set_purpose_gh_pages gh-pages

Выполните следующие команды и будут созданы статические страницы, которые могут быть размещены на Github-страницах:

yarn build
image-20211002000250805

Веб-сайты создаются в packages/react-app/build, затем мы копируем файлы папки в папку docs:

mkdir docs
cp -r packages/react-app/build/* ../set_purpose_gh_pages/docs
image-20211002000605549

Удалите остальные папки:

rm -rf packages package.json yarn.lock node_modules

Все отлично! Запушим эту ветку:

g add .
g commit -m "feat/init gh-pages"
git push --set-upstream origin gh-pages

3.4 Настройки Github-страниц

Нам все еще нужно что-то настроить на страницах репозитория Github. Мы заходим в Settings>Pages ,чтобы установить значения Branches и Folder.

image-20211002002301741

Щелкните ссылку в зеленом поле. Теперь мы видим первое созданное нами приложение web3 Dapp!

https://leeduckgo.github.io/set-purpose
image-20211002005210633

Советы № 3: подмодуль Git

Иногда наш репозиторий может полагаться на другие репозитории. Поэтому нам нужно использовать Git Submodule.

Помимо этого, нам нужно разбить фрагменты кода, чтобы улучшить структуру проекта.

Например, в этом руководстве мы разделили код set-purpose и set-purpose-contracts.

Вот шпаргалка по командам подмодуля git submodule:

# browse the help
git submodule -h
# add submodule
git submodule add https://github.com/leeduckgo/set-purpose-contracts.git
# clone all the submodules of repo
git clone --recurse-submodules https://github.com/leeduckgo/set-purpose.git
# only update selected submodule
# --init is the parameter required for the first update. The following is the path of submodule.
git submodule update --init packages/hardhat/contracts