https://github.com/igormuba/steemhere
You have, previously, learned how to sign in an user and save his token on the cache so we can work with it, now we will learn how to
This tutorials are intended to be very beginner friendly, ideally if I can make it simple enough so that you can copy and paste your way into building your own Steem dapp, then I was successful!
If you just want to see how posts can be made with the SteemConnect API, this post alone will work, if you plan to learn from scratch, please, read the former tutorials I have posted before
I am not going to use CSS nor make things fancy in this tutorial to keep things simple.
I am supposing you have followed the previous 2 tutorials, it mandatory to be logged into SteemConnect at this point, so if you are not, scroll all the way down on this post, in the end there are links to the previous classes on how to do it.
Just like this class they are simple and copy and paste friendly so you can be back here in just a few minutes.
Let us break down what are the 3 fields a post needs:
Though, very soon in this tutorial you will realize that the API require more arguments than that, we will work on the other data by manipulating properly the data from only those 3 fields!
Starting by the basic, that is, creating the input fields!
Start by breaking those poor lines twice just to put the form below the username and profile picture, if you have followed the
<br>
<br>
Now, below that
Title <input type="text" id="title"><br>
Content <textarea id="content"></textarea><br>
Tags <input type = "text" id="tags"><br>
<input type="button" value="Post It!" onclick="submitPost()">
Notice that every field MUST have an unique ID, and the button must have a onclick function to be called when it is clicked. For now, name it inside the button element and right after we will create that function.
Now we go to out JavaScript file, in my case named myscript.js, there we will create a function that will be called when we press the button, command to submit a post is this
//this is just copy and paste from the steemconnect documentation
//https://github.com/steemit/steemconnect.js?files=1
api.comment(parentAuthor, parentPermlink, author, permlink, title, body, jsonMetadata, function (err, res) {
console.log(err, res)
});
And I know this looks intimidating, it took me a while to understand it, mainly how the jsonMetadata should be formatted, but here I will break everything for you so you can work you way much easier than I did!
On the HTML above we have chosen the name submitPost for the function, now, inside the JavaScript let's create that function, shall we? I am creating it on the very end of the file, so any other variable we might wanna use we can grab, hope this makes sense to you
function submitPost(){
var allTags = document.getElementById("tags").value; //grabs the tabs field and put to the variable allTags
allTags = allTags.split(" "); //turns the allTags into an array with all the tags beautifully separated
var parentPermlink=allTags[0]; //sets the main tag (parentPermlink) as the first tag
var author=document.getElementById("username").innerHTML; //get the username from the logged user
var title=document.getElementById("title").value; //DOM to grab title from HTML
var permlink=title.replace(/ /g, "-"); //nice little trick to change the spaces for dashes for the permlink
permlink = permlink.toLowerCase(); //lowercase the permlink to avoid annoying errors (I know it too well)
//notice there is a space between the slashes!!! this changes all spaces to dashes
var body=document.getElementById("content").value; //DOM to grab the content itself of the post
var jsonMetadata; //just defining this for future use
api.comment("", parentPermlink, author, permlink, title, body, jsonMetadata, function (err, res) {
console.log(err, res)
});
}
But still, this won't work, check below first what each of those fields do, then we will format everything so we can generate a transaction and broadcast it!
When the button is clicked it will call submitPost, but as it is it will do nothing but throw errors at you. So allow me to help you out on this.
You see, here are the arguments we must pass to api.comment
""
, since we are creating a post, not a comment-
The function is the end is just the callback function, will be helpful for us to get feedback of errors.
Now, the kinda hard part is the jsonMetadata, I have grabbed a random post to copy the tag so you can see how it should look like, if you want to see the metadata from posts, do the following:
Spot the post on steemit.com you want to see the jsonMetada tags, in this case, I am grabbing it from my last post about my witness server and campaign update
On the URL replace it
from steemit.com
to d
so it becomes steemd.com
before
https://steemit.com/witness-category/@igormuba/igormuba-witness-update-new-projects-backup-server-bringing-new-users-and-curation
after
https://steemd.com/witness-category/@igormuba/igormuba-witness-update-new-projects-backup-server-bringing-new-users-and-curation
You will see this complicated page
but what we care are the tags
And this is the data structure for the tags
{"tags":["witness-category","witness-update","witness","minnowsupportproject","minnowsupport"]}
So, let us use a little bit of our beloved JavaScript to take care of that for us
var tagsMetadata='{"tags":['; //this is the same for all tags, so it is just a static string
for (var i = 0; i<allTags.length; i++){ //for each tag
tagsMetadata+='"'+allTags[i]+'"'; //we will add it between double quotes to tagsMetadata
if (i+1<allTags.length){ //if this is not the last tag
tagsMetadata+=",";// we add a coma and repeat
}
}
tagsMetadata+="]}"; //another static string that is the same for all strings
jsonMetadata=JSON.parse(tagsMetadata); //use the JSON parser to turn it indeed to a JSON object
There we go, nothing too hard so far, it is really just a bit boring getting the data structure right, trust me, I had a bit of a headache because one character out of place and there goes the Metadata all broken. And since this is supposed to be a CTRL+C and CTRL+V friendly tutorial as my goal is to make people limited only by their creativity, not by technical skills, the code about is just copied and pasted and you will have the data structure right, but I recommend you learning a bit about JSON and strings.
So, make sure it looks similar to this in the end, we have already went through all this code in a breeze, didn't we? look how beautiful the final work is
function submitPost(){
var allTags = document.getElementById("tags").value;
allTags = allTags.split(" ");
var parentPermlink=allTags[0];
var author=document.getElementById("username").innerHTML;
console.log("username"+author);
var title=document.getElementById("title").value;
console.log("title"+title);
var permlink=title.replace(/ /g, "-");
permlink = permlink.toLowerCase();
console.log("permlink"+permlink);
var body=document.getElementById("content").value;
console.log("body"+body);
var tagsMetadata='{"tags":[';
for (var i = 0; i<allTags.length; i++){
tagsMetadata+='"'+allTags[i]+'"';
if (i+1<allTags.length){
tagsMetadata+=",";
}
}
tagsMetadata+="]}";
console.log("tagsmetadata"+tagsMetadata);
var jsonMetadata=JSON.parse(tagsMetadata);
console.log("jsonmetadata"+jsonMetadata);
api.comment("", parentPermlink, author, permlink, title, body, jsonMetadata, function (err, res) {
console.log(err, res)
});
}
Go ahead and do your testing.
Fill the title, content and tags. I have succesfully make a post using this.
Do one too and tag me there @igormuba so I can see your work (I am using @partiko so I can see when you tag me)
and leave a comment here with a link to the post you made just in case I don't get the tag notification
Include a list of related tutorials you have already shared on Utopian that make up a Course Curriculum, if applicable.
Final myscript.js
https://github.com/igormuba/steemhere/blob/class4/js/myscript.js
Final index.html
https://github.com/igormuba/steemhere/blob/class4/index.html
To vote for me, go to https://steemit.com/~witnesses
(note, it is /~witnesses, not /witness)
Scroll all the way down to "If you would like to vote for a witness outside of the top 100, enter the account name below to cast a vote."
type igormuba and click vote