Commit 71ec2bbf authored by inertia's avatar inertia

Merge branch 'tutorials-audit' into 'develop'

Tutorials audit

See merge request !41
parents 98ffc8b6 0803e7b9
---
title: 'JS: Blog Feed'
position: 1
description: "_By the end of this tutorial you should know how to fetch most recent five posts from particular user on Steem._"
description: How to fetch most recent five posts from particular user on Hive.
layout: full
canonical_url: blog_feed.html
---
<span class="fa-pull-left top-of-tutorial-repo-link"><span class="first-word">Full</span>, runnable src of [Blog Feed](https://gitlab.syncad.com/hive/devportal/-/tree/master/tutorials/javascript/tutorials/01_blog_feed) can be downloaded as part of: [tutorials/javascript](https://gitlab.syncad.com/hive/devportal/-/tree/master/tutorials/javascript).</span>
<br>
---
Full, runnable src of [Blog Feed](https://gitlab.syncad.com/hive/devportal/-/tree/master/tutorials/javascript/01_blog_feed) can be downloaded as part of: [tutorials/javascript](https://gitlab.syncad.com/hive/devportal/-/tree/master/tutorials/javascript) (or download just this tutorial: [devportal-master-tutorials-javascript-01_blog_feed.zip](https://gitlab.syncad.com/hive/devportal/-/archive/master/devportal-master.zip?path=tutorials/javascript/01_blog_feed)).
This tutorial pulls a list of the most recent five user's posts from the blockchain and displays them in simple list. Also some notes about usage of `client.database.getDiscussions` API.
## Intro
Tutorial is demonstrates the typical process of fetching account blog posts. It is quite useful if you want to embedd your blog posts on your website these tutorial will help you achieve that goal as well. This tutorial will explain and show you how to access the **Steem** blockchain using the [dsteem](https://github.com/jnordberg/dsteem) library to build a basic blog list of posts filtered by a _tag_
Tutorial is demonstrates the typical process of fetching account blog posts. It is quite useful if you want to embedd your blog posts on your website these tutorial will help you achieve that goal as well. This tutorial will explain and show you how to access the **Hive** blockchain using the [@hivechain/dhive](https://gitlab.syncad.com/hive/dhive) library to build a basic blog list of posts filtered by a _tag_
## Steps
1. [**Configure connection**](#Configure-connection) Configuration of dsteem to use proper connection and network
1. [**Query format**](#Query-format) Simple query format to help use fetch data
1. [**Fetch data and format**](#Fetch-data-and-format) Fetch data and display in proper interface
1. [**Configure connection**](#Configure-connection) Configuration of dhive to use proper connection and network
1. [**Query format**](#Query-format) Simple query format to help use fetch data
1. [**Fetch data and format**](#Fetch-data-and-format) Fetch data and display in proper interface
---
#### 1. Configure connection<a name="Configure-connection"></a>
In order to connect to the live Steem network, all we have to do is provide connection url to a server that runs on the network. `dsteem` by default set up to use live network but it has flexibility to adjust connection to any other testnet or custom networks, more on that in future tutorials.
In order to connect to the live Hive network, all we have to do is provide connection url to a server that runs on the network. `dhive` by default set up to use live network but it has flexibility to adjust connection to any other testnet or custom networks, more on that in future tutorials.
In first couple lines we require package and define connection server:
```
const { Client } = require('dsteem');
```javascript
const { Client } = require("@hivechain/dhive");
const client = new Client('https://api.steemit.com');
const client = new Client('https://api.openhive.network');
```
#### 2. Query format<a name="Query-format"></a>
* You can add a tag to filter the blog posts that you receive from the server, since we are aiming to fetch blog posts of particular user, we will define username as tag.
* You can also limit the number of results you would like to receive from the query
* You can add a tag to filter the blog posts that you receive from the server, since we are aiming to fetch blog posts of particular user, we will define username as tag.
* You can also limit the number of results you would like to receive from the query
```javascript
var query = {
tag: 'steemitblog', // This tag is used to filter the results by a specific post tag
tag: 'hiveio', // This tag is used to filter the results by a specific post tag
limit: 5, // This limit allows us to limit the overall results returned to 5
};
```
......@@ -52,98 +49,111 @@ var query = {
`client.database.getDiscussions` function is used for fetching discussions or posts. The first argument to this function determines which equivalent of the appbase `condenser_api.get_discussions_by_*` api calls it's going to use. Below is example of query and keyword **'blog'** indicates `condenser_api.get_discussions_by_blog` and somewhat counter-intuitively _query.tag_ indicates the account from which we want to get posts.
```
client.database
.getDiscussions('blog', query)
.then(result => {
var posts = [];
result.forEach(post => {
const json = JSON.parse(post.json_metadata);
const image = json.image ? json.image[0] : '';
const title = post.title;
const author = post.author;
const created = new Date(post.created).toDateString();
posts.push(
`<div class="list-group-item"><h4 class="list-group-item-heading">${title}</h4><p>by ${author}</p><center><img src="${image}" class="img-responsive center-block" style="max-width: 450px"/></center><p class="list-group-item-text text-right text-nowrap">${created}</p></div>`
);
});
document.getElementById('postList').innerHTML = posts.join('');
})
.catch(err => {
alert('Error occured' + err);
```javascript
client.database
.getDiscussions('blog', query)
.then(result => {
var posts = [];
result.forEach(post => {
const json = JSON.parse(post.json_metadata);
const image = json.image ? json.image[0] : '';
const title = post.title;
const author = post.author;
const created = new Date(post.created).toDateString();
posts.push(
`<div class="list-group-item"><h4 class="list-group-item-heading">${title}</h4><p>by ${author}</p><center><img src="${image}" class="img-responsive center-block" style="max-width: 450px"/></center><p class="list-group-item-text text-right text-nowrap">${created}</p></div>`
);
});
document.getElementById('postList').innerHTML = posts.join('');
})
.catch(err => {
alert('Error occured' + err);
});
```
The result returned form the service is a `JSON` object with the following properties:
```json
[
{
"id": 37338948,
"author": "steemitblog",
"permlink": "join-team-steemit-at-tokenfest",
"category": "steemit",
"parent_author": "",
"parent_permlink": "steemit",
"title": "Join Team Steemit at TokenFest!",
"body":
"<a href=\"https://tokenfest.adria.digital\"><img src=\"https://i.imgur.com/fOScDIW.png\"/></a>\n\nHello Steemians! If you’d like to meet Team Steemit live-in-person, or are just interested in attending what promises to be a great blockchain conference, join us at <a href=\"https://tokenfest.adria.digital/\">TokenFest</a> in San Francisco from March 15th to 16th. \n\nSteemit CEO, Ned Scott, will be participating in a fireside chat alongside Steemit’s CTO, Harry Schmidt, as well as the creator of Utopian.io, Diego Pucci. Steemit will also be hosting the opening party on Thursday night and we’d certainly love to meet as many of you as possible IRL, so head on over to https://tokenfest.adria.digital/ and get your tickets while you can. \n\n*Team Steemit*",
"json_metadata":
"{\"tags\":[\"steemit\",\"tokenfest\",\"conference\"],\"image\":[\"https://i.imgur.com/fOScDIW.png\"],\"links\":[\"https://tokenfest.adria.digital\",\"https://tokenfest.adria.digital/\"],\"app\":\"steemit/0.1\",\"format\":\"markdown\"}",
"last_update": "2018-03-07T23:22:54",
"created": "2018-03-07T20:56:36",
"active": "2018-03-13T01:40:21",
"last_payout": "1970-01-01T00:00:00",
"depth": 0,
"children": 29,
"net_rshares": "11453442114933",
"abs_rshares": "11454054795840",
"vote_rshares": "11454054795840",
"children_abs_rshares": "13568695606090",
"cashout_time": "2018-03-14T20:56:36",
"max_cashout_time": "1969-12-31T23:59:59",
"total_vote_weight": 3462435,
"reward_weight": 10000,
"total_payout_value": "0.000 SBD",
"curator_payout_value": "0.000 SBD",
"author_rewards": 0,
"net_votes": 77,
"root_comment": 37338948,
"max_accepted_payout": "0.000 SBD",
"percent_steem_dollars": 10000,
"allow_replies": true,
"allow_votes": true,
"allow_curation_rewards": true,
"beneficiaries": [],
"url": "/steemit/@steemitblog/join-team-steemit-at-tokenfest",
"root_title": "Join Team Steemit at TokenFest!",
"pending_payout_value": "46.436 SBD",
"total_pending_payout_value": "0.000 STEEM",
"active_votes": [
{
"voter": "steemitblog",
"weight": 0,
"rshares": "1870813909383",
"percent": 10000,
"reputation": "128210130644387",
"time": "2018-03-07T20:56:36"
},
{
"voter": "kevinwong",
"weight": 526653,
"rshares": "2208942520687",
"percent": 5000,
"reputation": "374133832002581",
"time": "2018-03-08T04:27:00"
}
],
"replies": [],
"author_reputation": "128210130644387",
"promoted": "0.000 SBD",
"body_length": 754,
"reblogged_by": []
}
{
"abs_rshares": 0,
"active": "2020-04-29T06:08:18",
"active_votes": [],
"allow_curation_rewards": true,
"allow_replies": true,
"allow_votes": true,
"author": "hiveio",
"author_reputation": "34879294456530",
"author_rewards": 0,
"beneficiaries": [],
"body": "![#HuobiHive2020 ... an asset shining bright, provided by community member @nateaguila](https://files.peakd.com/file/peakd-hive/hiveio/XsnzlWHl-social_hive_flare.jpg)\n\n## Huobi has listed Hive! ...",
"body_length": 0,
"cashout_time": "1969-12-31T23:59:59",
"category": "hiveblockchain",
"children": 26,
"children_abs_rshares": 0,
"created": "2020-04-24T00:41:06",
"curator_payout_value": "0.000 HBD",
"depth": 0,
"id": 85763874,
"json_metadata": {
"app": "peakd/2020.04.4",
"format": "markdown",
"description": "Hive is now listed on Huobi Global! This post contains all official links and AMA transcripts.",
"tags": [
"hiveblockchain",
"exchangenews",
"hiveama"
],
"users": [
"nateaguila",
"roelandp"
],
"links": [
"/trending/huobihive2020",
"/@nateaguila",
"https://twitter.com/HuobiGlobal/status/1253210569194090497",
"https://huobiglobal.zendesk.com/hc/en-us/articles/900000684263",
"https://huobiglobal.zendesk.com/hc/en-us/articles/900000687166--EXCLUSIVE-Deposit-HIVE-on-Huobi-Global-to-Share-100-000-HIVE-",
"https://twitter.com/HuobiGlobal/status/1252566140431130624",
"/@roelandp",
"/trending/notfinancialadvice",
"https://developers.hive.io/",
"https://hiveprojects.io/"
],
"image": [
"https://files.peakd.com/file/peakd-hive/hiveio/XsnzlWHl-social_hive_flare.jpg",
"https://files.peakd.com/file/peakd-hive/hiveio/9tEYm2I9-image.png",
"https://files.peakd.com/file/peakd-hive/hiveio/AXkoBSE3-image.png",
"https://files.peakd.com/file/peakd-hive/hiveio/djdRACpx-image.png"
]
},
"last_payout": "2020-05-01T00:41:06",
"last_update": "2020-04-24T00:41:06",
"max_accepted_payout": "0.000 HBD",
"max_cashout_time": "1969-12-31T23:59:59",
"net_rshares": 0,
"net_votes": 182,
"parent_author": "",
"parent_permlink": "hiveblockchain",
"pending_payout_value": "0.000 HBD",
"percent_steem_dollars": 10000,
"permlink": "huobi-global-official-hive-listing-announcement-giveaways-ama-chat-transcripts",
"promoted": "0.000 HBD",
"reblogged_by": [],
"replies": [],
"reward_weight": 10000,
"root_author": "hiveio",
"root_permlink": "huobi-global-official-hive-listing-announcement-giveaways-ama-chat-transcripts",
"root_title": "Huobi Global Official Hive Listing Announcement, Giveaways, and AMA Chat Transcripts",
"title": "Huobi Global Official Hive Listing Announcement, Giveaways, and AMA Chat Transcripts",
"total_payout_value": "0.000 HBD",
"total_pending_payout_value": "0.000 HBD",
"total_vote_weight": 0,
"url": "/hiveblockchain/@hiveio/huobi-global-official-hive-listing-announcement-giveaways-ama-chat-transcripts",
"vote_rshares": 0
}
]
```
......@@ -153,11 +163,8 @@ That's all there is to it.
### To Run the tutorial
1. `git clone https://gitlab.syncad.com/hive/devportal.git`
1. `cd devportal/tutorials/javascript/01_blog_feed`
1. `npm i`
1. `npm run dev-server` or `npm run start`
1. After a few moments, the server should be running at [http://localhost:3000/](http://localhost:3000/)
---
1. `git clone https://gitlab.syncad.com/hive/devportal.git`
1. `cd devportal/tutorials/javascript/01_blog_feed`
1. `npm i`
1. `npm run dev-server` or `npm run start`
1. After a few moments, the server should be running at [http://localhost:3000/](http://localhost:3000/)
---
title: 'JS: Client Signing'
position: 3
description: "_By the end of this tutorial you would know how to sign, verify broadcast transactions locally on Steem._"
description: How to sign, verify broadcast transactions locally on Hive.
layout: full
canonical_url: client_signing.html
---
<span class="fa-pull-left top-of-tutorial-repo-link"><span class="first-word">Full</span>, runnable src of [Client Signing](https://gitlab.syncad.com/hive/devportal/-/tree/master/tutorials/javascript/tutorials/03_client_signing) can be downloaded as part of: [tutorials/javascript](https://gitlab.syncad.com/hive/devportal/-/tree/master/tutorials/javascript).</span>
<br>
---
Full, runnable src of [Client Signing](https://gitlab.syncad.com/hive/devportal/-/tree/master/tutorials/javascript/03_client_signing) can be downloaded as part of: [tutorials/javascript](https://gitlab.syncad.com/hive/devportal/-/tree/master/tutorials/javascript) (or download just this tutorial: [devportal-master-tutorials-javascript-03_client_signing.zip](https://gitlab.syncad.com/hive/devportal/-/archive/master/devportal-master.zip?path=tutorials/javascript/03_client_signing)).
This tutorial gives you overview of how client side transaction signing works under the hood.
......@@ -18,11 +15,11 @@ We have predefined accounts to select for you to quickly use and few transaction
## Intro
Client side signing of transaction is yet another way of interacting with Steem blockchain. Compare to [Steemconnect](https://github.com/steemit/devportal-tutorials-js/tree/master/tutorials/02_steemconnect) method, client signing doesn't rely on other servers to generate and verify transaction, except when transaction is broadcasted to the network, it should be routed through one of the servers connected to that network or blockchain. It can be your own local machine running Steem blockchain or it could be any other publicly accessible servers.
Client side signing of transaction is yet another way of interacting with Hive blockchain. Compare to [Hivesigner](https://gitlab.syncad.com/hive/devportal/-/tree/master/tutorials/javascript/02_hivesigner) method, client signing doesn't rely on other servers to generate and verify transaction, except when transaction is broadcasted to the network, it should be routed through one of the servers connected to that network or blockchain. It can be your own local machine running Hive blockchain or it could be any other publicly accessible servers.
## Steps
1. [**App setup**](#app-setup) Import `dsteem` into `app.js` and prepare it to communicate with a Testnet instance of Steem blockchain
1. [**App setup**](#app-setup) Import `dhive` into `app.js` and prepare it to communicate with a Testnet instance of Hive blockchain
1. [**Get globals**](#get-globals) Network globals
1. [**Account selection**](#account-selection) Select predefined account
1. [**Operation selection**](#operation-selection) Select common operations
......@@ -32,30 +29,30 @@ Client side signing of transaction is yet another way of interacting with Steem
#### 1. App setup<a name="app-setup"></a>
Testnet and Production networks only differ with few settings which helps developers to switch their application from testnet to production. One of these settings is `addressPrefix` - string that is defined and will be in front of every public address on that chain/network. Another one is `chainId` - id of that network. By defining those parameters we are selecting Testnet and connecting to publicly available server with help of `dsteem` library. First few lines of code in `public/app.js` gives you example of connection to different networks, testnet and production.
Testnet and Production networks only differ with few settings which helps developers to switch their application from testnet to production. One of these settings is `addressPrefix` - string that is defined and will be in front of every public address on that chain/network. Another one is `chainId` - id of that network. By defining those parameters we are selecting Testnet and connecting to publicly available server with help of `@hivechain/dhive` library. First few lines of code in `public/app.js` gives you example of connection to different networks, testnet and production.
```javascript
opts.addressPrefix = 'TST';
opts.chainId =
'46d82ab7d8db682eb1959aed0ada039a6d49afa1602491f93dde9cac3e8e6c32';
//connect to server which is connected to the network/testnet
const client = new dsteem.Client('https://testnet.steemitdev.com', opts);
const client = new dhive.Client('https://testnet.hive.blog', opts);
```
* _Disclaimer: In this tutorial we are using testnet powered by community member (`@almost-digital`) and predefined accounts reside on this network only._
* _Disclaimer: In this tutorial we are using a testnet and predefined accounts reside on this network only._
#### 2. Get globals<a name="get-globals"></a>
To test connection as well as to get parameters of the connected network, we can use `getDynamicGlobalProperties` function from **dsteem** library. Only 2 fields are in our interesting for this tutorial, `head_block_number` - returns head or latest block number of the network, `head_block_id` - returns id of head block.
To test connection as well as to get parameters of the connected network, we can use `getDynamicGlobalProperties` function from **dhive** library. Only 2 fields are in our interesting for this tutorial, `head_block_number` - returns head or latest block number of the network, `head_block_id` - returns id of head block.
![Overview](https://gitlab.syncad.com/hive/devportal/-/raw/master/tutorials/javascript/tutorials/03_client_signing/images/overview.png)
![Overview](https://gitlab.syncad.com/hive/devportal/-/raw/master/tutorials/javascript/03_client_signing/images/overview.png)
#### 3. Account selection<a name="account-selection"></a>
We have predefined list of accounts to help you with generate, sign, verify and broadcast transaction on testnet. Select list has posting private key for each account and `onchange` selection event we keep account name and credentials in memory. `accountChange` function shows example of turning plain posting private key into private key buffer format that is understandable by **dsteem**.
We have predefined list of accounts to help you with generate, sign, verify and broadcast transaction on testnet. Select list has posting private key for each account and `onchange` selection event we keep account name and credentials in memory. `accountChange` function shows example of turning plain posting private key into private key buffer format that is understandable by **dhive**.
```javascript
privateKey = dsteem.PrivateKey.fromString(
privateKey = dhive.PrivateKey.fromString(
document.getElementById('account').value
);
```
......@@ -70,15 +67,15 @@ Number of operations are also predefined to show you example of operation format
Next we have button which helps us to generate operation object. Depending on selected operation type we have different structure for operation object. Typically, each transaction object has following fields:
* `ref_block_num` - references block number in past, in this example we have chosen head block number, but it is possible to use a block number from up to 65,536 blocks ago. This is required in TaPoS (Transaction as Proof of Stake) to avoid network forks.
* `ref_block_prefix` - reference buffer of block id of `ref_block_num` as prefix
* `expiration` - transaction expiration date in future, in our example we have set it +1 minute into future
* `operations` - array of operations, this field holds main information about transaction type and its structure which is recognized by the network
* `extensions` - any extensions to the transaction to change its parameters or options
* `ref_block_num` - references block number in past, in this example we have chosen head block number, but it is possible to use a block number from up to 65,536 blocks ago. This is required in TaPoS (Transaction as Proof of Stake) to avoid network forks.
* `ref_block_prefix` - reference buffer of block id of `ref_block_num` as prefix
* `expiration` - transaction expiration date in future, in our example we have set it +1 minute into future
* `operations` - array of operations, this field holds main information about transaction type and its structure which is recognized by the network
* `extensions` - any extensions to the transaction to change its parameters or options
Vote operation example
```
```javascript
op = {
ref_block_num: head_block_number,
ref_block_prefix: Buffer.from(head_block_id, 'hex').readUInt32LE(4),
......@@ -101,27 +98,30 @@ And output of operation object/json is set to `OpInput` element.
Each operation needs to be signed before they can be sent to the network, transactions without signature will not be accepted by network. Because someone has to identify operation and sign it with their private keys. Sign transaction button calls for `signTx` function which is job is to sign selected operation and its obkect with selected account. And output result into `TxOutput` element.
`stx = client.broadcast.sign(op, privateKey)`
```javascript
stx = client.broadcast.sign(op, privateKey)
```
Verifying transaction process is mostly done automatically but to show every step, we have included this process to check validity of the transaction signature. Verify transaction button calls `verifyTx` function. Function then verify authority of the signature in signed transaction, if it was signed with correct private key and authority. If verification is successful user interfaces adds checkmark next to button otherwise adds crossmark to indicate state of the signature.
`const rv = await client.database.verifyAuthority(stx)`
```javascript
const rv = await client.database.verifyAuthority(stx)
```
#### 7. Broadcast transaction<a name="broadcast-trx"></a>
Final step is to broadcast our signed transction to the selected server. Server chosen in Connect section will handle propagating transction to the network. After network accepts transaction it will return result with transaction `id`, `block_num` that this transaction is included to, `trx_num` transaction number, and if it is `expired` or not.
`const res = await client.broadcast.send(stx)`
```javascript
const res = await client.broadcast.send(stx)
```
That's it!
### To Run the tutorial
1. `git clone https://gitlab.syncad.com/hive/devportal.git`
1. `cd devportal/tutorials/javascript/03_client_signing`
1. `npm i`
1. `npm run dev-server` or `npm run start`
1. After a few moments, the server should be running at [http://localhost:3000/](http://localhost:3000/)
---
1. `git clone https://gitlab.syncad.com/hive/devportal.git`
1. `cd devportal/tutorials/javascript/03_client_signing`
1. `npm i`
1. `npm run dev-server` or `npm run start`
1. After a few moments, the server should be running at [http://localhost:3000/](http://localhost:3000/)
---
title: 'JS: Get Account Comments'
position: 9
description: "_By the end of this tutorial you should know how to retrieve account comments from the steem blockchain_"
description: How to retrieve account comments from the Hive blockchain.
layout: full
canonical_url: get_account_comments.html
---
<span class="fa-pull-left top-of-tutorial-repo-link"><span class="first-word">Full</span>, runnable src of [Get Account Comments](https://gitlab.syncad.com/hive/devportal/-/tree/master/tutorials/javascript/tutorials/09_get_account_comments) can be downloaded as part of: [tutorials/javascript](https://gitlab.syncad.com/hive/devportal/-/tree/master/tutorials/javascript).</span>
<br>
---
Full, runnable src of [Get Account Comments](https://gitlab.syncad.com/hive/devportal/-/tree/master/tutorials/javascript/09_get_account_comments) can be downloaded as part of: [tutorials/javascript](https://gitlab.syncad.com/hive/devportal/-/tree/master/tutorials/javascript) (or download just this tutorial: [devportal-master-tutorials-javascript-09_get_account_comments.zip](https://gitlab.syncad.com/hive/devportal/-/archive/master/devportal-master.zip?path=tutorials/javascript/09_get_account_comments)).
This tutorial will show how to fetch comments made by a specific account (in this case `@steemitblog`) by demonstrating how to use the `get_state` api function call. We will also demonstrate the most commonly used fields from the response object as well as how to parse the body of each comment.
This tutorial will show how to fetch comments made by a specific account (in this case `@hiveio`) by demonstrating how to use the `get_state` api function call. We will also demonstrate the most commonly used fields from the response object as well as how to parse the body of each comment.
## Intro
We are using the `get_state` function with `dsteem` that returns the current state of the network as well as additional content. Each content body is written in markdown and could be submitted to the blockchain by many different applications built on top of Steem. For that reason we are using the `remarkable` npm package to parse markdown in a readable format.
We are using the `get_state` function with `dhive` that returns the current state of the network as well as additional content. Each content body is written in markdown and could be submitted to the blockchain by many different applications built on top of Hive. For that reason we are using the `remarkable` npm package to parse markdown in a readable format.
## Steps
1. [**App setup**](#app-setup) Configuration of `dsteem` to use the proper connection and network.
1. [**Query**](#query) Query the path which we want to extract from Steem blockchain state.
1. [**Formatting**](#formatting) Formatting the JSON object to be viewed in a simple user interface.
1. [**App setup**](#app-setup) Configuration of `dhive` to use the proper connection and network.
1. [**Query**](#query) Query the path which we want to extract from Hive blockchain state.
1. [**Formatting**](#formatting) Formatting the JSON object to be viewed in a simple user interface.
#### 1. App setup<a name="app-setup"></a>
Below we have `dsteem` pointing to the main network with the proper chainId, addressPrefix and connection server.
Below we have `dhive` pointing to the main network with the proper chainId, addressPrefix and connection server.
There is a `public/app.js` file which holds the Javascript segment of this tutorial. In the first few lines we define and configure library and packages.
```javascript
const dsteem = require('dsteem');
const dhive = require('@hivechain/dhive');
let opts = {};
//connect to production server
opts.addressPrefix = 'STM';
opts.chainId =
'0000000000000000000000000000000000000000000000000000000000000000';
//connect to server which is connected to the network/production
const client = new dsteem.Client('https://api.steemit.com');
const client = new dhive.Client('https://api.openhive.network');
const Remarkable = require('remarkable');
const md = new Remarkable({ html: true, linkify: true });
......@@ -48,21 +45,21 @@ const md = new Remarkable({ html: true, linkify: true });
Next, we have the `main` function which runs when the page is loaded.
```javascript
// query string, fetching comments made by @steemitblog account
const query = '/@steemitblog/comments';
// query string, fetching comments made by @hiveio account
const query = '/@hiveio/comments';
client.database.call('get_state', [query]).then(result => {
// work with state object
});
```
`query` is the path from where want to extract Steem blockchain state. In our example we are querying `comments` from the `@steemitblog` account. The result will be the current state object with various information as well as the `content` property holding the content of the query.
`query` is the path from where want to extract Hive blockchain state. In our example we are querying `comments` from the `@hiveio` account. The result will be the current state object with various information as well as the `content` property holding the content of the query.
The following is an example of the returned object:
```json
{
"current_route":"/@steemitblog/comments",
"current_route":"/@hiveio/comments",
"props":{
"head_block_number":22307429,
"head_block_id":"01546265c9dc3e761add4c4b652743e3c640fa19",
......@@ -70,17 +67,17 @@ The following is an example of the returned object:
"current_witness":"smooth.witness",
"total_pow":514415,
"num_pow_witnesses":172,
"virtual_supply":"271970374.699 STEEM",
"current_supply":"268140818.508 STEEM",
"confidential_supply":"0.000 STEEM",
"current_sbd_supply":"13342173.771 SBD",
"confidential_sbd_supply":"0.000 SBD",
"total_vesting_fund_steem":"191002132.498 STEEM",
"virtual_supply":"271970374.699 HIVE",
"current_supply":"268140818.508 HIVE",
"confidential_supply":"0.000 HIVE",
"current_sbd_supply":"13342173.771 HBD",
"confidential_sbd_supply":"0.000 HBD",
"total_vesting_fund_steem":"191002132.498 HIVE",
"total_vesting_shares":"388786707656.308148 VESTS",
"total_reward_fund_steem":"0.000 STEEM",
"total_reward_fund_steem":"0.000 HIVE",
"total_reward_shares2":"0",
"pending_rewarded_vesting_shares":"366359809.533218 VESTS",
"pending_rewarded_vesting_steem":"178575.754 STEEM",
"pending_rewarded_vesting_steem":"178575.754 HIVE",
"sbd_interest_rate":0,
"sbd_print_rate":10000,
"maximum_block_size":65536,
......@@ -94,15 +91,15 @@ The following is an example of the returned object:
"max_virtual_bandwidth":"264241152000000000000"
},
"tag_idx":{
"trending":["","life","photography","steemit","kr","introduceyourself","bitcoin","art","travel","cryptocurrency","spanish","food","steem","blog","funny","news","nature","colorchallenge","dtube","indonesia","story","cn","money","music","writing","crypto","contest","busy","health","poetry","meme","video","utopian-io","photo","new","love","blockchain","deutsch","dmania","science","technology","aceh","entertainment","gaming","politics","myanmar","esteem","sports","fun","tr"]
"trending":["","life","photography","hiveio","kr","introduceyourself","bitcoin","art","travel","cryptocurrency","spanish","food","hive","blog","funny","news","nature","colorchallenge","dtube","indonesia","story","cn","money","music","writing","crypto","contest","busy","health","poetry","meme","video","utopian-io","photo","new","love","blockchain","deutsch","dmania","science","technology","aceh","entertainment","gaming","politics","myanmar","esteem","sports","fun","tr"]
},
"tags":{},
"content":{
"steemitblog/afm007-re-steemitblog-devportal-update-3-ux-improvements-more-javascript-tutorials-and-more-20180509t050215510z":{
"hiveio/afm007-re-hiveio-devportal-update-3-ux-improvements-more-javascript-tutorials-and-more-20180509t050215510z":{
"id":47669989,
"author":"steemitblog",
"permlink":"afm007-re-steemitblog-devportal-update-3-ux-improvements-more-javascript-tutorials-and-more-20180509t050215510z",
"category":"steem",
"author":"hiveio",
"permlink":"afm007-re-hiveio-devportal-update-3-ux-improvements-more-javascript-tutorials-and-more-20180509t050215510z",
"category":"hive",
"parent_author":"afm007",
"parent_permlink":"devportal-update-3-ux-improvements-more-javascript-tutorials-and-more","title":"","body":"I want to learn the Python language.",
"json_metadata":"{''}",
......@@ -120,39 +117,39 @@ The following is an example of the returned object:
"max_cashout_time":"1969-12-31T23:59:59",
"total_vote_weight":32523,
"reward_weight":10000,
"total_payout_value":"0.000 SBD",
"curator_payout_value":"0.000 SBD",
"total_payout_value":"0.000 HBD",
"curator_payout_value":"0.000 HBD",
"author_rewards":0,
"net_votes":1,
"root_author":"steemitblog",
"root_author":"hiveio",
"root_permlink":"devportal-update-3-ux-improvements-more-javascript-tutorials-and-more",
"max_accepted_payout":"1000000.000 SBD",
"max_accepted_payout":"1000000.000 HBD",
"percent_steem_dollars":10000,
"allow_replies":true,
"allow_votes":true,
"allow_curation_rewards":true,
"beneficiaries":[],
"url":"/steem/@steemitblog/devportal-update-3-ux-improvements-more-javascript-tutorials-and-more#@afm007/afm007-re-steemitblog-devportal-update-3-ux-improvements-more-javascript-tutorials-and-more-20180509t050215510z",
"url":"/hive/@hiveio/devportal-update-3-ux-improvements-more-javascript-tutorials-and-more#@afm007/afm007-re-hiveio-devportal-update-3-ux-improvements-more-javascript-tutorials-and-more-20180509t050215510z",
"root_title":"DevPortal Update #3: UX Improvements, More Javascript Tutorials and More!",
"pending_payout_value":"0.005 SBD",
"total_pending_payout_value":"0.000 STEEM",
"pending_payout_value":"0.005 HBD",
"total_pending_payout_value":"0.000 HIVE",
"active_votes":[{"voter":"afm007","weight":17182,"rshares":1057692008,"percent":10000,"reputation":"855556264424","time":"2018-05-09T05:18:06"}],
"replies":[],
"author_reputation":"855556264424",
"promoted":"0.000 SBD",
"promoted":"0.000 HBD",
"body_length":0,
"reblogged_by":[]
},
"steemitblog/re-steemitblog-devportal-update-3-ux-improvements-more-javascript-tutorials-and-more-20180509t045305223z":{
"hiveio/re-hiveio-devportal-update-3-ux-improvements-more-javascript-tutorials-and-more-20180509t045305223z":{
"id":47669080,
"author":"steemitblog",
"permlink":"re-steemitblog-devportal-update-3-ux-improvements-more-javascript-tutorials-and-more-20180509t045305223z",
"category":"steem",
"author":"hiveio",
"permlink":"re-hiveio-devportal-update-3-ux-improvements-more-javascript-tutorials-and-more-20180509t045305223z",
"category":"hive",
"parent_author":"andreina89",
"parent_permlink":"devportal-update-3-ux-improvements-more-javascript-tutorials-and-more",
"title":"",
"body":"Excellent post very interesting friend, thanks",
"json_metadata":"{\"tags\":[\"steem\"],\"app\":\"steemit/0.1\"}",
"json_metadata":"{\"tags\":[\"hive\"],\"app\":\"hiveblog/0.1\"}",
"last_update":"2018-05-09T04:53:21",
"created":"2018-05-09T04:53:21",
"active":"2018-05-09T04:53:27",
......@@ -167,34 +164,31 @@ The following is an example of the returned object:
"max_cashout_time":"1969-12-31T23:59:59",
"total_vote_weight":0,
"reward_weight":10000,
"total_payout_value":"0.000 SBD",
"curator_payout_value":"0.000 SBD",
"total_payout_value":"0.000 HBD",
"curator_payout_value":"0.000 HBD",
"author_rewards":0,
"net_votes":0,