RedwoodJS를 사용하여 이더리움 프로그램 만들기

14760 단어 ethereum redwoodjs development gatsby

RedwoodJS는 Dapp 개발에 적합합니다.이 간단한 강좌에서 너는 그 중의 원인을 이해할 것이다.

This and other great content is also available on my personal blog https://patrickgallagher.dev Pssst…. I have proper code-blocks!

이 코드에서 레드우드 JS를 사용하여 이더리움 프로그램을 만드는 방법을 소개합니다.레드우드는 이더리움과 관련된 관건적인 장점은graphql을 위해 구축된 것이다.내 말은 게이츠비처럼레드우드는 graphql에 아주 뛰어나다.만약 당신이 도형을 이용하여 DAPP를 구축하는 것에 익숙하다면 이것은 독각수와 무지개로 창조적인 사고 공간을 개척하는 데 도움이 될 것이다.
어느 정도는 레드우드로 자신의'가난한 사람 그림'(James Young이 그렇게 부른다)을 만들 수 있다. 아주 적은 노력만 하면 된다.특히 Prisma의 우수한 직원들에게 감사를 드립니다. 두 번째 버전을 개발하기 위해 노력하고 있습니다. 이것이 바로 레드우드가 사용하고 있는 것입니다.최초의 Prisma v1과 Gatsby를 사용하여 이 프로그램을 만드는 데 몇 주가 걸릴 수도 있지만, 나는 이곳에서 며칠밖에 걸리지 않았다.홍삼팀은 신기한 것들을 만들었다.
제가 devops 흐름이 간단하다고 했나요?이 모든 것 은 언뜻 보면 무섭겠지만, 나 를 믿어라 — 너는 곧 홍삼을 사랑하게 될 것이다.
알아요, 알아요. 당신은 계단 증상이 있어요. 단지 그들을 떠나고 싶을 뿐이에요.다행히도, 이 귀여운 하위 그림을 레드우드에 직접 삽입할 수 있습니다.첫 번째 프로그램을 원생 홍목 도구로 처리하면 그래프를 자신 있게 추가할 수 있습니다.
그럼 뭘 기다리고 있는 거야?해봐!

yarn create redwood-app ./redwoodblog

그런데 패트릭, 우리는 무엇을 짓고 있습니까?

다음은 제가 Essenator를 만드는 대략적인 절차입니다. 이것은 hackathon에서 제출한 파일입니다. 최근에 Gitcoin에 위탁 관리된 초유체 hackathon에 사용됩니다.
그 기본 사상은 다음과 같다.

NFT 시리즈를 만들고 경매할 수 있습니다.

모든 NFT 계약은 자신의 경매 페이지를 가지고 있다.

우리는 배치된 매번 새로운 경매를 추적하고 체인에 있는 데이터 이외의 더 많은 정보를 보여주기를 희망한다(우리가 블록체인을 가지기 전에 데이터베이스를 사용했을 때를 기억하십니까?)

레드우드 웹3 응용 프로그램 설명: https://emanator.patrickgallagher.dev

Hackathon 제출 + 서면: https://github.com/superfluid-finance/superfluid-protocol-preview/pull/8

출처: https://github.com/emaNaFTe/monorepo.

👩‍💻 응용 프로그램 설정

다음 레드우드 명령은 익숙한 코드 생성기와 템플릿처럼 업무를 방해하지 않고 일련의 작업을 수행할 수 있습니다.

yarn rw generate layout default
yarn rw generate page home /
yarn rw generate page auction {auctionAddress}

마지막 명령은 우리가 필요로 하는 모든 경로를 설정해서 표지부를 사용하여 특정한 경매를 내비게이션할 수 있도록 한다.이런 상황에서 우리는 경매 주소라고 부른다.

🤖 데이터베이스 설정

구조를 갱신하다.prisma 경매 대상 추가.나는 계약이 아직 다 되지 않았기 때문에 내가 쓸모 있다고 생각하는 것들을 만들었을 뿐이다.

model Auction {
  id Int @id @default(autoincrement())
  address String @unique
  name String
  winLength Int
  owner String
  description String?
  createdAt DateTime @default(now())
  status String @default("started")
  highBid Int @default(0)
  generation Int @default(0)
  revenue Int @default(0)
}

현재 우리는 로컬 개발 데이터베이스를 만들 수 있다

yarn rw db save
yarn rw db up

마지막으로 우리는 모델을 사용할 것이다.prisma는 우리를 위해 일부 부품을 생산할 것이다.

yarn rw generate scaffold Auction

이 명령은 편집/삭제 기능도 제공(블록체인은 변하지 않습니까?)그래서 나는 루스에서 이 구성 요소와 루스를 삭제했다.js
번영!작업의 전단과 후단우리는 이제 가상 데이터를 입력함으로써 새로운 경매를 만들 수 있어야 한다.

✍ 테이블 편집

경매표를 제출할 때 계약을 배치할 수 있도록 기능을 추가해야 합니다.일단 우리가 새로운 경매를 배치할 수 있다면, 우리는 계약 주소와 소유자 주소를 사용하여 우리의 데이터베이스를 채울 수 있다.

웹/src/웹3/deploy에 웹3 배치 기능을 추가했습니다.js, 폼 데이터를 가져와 사용자의 지갑에 계약서를 배치합니다.다음 그림과 같이 deployAuction()의 반환 값을 기존 경매에 추가합니다.

// web/src/components/NewAuction/NewAuction.js
const onSave = async (input) => {
  const { address, owner, error } = await deployAuction(input)
  if (error) return console.log(error.message)
  createAuction({ variables: { input: { ...input, address, owner } } })
}

🐕 웹3 데이터 가져오기

이제 계약을 배치할 수 있습니다. 웹 3 데이터를 응용 프로그램에 가져와야 합니다.나는 홍목 요리책 Using a Third Party API 에서 이 일을 하기 위해 한 페이지를 골랐다.나는 앞쪽이 아닌 서버를 사용해서 웹3 전화를 걸기로 했다.이렇게 하면 일을 더욱 간단하게 할 수 있다.
왜?레드우드는 그래프ql 데이터를 아주 잘 사용하기 때문이다.따라서, 만약 내 서버가graphql 형식으로 모든 내용을 출력할 수 있다면, 응용 프로그램은 느리고 비동기적인 웹 3 데이터를 요청하고 있다는 것을 알지 못할 것이다.이것 또한 더욱 좋은 안전성을 의미한다.기술적으로 당신의 Infura/provider 키를 FE에 두어서는 안 된다는 것을 기억하십니까? 그러나 모든 사람들이 이렇게 합니까?
우선'웹3'라는 새 SDL을 만들었어요.웹 3에서 모드를 정의합니다.sdl.js.

type Web3User {
     superTokenBalance: String!
     isSubscribed: Boolean!
   }

   type Query {
     web3User(address: String!, auctionAddress: String!): Web3User!
     // ...
   }

여기에서, 나는 레드우드가 만든graphql 형식에 따라 SDL과 서비스를 명명하는 모델을 따르지 않았다. (예를 들어 'Web3 Action' 과 'Web3 User')

Note: Since web3 data is external to our database, we do not need to update our graphql schema.prisma. Additionally, we cannot use the yarn rw scaffold command since it relies on schema.prisma.

서비스 파일 서비스/웹 3/웹 3 만들기.js.

yarn rw g service web3

Web3/ethers를 사용하여 Web3 호출을 추가합니다.그리고 graphql 놀이공원http://localhost:8911/graphql에서 검색어를 작성할 수 있습니다.

query GET_WEB3_USER($address: String!, $auctionAddress: String!) {
      web3User(address:$address, auctionAddress: $auctionAddress) {
      superTokenBalance
      isSubscribed
   }

💅 웹3 데이터 보이기

현재 우리는 새로운 웹 3 조회를 가지고 있는데, 우리의 데이터 원본에 따라 두 가지 방법으로 그것들을 사용할 수 있다. 그것이 바로 웹 3 또는 웹 3 + 웹 2 이다
웹3 전용 — 새 구성 요소 만들기
사용자에 대해 나는 웹3 데이터에만 관심을 가지기 때문에 새로운 단원과 구성 요소를 만드는 것을 선택했다.프리스마부터 시작해 봐.이 정의 모드가 없습니다. 이전에 작성한 예쁜graphql 조회를 새 '단원' 에 수동으로 추가해야 합니다.

yarn rw g cell web3User
yarn rw g component web3User

web3+web2 — 기존 구성 요소와 결합
경매에 있어서, 나는Prisma 데이터베이스와 웹3의 데이터를 사용하고 싶어서, 나는 새로운 조회를 옥션셀의 기존 조회에 추가하는 것을 선택했다.js.나는 이 때문에 어떤 새로운 부품도 제조하지 않았다.

query FIND_AUCTION_BY_ADDRESS($address: String!) {
  auction(address: $address) {
    id
    name
    address
    description
    createdAt
    revenue
    winLength
    owner
  }
  // NEW STUFF
  web3Auction(address: $address) {
    endTime
    lastBidTime
    auctionBalance
    highBid
    highBidder
    status
  }
}

⏳ 업데이트 유지

Web3 데이터를 사용하여 프로그램을 빠르게 업데이트하는 방법으로AuctionCell에 다음과 같은 기능을 추가했습니다.js 및 Web3Usercelljs(Generating a Cell 참조).이로 인해 Apollo 클라이언트는 캐시에 의존하지 않고 5초에 한 번씩 돌아가기 때문에 서버는 실제적으로 웹3 호출을 다시 해야 한다.이 책은 더 좋은 방법으로 할 수 있지만, 현재로서는 아직 효과가 있다.

export const beforeQuery = (props) => {
  return { variables: props, fetchPolicy: 'network-only', pollInterval: 5000 }
}

🏅 도전하다 — 데이터베이스와 Web3 동기화 유지

현재, 새로운 경매를 배치할 때, 데이터베이스는 즉시 업데이트될 것이며, 배치의 성공 여부를 기다릴 필요가 없다.더 좋은 해결 방안은 데이터베이스 항목을 만들기 전에 배치가 성공하기를 기다리는 것이다.만약 우리가 앞에서 이 논리를 작성한다면 사용자는 페이지가 완성되기 전에 페이지를 닫을 수 있고 데이터베이스에는 새로 배치된 경매가 포함되지 않을 것이다.
반대로, 우리는 세부 사항을 서버에 보내야 하며, 서버는 변경 사항을 처리하기 전에 끊긴 업무를 기다려야 한다.나는 너로 하여금 이 점을 실현할 좋은 방법을 생각해 내게 할 것이다.

🚢 수송하다

나는 Heroku를 데이터베이스로 사용한다. 왜냐하면 그것은 빠르고 간단하기 때문이다. 이것은 해커 경쟁이기 때문이다.나는 방금 홍목 강좌here를 배웠다.서버 구성 요소가 없는 것에 대해 일이 좀 까다로워졌다.
레드우드가 아직 생산에 들어가지 않았기 때문에, 이것은 내가 처음으로 그것을 사용한 것이기 때문에, 나는 이곳에서 약간의 도전에 부딪혔다.이것들은 모두 심상치 않다. 지역사회의 도움으로 나는 모든 어려움을 극복했다.
첫 번째 질문은 Thread rw build이 제 계약을 맺지 않았다는 것입니다.build 명령을 추가하여 이 문제를 해결했습니다.

// Default
yarn rw build && yarn rw db up --no-db-client --auto-approve && yarn rw dataMigrate up

// Now contracts are built first
cd contracts && yarn build && cd .. && yarn rw build //...

나는 이 일을 포기하고 구축된 계약을 버전 제어에 검토하고 가방을 업데이트했다.그만큼이것은 매우 거칠지만 매우 간단하다.
그런 다음 Vercel은 약 5mb의 서버 없는 기능이 너무 크다고 불평했습니다.Redwood Discord의 유용한 조언과 Github 질문 검색 덕분에 도움말 도구find the culprit를 배웠습니다.나는 송로가 대량의 공간을 삼키고 있다는 것을 발견했다.나는 약간의 물건을 이동한 후에 다시 한 번 시도했다.

yarn rw build api
yarn zip-it-and-ship-it api/dist/functions/ zipped

나는 지금 ~72mb에서 62mb로 내려갔고, 여전히 50mb의 제한을 넘어섰기 때문에 주사위가 없다.나의 건의는:

웹3 사용을 피한다.js는 서버 기능이 없는 것을 지원하고 이더리움을 지원합니다.

컴파일된 계약서 파일과 웹3 의존항을 많이 포함하는 계약서 패키지 가져오는 것을 피한다

마지막으로, 나는pm2+nginx를 사용하여 프로그램을 자체적으로 진행해야 한다.고맙게도, 홍목 문서에 멋진 예가 제공되었다.나는 정말 나의 다음 홍목 응용 프로그램을 기대한다. 그래서 나는 내가 여기서 배운 것을 응용할 수 있다!
만약 네가 DAIx를 좀 원한다면 나에게 전화해라. 그러면 너는 NFT에 입찰할 수 있다.
쾌락의 빌딩!
홍목에 이모티콘 있어요?그래?🌲?