Next.js, Tailwind, Solidity, Hardhat, Ethet.js ve IPFS ile Marketplace oluşturma ve Polygon test ağına deploy etme.
Bu eğitimde, Ethereum’da Full Stack NFT pazar yerinin nasıl oluşturulacağını, dağıtılacağını ve test edileceğini öğreneceksiniz. Daha önce yazdığım 2 yazıyı okuduktan sonra bu yazıyı okursanız daha kalıcı olacaktır.
Önkoşullar:
Eğitim öncesi bilgisayarınızda şunlar olmalıdır.
- Node.js
- Metamask eklentisi
Geliştirme Yığınımız:
Aşağıdakileri kullanarak full stack bir geliştirme yapacağız.
Framework — Next.js
Solidity geliştirme ortamı — Hardhat
Dosya Depolama — IPFS
Ethereum Web Client Kitaplığı — Ethers.js
Proje Detayları:
Bir kullanıcı bir öğeyi satışa çıkardığında, öğenin mülkiyeti, oluşturucudan pazar yerine aktarılır.
Bir kullanıcı bir ürün satın aldığında, satın alma fiyatı alıcıdan satıcıya aktarılacak ve ürün pazardan alıcıya aktarılacaktır.
Pazar yeri sahibi bir listeleme ücreti belirleyebilecektir. Bu ücret, herhangi bir satışın tamamlanmasının ardından satıcıdan alınacak ve sözleşme sahibine devredilecek ve pazar yeri sahibinin piyasada gerçekleştirilen herhangi bir satıştan mükerrer gelir elde etmesini sağlayacaktır.
Pazar yeri mantığı iki akıllı sözleşmeden oluşacaktır:
NFT Sözleşmesi — Bu sözleşme, kullanıcıların NFT basmasına olanak tanır.
Pazar Yeri Sözleşmesi — Bu sözleşme, kullanıcıların dijital varlıklarını açık bir pazarda satışa sunmalarına olanak tanır.
Birlikte çalışacağımız araçlar, teknikler ve fikirler bu yığındaki diğer birçok uygulama türünün temelini oluşturuyor — ödemeler, komisyonlar ve sözleşme düzeyinde mülkiyet devirleri gibi şeylerle uğraşıyor. Bir istemci tarafı uygulamanın bu akıllı sözleşmeyi, performanslı ve hoş görünümlü bir kullanıcı arayüzü oluşturmak için nasıl görüneceğini göreceksiniz.
Proje Kurulum Adımları
Next.js app imizi oluşturmak için terminali açalım ve aşağıdaki komutu verelim.
npx create-next-app nft-marketplaceProje klasörünün içine girin ve bağımlılıkları (dependencies) kuralım.
// dosya içerisine girin
cd nft-marketplace// bağımlılıkları kurun
npm install ethers hardhat @nomiclabs/hardhat-waffle ethereum-waffle chai @nomiclabs/hardhat-ethers web3modal @openzeppelin/contracts ipfs-http-client@50.1.2 axios
Tailwind CSS i Kurma
Tailwind, çok fazla iş yapmadan stil eklemeyi ve iyi görünümlü web siteleri oluşturmayı kolaylaştıran, yardımcı program öncelikli bir CSS framework üdür.
npm install -D tailwindcss@latest postcss@latest autoprefixer@latestArdından, aşağıdaki komutu çalıştırarak Tailwind’in Next.js ( tailwind.config.jsve ) ile çalışması için gereken yapılandırma dosyalarını oluşturacağız :postcss.config.js
npx tailwindcss init -pŞimdide tailwind.config.js değiştirerek dosya yollarını gösterelim.
/* tailwind.config.js */
module.exports = {
content: [
"./pages/**/*.{js,ts,jsx,tsx}",
"./components/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}Son olarak, styles/globals.css içindeki kodu silin ve aşağıdaki ile güncelleyin:
@tailwind base;
@tailwind components;
@tailwind utilities;Hardhat Yapılandırma
Proje ana klasörü içerisindeyken Hardhat geliştirme ortamını başlatın. Daha önceki yazımda hardhat ile ilgili detaylı bilgi vermiştim.
npx hardhatHardhat kendi dosyalarını ve klasörlerini oluşturması gerekir. Ana dizinde yer alan hardhat.config.js dosyasını açın ve aşağıdaki gibi düzenleyin.
/* hardhat.config.js */
require("@nomiclabs/hardhat-waffle")
const fs = require('fs')
const privateKey = fs.readFileSync(".secret").toString().trim() || "01234567890123456789"
module.exports = {
defaultNetwork: "hardhat",
networks: {
hardhat: {
chainId: 1337
},
// mumbai: {
// url: "https://rpc-mumbai.maticvigil.com",
// accounts: [privateKey]
// }
},
solidity: {
version: "0.8.4",
settings: {
optimizer: {
enabled: true,
runs: 200
}
}
}
}Çift slash olan mumbai kodlarının yer aldığı bölümde aslında test ağının yapılandırma kodlarıdır. Şimdi ana dizinde .secret adlı bir dosya oluşturun. Şimdilik boş kalsın daha sonra dolduracağız.
Akıllı Sözleşmeler
NFT.sol isminde contracts klasörü içerisine bir dosya oluşturun. Ve kodları aşağıdaki şekilde girin.
Yukarıdaki kod kullanıcıların benzersiz NFT basmasına ve bunların mülkiyetlerine sahip olmasına izin veren basit bir NFT sözleşmesidir. Openzeppelin’in ERC721 kütüphanesinden standartı miras alıyoruz.
Ardından Marketplace için sözleşmemizi yazacağız. Fakat belirtmek gerekir. Sözleşmenizin burda yer alandan çok daha fazlasını içermesi gerekir.
Artık sözleşmelerimiz ve ortamımız tamamlandı. Şimdi bir token basmak, satışa çıkarmak, bir kullanıcıya satmak ve token sorgulamak gibi işlevlerin çoğunu çalıştırmak için yerel bir test oluşturabiliriz. Hardhat in oluşturdğu “test” klasörü içerisindeki sample-test.js dosyası içeriğini aşağıdaki ile değiştirin.
Yukarda tüm sürecin test kodunu yazmış olduk. Yazılımda özellikle kontrat geliştirirken ilk katı kural mutlaka test yazılmasıdır.
Testi çalıştırmak npx hardhat test komut satırınızdan çalıştırın. Eğer başarılı olduysa kontratlar adına her şey hazır demektir.
Frontend i Geliştirmek
Artık akıllı sözleşme çalıştığına ve kullanıma hazır olduğuna göre, kullanıcı arayüzünü oluşturmaya başlayabiliriz.
Tüm sayfalarda kalıcı olacak bazı gezinmeyi etkinleştirebilmemiz için bir düzen ayarlayalım. Aşağıdaki kod 4 adet menü elemanı oluşturacaktır. Anasayfa, NFT satma, NFT leri görüntüleme ve oluşturduğu NFT leri görme. Bu bizim her sayfada kullanacağımız gelen çerçevemiz olacak.
Bunu ayarlamak için pages/_app.js açın ve aşağıdaki kodla güncelleyin:
Anasayfa
Güncelleyeceğimiz bir sonraki sayfa pages/index.js . Bu, uygulamanın ana sayfasıdır ve satılık NFT leri sorguladığımız ve ekrana getirdiğimiz önyüz olacaktır.
Sayfa yüklendiğinde, hala satılık olan ürünler için akıllı sözleşmeyi sorguluyor ve bunları, öğelerle ilgili meta veriler ve bunları satın almak için yer alan buton ile birlikte ekrana getiriyoruz.
NFT Listeleme ve Oluşturma
Ardından, kullanıcıların dijital varlıkları oluşturmasına ve listelemesine olanak tanıyan sayfayı oluşturalım.
Bu sayfada birkaç şey oluyor:
- Kullanıcı, dosyaları IPFS’ye yükleyebilir ve kaydedebilir
- Kullanıcı yeni bir benzersiz dijital öğe (NFT) oluşturabilir
- Kullanıcı, meta verileri ve öğenin fiyatını belirleyebilir ve pazarda satış için listeleyebilir.
Kullanıcı bir öğe oluşturup listeledikten sonra, satılık tüm öğeleri görüntülemek için ana sayfaya yönlendirilir.
Kişinin Aldığı NFT’leri Listeleme
Market.sol akıllı sözleşmesinde, yalnızcafetchMyNFTs ile kullanıcının sahip olduğu öğeleri döndüren bir işlev oluşturduk .
page/my-assets.js dosyasında göstermek için bu işlevden yararlanacağız.
Bu işlevsellik anasayfadan farklıdır. Çünkü kullanıcıdan adresini sormamız ve bunu sözleşmede kullanmamız gerekir, bu nedenle kullanıcının bunları düzgün bir şekilde getirebilmesi için işlemi cüzdanı ile imzalaması gerekir.
Kullanıcının Oluşturduğu ve Sattığı NFT leri Gösterme
Bu sayfa, fonksiyonu çağıran kullanıcının adresiyle eşleşen öğeleri döndüren Market.sol içinde yer alan fetchItemsCreated fonksiyonunu kullacak.
soldkullanıcıya yalnızca satılmış öğeleri göstermek için kullanacağımız bir filtreleme alanı olacaktır.
Aşağıdaki kod ile pages/creator-dashboard.js adlı yeni bir dosya oluşturun
Projeyi Local Node üzerinde Çalıştıralım
- Önce scripts/sample-script.js dosyasının adını deploy.js olarak değiştirin.
- Ardından aşağıdaki şekilde dosya içeriğini güncelleyin.
async function main() {
const NFTMarket = await hre.ethers.getContractFactory("NFTMarket");
const nftMarket = await NFTMarket.deploy();
await nftMarket.deployed();
console.log("nftMarket deployed to:", nftMarket.address);
const NFT = await hre.ethers.getContractFactory("NFT");
const nft = await NFT.deploy(nftMarket.address);
await nft.deployed();
console.log("nft deployed to:", nft.address);
}Şurda anlattığım local ağ ile ilgili kısımdan yardım alabilirsin. Ardından
npx hardhat nodekomutu ile local nodu başlatalım. Bu pencere açık kalsın yeni bir terminal sayfası açın ve aşağıdaki komutu verin.
npx hardhat run scripts/deploy.js --network localhost
Tamamlandığında bize deploy edilen kontrat adreslerini verecektir. Bu adresleri kopyalayıp ana dizinde yer alan config.js dosyası içerisine yapıştırın.
export const nftmarketaddress = "market-contract-address"
export const nftaddress = "nft-contract-address"Local node çalışırken alacağımız private key i Metmask ımıza import edelim.
App ‘i çalıştırma
App i çalıştırmak için aşağıdaki komutu verin.
npm run devTebrikler! 🎉 Eğer herhangi bir hata almazsanız local ağınızda çalışan bir NFT marketplace app iniz oldu.
Polygon Ağına Dağıtma
Daha önce yazdığım https://erayusta.medium.com/dapp-geli%C5%9Ftirme-i%C3%A7in-tam-klavuz-a01b368b7fca#76c1 buradaki kısımdan faydalanarak Alchemy den alacağınız api key ile kurulum yapabilirsiniz.
Veya aşağıdaki anlatımdan faydalanabilirsin.
- Metamask a Polygon Mumbai ağını eklemek için mumbai explorer a gidip en alttaki butona tıklayın.
- Metamask ınızdan private key i alıp .secrets isimli dosyanın içine yapıştırın. Private Key çok önemli olduğu için git e veya herhangi bir yere kesinlikle koymayın.
- https://faucet.polygon.technology kendimize test token isteyelim
- hardhat.config.js dosyamızdaki çift slash lı bölümü kaldırın, aşağıdaki şekilde olması gerekiyor.
mumbai: {
url: "https://rpc-mumbai.maticvigil.com",
accounts: [privateKey]
}- Mumbai ağına deploy etmek için aşağıdaki komutu verin.
npx hardhat run scripts/deploy.js --network mumbai- pages/index.js dosyası içeriğinde RPC endpointi değiştirin.
/* pages/index.js */
/* old provider */
const provider = new ethers.providers.JsonRpcProvider()
/* new provider */
const provider = new ethers.providers.JsonRpcProvider("https://rpc-mumbai.maticvigil.com")- Tekrar app i çalıştıralım
npm run devTebrikler! 🎉 Polygon mumbai test ağında çalışan bir uygulamanız oldu.
Bundan sonrasında GameFi, DeFi ve Dex özelinde geliştirme süreçleri ile biraz daha üst seviyelere geçiş yapacağız.
Kaynak Youtube Videosu:
Kaynak Github Reposu:
Beni twitter ve youtube hesaplarımdan da takip edebilirsiniz.
