How to create Dev Protocol Dapp (1/3)

Kawakami
Watch, 11 min
BEGINNER

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.

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.

Complete image
※ 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.devprtcl.com/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.devprtcl.com/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.devprtcl.com/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.
list page image
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.

🌈 Was this helpful ?
In order to provide you with better contents in the future, please let us know your questions, feedbacks etc.🌱
We also welcome your suggestion on Dapp development and collaboration activity.
Contact

- Dev Protocol releases all codes as OSS in public. Please send us your articles or promotional activities of Dev Protocol!
Dev Protocol GitHub

- DIP (Dev Improvement Proposal) process is also released. We’re looking forward to seeing your comments on it.🌟
DIP URL