Create your first nft visor with no-code

Create your first nft visor with no-code

Overview

This technical document explains how to view your NFTs without having to write any single line of code.

To begin, you need to sign up for a Bubble.io account. While there are other codeless platforms available, we recommend Bubble.io because we have tested this platform for this tutorial.

What We Will Do

  • Set up an Ethereum, Solana Node with QuickNode

What You Will Need

What is Bubble.io?

Bubble.io is a web development platform that allows individuals and businesses to build and launch web applications without writing code. Bubble.io uses a visual drag-and-drop editor to help users create complex web applications with ease.

With Bubble.io, users can create a wide variety of web applications, including social networks, marketplaces, e-commerce platforms, and more. The platform allows for the customization of designs, integrations with external APIs and services, and automated workflows.

Creation of our app in Bubble.io

Screenshot of the Bubble.io platform for creating your APP

First, we need to click the "Create an app" button to start :)

After that, you can see this interface, and you need to create these elements:

1.- Input - inputWallet

2.- Input - inputPage

3.- Repeating group

4.- Labels:

  • Total Pages

  • Total Items

  • Page Number

You can change the information easily by clicking on the top of the element to change the name.

It is important to set a name for the elements to have a good understanding of the workflow.

Screenshot of the Bubble.io platform adding a element called InputWallet

Screenshot of the Bubble.io platform adding a element called btnSearch

In the repeating group element, you need to uncheck the field “Set fixed number of rows”

Screenshot of the Bubble platform adding a element called btnSearch

After that we need to uncheck the field “Stretch rows to fill vertical space” and in the Layout tab, we need to change to the “Column” option

Screenshot of the Repeating Group component configurations

And you noticed the type of content it’s marked in red, that's because we need to retrieve the data from our NFTs. But don’t worry in the next steps we will retrieve the data 🙂.

We need to go to this section “Plugins” after that we need to click the button “Add Plugins” , and you need to search for the API Connector plugin.

Screenshot of the Bubble.io platform in the Plugin section

Once you have found the API Connector plugin, proceed by clicking on the "Install" button.

Adding the “API Connector plugin” in the bubble.io platform.

To configure our API connector, we must first obtain our desired blockchain's QuickNode RPC.

Screenshot of the QuickNode platform for creating your RPC endpoint

Screenshot of the QuickNode platform to copy our RPC from the desired blockchain

After obtaining our RPC, we need to set up our API in the API Connector plugin.

Plugin section in Bubble.io, here we are modifying the API parameters.

Next, you will need to construct the request to retrieve our NFTs, based on the blockchain you desire to use.

For Ethereum, please refer to this link:
https://www.quicknode.com/docs/ethereum/qn_fetchNFTs

For Solana, please refer to this link:
https://www.quicknode.com/docs/solana/qn_fetchNFTs

It should be noted that in this article, we are utilizing the Ethereum blockchain. However, it is possible to use Solana instead.

To save your time, i will provide you the code 🙂

{

    "id":67,

    "jsonrpc":"2.0",

    "method":"qn_fetchNFTs",

    "params":{

      "wallet": "<inputWallet>",

      "omitFields": [

        "provenance",

        "traits"

      ],

      "page": <inputPage>,

      "perPage": 10

    }

  }

You notice you saw the inputPage and inputWallet variables between the angle brackets ,and that's because we retrieve the data from the input from the UI.

To complete the task, first deselect the private field. Next, input the API name as "NFT API" and the name of the request as "FETCH NFTS". Note that this is a "POST" request.

Once the values for the "inputPage" and "inputWallet" keys have been entered, click on the "Initialize call" button to proceed.

Plugin section in Bubble.io, here we are replacing the JSON object to retrieve the information about our NFTS.

In the following steps, a screen displaying the retrieved value for "qn_fetchNFTs" will be presented,after that you need to click the “Save” button.

Plugin section in Bubble.io, here we retrieved the nfts from our wallet.

Once the asset object has been obtained, navigate to the "Design" section. Then, modify the content type in the repeating group to retrieve the name of the request. The resulting display should resemble the following:

Design section in Bubble.io, here we are defining the type of content in our repeating group.

We determine the type of content by executing the command "Current cells [REQUEST NAME] assets [attribute]". This will allow us to retrieve the desired attribute.

In the next example we are adding an image inside the repeating group.

We are defining the element's attributes retrieved from assets,in this case we define the image attribute.

To add a text attribute, you need to drop a text element inside the repeating group like the image element.

We are defining the element's attributes retrieved from assets,in this case we define the attribute name.

In order to display our data, we must initiate a workflow.

Here we are starting our workflow to retrieve our nft after clicking in the btnSearch

Furthermore we need to search for the “Display list in a repeating group”

In this screen we are getting the data from our API

You can observe the "Display List" window, and you must search for the option "Get data from an external API".

In this screen we are getting the data from our API

In consequent steps, you need to select your API and your petition.

In this screen we are getting the data from our API

After that , you may observe the required params about our API.

In this screen we are defining the params needed from our API

Afterwards we need to put the values from the elements:

Here we defined the values from our params

Finally we need to retrieve the assets attribute from our petition.

Retrieving the assets attribute to obtain the data from our nfts

Once the assets of our petition have been defined, you can view how the site appears by clicking the "Preview" tab.

Preliminary demonstration on the display of our nfts

But we need to add some magic touches!

Let add these attributes:

1.- totalItems

2.- totalPages

3.- pageNumber

We must search for the option "Get data from an external API" and select it in order to add the value from the totalItems from our API. Subsequently, we must specify the API Provider and the values required.

Filling our API values to retrieve the next attributes: totalItems,totalPages,pageNumber

Finally we need to retrieve the attribute desired, in this case, total items 🙂

Retrieving the total items from our wallet

After adding the magic touches , your site will look like this!

Screenshot of our final app where we retrieving our nfts

Conclusion

Congratulations! You have successfully built your no-code nft visor. It is our belief that this was a beneficial learning experience and that you will keep on honing your capabilities in the intriguing domain of blockchain technology.

We ❤️ Feedback!

If you have any feedback or questions on this guide, let us know. Or, feel free to reach out to us via Twitter or our Discord community server.

We’d love to hear from you!

Author: Irwing Tello
Discord: discord.com/invite/ADjtsHVreT
Twitter: twitter.com/irwingtello
LinkedIn: linkedin.com/in/irwingtello
Email:
Website: dfhcommunity.com
Youtube: youtube.com/@irwingtellomx

You can support my work here:
buymeacoffee.com/irwingtello

BTC: 34kXK9CpTJP1PyHKw2kUD2bt6rtGcG5CHY
EVM Address: 0x8B98F8Ff69d2A720120eD6C71A9Bc5072b8Eb46D
Solana: Ey9oVFHW79giacRZaKxigYjeihMsY7ox8jxc7Hp1sJmS

Did you find this article valuable?

Support Irwing Tello by becoming a sponsor. Any amount is appreciated!