Repository
Requirements
- HTML & JS
- Steem.JS
- [Use SteemJS CDN -
<script src="//cdn.steemjs.com/lib/latest/steem.min.js"></script>]
Difficulty
- Intermediate
Tutorial Contents
- You will learn how to create XYZ
Curriculum
The Tutorial
Step 1 - Setup The HTML File
I'm using bootstrap, you can use it if you want.
first, make a new HTML-5 document
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
at the head add your stylesheet files (not important) and add the steemjs and your js files.
<head>
<meta charset="UTF-8">
<title>Vote, Resteem and comment</title>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="style.css" type="text/css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.steemjs.com/lib/latest/steem.min.js"></script>
<script src="js.js"></script>
</head>
if you don't understand just use this 3 rows
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.steemjs.com/lib/latest/steem.min.js"></script>
<script src="js.js"></script>
the first source is jquery - it will be easier for us to control the text boxes and buttons.
the second source is steem.js, this is the package of steem javascript.
the third source is our js file.
The Form
now we need a form with 3 textboxes, range control, and 2 buttons.
<div class="form">
<span class="not" id="not-id"></span>
<input type="text" id="steem-username" placeholder="Username" class="form-control" /><br>
<input type="password" id="steem-password" placeholder="Private WIF Key (Posting WIF Key)" class="form-control" /><br>
<input type="text" id="steem-url" placeholder="Post URL" class="form-control" /><br>
<div id="v-s">
<label id="vote-strength-value">20%</label>
<input type="range" class="form-control-range" id="vote-strength" min="0" max="100" value="20"/>
</div>
<button class="btn btn-primary" id="vote-show">Vote</button>
<button class="btn btn-success">Resteem</button>
</div>
at first, we're making a div with class form
then we making the textboxes
the range controller
and the 2 buttons.
Step 1.1 - CSS
here we need to use CSS!
just to make it cleaner, use this code
@import url('https://fonts.googleapis.com/css?family=Roboto');
html, body{
margin: 0;
padding: 0;
font-family: 'Roboto';
}
.form{
width: 30%;
margin: 5px auto;
text-align: center;
}
.not{
color: #ef2f2f;
font-weight: bold;
font-size: 21px;
display: block;
margin-bottom: 10px;
}
at first we import the font Roboto, removing any margin or padding at the body of the file.
we center the form to the center of the body.
and we creating the "alert" on the not class.
Step 2 - Javascript
create jquery document
$(document).ready(function(){
});
Step 2.1 - show the vote strength controller
first, we need to set a variable to indicate that we didn't press the vote button
$(document).ready(function(){
var isVote = false;
});
now if we press the vote button we want to open the controller,
if the controller is open and we press it again it will stream the vote
$("#vote-show").click(function(){
if(!isVote){
$("#v-s").show(200);
isVote = true;
}else{
var details = {
"name": $("#steem-username").val(),
"wif": $("#steem-password").val(),
"url": $("#steem-url").val(),
"weight": $("#vote-strength").val()
};
streamVote(details.name, details.url, details.wif, parseInt(details.weight*1000));
}
});
easy enough?
note: I use json array only for the comfort, nothing else.
Step 2.2 - Stream Vote Function
create a new function called streamVote with the variables
- Username
- Steemit URL
- WIF Key
- Vote Weight
function streamVote(username, url, wif, weight){
}
now take the URL and split it to:
- author
- permlink
var memo = url.split('/'),
author = memo[4].split('@')[1],
permlink = memo[5];
now we just need to use the steem function steem.broadcast.vote
steem.broadcast.vote(username, wif, author, permlink, weight, function(err, res){
console.log(memo, author, permlink, username, wif, weight);
if(!!err)
throw err;
$("#not-id").html("Author: " + author + " Voted By " + username + " With " + weight/1000 + "% Strength!");
});
at first, we use the username, wif, author, permlink, and weight to broadcast the vote.
then we logging to the console all of the details and then we send the "alert" to the span with the class not
Step 2.3 - Resteem Function
now we need to make the resteem function,
first, we want to use the function when we press the button.
$("#resteem").click(function(){
var details = {
"name": $("#steem-username").val(),
"wif": $("#steem-password").val(),
"url": $("#steem-url").val()
};
var memo = details.url.split('/'),
author = memo[4].split('@')[1],
permlink = memo[5];
streamResteem(details.name, details.wif, permlink, author)
});
easy enough, just sorting the name wif and URL at the json array then we getting the author and the permlink from the URL.
then we use the function with the variables.
now we need to create the function
// Resteem Post Function
function streamResteem(ACC, ACC_KEY, permlink, author) {
const json = JSON.stringify([
'reblog',
{
account: ACC,
author: author,
permlink: permlink
}
]);
steem.broadcast.customJson(ACC_KEY, [], [ACC], 'follow', json, (err, result) => {
if(!!err)
console.log("Resteem Failed!", err);
else{
console.log("Resteemed Succesfully, Author Name: " + author);
$("#not-id").html("Resteemed Succesfully, Author Name: " + author);
}
});
}
at first we have the function streamResteem.
- ACC - the voter
- ACC_KEY - the wif key
- permlink - the permlink of the post
- author - the author of the post
then we need to make a json array because we need to use custom JSON to make a resteem with steemjs.
then we broadcast the customJson and send a comment to the console and to the "alert" span.
and here we're done, you can check out and see that it works!
Step 3 - Test it out
You can see that it works perfectly!
Download The Files
Note: the versions at the GitHub & google drive is node.js version!
you can download the files from google drive Here
and you can download directly from GitHub Here
- you need to download the node_modules as a zip file and extract it.
Proof of Work Done
GitHub: https://github.com/lonelywolf1
Utopian Tutorials GitHub Repository: https://github.com/lonelywolf1/Bot-Projects-SteemJS (This tutorial will add to the GitHub repository in the next few days!)