Chào mừng bạn đến với bước cuối cùng trong quá trình tạo cổng sưu tầm của bạn! (phần 1 xem   ) tại đây  Trong phần này, chúng ta sẽ tập trung vào việc xây dựng giao diện người dùng—mảnh ghép cuối cùng.   Đây là những gì chúng ta sẽ đạt được:  Kết nối Ví Flow.  Khởi tạo tài khoản của bạn và đúc NFT của bạn.  Kiểm tra ID NFT trong Bộ sưu tập của bạn.  Xem NFT bằng ID NFT bạn có trong Bộ sưu tập của mình.  Chúng tôi sẽ sử dụng   để xây dựng giao diện người dùng. Next.js  Bắt đầu nào!  1. Cài đặt  Đang cài đặt  Mở thư mục   dự án của bạn. Sau đó chạy    trong terminal và nhấn   . flow-collectible-portal npx create-next-app@latest frontend enter  Điều này sẽ cung cấp cho bạn một số tùy chọn. Trong hướng dẫn này, chúng tôi sẽ không sử dụng   , ESLint hoặc   và chúng tôi sẽ sử dụng thư mục   và bộ định tuyến Ứng dụng tại thời điểm viết bài này. Typescript TailwindCSS src  Bây giờ bạn đã có sẵn một ứng dụng web mới.     Thư mục lối vào của bạn trông như thế này:  2. Cấu hình  Để tương tác với   chúng tôi sẽ sử dụng Thư viện ứng dụng khách Flow (FCL) để quản lý các kết nối ví, chạy tập lệnh và gửi giao dịch trong ứng dụng của chúng tôi. Nó sẽ cho phép chúng ta viết các hàm Cadence hoàn chỉnh và chạy chúng dưới dạng các hàm Javascript. chuỗi khối Flow,  Để bắt đầu, hãy cài đặt FCL cho ứng dụng của chúng tôi bằng cách chạy lệnh sau:   npm install @onflow/fcl --save  Sau khi cài đặt FCL, chúng ta cần cấu hình nó. Đây là những gì bạn cần làm:  Bên trong thư mục   , tạo một thư mục mới có tên   và thêm tệp có tên   . app flow config.js  Trong tệp này, hãy thiết lập cấu hình cho FCL, chẳng hạn như chỉ định Nút truy cập và điểm cuối khám phá ví. Điều này giúp bạn lựa chọn giữa việc sử dụng testnet hoặc trình mô phỏng cục bộ.  Bạn cũng sẽ muốn chỉ định địa chỉ hợp đồng sưu tầm mà chúng tôi đã triển khai trong Phần 1.  Thêm mã sau vào tệp   : 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", });  Bây giờ bạn đã sẵn sàng sử dụng FCL trong ứng dụng của mình.  3. Xác thực  Để xác minh danh tính của người dùng trong ứng dụng, bạn có thể sử dụng một số chức năng:  Để đăng nhập, hãy gọi   . fcl.logIn()  Để đăng ký, hãy gọi   . fcl.signUp()  Để đăng xuất, hãy gọi   . fcl.unauthenticate()  Hãy tìm hiểu cách chúng tôi có thể triển khai các hàm   này trong giao diện người dùng của bạn. fcl  Đầu tiên, chúng ta sẽ thêm đoạn mã sau vào tệp   bên trong thư mục ứng dụng. Điều này sẽ nhập một số phần phụ thuộc, thiết lập một số   ban đầu cho các phần của ứng dụng của chúng tôi và xây dựng giao diện người dùng cơ bản. page.js useState  Để đảm bảo nó trông đẹp mắt, hãy xóa tệp   bên trong thư mục ứng dụng và thay vào đó tạo một tệp có tên page.css. Sau đó dán nội dung của   vào bên trong nó. Bây giờ chúng ta có thể viết ra trang đầu tiên của mình. page.module.css tập tin này   "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> ); }  Sau khi thêm mã này, hãy chạy   để đảm bảo mọi thứ tải chính xác. npm run dev  4. Truy vấn chuỗi khối Flow  Trước khi đi sâu vào cách chúng ta có thể sử dụng   để truy vấn chuỗi khối Flow, hãy thêm các mã tập lệnh Cadence này sau hàm   trong tệp  fcl handleInput page.js   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) }  Khi các tập lệnh Cadence của chúng tôi đã sẵn sàng hoạt động, giờ đây chúng tôi có thể khai báo một số hàm Javascript và chuyển các hằng số Cadence vào các truy vấn   . `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); }  Bây giờ chúng ta hãy xem tất cả các chức năng chúng tôi đã viết. Có hai điều cần chú ý:   fcl.query  Và   line. args: (arg,t) => [arg(addr,t.Address)],  Vì các tập lệnh tương tự như các chức năng   trong Solidity và không yêu cầu bất kỳ khoản phí gas nào để chạy nên về cơ bản chúng tôi chỉ đang truy vấn chuỗi khối. Vì vậy chúng tôi sử dụng   để chạy tập lệnh trên Flow. view fcl.query  Để truy vấn một cái gì đó, chúng ta cần truyền một đối số. Để làm được điều đó, chúng tôi sử dụng arg, là một hàm lấy giá trị chuỗi đại diện cho đối số và   , là một đối tượng chứa tất cả các kiểu dữ liệu khác nhau mà Cadence có. Vì vậy, chúng ta có thể cho   biết cách mã hóa và giải mã đối số mà chúng ta đang truyền. t arg  5. Thay đổi chuỗi khối Flow  Mặc dù các chức năng trước đây của chúng tôi chỉ là “chỉ đọc”, nhưng các chức năng tiếp theo của chúng tôi sẽ có các hành động có thể thay đổi trạng thái blockchain và ghi vào nó; hay còn gọi là “đúc NFT.”  Để làm điều này, chúng ta sẽ viết một tập lệnh Cadence khác dưới dạng hằng số.   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) } }  Bây giờ hãy thêm hàm bên dưới sau mã giao dịch vào tệp  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); }  Về hàm, cú pháp   giống với   . Tuy nhiên, chúng tôi cung cấp một số thông số bổ sung như sau: fcl.mutate fcl.query   payer: fcl.authz, proposer: fcl.authz, authorizations: [fcl.authz], limit: 50,  Đây là những thứ cụ thể theo Dòng xác định tài khoản nào sẽ thanh toán cho giao dịch (người trả tiền), truyền phát giao dịch (người đề xuất) và tài khoản mà chúng tôi cần ủy quyền. (Trong trường hợp một tài khoản có nhiều khóa được đính kèm, nó có thể hoạt động giống như một ví nhiều chữ ký.)    đề cập đến tài khoản hiện được kết nối. fcl.authz    giống như gasLimit trong thế giới Ethereum, đặt giới hạn trên cho số lượng tính toán tối đa. Nếu tính toán vượt quá giới hạn thì giao dịch sẽ thất bại. limit  Chúng ta sẽ cần thêm một hàm nữa để gọi và xử lý hàm   mà chúng ta vừa tạo. 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. Mã cuối cùng  Với các chức năng chính đã có, giờ đây chúng tôi có thể cắm chúng vào giao diện người dùng của mình.  Tuy nhiên, trước khi thực hiện điều đó, chúng tôi sẽ thêm một số lệnh gọi   để giúp tải trạng thái ban đầu. Bạn có thể thêm những thứ này ngay phía trên lệnh gọi   hiện có. useEffect useEffect  useEffect(() => { checkCollectionInit(); viewNFT(); }, [currentUser]); useEffect(() => { if (currentUser.loggedIn) { setCollectiblesList(collectiblesList); console.log('Setting collectibles...'); } }, [currentUser]);  Bây giờ quay lại phần   với giao diện người dùng, chúng ta có thể thêm các chức năng của mình vào các phần thích hợp của ứng dụng. 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> );  Kiểm tra mã cuối cùng   . ở đây  Bây giờ khi ứng dụng đã hoàn tất, hãy cùng tìm hiểu cách sử dụng nó!  Trước tiên, hãy kết nối ví của bạn bằng cách nhấp vào nút “Kết nối ví” ở trên cùng bên phải.  Bây giờ bạn có thể đúc NFT! Nhập tên NFT của bạn và dán vào liên kết tới hình ảnh bạn muốn sử dụng. Sau khi bạn nhấp vào “mint”, nó sẽ nhắc bạn ký một giao dịch bằng ví của mình.  Có thể mất một chút thời gian để giao dịch hoàn tất. Sau khi hoàn tất, bạn có thể nhấp vào nút dưới cùng để xem ID NFT của mình. Nếu đây là lần đầu tiên của bạn thì ID sẽ chỉ là “1”.  Bây giờ bạn có thể sao chép ID NFT của mình, dán nó vào phần Xem và nhấp vào “Xem NFT”.   Phần kết luận  Làm tốt! Bạn đã hoàn thành phần 2 của dự án cổng thông tin sưu tầm. Tóm lại, chúng tôi tập trung vào việc xây dựng giao diện người dùng của cổng thông tin sưu tầm của mình.   Chúng tôi đã làm điều này bằng cách:  Tạo một ứng dụng với Next.js  Kết nối ví Flow  Tạo NFT của riêng chúng tôi để khai thác  Xem NFT của bạn  Chúc bạn có một ngày thật tuyệt vời!  Cũng được xuất bản  ở đây.

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

Nghe bài viết này bằng Tiếng Anh, đọc bởi robot thông minh của HackerNoon

dài quá đọc không nổi

CTA: Download the FREE AI Productivity Shift report

Cách xây dựng cổng sưu tầm kỹ thuật số bằng cách sử dụng Flow và Cadence (Phần 2)

About Author

BÌNH LUẬN

chuyên mục

BÀI VIẾT NÀY CŨNG CÓ MẶT TẠI

Related Stories

72 Stories To Learn About Adam Smith

145 Stories To Learn About Book

147 Stories To Learn About Reading Books Online

184 Stories To Learn About Psychology

72 Stories To Learn About Adam Smith

145 Stories To Learn About Book

147 Stories To Learn About Reading Books Online

184 Stories To Learn About Psychology

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps