How to create Dev Protocol Dapp (1/3)

Hello permalink

I would like to create a simple Dapp in 3 steps using the library provided by the Dev Protocol.
Dapp will list the creators of OSS projects that are tokenized by the Dev Protocol, then display the tokens of those creators, and then create a staking function.

• Step1: Prepare the development environment
• Step2: Get a list of creators using Data Viewer
• Step3: Get creator information using dev-for-apps
• Step4: Code the list page
  

Prepare the development environment permalink

First, let's prepare a development environment. I have prepared the sample code for this tutorial on Github, so please use it.

git clone https://github.com/kazu80/tokener-find.git -b sample-code-v1.5.2

Run npm after clone

cd tokener-find
npm install

After that, execute the following command to start the site locally

npx webpack
npx webpack serve

Overview of the application permalink

This application has the following 2 pages

• Creator list page
• Creator details page

On the creator details page, Display the tokens owned by the creator and select and staking tokens.

※ The html file under the src directory is this screen
※ If you want to see how it works, you can also check it from here

This time, I would like to create a creator list page.

Creating a creator list page permalink

The Dev Protocol tokenizes OSS projects. So to get a list of creators, you need to filter all tokens by Author name.

Get a list of creators using Data Viewer permalink

Token information can be gotten from Data Viewer

Please refer to the linked document for Data Viewer

You can get a list of creators with the endpoints and queries below.

// endpoints
https://api.devprotocol.xyz/v1/graphql

// query
query Properties {
    property_meta(distinct_on: author) {
        property
    }
}

This is a sample to get a list of creators using fetch

const response = await fetch("https://api.devprotocol.xyz/v1/graphql", {
        method: "POST",
        headers: {
            "X-Requested-With": "xhr",
            "Content-Type": "application/json",
        },
        body: JSON.stringify({
            query: `
                query Properties {
                    property_meta(distinct_on: author) {
                        property
                    }
                }
            `,
        }),
    });

const json = await response.json();

const allCreatorInfo = json.data.property_meta;

The data is in JSON format as shown below

{
    "data": {
        "property_meta": [
            {
                "author": "Creator address"
            },
            ...
        ]
    }
}

Get creator information using dev-for-apps permalink

Data Viewer can only get the creator's address. I also want to use the creator's name and image on the list page, so get the information from dev-for-apps

dev-for-apps is an API that get creator information and token information.

Create a URL and make a GET request

https://dev-for-apps.azureedge.net/accounts?address="Creator address"

Get creator information using fetch

const query_params = new URLSearchParams({
    address: "Creator address",
});

const response = await fetch("https://dev-for-apps.azureedge.net/accounts?" + query_params, {
    method: "GET"
});

const info = await response.json();

const creatorInfo = info[0]

The data is in JSON format as shown below.

[
    {
        "name": "name",
        "portrait": {
            "url": "profile image URL",
            ...
        },
        ...
    }
]

The dev-for-apps API can get a lot of other information.

Code the list page permalink

Coding the creator list page using the gotten data.
If you put all the sample code that follows in src/assets/ts/main.ts, the creator list will be displayed.

window.addEventListener("load", async () => {
  // Get a list of creators from Data Viewer
  for (const info of await getAllCreatorInfo()) {

    // Get creator information using dev-for-app
    const creatorInfo = await getCreatorInfo(info.author);

    if (!creatorInfo) {
      continue
    }

    // Creating HTML to display creator information
    const div = document.createElement('div');

    div.innerHTML = `
        <article class="row mt-4 mb-3">
            <div class="col-10 d-flex align-items-center">
                <img class="rounded-circle me-3" src="${creatorInfo.portrait.url}" alt="creator image" width="60" height="60" style="object-fit: contain">
                <p class="fs-6">${creatorInfo.name}</p>
            </div>
            <a href="tokens.html?creator=${info.author}" class="col-2 d-flex align-items-center justify-content-center btn btn-primary">TOKEN</a>
        </article>
    `;

    const creatorInfoHTMLElement = div.firstElementChild;

    // Get a tag to insert creator information
    const creatorsHTMLElement = document.getElementById("creators");
    
    creatorsHTMLElement.appendChild(creatorInfoHTMLElement);
  }
});

The code from here is added below the above code. Or you can code it in another file and then import it.

async function getAllCreatorInfo() {
  const response = await fetch("https://api.devprotocol.xyz/v1/graphql", {
    method: "POST",
    headers: {
      "X-Requested-With": "xhr",
      "Content-Type": "application/json",
    },
    body: JSON.stringify({
      query: `
                query Properties {
                    property_meta(distinct_on: author) {
                        author
                    }
                }
            `,
    }),
  });

  const json = await response.json();
  
  return json.data.property_meta;
}

async function getCreatorInfo(creatorAddress) {
  const query_params = new URLSearchParams({
    address: creatorAddress,
  });

  const response = await fetch("https://dev-for-apps.azureedge.net/accounts?" + query_params, {
    method: "GET"
  });

  const info = await response.json();

  if (!info[0] || !info[0].hasOwnProperty('portrait') || !info[0].portrait) {
    return
  }
  
  return info[0]
}

With the coding so far and a few modifications, the page is complete.

You can check the source code of the completed version from the following
https://github.com/kazu80/tokener-find/tree/master/src

Summary permalink

This time, using the two libraries provided in the Dev Protocol, we acquired creator information and detailed information.
Next time, we will create a detailed page for creators.