Changing The Game of Ticketing Using Revise and NFTs
Tags: web3, javascript, tutorial, opensource
Published: 2022-11-21 06:28:22



NFT’s have been all the buzz in the recent years, but dynamic NFTs is where the spotlight is at nowadays. This is a quick guide to creating your own ticket NFT, where your ticket will change once it is used and points will be added towards your ticket. These points can then be used for merchandise and food purchases, as well as to get early access to new albums from this artist.

### Introduction to Revise

Revise is a platform that’ll let you build dynamic NFTs. NFTs today are fairly static. Once you buy it they don’t change. What you see is what you get. Dynamic NFTs are able to react to the outside world, to data, to user interactions, etc. They are capable of changing, and evolving over time.

We’ll cover how to add NFTs using Revise and how to update the NFTs to make them dynamic in this guide. We won’t cover how to deploy these NFTs to Ethereum/Opensea ([click here to learn more](https://dev.to/anil_from_revise/how-to-publish-your-nft-on-opensea-testnet-3n29)).

### Clone the repository

Let’s clone this [GitHub repo](https://github.com/revise-network/nft-tutorial-1) to get started. The repo is an empty Javascript project with [revise-sdk](https://www.npmjs.com/package/revise-sdk) added to the package manager. Once you `cd` into the project folder, you can run `npm install` to install all the dependencies. Let’s create an `index.js` file. We’ll write all our code in this file, we’ll use `node index.js` to run the program.

Copy and paste the following code into the `index.js` file.

```jsx
const { Revise } = require("revise-sdk");
const AUTH_TOKEN = "...PASTE YOUR AUTH TOKEN HERE...";
const revise = new Revise({auth: AUTH_TOKEN});

async function run() {

	// write your code here

}
run()
```

<aside>
💡 You can generate the Auth token from app.revise.network. For more details refer here

</aside>

In the first couple of lines, we’re importing the [Revise-sdk](https://www.npmjs.com/package/revise-sdk) and adding our auth token (more on how to get this below). In the third line, we’re instantiating the `revise` object. We can now use this object to call all the functions needed to complete the exercise. Revise functions are mostly async, so we create a `run` function which is async and can call the revise functions using the `await` keyword. This will make our code more readable and maintainable.

### Generate API Key (Auth Token)

Before we continue writing the rest of the code let’s go grab an auth key. Visit [Revise](https://revise.network?utm_source=webinar&utm_medium=video&utm_campaign=ua&utm_id=ap) and click on “get started”. Once you make an account and log in you’ll see the “generate API key” link in the header. Click on it, you should now be able to generate the API key (auth token). Copy the key that is shown on the screen and keep it safe. This key is not stored on Revise’s servers for security reasons. If you misplace the key it’s permanently lost. You can always come back and generate a new key.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yygap7nko3ukzckhfu1o.png)

Let’s replace the `AUTH_TOKEN` in the above code with the key we just generated. Now we’re ready to start building our dynamic ticket NFT.

### Add a Collection

To start with let’s make a collection called “My Concert Tickets”. This collection can have multiple NFTs. Each NFT is a ticket. In order to make the collection, we’ll call the `addCollection` function. We’ll have to pass it two parameters, the name for the collection and the URI for the collection. The `collectionURI` is a unique project name that can be used to generate links for the NFT (why we need these links is described later). We have to make sure that the URI is unique and a single word. For e.g. “myconcerttickets" is a valid Collection URI “my concert tickets” is not. Add the following code to your `index.js` inside the `run` function.

```jsx
const collection = await revise.addCollection({name: "My Concert Tickets", uri: "..CREATE YOUR UNIQUE URI"})

// Collection Name : Use any name you want for your collection (this gets shown in the marketplace))
// Collection_URI  : Use a unique name (no spaces or special characters)
//                   this will generate a unique link for your collection
//                   for e.g. if you choose "myconcerttickets12345"
//                   your baseURI wil be "myconcerttickets12345.revise.link"
```

### Add an NFT

Now let’s add our first NFT ticket. We’ll use the `addNFT` function to create our ticket. Add the following code to your `run` function below the `addCollection` function call.

```jsx
const nft = await revise.addNFT({
    image: 'https://revise-testing.fra1.cdn.digitaloceanspaces.com/tickets/regular.jpg',
    name: 'My Concert Ticket',
    tokenId: '1',
    description: 'A concert ticket with exclusive perks'
  }, [
    {points: "10"}, {category: "General"}, {refreshments: "Yes"}, {seat: "General Area"}
  ], collection.id)

console.log(nft)
```

We’re passing parameters for the image of our ticket, the name, description, `tokenId` and some properties. We’re also passing the `collectionId` we received after creating our collection for the earlier code snippet. `tokenId` is the unique ID of your NFT on the blockchain. This helps the blockchain and marketplaces distinguish between the NFTs part of the same collection. Two NFTs shouldn’t have the same `tokenId`. We can add any amount of custom data to our NFTs via its attributes. As you can see in the above snippet we’ve added “points”, “category”, “refreshments”, etc. You can add any number of attributes here.

### Run

The final state of our `index.js` file should look like this now.

```jsx
const { Revise } = require("revise-sdk");
const AUTH_TOKEN = "...PASTE YOUR AUTH TOKEN HERE...";
const revise = new Revise({auth: AUTH_TOKEN});

async function run() {

const collection = await revise.addCollection({name: "My Concert Tickets", uri: "..CREATE YOUR UNIQUE URI"})

	const nft = await revise.addNFT({
    image: 'https://revise-testing.fra1.cdn.digitaloceanspaces.com/tickets/regular.jpg',
    name: 'My Concert Ticket',
    tokenId: '1',
    description: 'A concert ticket with exclusive perks'
  }, [
    {points: "10"}, {category: "General"}, {refreshments: "Yes"}, {seat: "General Area"}, {used: "No"}
  ], collection.id)

console.log(nft)

}
run()

```

Let’s run this file to create a collection and add our first NFT. Run `node index.js` in your terminal. The expected output is an `id` as shown below.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1ar8lw1odvxl6bfs9ng5.png)

The command you ran earlier should output the id for the NFT we just created. The ID is the unique identifier for this NFT, we’ll be using this `nftId` to fetch and makes updates to our pet. Let’s store this ID carefully.

<aside>
💡 Note: the `tokenId` and `nftId` are different. `tokenId` is used by marketplaces and wallets to identify your NFT. `nftId` is used by Revise to identify and control the NFT.

</aside>

Visit your [Revise dashboard](https://app.revise.network/?utm_source=webinar&utm_medium=video&utm_campaign=ua&utm_id=ap) to see your NFT ticket in action.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gzylniclw45n0iv6p08h.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vqk3dv2fsnyli0w72nm1.png)

### Upgrading your ticket using points

The ticket you currently have is a “General” type ticket, but the fact that you’ve gotten this far in the exercise means your ticket should be upgraded to “VIP”. Imagine this happening at a real concert, where you can use the points on your NFT ticket to get exclusive privileges such as upgrading to a VIP ticket, claiming food/drinks, redeeming points for merchandise, or even backstage access. Let’s start by upgrading your ticket to a VIP.

Create a new file called  `update.js` and paste the code snippet below. Run the code using `node update.js` 

```jsx
const { Revise } = require("revise-sdk");
const AUTH_TOKEN = "...AUTH_TOKEN...";
const revise = new Revise({auth: AUTH_TOKEN});
async function run() {
    const ticket = await revise.fetchNFT("...NFT_ID...")
    revise.nft(ticket)
			.setProperty("points", "5")
			.setProperty("category", "VIP")
			.setProperty("seat", "VIP")
      .setImage("https://revise-testing.fra1.cdn.digitaloceanspaces.com/tickets/vip.jpg")
      .save()
			console.log(`${ticket.name} has been updated`)
}

run()
```

In the above code we’re first referencing and fetching the NFT we just minted using the `fetchNFT` function and passing the `nftId` . Then we consume 5 points to upgrade our NFT to a VIP ticket, subsequently leading to a new image. You should be able to see the ticket change and it’s old version (revisions) of the NFT on your  [Revise dashboard](https://app.revise.network/?utm_source=webinar&utm_medium=video&utm_campaign=ua&utm_id=ap) as well.

<aside>
💡 The setProperty function allows us to change the underlying NFT metadata properties. It takes two parameters, the name of the property and the new value that needs to be set.

</aside>

### Adding extra points for attending the concert

```jsx
async function run() {
    const ticket = await revise.fetchNFT("...NFT_ID...")
    revise.nft(ticket)
			.setProperty("used", "Yes")
			.setProperty("points", "50")
      .save()
			console.log(`${ticket.name} has been updated`)
}

run()
```

This code is similar to the last, all thats changed is we are setting the “used” property to “Yes” to indicate the ticket has been used, and the “points” to 50. Run the code using `node update.js` .

### Using your new points

With 50 points there’s a lot you can now claim. You can claim a t-shirt, mouse pad or a concert banner. Which one would you pick? T-shirts cost 35 points, mousepad is 25 points and the banner is 40 points. Plug in the remainder number for points and run the code snippet below.

We also change the image of the ticket to now show the claimed badge on the ticket. Run the code using `node update.js` .

```jsx
async function run() {
    const ticket = await revise.fetchNFT("5acdcba9-4126-476d-8f62-e6efab3bdbfd")
    revise.nft(ticket)
			.setProperty("points", "...SET NEW POINTS BASED ON WHAT YOU CLAIM...")
			.setImage("https://revise-testing.fra1.cdn.digitaloceanspaces.com/tickets/vip-claimed.jpg")
      .save()
			console.log(`${ticket.name} has been updated`)
}

run()
```

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dmoaqguamx7q64j0hd05.png)

Congrats on creating your concert ticket NFT! [Publish your ticket to Opensea](https://dev.to/anil_from_revise/how-to-publish-your-nft-on-opensea-testnet-3n29) and show it off to the world.

If you want to learn more or explore opportunities creating with Revise, please schedule a call with us [here](https://calendly.com/anil-revise/dynamic-nfts-and-revise) or join [our Discord](https://discord.gg/47wkvCz3) or message us on [Twitter](https://twitter.com/ReviseNFT).