Skip to main content

building-a-decentralized-news-reader-using-glitter-protocol

Building a Decentralized News Reader Using Glitter Protocol​

Dailyfeeds just published a decentralized news data source available on Glitter Protocol. This valuable dataset allows everyone to build a decentralized news reader. The dataset contains news data crawled from various news sources. After performing incremental clustering, the news feeds are placed on Glitter Protocol.

Here is a step-by-step tutorial on how to create a decentralized news website using Glitter Protocol.

Step 1 - Initialize the Project​

First, you need to create a new project and install the Glitter SDK. This SDK allows easy connection to the Glitter network and access to mirror metadata.

npm create vite@latest first-glitter-app --template react-ts
npm install @glitterprotocol/glitter-sdk

Step 2 - Connect to the Network​

Next, generate a client so that the application can interact with the Glitter network. Initialize an LCDClient instance through the Glitter SDK and configure the relevant parameters.

import {
  Coins,
  Numeric,
  LCDClient,
  MnemonicKey,
} from "@glitterprotocol/glitter-sdk";
const HOST = "https://api.xian.glitter.link";
const CHAIN_ID = "glitter_12001-4";
const mnemonicKey =
  "lesson police usual earth embrace someone opera season urban produce jealous canyon shrug usage subject cigar imitate hollow route inhale vocal special sun fuel";

const client = new LCDClient({
  URL: HOST,
  chainID: CHAIN_ID,
  gasPrices: Coins.fromString("0.15agli"),
  gasAdjustment: Numeric.parse(1.5),
});

const key = new MnemonicKey({
  mnemonic: mnemonicKey,
});

const glitterCli = client.db(key);

Step 3 - Build the News Retrieval Function​

Retrieving news content is the core of the application. Define a function that constructs a query statement based on different news query times and sends it to the Glitter network to get news within the specified time range.

const axiosIns = axios.create({
  headers: {
    Accept: "application/json",
  },
  timeout: 30000,
});

const newsTable = "vec.news_v1";
const pageLimit = 50;
const sqlDefault = `SELECT  url,VECTOR_IP_DISTANCE(content_vector,TEXT_TO_VEC(?,'BAAI/bge-m3')) AS distance FROM ${newsTable} ORDER BY distance LIMIT ${pageLimit}`;
const res: any = await axiosIns.post(
  "https://gateway-test.glitternode.ru/v1/sql/query",
  {
    arguments: [
      {
        type: "STRING",
        value: inputValue,
      },
    ],
    dataset_name: "vec",
    sql: sqlDefault,
  }
);
const rawRow: any = getContractQueryResult(res);
const ids = rawRow.data.result.map((item: any) => item.row.url.value);
const sqlConditions = ids.map((id: any) => `_id = '${id}'`).join(" OR ");
const sql = `SELECT _id,title,content FROM trna.news_v5 WHERE ${sqlConditions}`;
const { result }: any = await glitterCli.query(sql);
const news = processDataModal(result);
setNews(news);

Step 4 - Display the News​

With the news retrieval function in place, you'll need to present the results on your front-end interface. This involves creating a user interface that displays the news articles' details and includes interactive elements to facilitate easy browsing and selection.

search

search

By following these steps, you can build a decentralized news aggregation website using the Glitter Protocol. This platform will provide users with an efficient and convenient way to access a wide range of aggregated news articles without the constraints of centralized control.

The entire source code is available here.