Добро пожаловать на последний шаг в создании портала коллекционирования! (часть 1 смотрите   ) здесь  В этой части мы сосредоточимся на создании внешнего интерфейса — последней части головоломки.   Вот чего мы достигнем:  Подключите кошелек Flow.  Инициализируйте свою учетную запись и создайте свой NFT.  Проверьте идентификатор NFT в своей коллекции.  Просмотрите NFT с идентификатором NFT, который есть в вашей коллекции.  Мы будем использовать   для создания интерфейса. Next.js  Давайте начнем!  1. Установка  Настройка  Откройте каталог   вашего проекта. Затем запустите    в терминале и нажмите   . flow-collectible-portal npx create-next-app@latest frontend enter  Это предоставит вам несколько вариантов. В этом руководстве мы не будем использовать   , ESLint или   , а будем использовать каталог   и маршрутизатор приложений на момент написания этой статьи. Typescript TailwindCSS src  Теперь у вас готово свежее веб-приложение.     Вот как выглядит ваша папка внешнего интерфейса:  2. Конфигурация  Для взаимодействия с   мы будем использовать клиентскую библиотеку Flow (FCL) для управления соединениями кошелька, запуска сценариев и отправки транзакций в нашем приложении. Это позволит нам писать полные функции 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  Сначала мы добавим следующий код в наш файл   внутри каталога приложения. Это позволит импортировать некоторые зависимости, настроить начальное состояние   для частей нашего приложения и создать базовый пользовательский интерфейс. 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 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) }  Когда наши сценарии 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,  Это специфичные для Flow вещи, которые определяют, какой аккаунт будет платить за транзакцию (плательщик), транслировать транзакцию (предлагающий) и учетные записи, от которых нам нужны авторизации. (Если к учетной записи прикреплено несколько ключей, она может вести себя как кошелек с мультиподписью.)    относится к текущей подключенной учетной записи. fcl.authz    похож на gasLimit в мире Ethereum, который устанавливает верхний предел максимального объема вычислений. Если вычисление превысит предел, транзакция завершится неудачей. 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. Окончательный код  Теперь, когда наши основные функции готовы, мы можем подключить их к нашему пользовательскому интерфейсу.  Однако прежде чем мы это сделаем, мы добавим несколько вызовов   , которые помогут загрузить начальное состояние. Вы можете добавить их прямо над уже существующим вызовом   . useEffect useEffect  useEffect(() => { checkCollectionInit(); viewNFT(); }, [currentUser]); useEffect(() => { if (currentUser.loggedIn) { setCollectiblesList(collectiblesList); console.log('Setting collectibles...'); } }, [currentUser]);  Вернувшись в раздел   с пользовательским интерфейсом, мы можем добавить наши функции в соответствующие части приложения. 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 и вставьте ссылку на изображение, которое вы хотите использовать. После того, как вы нажмете «mint», вам будет предложено подписать транзакцию с вашим кошельком.  Завершение транзакции может занять некоторое время. После завершения вы сможете нажать нижнюю кнопку, чтобы просмотреть идентификаторы ваших NFT. Если это ваш первый, то идентификатор должен быть просто «1».  Теперь вы можете скопировать идентификатор вашего NFT, вставить его в раздел «Просмотр» и нажать «Просмотреть NFT».   Заключение  Отличная работа! Вы завершили вторую часть проекта портала «Коллекционирование». Подводя итог, мы сосредоточились на создании интерфейса нашего портала коллекционирования.   Мы сделали это:  Создание приложения с помощью 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

Этот звук создан на языке оригинала истории!

Слишком долго; Читать

CTA: Download the FREE AI Productivity Shift report

Как создать портал цифровых предметов коллекционирования, используя поток и ритм (часть 2)

About Author

КОММЕНТАРИИ

БИРКИ

ЭТА СТАТЬЯ БЫЛА ПРЕДСТАВЛЕНА В

Related Stories

Модель Bitcoin UTXO, обеспечивающая работу уникальной экосистемы

Telegram: мост Крипто-острова на материк

Раскрытие силы ИИ. Систематический обзор передовых методов: Краткое содержание и введение

Повысьте свою производительность с помощью этих 18 инструментов разработчика 🚀🔥

Модель Bitcoin UTXO, обеспечивающая работу уникальной экосистемы

Telegram: мост Крипто-острова на материк

Раскрытие силы ИИ. Систематический обзор передовых методов: Краткое содержание и введение

Повысьте свою производительность с помощью этих 18 инструментов разработчика 🚀🔥

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps