수집품 포털 생성의 마지막 단계에 오신 것을 환영합니다! (1부 내용은   참조하세요) 여기를  이 부분에서는 퍼즐의 마지막 조각인 프런트엔드 구축에 중점을 둘 것입니다.   우리가 달성할 내용은 다음과 같습니다.  Flow 지갑을 연결하세요.  계정을 초기화하고 NFT를 발행하세요.  컬렉션에서 NFT ID를 확인하세요.  컬렉션에 있는 NFT ID로 NFT를 확인하세요.  우리는 프론트엔드를 구축하기 위해   사용할 것입니다. Next.js를  시작하자!  1. 설치  설정  프로젝트   디렉터리를 엽니다. 그런 다음 실행  터미널에서   입력하고   누르세요. flow-collectible-portal npx create-next-app@latest frontend enter  그러면 몇 가지 옵션이 제공됩니다. 이 튜토리얼에서는   , ESLint 또는   사용하지 않을 것이며, 이 글을 작성할 당시에는   디렉토리와 앱 라우터를 사용할 것입니다. Typescript TailwindCSS를 src  이제 새로운 웹 앱이 준비되었습니다.     프런트엔드 폴더는 다음과 같습니다.  2. 구성    과 상호 작용하기 위해 FCL(Flow 클라이언트 라이브러리)을 사용하여 지갑 연결을 관리하고, 스크립트를 실행하고, 애플리케이션에서 트랜잭션을 보냅니다. 이를 통해 완전한 Cadence 함수를 작성하고 이를 Javascript 함수로 실행할 수 있습니다. Flow 블록체인  시작하려면 다음 명령을 실행하여 앱용 FCL을 설치해 보겠습니다.   npm install @onflow/fcl --save  FCL을 설치한 후에는 이를 구성해야 합니다. 수행해야 할 작업은 다음과 같습니다.    폴더 안에   라는 새 폴더를 만들고   라는 파일을 추가합니다. app flow config.js  이 파일에서 액세스 노드 및 지갑 검색 엔드포인트를 지정하는 등 FCL에 대한 구성을 설정합니다. 이는 테스트넷과 로컬 에뮬레이터 중 하나를 선택하는 데 도움이 됩니다.  또한 1부에서 배포한 수집품 계약 주소를 지정하고 싶을 수도 있습니다.    파일에 다음 코드를 추가합니다. config.js   import { config } from "@onflow/fcl"; config({ "app.detail.title": "Flow Name Service", "app.detail.icon": "https://placekitten.com/g/200/200", "accessNode.api": "https://rest-testnet.onflow.org", "discovery.wallet": "https://fcl-discovery.onflow.org/testnet/authn", "0xCollectibles": "ADD YOUR CONTRACT ACCOUNT ADDRESS", "0xNonFungibleToken": "0x631e88ae7f1d7c20", });  이제 앱에서 FCL을 사용하도록 모든 설정이 완료되었습니다.  3. 인증  앱에서 사용자의 신원을 확인하려면 다음과 같은 여러 기능을 사용할 수 있습니다.  로그인하려면   호출하세요. fcl.logIn()  가입하려면   호출하세요. fcl.signUp()  로그아웃하려면   호출하세요. fcl.unauthenticate()  프런트엔드에서 이러한   기능을 구현하는 방법을 알아봅시다. fcl  먼저 앱 디렉터리 내의   파일에 다음 코드를 추가합니다. 그러면 일부 종속성을 가져오고, 앱 일부에 대한 초기   설정하고, 기본 UI가 구축됩니다. page.js useState  멋지게 보이도록 하려면 앱 디렉터리에서   파일을 삭제하고 대신 page.css라는 파일을 만드세요. 그런 다음   의 내용을 그 안에 붙여넣습니다. 이제 초기 페이지를 작성할 수 있습니다. page.module.css 이 파일   "use client"; import React, { useState, useEffect, useRef } from "react"; import * as fcl from "@onflow/fcl"; import "./page.css"; import "./flow/config"; export default function Page() { const [currentUser, setCurrentUser] = useState({ loggedIn: false, addr: undefined, }); const urlInputRef = useRef(); const nameInputRef = useRef(); const idInputRef = useRef(); const [isInitialized, setIsInitialized] = useState(); const [collectiblesList, setCollectiblesList] = useState([]); const [loading, setLoading] = useState(false); const [ids, setIds] = useState([]); const [nft, setNFT] = useState({}); useEffect(() => fcl.currentUser.subscribe(setCurrentUser), []); function handleInputChange(event) { const inputValue = event.target.value; if (/^\d+$/.test(inputValue)) { idInputRef.current = +inputValue; } else { console.error("Invalid input. Please enter a valid integer."); } } return ( <div> <div className="navbar"> <h1>Flow Collectibles Portal</h1> <span>Address: {currentUser?.addr ?? "NO Address"}</span> <button onClick={currentUser.addr ? fcl.unauthenticate : fcl.logIn}> {currentUser.addr ? "Log Out" : "Connect Wallet"} </button> </div> {currentUser.loggedIn ? ( <div className="main"> <div className="mutate"> <h1>Mutate Flow Blockchain</h1> <form onSubmit={(event) => { event.preventDefault(); }} > <input type="text" placeholder="enter name of the NFT" ref={nameInputRef} /> <input type="text" placeholder="enter a url" ref={urlInputRef} /> <button type="submit">Mint</button> </form> <mark>Your Collection will be initialized while minting NFT.</mark> </div> <div className="query"> <h1>Query Flow Blockchain</h1> <mark>Click below button to check 👇</mark> <button>Check Collection</button> <p> Is your collection initialized: {isInitialized ? "Yes" : "No"} </p> <button onClick={viewIds}> View NFT IDs you hold in your collection </button> <p>NFT Id: </p> </div> <div className="view"> <h1>View Your NFT</h1> <input type="text" placeholder="enter your NFT ID" onChange={handleInputChange} /> <button>View NFT</button> <div className="nft-card"> <p>NFT id: </p> <p>NFT name: </p> <img src="" alt="" /> </div> </div> </div> ) : ( <div className="main-2"> <h1>Connect Wallet to mint NFT!!</h1> </div> )} </div> ); }  이 코드를 추가한 후   실행하여 모든 것이 올바르게 로드되는지 확인하세요. npm run dev  4. Flow 블록체인 쿼리    사용하여 Flow 블록체인을 쿼리하는 방법을 자세히 알아보기 전에   파일의   함수 뒤에 이러한 Cadence 스크립트 코드를 추가하세요. fcl page.js handleInput   const CHECK_COLLECTION = ` import NonFungibleToken from 0xNonFungibleToken import Collectibles from 0xCollectibles pub fun main(address: Address): Bool? { return Collectibles.checkCollection(_addr: address) }` const GET_NFT_ID = ` import NonFungibleToken from 0xNonFungibleToken import Collectibles from 0xCollectibles pub fun main(user: Address): [UInt64] { let collectionCap = getAccount(user).capabilities.get <&{Collectibles.CollectionPublic}>(/public/NFTCollection) ?? panic("This public capability does not exist.") let collectionRef = collectionCap.borrow()! return collectionRef.getIDs() } ` const GET_NFT = ` import NonFungibleToken from 0xNonFungibleToken import Collectibles from 0xCollectibles pub fun main(user: Address, id: UInt64): &NonFungibleToken.NFT? { let collectionCap= getAccount(user).capabilities.get<&{Collectibles.CollectionPublic}>(/public/NFTCollection) ?? panic("This public capability does not exist.") let collectionRef = collectionCap.borrow()! return collectionRef.borrowNFT(id: id) }  Cadence 스크립트가 준비되었으므로 이제 일부 Javascript 함수를 선언하고 Cadence 상수를   쿼리에 전달할 수 있습니다. `fcl`   async function checkCollectionInit() { const isInit = await fcl.query({ cadence: CHECK_COLLECTION, args: (arg,t) => [arg(currentUser?.addr, t.Address)], }); console.log(isInit); } async function viewNFT() { console.log(idInputRef.current); const nfts = await fcl.query({ cadence: GET_NFT, args: (arg,t) => [arg(currentUser?.addr,t.Address), arg(idInputRef.current, t.UInt64)] }); setNFT(nfts); console.log(nfts); } async function viewIds() { const ids = await fcl.query({ cadence: GET_NFT_ID, args: (arg,t) => [arg(currentUser?.addr,t.Address)] }); setIds(ids); console.log(ids); }  이제 우리가 작성한 모든 함수를 살펴보겠습니다. 주의할 점은 두 가지입니다.   fcl.query  그리고   line. args: (arg,t) => [arg(addr,t.Address)],  스크립트는 Solidity의   기능과 유사하고 실행하는 데 가스 요금이 필요하지 않으므로 기본적으로 블록체인에 쿼리만 하면 됩니다. 그래서 우리는   사용하여 Flow에서 스크립트를 실행합니다. view fcl.query  무언가를 쿼리하려면 인수를 전달해야 합니다. 이를 위해 인수를 나타내는 문자열 값을 취하는 함수인 arg와 Cadence가 가지고 있는 다양한 데이터 유형을 모두 포함하는 객체인   사용합니다. 따라서 우리는 전달하는 인수를 인코딩하고 디코딩하는 방법을   알릴 수 있습니다. t arg  5. Flow 블록체인 변경  이전 기능은 "읽기 전용"에 불과했지만 다음 기능에는 블록체인 상태를 변경하고 기록할 수 있는 작업이 포함됩니다. 일명 "NFT 발행".  이를 위해 또 다른 Cadence 스크립트를 상수로 작성하겠습니다.   const MINT_NFT = ` import NonFungibleToken from 0xNonFungibleToken import Collectibles from 0xCollectibles transaction(name:String, image:String){ let receiverCollectionRef: &{NonFungibleToken.CollectionPublic} prepare(signer:AuthAccount){ // initialise account if signer.borrow<&Collectibles.Collection>(from: Collectibles.CollectionStoragePath) == nil { let collection <- Collectibles.createEmptyCollection() signer.save(<-collection, to: Collectibles.CollectionStoragePath) let cap = signer.capabilities.storage.issue<&{Collectibles.CollectionPublic}>(Collectibles.CollectionStoragePath) signer.capabilities.publish( cap, at: Collectibles.CollectionPublicPath) } //takes the receiver collection refrence self.receiverCollectionRef = signer.borrow<&Collectibles.Collection>(from: Collectibles.CollectionStoragePath) ?? panic("could not borrow Collection reference") } execute{ let nft <- Collectibles.mintNFT(name:name, image:image) self.receiverCollectionRef.deposit(token: <-nft) } }  이제   파일의 트랜잭션 코드 뒤에 아래 함수를 추가합니다. page.js   async function mint() { try{ const txnId = await fcl.mutate({ cadence: MINT_NFT, args: (arg,t) => [arg(name,t.String), arg(image, t.String)], payer: fcl.authz, proposer: fcl.authz, authorizations: [fcl.authz], limit:999,}); } catch(error){ console.error('Minting failed:' error) } console.log(txnId); }  함수의 경우   구문은   와 동일합니다. 그러나 다음과 같은 몇 가지 추가 매개변수를 제공합니다. fcl.mutate fcl.query   payer: fcl.authz, proposer: fcl.authz, authorizations: [fcl.authz], limit: 50,  이는 거래에 대한 비용을 지불할 계정(지불자), 거래를 브로드캐스팅하는 계정(제안자) 및 승인이 필요한 계정을 정의하는 흐름 관련 항목입니다. (계정에 여러 개의 키가 연결된 경우 다중 서명 지갑처럼 작동할 수 있습니다.)    현재 연결된 계정을 나타냅니다. fcl.authz    최대 계산량에 상한선을 설정하는 이더리움 세계의 gasLimit과 같습니다. 계산이 한도를 초과하면 트랜잭션이 실패합니다. limit  방금 만든   함수를 호출하고 처리하는 함수를 하나 더 추가해야 합니다. mintNFT  const saveCollectible = async () => { if (urlInputRef.current.value.length > 0 && nameInputRef.current.value.length > 0) { try { setLoading(true); const transaction = await mintNFT(nameInputRef.current.value, urlInputRef.current.value); console.log('transactionID:', transaction); // Handle minting success (if needed) } catch (error) { console.error('Minting failed:', error); // Handle minting failure (if needed) } finally { setLoading(false); } } else { console.log('Empty input. Try again.'); } };  6. 최종 코드  주요 기능이 준비되었으므로 이제 이를 UI에 연결할 수 있습니다.  하지만 그 전에 초기 상태를 로드하는 데 도움이 되는 몇 가지   호출을 추가하겠습니다. 이미 존재하는   호출 바로 위에 이를 추가할 수 있습니다. useEffect useEffect  useEffect(() => { checkCollectionInit(); viewNFT(); }, [currentUser]); useEffect(() => { if (currentUser.loggedIn) { setCollectiblesList(collectiblesList); console.log('Setting collectibles...'); } }, [currentUser]);  이제 UI가 있는   섹션으로 돌아가 앱의 적절한 부분에 기능을 추가할 수 있습니다. return  return ( <div> <div className="navbar"> <h1>Flow Collectibles Portal</h1> <span>Address: {currentUser?.addr ?? "NO Address"}</span> <button onClick={currentUser.addr ? fcl.unauthenticate : fcl.logIn}> {currentUser.addr ? "Log Out" : "Connect Wallet"} </button> </div> {currentUser.loggedIn ? ( <div className="main"> <div className="mutate"> <h1>Mutate Flow Blockchain</h1> <form onSubmit={(event) => { event.preventDefault(); saveCollectible(); }} > <input type="text" placeholder="enter name of the NFT" ref={nameInputRef} /> <input type="text" placeholder="enter a url" ref={urlInputRef} /> <button type="submit">Mint</button> </form> <mark>Your Collection will be initialized while minting NFT.</mark> </div> <div className="query"> <h1>Query Flow Blockchain</h1> <mark>Click below button to check 👇</mark> <button onClick={checkCollectionInit}>Check Collection</button> <p> Is your collection initialized: {isInitialized ? "Yes" : "No"} </p> <button onClick={viewIds}> View NFT IDs you hold in your collection </button> <p>NFT Id: </p> {ids.map((id) => ( <p key={id}>{id}</p> ))} </div> <div className="view"> <h1>View Your NFT</h1> <input type="text" placeholder="enter your NFT ID" onChange={handleInputChange} /> <button onClick={viewNFT}>View NFT</button> <div className="nft-card"> <p>NFT id: {nft.id}</p> <p>NFT name: {nft.name}</p> <img src={nft.image} alt={nft.name} /> </div> </div> </div> ) : ( <div className="main-2"> <h1>Connect Wallet to mint NFT!!</h1> </div> )} </div> );    최종 코드를 확인하세요. 여기에서  이제 앱이 완성되었으므로 사용 방법을 살펴보겠습니다.  먼저 오른쪽 상단의 '지갑 연결' 버튼을 클릭하여 지갑을 연결하세요.  이제 NFT를 발행할 수 있습니다! NFT 이름을 입력하고 사용하려는 이미지의 링크를 붙여넣으세요. "민트"를 클릭하면 지갑으로 거래에 서명하라는 메시지가 표시됩니다.  거래가 완료되는 데 약간의 시간이 걸릴 수 있습니다. 완료되면 하단 버튼을 클릭하여 NFT의 ID를 볼 수 있습니다. 이것이 첫 번째인 경우 ID는 "1"이어야 합니다.  이제 NFT의 ID를 복사하여 보기 섹션에 붙여넣고 “NFT 보기”를 클릭할 수 있습니다.   결론  잘하셨어요! 수집품 포털 프로젝트의 2부를 완료했습니다. 요약하자면, 우리는 수집품 포털의 프런트엔드를 구축하는 데 중점을 두었습니다.   우리는 다음과 같이 이를 수행했습니다.  Next.js로 앱 만들기  Flow 지갑 연결  주조를 위한 자체 NFT 생성  NFT 보기  정말 좋은 하루 보내세요!  여기에도 게시되었습니다  .

The is an opinion piece based on the author’s POV and does not necessarily reflect the views of HackerNoon.

2022 - HackerNoon Contributor of the Year - Cloud Computing

2022 - HackerNoon Contributor of the Year - Design

2022 - HackerNoon Contributor of the Year - Heroku

2022 - HackerNoon Contributor of the Year - Javascript

2022 - HackerNoon Contributor of the Year - Salesforce

2022 - Hackernoons Tech Storyteller of the Year

I ♥ writing code. Find me on GitLab.

Nominated for 2022 - HackerNoon Contributor of the Year - Javascript

Nominated for 2022 - Hackernoons Tech Storyteller of the Year

Nominated for 2022 - HackerNoon Contributor of the Year - Cloud Computing

Nominated for 2022 - HackerNoon Contributor of the Year - Heroku

Nominated for 2022 - HackerNoon Contributor of the Year - Design

Nominated for 2022 - HackerNoon Contributor of the Year - Salesforce

이 오디오는 이야기의 원래 언어로 제작되었습니다!

너무 오래; 읽다

Download free Tech Leaders Productivity Report!

Flow와 Cadence를 사용하여 디지털 수집품 포털을 구축하는 방법(2부)

About Author

코멘트

태그 걸기

이 기사는 다음에서 발표되었습니다.

Related Stories

AI/ML 데이터레이크용 참조 아키텍처 구축을 위한 설계자 가이드

Crypto Growth: 효과적인 사용자 페르소나 만들기

독특한 생태계를 강화하는 비트코인 UTXO 모델

사용자 중심의 암호화 제품 만들기: 고객 피드백의 중요성

AI/ML 데이터레이크용 참조 아키텍처 구축을 위한 설계자 가이드

Crypto Growth: 효과적인 사용자 페르소나 만들기

독특한 생태계를 강화하는 비트코인 UTXO 모델

사용자 중심의 암호화 제품 만들기: 고객 피드백의 중요성

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps