First steps to become a JavaScript ninja! - Making a Random Cryptocurrency GeneratorsteemCreated with Sketch.

in #programming7 years ago

JavaScript Ninja.jpg
Last week I decided to start familiarizing myself with the Steem API. Before embarking on any serious projects, I figured it would be best to experiment, making a few simple Steem applications in Python. This way I could easily find out what information the API could offer, and play with different design approaches. The official Python 3 library for the Steem Blockchain is called steem-python.

This couldn't be easier.

All I had to do to install the API was to write pip install steem. Well, that's what I would have said if it worked. It didn't work.
Pip install Steem problem.jpg

The steem-python API has some issues

Not giving up so easily, I installed the API manually by downloading the repository and placing all the files where they were supposed to be. When I started using the API, working my way through all the error messages, I found that the API had a lot of outdated dependencies, some of which have been altered and some of which do no longer exist.

Let's give up

At this point I figured that I should just bite the bullet and learn to use the Steem JavaScript API. The problem was: I didn't really know JavaScript. Sure, I had made some simple apps and interfaces, copying, pasting and modifying code from the internet, but I had never actually learnt the basics of how JavaScript communicates with HTML objects, how it handles HTTP requests, how it takes input from the user and so on.

Let's learn some JavaScript

This brings me to what this post is really all about: Starting to learn JavaScript. It's something I've told myself to to for over a year now, and (possibly thanks to some inspiration from @cryptoctopus) I'm happy to say that I've finally started.

Disclaimer

At this point I should point out that the point of this post is not to be a JavaScript tutorial. It's simply a description of how I like to learn and some observations I've made during the process.

Let's do it from scratch

Rather than copying and pasting code from internet and then trying to understand how it works, I decided to start completely from scratch and do the most basic operation I could think of: Write some text. I was already familiar with HTML, so this was easy. Quite frankly, you don't even have to know HTML to write text. At this point I hadn't even touched JavaScript, but it was a great start, right?
w3schools javascript.jpg

Introducing variables

Next, I figured that I should learn how to print the value of a variable, rather than just writing the output directly. Thanks to some helpful posts from w3schools.com, I figured out how it should be done. One thing I found interesting about JavaScript, compared to languages was already familiar with, was that I had to define an output field in my HTML document and then access this field from the JavaScript, using it as a variable to store values. It confused me in the beginning, but the more I think about it, the more it makes sense.

One thing I quickly figured out, was that if I tried to write to an outfut field which did not exist, the code would just stop at that invalid statement. There would be no obvious errors, but it wouldn't move on. This made debugging difficult at times. Similarly, on larger programs, it's impossible to know if something does not work, unless you test every possible runtime scenario. I guess this is why people use Elm?

Introducing functions

After having learnt to print variables, the next logical step would be to print the output from a function. This included making the actual function and figuring out how to call it. It was at this point I realized just how similar JavaScript is to Java, although the fact that variables have to be declared as variables using var keyword, reminds me more of Scala, which really isn't that different from Java either. To call the function, I decided to use a button. I have yet to learn how to take text as input, but I imagine w3schools.com has some good examples.

The final thing I had to learn before being able to consider myself a JavaScript expert (noob mistake), was to fetch information from the internet. Well, I postponed that for later.

Now, let's make an application

Having gained some fundamental understanding of how things worked, I set a goal of creating a simple application: A random cryptocurrency generator. My idea was to generate a random number between 1 and 100 and use the CoinMarketCap API to get basic information about the currency ranked at that random number.

Fetching data from CoinMarketCap

I spent some time figuring out how to get the JSON data from CoinMarketCap and how to convert it into a JavaScript object, and yet again, w3schools.com had the answer. Regarding the programming logic, I decided to import all price data for the top 100 cryptocurrencies when the page is loaded. After that , the Generate random currency button queries the info related to a random coin. In other words, the script does not load new info from CoinMarketCap every time the Generate random currency button is pressed. This means that if you've had the page open for a while, without refreshing, the pricing info might be slightly outdated. I still think this is a decent approach, as it prevents the script from constantly spamming the API with nearly identical requests, only to use 1% of the information it receives.

Mind-blowing results

As I've already stated, the actual programming semantics were pretty much self-explanatory for someone who has experience with Java, so it didn't take long before I had accomplished some mind-blowing results, as pictured below.
Random Cryptocurrency Generator.jpg
Here is the code as well. Yes, I'm one of those Notepad noobs.
Random Cryptocurrency Generator Notepad.jpg

It doesn't look too good, though

The beauty of my product was questionable, to say the least, so I decided to implement my code in a self-hosted WordPress page.
Concernium Front Page.jpg

Introducing concernium.com

I once registered the domain name concernium.com and my plan is to make it into a library of more or less useful applications. If you want to test my Random Cryptocurrency Generator, it can be found at concernium.com/random-cryptocurrency-generator.
Concernium Random Cryptocurrency Generator.jpg

The end

While these first steps have definitely not made me a JavaScript expert, I understand that I've basically gotten a basic understanding of some of the understandable basics of the language. Hopefully this will help me on future projects, which will hopefully include some Steem-based applications. If any Steem-developers read this, consider taking a look at the steem-python API and see if you can make it work. Having a working API for Python would be a great convenience when making annoying auto-commenting bots which contribute no value whatsoever to the platform;)

Sort:  

Thx for that quite informative post. Keep up with creating interesting content.

I just came across your other post and I really liked it.

I decided to check your profile just to realize that we seem to share a number of interests :)

In particular that we both share a similar passion towards cryptocurrencies and blockchain technology :)

Cheers,
Piotr

Coin Marketplace

STEEM 0.19
TRX 0.15
JST 0.029
BTC 62702.02
ETH 2572.25
USDT 1.00
SBD 2.75