React ve Vue, Apillon’un NFT web sitesi şablonu kitaplığında JavaScript’e katılıyor

React ve Vue, Apillon’un NFT web sitesi şablonu kitaplığında JavaScript’e katılıyor

Artık NFT web sitesi şablonlarını iki dilde daha kullanabilir ve bunları Apillon tarafından basılan NFT’leri sergilemek için özelleştirebilirsiniz.

Apillon

· Neden NFT web sitesi şablonları?

· JavaScript şablonu

· Tepki (JavaScript) şablonu

· Vue (TypeScript) şablonu

Neden NFT web sitesi şablonları?

Apillon NFT Hizmeti, kodsuz bir yaklaşım ve birkaç dakikanızı kullanarak Moonbeam veya Astar’da bir NFT koleksiyonu başlatmanıza olanak tanır.

Kılavuz: NFT Hizmeti — Moonbeam’de NFT koleksiyonu oluşturun ve dağıtın

Bu kılavuzda, ham verilerden ve dosyalardan kalıcı olarak dağıtılan bir NFT koleksiyonuna nasıl geçeceğinizi adım adım öğreneceksiniz…

blog.apillon.io

Kılavuz: NFT Hizmeti — Astar’da NFT koleksiyonu oluşturun ve dağıtın

Apillon NFT Hizmetine yapılan son eklemeyle, artık NFT’leri Astar Ağına birkaç tıkla dağıtabilirsiniz…

blog.apillon.io

Ancak NFT’lerinizi bir kez dağıttığınızda, yalnızca zincir üzerinde bir kod olarak yaşarlar — bu, siz onları çevrimiçi olarak, yani bir web sitesinde görünür yapana kadardır.

Bunu yapmak için Apillon, NFT bilgilerini doğrudan seçtiğiniz zincirden alan basit bir web sitesi şablonu derledi. NFT bağlantısı sağlamak için MetaMask gibi bir cüzdan kullanır.

Web sitesi şablonunu kullanarak, hedef kitlenize çok daha hızlı ve web sitesini sıfırdan geliştirme zahmetine girmeden bir NFT koleksiyonu sunabilirsiniz. Ya da aynı sonucu elde etmek için kodun belirli kısımlarını değiştirebilir ve mevcut web sitenize entegre edebilirsiniz.

Bir NFT web sitesi şablonu kurulumu örneği

NFT Hizmetinin orijinal sürümü, hem Moonbeam hem de Astar’daki NFT koleksiyonları için kullanılabilen, JavaScript tabanlı bir web sitesi şablonu sunuyordu . Son zamanlarda, Apillon’un NFT modülü, NFT içeren web sitenizi tasarlamada size daha fazla esneklik sağlamak için React ve Vue desteği ekledi.

Bir ön uç geliştiriciyseniz, NFT güzelliklerinizi sergilemek için iki ortam daha kesinlikle işinize yarayacaktır.

Bunları kullanma süreci oldukça benzerdir ancak onları farklı kılan bazı detaylar vardır. İhtiyaçlarınız için en uygun olanı seçmekten çekinmeyin.

JavaScript şablonu

Bir NFT web sitesinin en eski Apillon şablonu JavaScript ile yazılmıştır.

Şablonun Apillon kontrol paneli aracılığıyla konuşlandırılan NFT akıllı sözleşmesiyle etkileşime geçmesini sağlamak için şablonu manuel olarak yapılandırmanız gerekir. İşte nasıl:

https://github.com/Apillon-web3/nft-template/tree/master/js

1. js şablon klasörünü açın .

2. env.js dosyasını js klasörü içinde bulun .

3. env.js dosyasını kod düzenleyicinizde açın .

4. Parantez içinde akıllı sözleşme adresinizi girerek ilk satırı değiştirin.

5. Doğru zinciri yorumlayıp yorumlayarak zincir sürümünü seçin.

const nftAddress = ""; // Paste the address of the NFT collection.
// uncomment the chain you are using:
const chainId = "0x507"; // Moonbase
// const chainId = "0x504"; // Moonbeam
// const chainId = "0x250"; // Astar

Once you have updated the js/env.js file, save it. You

js/env.js dosyasını güncelledikten sonra kaydedin. Artık web sitesi dosyalarınızı dağıtabilirsiniz.​

🔎 JavaScript şablonunun tamamını burada bulabilirsiniz. 👇

GitHub — Apillon-web3/nft-template

GitHub’da bir hesap oluşturarak Apillon-web3/nft-template gelişimine katkıda bulunun.

github.com

Tepki (JavaScript) şablonu

NFT web sitenizi dağıtmak için ikinci seçenek, React kitaplığını kullanmaktır.

Şablonun Apillon’daki NFT akıllı sözleşmenizle etkileşime girmesi için React şablonunu yapılandırın:

https://github.com/Apillon-web3/nft-template-react/tree/master

1. .env dosyasını kod düzenleyicinizde açın .

2. Parantez içinde akıllı sözleşme adresinizi girerek ilk satırı değiştirin.

3. Doğru zinciri yorumlayıp yorumlayarak zincir sürümünü seçin.

# Paste the address of the NFT collection.
REACT_APP_NFT_ADDRESS=

# Uncomment the chain you are using:
# Moonbase 
REACT_APP_CHAIN_ID=0x507

# Moonbeam
# REACT_APP_CHAIN_ID=0x504

# Astar
# REACT_APP_CHAIN_ID=0x250 

.env dosyasını güncelledikten sonra kaydedin ve web sitenizi dağıtın.​

🔎 Tam React şablonunu burada bulabilirsiniz. 👇

GitHub — Apillon-web3/nft-template-react: NFT’ler için React şablonu

NFT’ler için tepki şablonu. GitHub’da bir hesap oluşturarak Apillon-web3/nft-template-react geliştirmeye katkıda bulunun.

github.com

Vue (TypeScript) şablonu

Ve son olarak, Vue çerçevesini kullanarak bir NFT web sitesi şablonu oluşturabilirsiniz.

Apillon’daki NFT akıllı sözleşmenizle etkileşime girecek şekilde yapılandırın:

https://github.com/Apillon-web3/nft-template-vue/tree/master/config

1. Yapılandırma şablonu klasörünü açın .

2. Production.ts dosyasını yapılandırma klasörü içinde bulun .

3. Production.ts dosyasını kod düzenleyicinizde açın .

4. Parantez içinde akıllı sözleşme adresinizi girerek ilk satırı değiştirin.

5. Doğru zinciri yorumlayıp yorumlayarak zincir sürümünü seçin.

// Moonbase
const config: ConfigInterface = {
  CHAIN_ID: '0x507',
  NFT_ADDRESS: '',
};
// Moonbeam
// const config: ConfigInterface = {
//   CHAIN_ID: '0x504',
//   NFT_ADDRESS: '',
// };
// Astar
// const config: ConfigInterface = {
//   CHAIN_ID: '0x250',
//   NFT_ADDRESS: '',
// };
export default config;

config/${env}.ts dosyasını güncelledikten sonra kaydedin ve NFT’lerinizi görüntülemek için web sitesi dosyalarını dağıtın.​

🔎 Tam Vue şablonunu burada bulabilirsiniz. 👇

GitHub — Apillon-web3/nft-template-vue: NFT’ler için Vue şablonu

NFT’ler için Vue şablonu. GitHub’da bir hesap oluşturarak Apillon-web3/nft-template-vue gelişimine katkıda bulunun.

github.com

NFT’ler istediğiniz gibi yapılır

Apillon, Moonbeam veya Astar’da uçtan uca dağıtılmış NFT dağıtımı sunmanın yanı sıra, meta veriler de dahil olmak üzere bir adım daha ileri gidiyor — üçüncü taraf pazar yerlerini atlayarak bunları kendi web sitenizde hayata geçirmenize yardımcı oluyor.

Karşılanamaz güzelliklerinizi sergileyerek çılgına dönün ve nasıl gittiğini bize bildirin !