How easy it is to develop STEEM blockchain apps - with video tutorial!

in steemdev •  7 years ago  (edited)

In the span of only 9 minutes I'm going to write a basic app that posts an article to the STEEM blockchain and walk you through it step-by-step.

For those of you who don't want to follow along with the video, you can follow the steps and view the completed source on github here: https://github.com/jredbeard/steempostexample

References of places to gain the knowledge required to make this tutorial:

Alpha/pre-release of steemit developer portal: https://steemit.github.io/steemit-docs/
Examples within the steem-js repo on github: https://github.com/steemit/steem-js/tree/master/examples

It's my hope that this tutorial helps inspire others to develop applications that use the STEEM blockchain and see that it's not an unattainable or unrealistically difficult thing to do - in fact, it's quite simple. As time allows I may do further tutorials in the future, or maybe even a whole series.

Thanks for reading and watching, and STEEM on!

Edit: I've updated the example on github for the script line that pulls in the steem-js library to use https instead of http. Anywhere http exists in code should be considered a bug. :)

Authors get paid when people like you upvote their post.
If you enjoyed what you read here, create your account today and start earning FREE STEEM!
Sort Order:  

I'm gonna ask a real dummy question as a non developer. What part of that actually connected all that html with the steem blockchain?

Technically, the function steem.broadcast.comment(). The function is available by pulling in the steem-js library. By default it connects to steemit.com's public steemd nodes but you can easily have it connect elsewhere instead. The public nodes make it easy for developers to kickstart/develop their own projects without additional infrastructure.

Does this only allow you to build a frontend app around the steem crypto? or can you use this to create your own token/coin and web app? does this have to be built on a server or can you do it all local? what if I wanted to make it more like twitter or instagram? or pull in apis from Google for youtube or search to build something new? does it build it on top of steem? or could I rename and make my own blockchain named creem? hypothetically?

That is what the upcoming steem smt's are for: https://smt.steem.io

Do you know (or can you share) when the SMT dev tools will be available? I am very excited to dive in.

And if you would like to learn how to write code, there is a great opportunity, because of CodeSchool Free Weekend :)

There is dedicated path for JavaScript and many, many others! :)

It's great to have tutorials like that.

However I am a firm believer that we should go the extra step and provide some 'higher-level' tools than SteemJS to help developer create bigger STEEM apps more easily.

I believe if we had a good 'boilerplate app', for deploying a simple react-based STEEM app, with STEEMJs, some 3rd party services like AskSteem, SteemConnect, markdown syntax, maybe IPFS for file upload, etc. Then a lot of projects would come out of it.

Interacting with the chain is super easy as as it is already, but building something usable and decent enough for release is much harder for small teams because of the little details.

I don't disagree, although condenser itself is open source and is already a react-based STEEM app using steem-js. I don't know if that meets the qualification for 'simple', but it could potentially be a good starting point for someone to put together a more watered down boilerplate app.

Condenser also has a lot more stuff that a good boilerplate wouldn't need. Steemit a blogging platform on top of STEEM, not everyone has the same use case. Let's say someone wants to make a tic-tac-toe game on top of STEEM, condenser is a terrible starting point. By limiting it to blogging, people are not being innovative and are only copying what already exists.

If someone starts anything like a boilerplate on github, I'd be really glad to help on some stuff

  ·  7 years ago (edited)

You should try to get some support for this from Steemit Inc or whales/witnesses.

This sounds like an interesting idea. I've been looking to get involved in some kind of worthwhile project on Github, as although I've been developing for years, I haven't really used it all that much. This kind of thing wouldn't want to be using something like react would it? I don't know react (yet), but from what I see, although it looks great, it seems like quite a steep learning curve for beginners. Do you mean perhaps extending Bootstrap with some Steem API calls for example, or something else?

And if anyone wants some help with UX/UI design please let me know as well!

Great article, I would love to learn more of this type of dev for Steem and blockchain in general. What resources do you recommend?

The ongoing and evolving developer portal is a good place to reference available functions, https://steemit.github.io/steemit-docs/

Also, if you search the #steemdev tag here on steemit you can find quite a few good examples that other steemians have already posted.

@justinw
Thank you for sharing your knowledge. I will follow you for your promise to provide more easy to follow tutorials.

Follow me @Yehey
Cheers for now.

Thank you for sharing with us! I hope you enjoy the upvote! i follow you,,,

Thanks so much for this. But what do you say to a lib arts degree who is still leery about diving into this arena?

I totally agree with you, @luisneira! I am looking into this right now myself and I think posts like this help the community to evolve much faster. Steemit FTW!

Thanks for the great read, @justinw!

That was interesting. I've never seen someone actually do what you did on the video. Makes it look achievable and takes the mystery out of it. Well done.

Agreed. Even if one doesn't pursue the actual programming, it is helpful/insightful to know what is involved, and that it is not rocket science. I have some HTML skills, and have dabbled in Javascript - and this post makes me actually consider trying my hand at Javascript again if it will useful into the future. Yes, a series would be great -or at least a few more practical examples like this one. Thanks.

  ·  7 years ago (edited)

Bereh that tulesan droe neuh hy @justinw eukk, lage lam kapai are.
Nyoe kan ku tuleh nyoe koen pu laen, nyoe ku meuharap meurumpok persen bacut bak si karma, meunyoe hana jih jok persen meu bacut theh sang hana so jok keudroe kuh, jadi nyoe komen lon numpang jak siat, meuah beuh, bek neukira apam syara beh, trimong geunaseh, mnyoe awak blah deuh khen thank you very much, nyan ban :)

I have been thinking of working on a Steemit for last couple of weeks. But have been giving up as using Condenser from https://github.com/steemit/condenser felt like a overkill to me.

This video does justice to the title How easy it is to develop STEEM blockchain apps. Thanks to you I will take another dig at this.

Not hard indeed

Nice! this is great I will try to do it I have some background on coding.

Hay @justinw,

This vid is really great and shows how easy Steem transactions are in the end. I really like the idea and this post is really inspiring to do something simular for SteemJ. Thank you for that and best regars! 😊💪

Awesome, that's a great idea - the more hands-on examples we do with the various STEEM libraries, the more development becomes a real possibility for people.

how many way can one say~ thank you!!!?

Your obviously a clever bloke

You're*

Yes

thx for the info you post my friend, Steem on

Can't wait to see Steemit in full Beast mode!

Great post @justinw TY for sharing development of FinTech future which we each can participate!

Thanks for updating the example at Github.

Thank you so much! Now that you have posting covered, could you also cover reading from blockchain part also? I'm looking to integrate this kind of functionality to my own site and I need to keep eye on certain posts (filtered by permlink perhaps? ) and save comments and votes made on them to my own database. Followed and resteemed, hopefully you'll go for whole series of stuff like this!

it's steemjs right? i've made site using python steemit api. what site does is it waits 6 user and then exchanges their upvotes for the post they provide bot some users told me that it's bad for steem platform and i stopped my production. if you want to check out tell me i don't want to make ads or something

This is using steem-js, yes. For python, I would recommend using the official steem-python library here: https://github.com/steemit/steem-python

There's also some excellent documentation for it here: http://steem.readthedocs.io/en/latest/

What library are you using that does what you have described?

The first likn you provided. Puthon official steem api. And steemjs to check provided username and key until server goes for it.you know you have to avoid as much thing as you can to do on your server.

I've been meaning to start learning to develop steem apps for a while now. This was great! Thanks :)

@justinw - Thank you so much for sharing this amazing article. I was looking for something as point of reference to start working on my first Blockchain app and Here comes your ONE STOP SHOP!! Love it!

Thank you!!


Latest Food Post by CQ🍎🍉🍸
Fat cutter 🌶 Spicy Beet Bot🤖 Juice 🍹

🥕🥑🍹

This is very good information to know .

Thanks! I'm glad you liked it.

  ·  7 years ago (edited)

It is sufficient if i know python and html can i develop using python??

HEY great steemit post love to have more such post

Good info man. I was looking for this same for my programmer friend.

I thought this was a really good tutorial.
Still scratching my head trying to figure out how I have never seen Atom text editor around before, I must be living under a rock. :)

hello mosfiq vai!!! follow me on @farhanasayed :)

Thanks! I was just looking for something like this to get started developing with the STEEM blockchain.

I Will try.....hopefully itu will works

Steemdev is so great! Thank you friends have shared a good post!

Interesting.

Thanks for sharing.

I Love seeing the growing uses for steem

Thanks for the great intro to steem-dev.

Barcelona España 🇪🇸 está siendo víctima del terrorismo apoyo por favor @

Nice! This puts me one step closer to developing my super secret dream app for steemit!

Cool, what's the idea for your dream app? ;)

Thank you so much i have been looking for a video like this. Sweet.

Nice, but what is the added value on using steemit?

Super-cool and peachy keen. Inspiring work; I wonder how one can take it a step further. I am a complete novice at code (barring some basic HTML, I guess) but you make it seem so ... possible.

Thanks! I want to start developing apps for STEEM and this is exactly what I was looking for.

Nicely done, thanks! Upvoted and Resteemed!

!עבודה יפה

You are the master, me . . . I am just along for the fun. I have resteemed this however, to hold it in place for my wife who is the computer geek, hoping she will do one for me, I follow you for more that I know will be coming

excellent!

could you please show how to retrieve blog post from the steem and show it in a page? for instance, I have a blog website and want to show post from my steem account there. But not the feed or rss.

Yes - something like that could be a topic for a future post potentially

That is so interesting and so simple. Thank you for posting.
By the way, why does your steemit page say that post was posted 2 days ago, when you just posted it "now"?
Joe
@joe.nobel

Because I originally did this on Sunday in my spare time, recorded the video yesterday, and then finally got around to posting about it today - I have a busy schedule :)

Ah ha!
Okay didn't mean to be nitpicky, actually, I don't know why I mentioned it at all, other than that I am trying to understand this whole concept of steemit and everything that goes with it, so I'm being super-critical with anything I don't understand.
Like I said, Thanks for this post,
Joe

PS Now following you.

It's ok, it's a valid question. It just shows you were paying attention :)

nice one

informative

  ·  7 years ago (edited)

Thanks man, that was very informative and clear.

Is there also a dev blockchain available, I can think that we don't want to swamp steem with all sorts of trivial test messages.

I'm running a unofficial public test net here: https://testnet.steem.vc
Feel free to use it for testing!

And here's the condenser instance pointing to it: https://condenser.steem.vc

Cool, I thought I'd read something about a testnet, but wasn't sure.

Thanks for that.

There isn't a public testnet available (yet) but stake-based bandwidth limitations prevent users from being able to fill the blockchain with unreasonable amounts of data, so, test away!

Thanks, will do. I was just wondering after having read some comment about blockchain bloat with the bots.

is it like developing a bot?

  ·  7 years ago (edited)

Great! Thank you!

I am just wondering why it's the 'comment' function...

To the blockchain, a new article is actually the same as a comment - it just doesn't have a 'parent' article tied to it like comments do. An article is a top-level comment, and comments on articles are 2nd/3rd etc level with the article as it's 'parent'.

This is awesome, I always wanted to learn how to code but i can't get my head wrapped around the technical aspects of things lol. I might give this a shot.

What did you want to develop? @kryptokayden

I don't really know, I just thought it's cool to learn to write some simple scripts lol

It is totally cool to learn to code!

If you're looking to learn to code there are some good sites out there.

Coursera.org (free)
Udemy.com
Teamtreehouse.com
Lynda.com

Awesome! I will check those over the weekend.

Congratulations @justinw! You have completed some achievement on Steemit and have been rewarded with new badge(s) :

Award for the number of upvotes received
Award for the number of comments

Click on any badge to view your own Board of Honor on SteemitBoard.
For more information about SteemitBoard, click here

If you no longer want to receive notifications, reply to this comment with the word STOP

By upvoting this notification, you can help all Steemit users. Learn how here!

Great Idea I Will Go Deep On It

That good tutorial, is inspiring, thanks, I follow you from Venezuela, greetings

Thanks! I'm gonna Resteem.

Congratulations @justinw! You have completed some achievement on Steemit and have been rewarded with new badge(s) :

Award for the number of upvotes received

Click on any badge to view your own Board of Honor on SteemitBoard.
For more information about SteemitBoard, click here

If you no longer want to receive notifications, reply to this comment with the word STOP

By upvoting this notification, you can help all Steemit users. Learn how here!

thanks for this informative article bro... Steem on its nice to read your article

great post.

First thank you for pushing steemians to use the steemit blockchain.
Definitely I will follow and learn from this great endeavors. Knowledge is power.
Keep on steemit!!
BE WAITING

I hope that someday I can understand and be able to go into IT world, thanks alot

it was confusing for me because post is just a comment . thanks for clearing this up

Now, I know it is possible for me to create a steemit app. Thanks for sharing

You can also use this dsteem playground to test and develop your steem apps.
https://playground.steem.vc

nice post, thanks :)

Upvoted your article rather interesting.Will follow you and upvote you as well just need a little help from you kindly upvote my article dedicated to my friend who has cancer @rogerblu thanks a million

wow, awesome. instant follow. i'm REALLY wanting to build an app on the steemit blockchain and i'm a complete javascript noobie but this looks like it can make things much easier.

Thanks for sharing the best article @ justinw

For those of you who don't want to follow along with the video, you can follow the steps and view the completed source on github here: https://github.com/jredbeard/steempostexample

References of places to gain the knowledge required to make this tutorial:

Alpha/pre-release of steemit developer portal: https://steemit.github.io/steemit-docs/
Examples within the steem-js repo on github: https://github.com/steemit/steem-js/tree/master/examples

Congrats! This post has been selected at random as a part of our promotional campaign for a free resteem.

You may find it easy to quit rather than persist because it is tough.

Nevertheless persistence beats luck.

We have also made a way for new steemians to get reknown. Read more here

Just follow now and for a limited time you get a discount on resteems: @thelifestyler. The link below allows you to get more payout on a post. (Tip #1)
Click here

To mine Monero free for 48hrs with no strings attached to withdraw click here

Wow, I was looking for something exactly like this video :) Thanks a lot for your help @justinw :) Upvoted!

This is wonderful
Thanks for this piece

Very useful information master, happy to read your post. I already have additional knowledge thanks to read your writing in.saya hope will be able to continue to follow your post.

https://steemit.com/indonesia/@ponpase/ini-dia-daftar-nama-kerajaan-yang-ikut-meriahkan-arakan-hut-72-the-72nd-anniversary-of-indonesian-independence

Was looking for just this. Resteeming for future reference

I was searching this stuff for so long. Building blockchain apps helps alot.

Very good post, Hay @justinw I steemitvote I have been playing steemit for a while but I do not get a vote when I really need a vote because I live alone and I have financial problems I think by playing steemit I can overcome financial problems but it has not happened yet , Hay @justinw I really hope you can help me or if you can visit my post or if you can vote my post or resteem my post, I really need your help, hope you can petrify me. Thank you for your attention
https://steemit.com/girlfriend/@steemitvote/this-the-reason-why-men-are-afraid-to-have-smart-girlfriend-2017817t18364765z

This is a great article, many can get into doing awesome stuff on this platform with this.

really informative article i learn lot of thing from it

Perfect. This will help me build my app. A lot of irons in the fire and I wasn't sure how to do this. You just helped me save some time. Thanks my man!

This is really inspiring, thank you for the tutorial. I will definitely look into the Github page and try to code a little app to work and improve my JS skills.

Nice post!

step by step guide ; well done

Thank you for this lovely post :)

Hahaha!

Congratulations @justinw!
Your post was mentioned in the hit parade in the following categories:

  • Upvotes - Ranked 9 with 395 upvotes
  • Comments - Ranked 10 with 100 comments
  • Pending payout - Ranked 2 with $ 436,41

FOLLOWED, UPPED and RESTEEMED

Upvote this Comment for More Resteems

That was a good one .. being an app developer i will be thinking further in creating a app...

  ·  7 years ago (edited)

Nice video...and i will go to github to take source..thanks for share @justinw...

Great post ! Interested post. Thank you so much for sharing.

Mantap penghasilanya di steemit.. Mohon izin ketularan penghasilanya.. Thanks 👍

I had to get acquainted with it. To learn more about this. I would like to re-read that to get acquainted with the different parts of the post. Post deserves attention. The material is presented correctly. It describes the problem well. The material presented in the post, appears clearly to our consciousness. Thank you pay attention to it.

This is awesome!

Will need to give it a try to see the power of creating Steemit apps.

Keep the tutorials coming :) Thanks !!

this is great, im just curious, what is the purpose of this application? not trying to be sarcastic or anything just actually curious what the purpose of this bot would be instead of just posting on steemit webpage

The purpose is simply to be an example so that others can learn from it. Obviously this is not a full-fledged app, but it could help an aspiring developer to create one. You have to start somewhere.

I haven't had time to watch this tutorial but if it is as amazing as suggested then I will be stoked!!! Please keep this kind of post up. There is a lot to gain from the users creating apps and connections to the APIs. This is much appreciated.

Upvoted and upsteemed for later studying.

SO much excited with your post. I bookmarked the post so I can try it when I have time. It's really amazing and I thought it would be much harder for me to start with. But Now I feel confidence :)

nice tips

That makes it look easy. I'll read more to try it. Thank you

Good job. It will be a wile before I am ready to learn this.

Way beyond my scope of capabilities. Lol.

dude! your article is very interesting

This is the most amazing thing I've seen.. Thank you!
I don't know how to code, and have never been taught, but I feel like I can make something now!

Can you make it work on windows?

Sure, just use notepad or something else instead - it's just a text file and a web browser, you can develop on any platform :)

Go to 0:54 and look at the time