Skip to content

Commit 812783e

Browse files
Robert Oswaldrelativityboy
Robert Oswald
authored and
relativityboy
committed
29 get follower and following list (#101)
* get follower and following * upd UI format * rework UI and some logic including readme upd
1 parent 9cdb41c commit 812783e

7 files changed

Lines changed: 356 additions & 0 deletions

File tree

‎tutorials/19_get_follower_and_following_list/README.md‎

Lines changed: 115 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,115 @@
1+
# Get follower and following list
2+
3+
_By the end of this tutorial you should know how to create a list of followers and users that you are following._
4+
5+
This tutorial will take you through the process of calling both the `follower` and `following` functions from the STEEM API.
6+
7+
## Intro
8+
9+
We are using the `call` operation provided by the `dsteem` library to pull the follow information for a specified user account. There are 4 variables required to execute this operation:
10+
11+
1. _username_ - The specific user for which the follower(ing) list will be retrieved.
12+
2. _startFollower(ing)_ - The starting letter(s) or name for the search query.
13+
3. _followType_ - This value is set to `blog` and includes all users following or being followed by the `user`.
14+
4. _limit_ - The maximum number of lines to be returned by the query.
15+
16+
A simple HTML interface is used to capture the required information after which the function is executed.
17+
18+
## Steps
19+
20+
1. [**Configure connection**](#connection) Configuration of `dsteem` to communicate with the Steem blockchain
21+
2. [**Input variables**](#input) Collecting the required inputs via an HTML UI
22+
3. [**Get followers/following**](#query) Get the followers or users being followed
23+
4. [**Display**](#display) Display the array of results on the UI
24+
25+
#### 1. Configure connection<a name="connection"></a>
26+
27+
As usual, we have a `public/app.js` file which holds the Javascript segment of the tutorial. In the first few lines we define the configured library and packages:
28+
29+
```javascript
30+
const dsteem = require('dsteem');
31+
let opts = {};
32+
//define network parameters
33+
opts.addressPrefix = 'STM';
34+
opts.chainId =
35+
'0000000000000000000000000000000000000000000000000000000000000000';
36+
//connect to a steem node, production in this case
37+
const client = new dsteem.Client('https://api.steemit.com');
38+
```
39+
40+
Above, we have `dsteem` pointing to the production network with the proper chainId, addressPrefix, and endpoint.
41+
42+
#### 2. Input variables<a name="input"></a>
43+
44+
The required parameters for the follow operation is recorded via an HTML UI that can be found in the `public/index.html` file. The values have been pre-populated for ease of use but are editable.
45+
46+
The parameter values are allocated as seen below once the user clicks on the "Get Followers" or "Get Following" button.
47+
The two queries are very similar and run from two different functions activated from a button on the UI. The first line of both functions is used to clear the display before new information is queried.
48+
49+
```javascript
50+
//Followers function
51+
window.submitFollower = async () => {
52+
//clear list
53+
document.getElementById('followList').innerHTML = '';
54+
55+
//get user name
56+
const username = document.getElementById('username').value;
57+
//get starting letters / word
58+
const startFollow = document.getElementById('startFollow').value;
59+
//get limit
60+
var limit = document.getElementById('limit').value;
61+
```
62+
63+
#### 3. Get followers/following<a name="query"></a>
64+
65+
A list of followers or users being followed is called from the database with the `follow_api` available in the `SteemJS` library.
66+
67+
```javascript
68+
//get list of followers
69+
//getFollowers(following, startFollower, followType, limit)
70+
let followlist = await client.call('follow_api', 'get_followers', [
71+
username,
72+
startFollow,
73+
'blog',
74+
limit,
75+
]);
76+
77+
document.getElementById('followResultContainer').style.display = 'flex';
78+
document.getElementById('followResult').className = 'form-control-plaintext alert alert-success';
79+
document.getElementById('followResult').innerHTML = 'Followers';
80+
81+
82+
//get list of authors you are following
83+
//getFollowing(follower, startFollowing, followType, limit)
84+
let followlist = await client.call('follow_api', 'get_following', [
85+
username,
86+
startFollow,
87+
'blog',
88+
limit,
89+
]);
90+
91+
document.getElementById('followResultContainer').style.display = 'flex';
92+
document.getElementById('followResult').className = 'form-control-plaintext alert alert-success';
93+
document.getElementById('followResult').innerHTML = 'Following';
94+
95+
```
96+
97+
#### 4. Display<a name="display"></a>
98+
99+
The result returned from the query is an array of objects. The follower(ing) value from that array is displayed on both the UI and the console via a simple `forEach` array method.
100+
101+
```javascript
102+
followlist.forEach((newObj) => {
103+
name = newObj.follower;
104+
document.getElementById('followList').innerHTML += name + '<br>';
105+
console.log(name);
106+
});
107+
```
108+
109+
### To run this tutorial
110+
111+
1. clone this repo
112+
2. `cd tutorials/19_get_follower_and_following_list`
113+
3. `npm i`
114+
4. `npm run dev-server` or `npm run start`
115+
5. After a few moments, the server should be running at http://localhost:3000/

‎tutorials/19_get_follower_and_following_list/index.js‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
const Koa = require('koa');
2+
const app = new Koa();
3+
const serve = require('koa-static');
4+
app.use(serve('./public'));
5+
6+
app.listen(3000);
7+
8+
console.log('listening on port 3000');

‎tutorials/19_get_follower_and_following_list/package.json‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
{
2+
"name": "19_get_follower_and_following_list",
3+
"version": "1.0.0",
4+
"description": "",
5+
"main": "index.js",
6+
"scripts": {
7+
"start": "webpack && node ./index.js",
8+
"test": "echo \"Error: no test specified\" && exit 1",
9+
"dev-server": "./node_modules/.bin/webpack-dev-server --mode development --content-base ./public --port 3000"
10+
},
11+
"author": "",
12+
"license": "ISC",
13+
"dependencies": {
14+
"bootstrap": "^4.1.0",
15+
"dsteem": "^0.8.7",
16+
"koa": "^2.5.0",
17+
"koa-static": "^4.0.2",
18+
"remarkable": "^1.7.1"
19+
},
20+
"devDependencies": {
21+
"css-loader": "^0.28.11",
22+
"style-loader": "^0.21.0",
23+
"webpack": "^4.3.0",
24+
"webpack-cli": "^2.0.13",
25+
"webpack-dev-server": "^3.1.3"
26+
}
27+
}

‎tutorials/19_get_follower_and_following_list/public/app.js‎

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
//Step 1.
2+
3+
// const dsteem = require('dsteem');
4+
// //define network parameters
5+
// let opts = {};
6+
// opts.addressPrefix = 'STX';
7+
// opts.chainId = '79276aea5d4877d9a25892eaa01b0adf019d3e5cb12a97478df3298ccdd01673';
8+
// //connect to a steem node, testnet in this case
9+
// const client = new dsteem.Client('https://testnet.steem.vc', opts);
10+
11+
const dsteem = require('dsteem');
12+
let opts = {};
13+
//define network parameters
14+
opts.addressPrefix = 'STM';
15+
opts.chainId =
16+
'0000000000000000000000000000000000000000000000000000000000000000';
17+
//connect to a steem node, production in this case
18+
const client = new dsteem.Client('https://api.steemit.com');
19+
20+
21+
//Step 2. user fills in the values on the UI
22+
23+
//Followers function
24+
window.submitFollower = async () => {
25+
//clear list
26+
document.getElementById('followList').innerHTML = '';
27+
28+
//get user name
29+
const username = document.getElementById('username').value;
30+
//get starting letters / word
31+
const startFollow = document.getElementById('startFollow').value;
32+
//get limit
33+
var limit = document.getElementById('limit').value;
34+
35+
//Step 3. Call followers list
36+
37+
//get list of followers
38+
//getFollowers(following, startFollower, followType, limit)
39+
let followlist = await client.call('follow_api', 'get_followers', [
40+
username,
41+
startFollow,
42+
'blog',
43+
limit,
44+
]);
45+
46+
document.getElementById('followResultContainer').style.display = 'flex';
47+
document.getElementById('followResult').className = 'form-control-plaintext alert alert-success';
48+
document.getElementById('followResult').innerHTML = 'Followers';
49+
50+
//Step 4. Display results on console for control check and on UI
51+
52+
followlist.forEach((newObj) => {
53+
name = newObj.follower;
54+
document.getElementById('followList').innerHTML += name + '<br>';
55+
console.log(name);
56+
});
57+
58+
};
59+
60+
//Step 2. user fills in the values on the UI
61+
62+
//Following function
63+
window.submitFollowing = async () => {
64+
//clear list
65+
document.getElementById('followList').innerHTML = '';
66+
67+
//get user name
68+
const username = document.getElementById('username').value;
69+
//get starting letters / word
70+
const startFollow = document.getElementById('startFollow').value;
71+
//get limit
72+
var limit = document.getElementById('limit').value;
73+
74+
//Step 3. Call following list
75+
76+
//get list of authors you are following
77+
//getFollowing(follower, startFollowing, followType, limit)
78+
let followlist = await client.call('follow_api', 'get_following', [
79+
username,
80+
startFollow,
81+
'blog',
82+
limit,
83+
]);
84+
85+
document.getElementById('followResultContainer').style.display = 'flex';
86+
document.getElementById('followResult').className = 'form-control-plaintext alert alert-success';
87+
document.getElementById('followResult').innerHTML = 'Following';
88+
89+
//Step 4. Display results on console for control check and on UI
90+
91+
followlist.forEach((newObj) => {
92+
name = newObj.following;
93+
document.getElementById('followList').innerHTML += name + '<br>';
94+
console.log(name);
95+
});
96+
};

‎tutorials/19_get_follower_and_following_list/public/index.html‎

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
<html>
2+
<head>
3+
<title>Get Follower and Following List</title>
4+
<script src="bundle.js"></script>
5+
</head>
6+
<body>
7+
<div class="container" id="content"><br/>
8+
<h4>Get list of Followers and Following for User</h4>
9+
<form>
10+
<div class="form-group row">
11+
<label for="username" class="col-sm-2 col-form-label">
12+
Username
13+
</label>
14+
<div class="col-sm-10">
15+
<input
16+
id="username"
17+
type="text"
18+
class="form-control"
19+
value="steemitblog"
20+
/>
21+
</div>
22+
</div>
23+
<div class="form-group row">
24+
<label for="startFollow" class="col-sm-2 col-form-label">
25+
Starting letter(s)
26+
</label>
27+
<div class="col-sm-10">
28+
<input
29+
id="startFollow"
30+
type="text"
31+
class="form-control"
32+
value="a"
33+
/>
34+
</div>
35+
</div>
36+
<div class="form-group row">
37+
<label for="limit" class="col-sm-2 col-form-label">
38+
Max length of list to display
39+
</label>
40+
<div class="col-sm-10">
41+
<input
42+
type="number"
43+
class="form-control"
44+
id="limit"
45+
value="10"
46+
/>
47+
</div>
48+
</div>
49+
<div class="form-group row">
50+
<div class="offset-sm-2 col-sm-10">
51+
<input
52+
id="followerBtn"
53+
type="button"
54+
value="Get Followers"
55+
onclick="submitFollower()"
56+
class="btn btn-primary"
57+
/>
58+
</div>
59+
</div>
60+
<div class="form-group row">
61+
<div class="offset-sm-2 col-sm-10">
62+
<input
63+
id="followingBtn"
64+
type="button"
65+
value="Get Following"
66+
onclick="submitFollowing()"
67+
class="btn btn-primary"
68+
/>
69+
</div>
70+
</div>
71+
<div
72+
class="form-group row"
73+
id="followResultContainer"
74+
style="display: none;"
75+
>
76+
<label for="followResult" class="col-sm-2 col-form-label">
77+
List of
78+
</label>
79+
<div class="col-sm-10">
80+
<div id="followResult" class="form-control-plaintext" />
81+
</div>
82+
</div>
83+
</form>
84+
<div class="offset-sm-2 col-sm-10">
85+
<div class="list-group" id="followList"></div>
86+
</div>
87+
</div>
88+
</body>
89+
</html>

‎tutorials/19_get_follower_and_following_list/public/style.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
import 'bootstrap/dist/css/bootstrap.min.css'

‎tutorials/19_get_follower_and_following_list/webpack.config.js‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
var path = require('path');
2+
module.exports = {
3+
entry: ['./public/app.js', './public/style.scss'],
4+
output: {
5+
path: path.resolve(__dirname, 'public'),
6+
filename: 'bundle.js',
7+
},
8+
devtool: 'source-map',
9+
module: {
10+
rules: [
11+
{
12+
test: /\.css$/,
13+
use: ['style-loader', 'css-loader'],
14+
},
15+
],
16+
},
17+
performance: {
18+
hints: process.env.NODE_ENV === 'production' ? 'warning' : false,
19+
},
20+
};

0 commit comments

Comments
 (0)