Bem-vindo à etapa final na criação do seu portal de colecionáveis! (para a parte 1, veja   ) aqui  Nesta parte, vamos nos concentrar na construção do frontend – a última peça do quebra-cabeça.   Aqui está o que alcançaremos:  Conecte a carteira Flow.  Inicialize sua conta e crie seu NFT.  Verifique o NFT ID em sua coleção.  Visualize o NFT com o NFT ID que você possui em sua coleção.  Estaremos usando   para construir o frontend. Next.js  Vamos começar!  1. Instalação  Configurando  Abra o diretório   do seu projeto. Então corra    no terminal e pressione   . flow-collectible-portal npx create-next-app@latest frontend enter  Isso fornecerá várias opções. Neste tutorial, não usaremos   , ESLint ou   e usaremos o diretório   e o roteador do aplicativo no momento deste artigo. Typescript TailwindCSS src  Agora você tem um novo aplicativo da web pronto.     Esta é a aparência da sua pasta frontend:  2. Configuração  Para interagir com o   usaremos a Flow Client Library (FCL) para gerenciar conexões de carteira, executar scripts e enviar transações em nosso aplicativo. Isso nos permitirá escrever funções Cadence completas e executá-las como funções Javascript. blockchain Flow,  Para começar, vamos instalar o FCL em nosso aplicativo executando o seguinte comando:   npm install @onflow/fcl --save  Após instalar o FCL, precisamos configurá-lo. Aqui está o que você precisa fazer:  Dentro da pasta   crie uma nova pasta chamada   e adicione um arquivo chamado   . app flow config.js  Neste arquivo, defina a configuração para o FCL, como especificar o nó de acesso e o endpoint de descoberta de carteira. Isso ajuda você a escolher entre usar um testnet ou um emulador local.  Você também desejará especificar o endereço do contrato de colecionáveis que implantamos na Parte 1.  Adicione o seguinte código ao arquivo   : 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", });  Agora você está pronto para usar o FCL em seu aplicativo.  3. Autenticação  Para verificar a identidade de um usuário em um aplicativo, você pode usar diversas funções:  Para fazer login, chame   . fcl.logIn()  Para se inscrever, ligue   . fcl.signUp()  Para sair, chame   . fcl.unauthenticate()  Vamos aprender como podemos implementar essas funções   em seu frontend. fcl  Primeiro, adicionaremos o seguinte código ao nosso arquivo   dentro do diretório app. Isso importará algumas dependências, configurará algum   inicial para partes de nosso aplicativo e construirá uma UI básica. page.js useState  Para ter certeza de que está bonito, exclua o arquivo   dentro do diretório do aplicativo e, em vez disso, crie um arquivo chamado page.css. Em seguida, cole o conteúdo   dentro dele. Agora podemos escrever nossa página inicial. page.module.css deste arquivo   "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> ); }  Depois de adicionar este código, execute   para garantir que tudo carregue corretamente. npm run dev  4. Consultando o blockchain Flow  Antes de nos aprofundarmos em como podemos usar   para consultar o blockchain Flow, adicione esses códigos de script Cadence após a função   no arquivo  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) }  Com nossos scripts Cadence prontos, agora podemos declarar algumas funções Javascript e passar as constantes Cadence para as consultas   . `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); }  Agora vamos dar uma olhada em todas as funções que escrevemos. Há duas coisas a serem observadas:  O  fcl.query  E os   linha. args: (arg,t) => [arg(addr,t.Address)],  Como os scripts são semelhantes às funções de   no Solidity e não exigem nenhuma taxa de gás para serem executados, estamos essencialmente apenas consultando o blockchain. Portanto, usamos   para executar scripts no Flow. view fcl.query  Para consultar algo, precisamos passar um argumento. Para isso, usamos arg, que é uma função que recebe um valor de string que representa o argumento, e   , que é um objeto que contém todos os diferentes tipos de dados que o Cadence possui. Assim, podemos dizer   como codificar e decodificar o argumento que estamos passando. t arg  5. Mutação do blockchain Flow  Embora nossas funções anteriores fossem apenas “somente leitura”, nossas próximas terão ações que podem alterar o estado do blockchain e gravar nele; também conhecido como “cunhar um NFT”.  Para fazer isso, escreveremos outro script Cadence como constante.   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) } }  Agora adicione a função abaixo após o código de transação ao arquivo  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); }  Quanto à função, a sintaxe   é igual a   . No entanto, fornecemos vários parâmetros extras, como os seguintes: fcl.mutate fcl.query   payer: fcl.authz, proposer: fcl.authz, authorizations: [fcl.authz], limit: 50,  São coisas específicas do Flow que definem qual conta pagará pela transação (pagador), transmitirá a transação (proponente) e as contas das quais precisamos de autorizações. (Caso uma conta tenha várias chaves anexadas, ela pode se comportar como uma carteira multi-sig.)    refere-se à conta atualmente conectada. fcl.authz    é como gasLimit no mundo Ethereum, que coloca um limite superior na quantidade máxima de computação. Se o cálculo ultrapassar o limite, a transação falhará. limit  Precisaremos adicionar mais uma função que irá chamar e manipular a função   que acabamos de criar. 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. Código final  Com nossas funções principais implementadas, agora podemos conectá-las à nossa IU.  No entanto, antes de fazermos isso, adicionaremos algumas chamadas   para ajudar a carregar o estado inicial. Você pode adicioná-los logo acima da chamada   já existente. useEffect useEffect  useEffect(() => { checkCollectionInit(); viewNFT(); }, [currentUser]); useEffect(() => { if (currentUser.loggedIn) { setCollectiblesList(collectiblesList); console.log('Setting collectibles...'); } }, [currentUser]);  Agora, de volta à nossa seção   com a UI, podemos adicionar nossas funções às partes apropriadas do aplicativo. 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> );  Verifique o código final   . aqui  Agora com o aplicativo completo, vamos ver como usá-lo!  Primeiro, conecte sua carteira clicando no botão “Conectar carteira” no canto superior direito.  Agora você pode cunhar um NFT! Digite o nome do seu NFT e cole um link para a imagem que deseja usar. Depois de clicar em “mint”, você será solicitado a assinar uma transação com sua carteira.  Pode demorar um pouco para a transação ser concluída. Após a conclusão, você poderá clicar no botão inferior para visualizar os IDs de seus NFTs. Se este for o seu primeiro, o ID deverá ser apenas “1”.  Agora você pode copiar o ID do seu NFT, colá-lo na seção Visualizar e clicar em “Visualizar NFT”.   Conclusão  Bom trabalho! Você concluiu a parte 2 do projeto do portal Colecionáveis. Em resumo, nos concentramos na construção do frontend do nosso portal de colecionáveis.   Fizemos isso por:  Criando um aplicativo com Next.js  Conectando a Carteira Flow  Criando nossos próprios NFTs para cunhagem  Visualizando seu NFT  Tenha um ótimo dia!  Também publicado  aqui.

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

Este áudio é produzido no idioma original da história!

Muito longo; Para ler

CTA: Download the FREE AI Productivity Shift report

Como construir um portal de colecionáveis digitais usando fluxo e cadência (parte 2)

About Author

COMENTARIOS

Rótulos

ESTE ARTIGO FOI APRESENTADO EM

Related Stories

Digital Nomads Ouçam: O que você precisa saber sobre o novo visto DTV da Tailândia

Telegram: a ponte da Crypto Island para o continente

Aumente sua produtividade com estas 18 ferramentas para desenvolvedores 🚀🔥

Como melhorar seu fluxo de trabalho em 10 vezes: 17 aplicativos essenciais

Digital Nomads Ouçam: O que você precisa saber sobre o novo visto DTV da Tailândia

Telegram: a ponte da Crypto Island para o continente

Aumente sua produtividade com estas 18 ferramentas para desenvolvedores 🚀🔥

Como melhorar seu fluxo de trabalho em 10 vezes: 17 aplicativos essenciais

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps