Koleksiyon portalınızı oluşturmanın son adımına hoş geldiniz! (bölüm 1 için   bakın) buraya  Bu bölümde bulmacanın son parçası olan ön ucu oluşturmaya odaklanacağız.   İşte başaracağımız şey:  Flow Cüzdanını bağlayın.  Hesabınızı başlatın ve NFT'nizi oluşturun.  Koleksiyonunuzdaki NFT kimliğini kontrol edin.  Koleksiyonunuzda bulunan NFT ID'nizle NFT'yi görüntüleyin.  Ön ucu oluşturmak için   kullanacağız. Next.js'yi  Başlayalım!  1. Kurulum  Kurulum  Proje   dizininizi açın. O zaman koş  Terminalde   ve   tuşuna basın. flow-collectible-portal npx create-next-app@latest frontend enter  Bu size çeşitli seçenekler sunacaktır. Bu eğitimde   , ESLint veya   kullanmayacağız ve bu makalenin yazıldığı sırada   dizinini ve App router'ı kullanacağız. Typescript TailwindCSS src  Artık yeni bir web uygulamanız hazır.     Ön uç klasörünüz şu şekilde görünür:  2. Yapılandırma    ile etkileşime geçmek için cüzdan bağlantılarını yönetmek, komut dosyalarını çalıştırmak ve uygulamamızdaki işlemleri göndermek için Flow Client Library'yi (FCL) kullanacağız. Tam Cadence fonksiyonlarını yazmamıza ve bunları Javascript fonksiyonları olarak çalıştırmamıza izin verecektir. Flow blockchain  Başlamak için aşağıdaki komutu çalıştırarak uygulamamız için FCL'yi yükleyelim:   npm install @onflow/fcl --save  FCL'yi kurduktan sonra yapılandırmamız gerekiyor. İşte yapmanız gerekenler:    klasörünün içinde   adında yeni bir klasör oluşturun ve   adlı bir dosya ekleyin. app flow config.js  Bu dosyada, Erişim Düğümü ve cüzdan bulma uç noktasının belirtilmesi gibi FCL yapılandırmasını ayarlayın. Bu, bir test ağı veya yerel bir emülatör kullanmak arasında seçim yapmanıza yardımcı olur.  Ayrıca Bölüm 1'de uyguladığımız Koleksiyon sözleşme adresini de belirtmek isteyeceksiniz.  Aşağıdaki kodu   dosyasına ekleyin: 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", });  Artık uygulamanızda FCL'yi kullanmaya hazırsınız.  3. Kimlik Doğrulama  Bir uygulamada kullanıcının kimliğini doğrulamak için çeşitli işlevleri kullanabilirsiniz:  Oturum açmak için   öğesini çağırın. fcl.logIn()  Kaydolmak için   öğesini arayın. fcl.signUp()  Oturumu kapatmak için   öğesini çağırın. fcl.unauthenticate()  Bu   işlevlerini ön uçta nasıl uygulayabileceğimizi öğrenelim. fcl  Öncelikle aşağıdaki kodu app dizini içerisindeki   dosyamıza ekleyeceğiz. Bu, bazı bağımlılıkları içe aktaracak, uygulamamızın bazı bölümleri için bazı başlangıç   ayarlayacak ve temel bir kullanıcı arayüzü oluşturacaktır. page.js useState  Güzel göründüğünden emin olmak için uygulama dizini içindeki   dosyasını silin ve bunun yerine page.css adında bir dosya oluşturun. Daha sonra   içeriğini içine yapıştırın. Artık başlangıç sayfamızı yazabiliriz. page.module.css bu dosyanın   "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> ); }  Bu kodu ekledikten sonra her şeyin doğru şekilde yüklendiğinden emin olmak için   çalıştırın. npm run dev  4. Flow blok zincirini sorgulama  Flow blok zincirini sorgulamak için   nasıl kullanabileceğimizi derinlemesine incelemeden önce, bu Cadence komut dosyası kodlarını   dosyasındaki   işlevinden sonra ekleyin. 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 betiklerimiz kullanıma hazır olduğundan, artık bazı Javascript fonksiyonlarını bildirebilir ve Cadence sabitlerini   sorgularına aktarabiliriz. `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); }  Şimdi yazdığımız tüm fonksiyonlara bir göz atalım. Dikkat edilmesi gereken iki şey var:   fcl.query  Ve   satır. args: (arg,t) => [arg(addr,t.Address)],  Komut dosyaları, Solidity'deki   işlevlerine benzer olduğundan ve çalıştırılması için herhangi bir gas ücreti gerektirmediğinden, aslında sadece blok zincirini sorguluyoruz. Bu yüzden Flow'da komut dosyalarını çalıştırmak için   kullanıyoruz. view fcl.query  Bir şeyi sorgulamak için bir argüman iletmeliyiz. Bunun için argümanı temsil eden bir dize değeri alan bir fonksiyon olan arg'yi ve Cadence'in sahip olduğu tüm farklı veri türlerini içeren bir nesne olan   kullanıyoruz. Böylece   ilettiğimiz argümanın nasıl kodlanacağını ve kodunun nasıl çözüleceğini anlatabiliriz. t arg  5. Flow blok zincirini mutasyona uğratmak  Önceki işlevlerimiz yalnızca "salt okunur" iken, sonraki işlevlerimizde blockchain durumunu değiştirebilecek ve ona yazabilecek eylemler olacak; diğer adıyla "bir NFT nane."  Bunu yapmak için sabit olarak başka bir Cadence betiği yazacağız.   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) } }  Şimdi   dosyasına işlem kodundan sonra aşağıdaki fonksiyonu ekleyin. 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); }  İşleve gelince,   sözdizimi   ile aynıdır. Ancak aşağıdakiler gibi birkaç ekstra parametre sağlıyoruz: fcl.mutate fcl.query   payer: fcl.authz, proposer: fcl.authz, authorizations: [fcl.authz], limit: 50,  Bunlar, işlem için hangi hesabın ödeme yapacağını (ödeyen), işlemi yayınlayacağını (teklif eden) ve yetkilendirmeye ihtiyacımız olan hesapları tanımlayan Flow'a özgü şeylerdir. (Bir hesaba birden fazla anahtarın eklenmesi durumunda, çoklu imzalı bir cüzdan gibi davranabilir.)    şu anda bağlı olan hesabı ifade eder. fcl.authz    , Ethereum dünyasındaki maksimum hesaplama miktarına bir üst sınır koyan gasLimit gibidir. Hesaplama sınırı aşarsa işlem başarısız olur. limit  Az önce yaptığımız   fonksiyonunu çağıracak ve işleyecek bir fonksiyon daha eklememiz gerekecek. 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. Son kod  Ana işlevlerimiz mevcut olduğundan artık bunları kullanıcı arayüzümüze ekleyebiliriz.  Ancak bunu yapmadan önce başlangıç durumunun yüklenmesine yardımcı olmak için bazı   çağrıları ekleyeceğiz. Bunları mevcut   çağrısının hemen üstüne ekleyebilirsiniz. useEffect useEffect  useEffect(() => { checkCollectionInit(); viewNFT(); }, [currentUser]); useEffect(() => { if (currentUser.loggedIn) { setCollectiblesList(collectiblesList); console.log('Setting collectibles...'); } }, [currentUser]);  Artık kullanıcı arayüzü ile   bölümümüze döndüğümüzde, fonksiyonlarımızı uygulamanın uygun bölümlerine ekleyebiliriz. 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> );    son kodu kontrol edin. Buradaki  Artık uygulama tamamlandıktan sonra nasıl kullanılacağını inceleyelim!  Öncelikle sağ üstteki “Cüzdanı Bağla” butonuna tıklayarak cüzdanınızı bağlayın.  Artık bir NFT üretebilirsiniz! NFT'nizin adını girin ve kullanmak istediğiniz görselin bağlantısını yapıştırın. "Nane"ye tıkladıktan sonra cüzdanınızla bir işlem imzalamanız istenecektir.  İşlemin tamamlanması biraz zaman alabilir. Tamamlandıktan sonra, NFT'lerinizin kimliklerini görüntülemek için alt düğmeye tıklayabilmeniz gerekir. Bu sizin ilkinizse, kimlik yalnızca “1” olmalıdır.  Artık NFT'nizin kimliğini kopyalayıp Görünüm bölümüne yapıştırabilir ve "NFT'yi Görüntüle"ye tıklayabilirsiniz.   Çözüm  Tebrikler! Koleksiyon portalı projesinin 2. bölümünü tamamladınız. Özetle, Koleksiyon portalımızın ön yüzünü oluşturmaya odaklandık.   Bunu şu şekilde yaptık:  Next.js ile uygulama oluşturma  Flow Cüzdanını Bağlama  Basım için kendi NFT'lerimizi oluşturma  NFT'nizi görüntüleme  Gerçekten harika bir gün geçirin!   Burada da yayınlandı.

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

Bu ses hikayenin orijinal dilinde üretilmiştir!

Çok uzun; Okumak

Download free Tech Leaders Productivity Report!

Akış ve Ritim Kullanılarak Dijital Koleksiyon Portalı Nasıl Oluşturulur (Bölüm 2)

About Author

YORUMLAR

ETİKETLERİ ASIN

BU YAZI

Related Stories

Forumlardan Feed'lere: Sosyal Medya Algoritmaları Dijital Etkileşimi Nasıl Şekillendiriyor

HackerNoon Yazma Yarışmasını mı Kazanmak İstiyorsunuz? İşte #crypto-api Yarışması Kazananlarının Önerileri

Benzersiz Bir Ekosistemi Güçlendiren Bitcoin UTXO Modeli

Başarılı Buluta Geçiş İçin Tam Kılavuz: Stratejiler ve En İyi Uygulamalar

Forumlardan Feed'lere: Sosyal Medya Algoritmaları Dijital Etkileşimi Nasıl Şekillendiriyor

HackerNoon Yazma Yarışmasını mı Kazanmak İstiyorsunuz? İşte #crypto-api Yarışması Kazananlarının Önerileri

Benzersiz Bir Ekosistemi Güçlendiren Bitcoin UTXO Modeli

Başarılı Buluta Geçiş İçin Tam Kılavuz: Stratejiler ve En İyi Uygulamalar

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps