React en Vue voegen zich bij JavaScript in de NFT-websitesjabloonbibliotheek van Apillon

U kunt nu NFT-websitesjablonen in nog twee talen gebruiken en deze aanpassen om door Apillon geslagen NFT’s te presenteren.

Bram Willemse
5 min readJul 26, 2023

--

Waarom NFT-websitesjablonen?

Met de Apillon NFT-service kunt u een NFT-collectie op Moonbeam of Astar starten met een no-code benadering en een paar minuten van uw tijd.

Maar zodra u uw NFT’s implementeert, leven ze alleen als een code in de keten — dat is totdat u ze online zichtbaar maakt, dat wil zeggen op een website.

Om dit te doen, heeft Apillon een eenvoudig websitesjabloon samengesteld dat NFT-informatie rechtstreeks uit de door u gekozen keten haalt. Het gebruikt een portemonnee zoals MetaMask om een ​​NFT-verbinding te garanderen.

Met behulp van de websitesjabloon kunt u uw publiek veel sneller een NFT-collectie bezorgen, zonder dat u de website helemaal opnieuw hoeft te ontwikkelen. Of u kunt bepaalde delen van de code wijzigen en deze integreren in uw bestaande website voor hetzelfde resultaat.

Een voorbeeld van een NFT-websitesjabloon

De originele versie van de NFT-service bood een websitesjabloon op basis van JavaScript, bruikbaar voor NFT-collecties op zowel Moonbeam als Astar . Onlangs heeft de NFT-module van Apillon ondersteuning toegevoegd voor React en Vue om u meer flexibiliteit te geven bij het ontwerpen van uw NFT-dragende website.

Als je een front-end ontwikkelaar bent, komen nog twee omgevingen om je NFT-goodies te laten zien zeker van pas.

Het proces om ze te gebruiken is vrij gelijkaardig, maar er zijn bepaalde details die ze anders maken. Voel je vrij om de optimale te kiezen voor jouw behoeften.

JavaScript-sjabloon

De vroegste Apillon-sjabloon van een NFT-website is geschreven in JavaScript.

Om de sjabloon te laten communiceren met het NFT slimme contract dat via het Apillon-dashboard is geïmplementeerd, moet u het handmatig configureren. Hier is hoe:

https://github.com/Apillon-web3/nft-template/tree/master/js
  1. Open de js- sjabloonmap.
  2. Zoek het bestand env.js in de map js.
  3. Open het bestand env.js in uw code-editor.
  4. Wijzig de eerste regel door uw slimme contractadres tussen haakjes in te voeren.
  5. Selecteer de kettingversie door de juiste ketting te becommentariëren en te verwijderen.

🔎 Voorbeeld:

const nftAddress = "" ; // Plak het adres van de NFT-verzameling. 
// verwijder het commentaar van de keten die u gebruikt:
const chainId = "0x507" ; // Maanbasis
// const chainId = "0x504"; // Moonbeam
// const chainId = "0x250"; // Een ster

Nadat u het bestand js/env.js hebt bijgewerkt, slaat u het op. U kunt nu uw websitebestanden implementeren

🔎 Vind hier de volledige JavaScript-sjabloon. 👇

Reageer (JavaScript) sjabloon

De tweede optie om uw NFT-website te implementeren, is door de React-bibliotheek te gebruiken.

Om de sjabloon te laten communiceren met uw NFT smart contract op Apillon, configureert u de React-sjabloon:

https://github.com/Apillon-web3/nft-template-react/tree/master
  1. Open het .env-bestand in uw code-editor.
  2. Wijzig de eerste regel door uw slimme contractadres tussen haakjes in te voeren.
  3. Selecteer de kettingversie door de juiste ketting te becommentariëren en te verwijderen.

🔎 Voorbeeld:

# Plak het adres van de NFT-verzameling. 
REACT_APP_NFT_ADDRESS=

# Maak commentaar op de ketting die je gebruikt:
# Moonbase
REACT_APP_CHAIN_ID=0x507

# Moonbeam
# REACT_APP_CHAIN_ID=0x504

# Astar
# REACT_APP_CHAIN_ID=0x250

Nadat u het .env-bestand heeft bijgewerkt, slaat u het op en implementeert u uw website

🔎 Vind hier het volledige React-sjabloon. 👇

Vue-sjabloon (TypeScript)

En tot slot kunt u een NFT-websitesjabloon maken met behulp van het Vue-framework.

Configureer het om te communiceren met uw NFT smart contract op Apillon:

https://github.com/Apillon-web3/nft-template-vue/tree/master/config
  1. Open de configuratiesjabloonmap .
  2. Zoek het bestand production.ts in de configuratiemap.
  3. Open het bestand production.ts in uw code-editor.
  4. Wijzig de eerste regel door uw slimme contractadres tussen haakjes in te voeren.
  5. Selecteer de kettingversie door de juiste ketting te becommentariëren en te verwijderen.

🔎 Voorbeeld:

// 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: '',
// }; standaardconfiguratie
exporteren ;

Nadat u het bestand config/${env}.ts heeft bijgewerkt, slaat u het op en implementeert u websitebestanden om uw NFT’s weer te geven.​

🔎 Vind hier het volledige Vue-sjabloon. 👇

NFT’s op jouw manier gedaan

Naast het aanbieden van end-to-end gedecentraliseerde implementatie van NFT’s op Moonbeam of Astar, inclusief metadata, gaat Apillon een stap verder — het helpt je om ze tot leven te brengen op je eigen website, waarbij je marktplaatsen van derden omzeilt.

Ga uit je dak met het presenteren van je niet-fungibele goodies en laat ons weten hoe het ging!

⧓ Over Apillon

Het Apillon-platform dient als een uniforme toegangspoort tot de Web3-services die worden geleverd door gekoppelde Polkadot-parachains. In navolging van de visie met meerdere ketens, stimuleert Apillon de overgang van ontwikkelaars naar Web3, vereenvoudigt het de acceptatie ervan in de reële economie en breidt het zijn veelzijdigheid uit naarmate het ecosysteem groeit. Met Apillon zijn Web3-services binnen handbereik voor elke ontwikkelaar, ongeacht hun achtergrond en ervaring met blockchain-technologie.

Website | Wiki | GitHub | Twitter | Telegram | Linkedin | Reddit

--

--