React와 Solidity를 갖춘 이더리움 거래 프로그램 구축 (위)

너는 무엇을 지을 것이냐?라이브demo와 Git 환매Here 참조.온라인 시연은ropsten 테스트 네트워크를 사용합니다.

소개하다.

웹3 운동이 전체 웹에 파문을 일으키면서 개발자로서 이 블록체인 기술의 수혜자 중 하나가 되어야 한다.
그나저나 웹3이 뭐예요?이것은 블록체인의 탈중심화를 바탕으로 한 새로운 버전인 유니버설 네트워크의 개념이다.데이터 자치가 개별 개인이나 회사의 손에 잡히지 않고 전체 네트워크에 배포되는 셈이다.정보는 이제 안전하고 변할 수 없으며 네트워크에 분포될 것이다.
이 자습서는 ReactJs 프런트엔드와 상호 작용하는 분산된 블록체인 애플리케이션을 처음부터 구축하는 방법을 설명합니다.
이것은 두 부분 시리즈의 첫 번째 부분입니다. 저희는 귀하께 블록체인 개발 환경을 구축하는 데 중점을 두고 remix editor에 스마트 계약을 만들 것입니다.

선결 조건

다음은 저와 함께 구축해야 할 프로젝트 목록과 협동하여 일을 할 수 있는 방법에 대한 설명입니다.

Metamask

Remix Editor

Alchamy

ReactJs

Tailwind CSS

Solidity

EthersJs

Faucet

Vite

이 자습서는 Metamask를 브라우저에 설치하는 것부터 시작하여 Google Chrome 브라우저를 사용하는 것을 권장합니다.설치 후, 저희가 프로그램을 구축할 때 거래를 할 수 있도록 지갑에서 무료 이더리움을 받는 방법도 고려할 것입니다.

Metamask 설치

이것link을 가지고 크롬 상점에 가서 위의 그림에 있는 단추를 눌러서 Metamask를 설치하세요.
설치가 완료되면 Metamask에서 계정 생성 과정을 안내할 것입니다. 아래 그림에 따라 조작해야 합니다.




이제 이 Metamask 설치 단계에서 제공된 비디오의 설치 가이드를 따르십시오.다음 그림과 같이 다음 단추를 누르십시오.



계정 생성 과정을 마치면 아래 화면을 볼 수 있습니다.

다음 그림과 같이 네트워크 드롭다운 목록을 클릭하고 빨간색 화살표로 표시하고 테스트 네트워크 표시/숨기기를 선택합니다.

다음 그림과 같이 디스플레이 테스트 네트워크를 전환합니다. 위로 스크롤하고 설정을 닫습니다.

현재 넷워크스 옵션을 누르면 사용자 정의 네트워크를 추가할 수 있는 설정을 포함하는 테스트 네트워크 목록을 볼 수 있습니다. 아래 그림을 참고하십시오.

본 강좌에서 Rinkeby 테스트 네트워크를 사용할 것입니다. 위의 그림에서 보듯이 이 강좌를 클릭하면 이더넷으로 자금을 계속 제공할 것입니다.

당신의 링커비 계좌에 자금을 제공하세요

나는 줄곧 이 계좌를 사용하고 있다. 너는 나의 현재 잔액을 볼 수 있다.만약 당신이 메타 마스크 계정을 만들고 있다면, 당신의 계정은 0 (0) 이 될 것입니다. 그러나 걱정하지 마십시오.계좌 주소 1을 복사합니다. 아래 그림을 보십시오.

계좌 주소는 당신을 가리키며, 누구나 그것을 사용하여 세계 어느 곳에서든 이더리움을 보낼 수 있습니다.복사 주소를 클릭하여 현재 이 주소link를 방문하여 무료 이더리움 테스트 자금을 제공합니다.이러한 이더리움은 가짜여서 진정한 이더리움 네트워크에서 사용할 수 없지만 주요 네트워크에 배치하기 전에 이더리움 스마트 계약을 테스트하는 것이 목적이다.

이 수도꼭지는 너로 하여금 무료 이태리를 지갑에 넣을 수 있게 할 수 있다.무료 이더리움을 받을 수 있는 방법은 무엇입니까? 계좌 1 지갑 주소를 입력하고, 테스트 이더리움 보내기 버튼을 누르십시오.거래는 다음 그림과 같이 약 30초에서 1분 정도 걸린다.

거래가 성사되면 Rinkeby Metamask 계정 1을 확인하면 지갑에 0.1 이더넷이 도착하는 것을 볼 수 있습니다.

이전의 잔액과 새로운 잔액을 비교하면, 당신의 링커비 계좌에서 0.1에틸에테르를 받은 것을 발견할 수 있다.
만약 네가 성공적으로 해낸다면, 너는 감당할 수 없을 것이다.다음에 우리는 계속해서 remix editor를 설정하여 우리의solidity 스마트 계약을 인코딩할 것이다.

스마트 계약 작성

스마트 계약을 만들고, 배치하고, 테스트하기 위해서, 우리는remix 편집기를 사용할 것입니다.remix로 가면 아래 그림과 같은 인터페이스를 볼 수 있습니다.

일단 믹스가 뭐예요?Remix는solidity 프로그래밍 언어로 작성된 스마트 계약을 만들고 컴파일하며 이더리움 블록체인 네트워크에 배치하는 온라인 편집기입니다.
우리는 어떻게 이 스마트 계약을 만듭니까?

스마트 계약을 만들려면remix 편집기에서contracts 폴더를 누르십시오. 아래 목록에 기존 파일의 목록을 보여 줍니다.
다음에 contracts 디렉터리를 오른쪽 단추로 눌러서 Transactions라는 새 파일을 만듭니다.솔, 꼭 적당한 이름을 지어줘야 해.위의 이미지를 참조점으로 사용합니다.
파일을 만들면 위의 그림과 같이 인코딩 인터페이스가 표시됩니다.이제 인코딩을 시작해 보도록 하겠습니다.

// SPDX-License-Identifier: MIT
pragma solidity ^0.8.0;

위의 코드는remix 편집기에서 스마트 계약에 사용할 소프트웨어 허가증과 컴파일러 버전을 알려 줍니다.

contract Transactions {
    address private owner;
    uint256 transactionCounts;
    mapping (address => uint) balanceOf;
}

위 코드는 Transactions라는 Solidity 스마트 계약을 만들었습니다.파일 이름은 스마트 계약과 동일합니다.관례에 따라, 당신의solidity 스마트 계약은 이 규칙을 따른다.
Owner, transaction Counts 및 balance Of는 속성 또는 변수입니다.owner 변수는 지갑 주소만 포함합니다.transaction Counts는 무기호 정수를 가지고 있습니다. balance Of는 우리의 스마트 계약과 상호작용하는 사용자의 주소를 저장하는 그룹입니다.

event Transfer(address indexed sender, address indexed receiver, uint256 amount, string remark, uint256 timestamp);

struct TransferStruct {
    address sender;
    address receiver;
    uint256 amount;
    string remark;
    uint256 timestamp;
}

TransferStruct[] transactions;

이 코드에서 우리는 스마트 계약이 두 계좌 사이에서 이체를 할 때 이체 이벤트를 사용한다고 알려준다.이 이벤트는 발송자와 수신자의 주소, 발송한 금액, 거래에 대한 비고, 거래 발생 시간을 표시하는 시간 스탬프를 기록합니다.
이 밖에 우리는 스마트 계약 거래가 맡을 구조를 정의했다.이것은 사물의 통일을 유지하는 필수 조건이다.마지막으로, 우리는 이 스마트 계약에서 진행되는 모든 업무를 추적하는 사무수 그룹을 정의했다.

constructor() {
    owner = msg.sender;
    balanceOf[tx.origin] = msg.sender.balance;
}

function getOwner() public view returns (address) {
    return owner;
}

function sendMoney(address payable receiver, uint256 amount, string memory remark) public returns(bool success) {
    if (balanceOf[owner] < amount) return false;
    balanceOf[owner] -= amount;
    balanceOf[receiver] += amount;
    transactionCounts += 1;
    transactions.push(
        TransferStruct(
            owner,
            receiver,
            amount,
            remark,
            block.timestamp
        )
    );
    emit Transfer(msg.sender, receiver, amount, remark, block.timestamp);
    return true;
}

function getBalance(address addr) public view returns(uint) {
    return balanceOf[addr];
}

function getAllTransactions() public view returns(TransferStruct[] memory) {
    return transactions;
}

function getTransactionsCount() public view returns(uint256) {
    return transactionCounts;
}

마지막 블록은 여섯 가지 다른 방법이나 함수를 포함하여 이 스마트 계약에서 실행할 수 있다.첫 번째는 구조 함수입니다. 이 스마트 계약을 실행할 때 첫 번째로 실행되는 함수입니다.그것은 소유자를 거래를 보내는 사람으로 설정하고 잔액을 얻는다.
getowner 함수는 이 스마트 계약을 사용하여 거래한 사람의 주소를 되돌려줍니다.
sendMoney 기능은 발송자가 지정한 일정 수량의 이더리움을 수신자에게 옮긴다.이 함수는 발송자와 수신자의 주소, 금액과 거래 비고를 필요로 한다.함수 코드 블록의 논리가 완성되면 전송 이벤트를 보내고 이 이벤트는 터미널에서 볼 수 있습니다.
마지막 세 가지 기능은 그 명칭이 암시하는 직책을 이행한다.이것은 우리 코드의 완전한 버전이다.

너무 좋아요. 믹스 편집기에서 이 코드를 계속 테스트합시다

스마트 계약 작성

우리의 스마트 계약을 컴파일하려면 믹스 편집기의 컴파일 단추를 누르십시오.컴파일러 목록에서 최신 버전을 선택하고 파란색 [컴파일] 버튼을 클릭합니다.올바르게 작동하면 다음 그림에서 유사한 보기를 볼 수 있습니다

현재 "컴파일"옵션에 있는 녹색 체크 탭을 주의하십시오. 이것은 우리의 스마트 계약이 성공적으로 컴파일되었음을 나타냅니다.위의 그림에서 보듯이 우리의 번역에 오류가 없으니 이 스마트 계약을 네트워크에 배치할 때가 되었다

지능형 계약 구축 및 실행

스마트 계약을 배치하려면 배치 옵션을 눌러 환경을 선택하십시오.간단하게 보기 위해 이 과정에서 JavaScript VM(런던)을 사용할 수 있습니다.스마트 계약을 어떻게 배치하는지에 대해 리믹스는 많은 선택을 할 수 있습니다

deploy orange (주황색 배치) 단추를 누르면 터미널에서 업무를 기록합니다.페이지 왼쪽 하단에 배치된 계약 해시 코드를 보고 이더리움 잔액이 감소하는 것을 보실 수 있습니다

거래를 시작하려면 자바스크립트 VM(런던)의 두 번째 계정 주소를 복사하여 위의 그림에서sendMoney 방법의 수신자 주소로 붙여넣으십시오.원하는 금액, 비고를 전달하고transact 단추를 눌러도 됩니다.이것은 입력한 금액을 수취인의 계좌로 즉시 이전하고, 당신도 잔액 검사 기능을 사용하여 그들의 잔액을 검사할 수 있습니다.올바른 부팅은 위 그림을 참조하십시오

놀랍게도 당신은 방금 Solidity 프로그래밍 언어로 당신의 첫 스마트 계약을 완성했습니다.이 강좌의 두 번째 부분에서, 우리는 그것을react 전단과 합병할 것이다.다음 부분에서 보십시오

작성자 정보

포인 다린턴은 2016년에 그의 소프트웨어 엔지니어 여행을 시작했다.여러 해 동안 그는 자바스크립트 창고에서 리액트, 리액트네이티브, VueJs 등 풍부한 기술을 쌓았다

그는 현재 자유직업에 종사하여 고객을 위해 응용 프로그램을 개발하고 기술 강좌를 작성하여 다른 사람에게 그가 하는 일을 가르치고 있습니다

다린턴 복음은 개방되어 당신의 목소리를 들을 수 있습니다.당신은 Facebook,Github 또는 그website를 통해 그에게 연락할 수 있습니다