4EVERLAND
Published in

4EVERLAND

Try to Build Your First App Nft with 4EVERLAND and Polygon

NFT (non-fungible token) is a unique digital identifier that cannot be copied, replaced, or subdivided. The ownership of an NFT is recorded in the blockchain and can be transferred by the owner, allowing the NFT to be sold and traded.

An NFT usually contains a reference to a digital file, which can be anything, such as a photo, video, music, or even an app. It can be created by anyone and requires little or no coding skills.

In this tutorial, I will show you the creation of an application NFT, which is very exciting just to imagine!

Please note: this tutorial will not focus on how to build a beautiful application, instead the focus will be on how to transform an application into an NFT.

Let’s start now

Before we start creating our own application NFT, we need to have some preparation.

  1. 4EVERLAND Bucket: Bucket is compatible with AWS-S3, we will upload our applications to IPFS via 4EVERLAND (without any top-up, the free space is already enough).
  2. Alchemy account: Alchemy is a Web3 development platform, and we will use Alchemy to deploy our contracts and to mint our application NFT.
  3. Make sure you have Node.js v16+ installed on your device, as well as a basic code editor.

Create a contract

First, we need to set up our Hardhat environment and create a project. Hardhat enables us to manage blockchain interactions more easily and here is the process involved:

To initialize the project directory (npm 7+), open your computer Terminal and run:

npm init

Install Hardhat

npm install — save-dev hardhat

Create a project directory for smart contracts

mkdir YourAppNft && cd YourAppNft

In the same directory where you installed Hardhat run

npx hardhat

If all goes well, you will be presented with those options.

For this tutorial, I have selected ‘Create a JavaScript project’ as this option already contains some project basics.

Press Enter to confirm.

If you see the message ‘Project created’, you have successfully created a folder and it will contain some basic files.

Before proceeding, we need to install OpenZeppelin. OpenZeppelin Contracts contains a number of useful building blocks for building smart contracts. You can build them with no worries: they have been audited many times and their security and correctness have been battle-tested.

This tutorial won’t cover language concepts such as syntax or keywords. For that, you need to check out the following curated content, which features great learning resources for both newcomers and experienced developers.

If you’re new to the language, the official Solidity documentation is a good resource to have handy. Take a look at their security recommendations, go over the differences between blockchains and traditional software platforms.

Please run the following command to install the OpenZeppelin library:

npm install @openzeppelin/contracts

Now write our first simple smart contract. I call it YourAppNft: it will let us store a value that can be retrieved later. Here I will show you some cases directly. Let’s open the contracts folder and rename the file in it to YourAppNft.sol.

Of course, we need to make some changes to the code.

As the Ethernet Virtual Machine (EVM) cannot execute Solidity code directly, we first need to compile it into EVM bytecode. My YourAppNft.sol contract uses Solidity 0.8.9, you can easily use the npx hardhat compile to find and use the appropriate version.

To use one of the OpenZeppelin contracts, import it by prefixing its path with @openzeppelin/contracts.

Now it’s time to think about what needs to be done as an application NFT contract (it's just an application NFT).

Yes! We need an owner address that can be multi-signed by many people for wallets but always belongs to only one address.

You can find the use case file YourAppNft.sol, which I have stored in IPFS via 4EVERLAND:

https://bafkreiewac373ta6yjitxmxolhmflm2tfb34c7lv6v5eeidiiwp7c266xm.ipfs.4everland.io/

Test your contract

Once you have an application NFT contract, you need to test it. If you look at your root project folder, you will see a file there called test.js. Open it and there will be a sample test code inside. Rename the file to something more appropriate, e.g. YourAppNFT.js. I have also stored the use case file in IPFS at:

https://bafkreifpbjq7nff76xhrqqsfcywe4rxxerc2e4wnam5uvxtmaflbewbihu.ipfs.4everland.io/

We’ll use Chai assertions for our unit tests. Below is the relevant initial test code. Of course, you can use the use case code directly.

We are now ready to run our tests!

Running npx hardhat test will execute all tests in the test directory, checking that your contracts work the way you meant them to:

It’s also a good idea to set up a continuous integration service (such as CircleCI) to have your tests run automatically every time you commit your code to GitHub.

Applications

We use the React framework to create an application front-end.

Open a new window or change your smart contract directory. Then, run the following command:

npx create-react-app yourappnft-frontend

cd my-app
npm start

This action displays the front-end locally and you can edit the src/App.js file to make a colourful page.

This tutorial will not cover this aspect, we just need to upload the project to IPFS.

Upload the file to IPFS via the 4EVERLAND Bucket and get the CID (Hash), which is the tokenURI needed to create the NFT.

Of course, you can use the API to upload your project. Again, this is very simple as 4EVERLAND Bucket is AWS-S3 compatible, so run:

npm install @aws-sdk/client-s3

Follow the tutorial:

Modify the configuration. I think you can also get the appropriate CID.

4EVERLAND Hosting: Deploy directly

Isn’t it great that 4EVERLAND Hosting can upload your Github repo project directly to the IPFS network with one click and get the CID? Make your site an NFT!

4EVERLAND has everything you need to host fast, efficient, and censorship-proof websites or DApps on IPFS.

Just ‘import’ one of your projects and wait for deployment. After everything is done automatically (about 30 seconds), you get a decentralized front-end with the required IPFS CID (Hash) on the detail page.

Yes, this page has also been assigned a domain name and can be accessed directly.

Try this link: https://2048-6.4everland.app/

Combined, making YourAppNFT

Finally, we can deploy the contract!

We will be using Alchemy and Polygon’s test network to release our application NFT.

Log in to Alchemy, create a Polygon Network application, select the Mumbai test network, click the ‘View Key’ button and copy the HTTPS URL.

Open your smart contract project directory and locate hardhat.config.js file. You will need to update the configuration section to look like the following:

JavaScript
module.exports = {
solidity: “0.8.9”,
networks: {
mumbai: {
url: `HTTPS URL you copied from Alchemy`,
accounts: [“Your Private Wallet Key”]
}
}
};

Note:

URL: The HTTPS URL just copied.

Accounts: To ensure security, please create a new wallet using Metamask and export ‘Private Key’.

Please add Mumbai test network to your Metamask and get some test network Matic.

You can do this here: https://mumbaifaucet.com/

Next, create a Metadata.json file at the root of your contract and add the attributes needed to build an NFT: name, description, image and nimation_url.

Related use cases:

JavaScript
{
“name”: “Your App NFT”,
“description”: “YourAppNft V1”,
“image”: “ipfs://CID_FOR_IMAGE_REPRESENTING_YOUR_APP”,
“animation_url “: “ipfs://HASH_FROM_APP_BUILD”
}

Again, please upload an image to Bucket to represent your application NFT and fill in the CID to the image.

Fill in the CID of the application to animation_url.

Also, use the 4EVERLAND Bucket to upload this file and record the CID (Hash).

Deploy your contract

The last thing you need to do is write the deployment script, deploy the contract and mint your NFT. We have a sample file deploy.js in the root scripts, modify it.

JavaScript
const hre = require(“hardhat”);
const URI = “ipfs://detadata.js CID”
async function main() {
const YourAppNFT = await ethers.getContractFactory(“YourAppNFT”);
const appNft = await YourAppNFT.deploy(URI); await appNft.deployed(); console.log(`Contract deployed to ${appNft.address}`);
}main().catch((error) => {
console.error(error);
process.exitCode = 1;
});

Fill in the const URL with the detadata.js CID you just uploaded and save it.

Testing with Ethereum EVM in Hardhat’s memory:

npx hardhat run scripts/deploy.js

If the run succeeds, it will return:

Everything seems to be working fine. Let’s change the deploy command to deploy our contract to the test network!

npx hardhat run scripts/deploy.js — network mumbai

Returned a different contract address? Congratulations! This contract has been deployed to the Polygon Mumbai test network!

Search for contract addresses and verify: https://mumbai.polygonscan.com/

Log into Opensea using the wallet that the contract was deployed and view your NFT at: https://testnets.opensea.io/

As you can see, this application is NFT! I believe we can do something even cooler, like making your web2 site an NFT?

Happy creating!

About 4EVERLAND

4EVERLAND is a Web 3.0 cloud computing platform that integrates storage, computing, and network core capabilities. It aims to help the user to make a smooth leap from Web 2.0 to Web 3.0 and become the infrastructure for millions of Web 3.0 developers and applications.

Join 4EVERLAND community:

Website | Twitter | Telegram | Discord | Reddit | Medium| Email

Reference

https://www.atlassian.com/git/tutorials/install-git#install-the-git-credential-osx

https://hardhat.org/tutorial/creating-a-new-hardhat-project

https://docs.openzeppelin.com/learn/developing-smart-contracts

https://docs.openzeppelin.com/learn/writing-automated-tests

https://medium.com/7c57b51698e7

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
4EVERLAND

4EVERLAND

4EVERLAND is a Web3.0 cloud computing platform with global acceleration, privacy protection, distributed storage, and other technical features.