img.source

I am trying to figure out a way to interact with EOS blockchain since Genesis.

Being a real noob on javascript, ES6 , node and React what I really like to do is, find a way that I can write the code with my notepad and get real-time data from EOS mainnet.

All the tutorials I found was really confusing, nodeos,cleos, testnet and everything.

To tell about myself, I am nothing close to a dev. I am a mechanical engineer working in automotive industry who learned to code with his Commodere 64. ( young ones, google for Commodore64!)

So, I got some React and node.js courses from Udemy and I interacted with the chain in the hard way.

After learning the hard way then I had to re-invent the wheel to make it easier.

OK my noob company…get ready.

We will only need the “notepad” to interact with EOS chain and we will get data from the chain.

First, let’s write an html page.

Open your notepad and write the below code, then save it as myEOStrial.html

<!DOCTYPE html>
<html>
<head>
<script>
</script>
</head>
</html>

To connect with EOS, we will use EOS.js so let’s tell our code to get data from EOS.js libraries.

For this, we will use the CDN.

Let’s add this line.

<script src=”https://cdn.jsdelivr.net/npm/[email protected]/lib/eos.min.js”></script>

Then to use the arrow functions ( well guys, learn this otherwise your code is criticized badly by dev’s 🙂 )we include the Babel.

<script src=”https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js”></script>

Now, this is our code:

<!DOCTYPE html>
<html>
<head>
<script src=”https://cdn.jsdelivr.net/npm/[email protected]/lib/eos.min.js”></script>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js”></script>
<script>
</script>
</head>
</html>

Now comes the good part, we will find a public RPC to connect to the mainnet.

The below code does that

const network = {
blockchain: “eos”,
host: “publicapi-mainnet.eosauthority.com”,
port: 443,
protocol: “https”,
chainId: “aca376f206b8fc25a6ed44dbdc66547c36c6c33e3a119ffbeaef943642f0e906”
};

What we did here is, we have defined a variable named network with following elements :

Blockchain : since we will interact with EOS, it is eos

Host : If you run your own net, probably you are not reading this but for us noobs it is the service supplied by BP’s.

You can use others but I used eosauthority as host.

Port : The connection port

Protocol : we will use https protocol

Chain Id : It is as written above for the mainnet.

Ok, our network is defined.

With the defined network, lets form our “eosConnect” variable

const requiredFields = { accounts: [network] };
let chainId = network.chainId;
let httpEndpoint = network.protocol + “://” + network.host + “:” + network.port;
eosConnect = Eos({
chainId,
httpEndpoint,
});

We will use this eosConnect variable to interact and perform our read-only functions.

The code should look like this :

<!DOCTYPE html>
<html>
<head>
<script src=”https://cdn.jsdelivr.net/npm/[email protected]/lib/eos.min.js”></script>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js”></script>
<script>
const network = {
blockchain: “eos”,
host: “publicapi-mainnet.eosauthority.com”,
port: 443,
protocol: “https”,
chainId: “aca376f206b8fc25a6ed44dbdc66547c36c6c33e3a119ffbeaef943642f0e906”
};
const requiredFields = { accounts: [network] };
let chainId = network.chainId;
let httpEndpoint = network.protocol + “://” + network.host + “:” + network.port;
eosConnect = Eos({
chainId,
httpEndpoint,
});
</script>
</head>
</html>

OK, let’s write a simple function to see the information of us in the EOS blockchain.

The function is .getAccount(‘username’)

So let’s try with the below function ( yes dear dev’s, arrow function!) :

eosConnect.getAccount(‘eosfiredream’).then(result => console.log(result)).catch(error => console.error(error));

This code takes the information from blockchain about the user “eosfiredream”, you can use your name or any name you want to get the info  with the full code below :

<!DOCTYPE html>
<html>
<head>
<script src=”https://cdn.jsdelivr.net/npm/[email protected]/lib/eos.min.js”></script>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js”></script>
<script>
const network = {
blockchain: “eos”,
host: “publicapi-mainnet.eosauthority.com”,
port: 443,
protocol: “https”,
chainId: “aca376f206b8fc25a6ed44dbdc66547c36c6c33e3a119ffbeaef943642f0e906”
};
const requiredFields = { accounts: [network] };
let chainId = network.chainId;
let httpEndpoint = network.protocol + “://” + network.host + “:” + network.port;
eosConnect = Eos({
chainId,
httpEndpoint,
});
eosConnect.getAccount(‘eosfiredream’).then(result => console.log(result)).catch(error => console.error(error));
</script>
</head>
</html>

Save your document and open the file myEOStrial.html in any browser.  I prefer Google Chrome.

Open the console and you will see all the information about the account :

Here we are, we have taken our first information from the EOS MainNet.

You can check for the EOS.js API to see what else you can do with EOS.js.

I am happy if this is any help to someone.

FD.

 


This Article has Earned 1611 Tokens.
Total Reviews: 10, Average Rating: 5 out of 5
Your Reviews Today : 0 of 21 (resets every 24hrs CET)

Discussions

  1. MineYourMind

    Very easy to understand, which I need, since I would like to learn myself. Is there a cheat sheet for basic formatting you could share? These types of references were invaluable in my journey to learn html formatting.

    (0)
  2. Andrey

    This project, at first glance, does not differ from its predecessors, but when I decided to disassemble everything in detail, I realized that everything is much more serious here, and the user’s protection is higher. So you can buy tokens from such a company.

    (0)
  3. Nicholas

    : sh*tcomment
    if “content”=
    Sh*tpost.
    else: normal mambojambo comment
    result//*Nice post!*
    /check post
    /post=Nice post (nice post =/= sh*tpost)
    /end

    😀

    I have no clue about coding, but seems like where have to write nice unusual characters 🙂
    And sometimes the regular graphic interact also difficult, not need any coding 😀

    (0)

  4. Christina Norwood

    Thanks for this, I’m looking at the same tecnologies myself, currently wading through a tutorial on Udemy on node.js. Great to see the details about connecting with EOS.

    (1)
  5. pmd

    Nice one!

    Too bad that Trybe is missing code formatting. I’ve requested this feature from the team. Feel free to put in your vote for it as well if you feel you need it 🙂

    (1)
    1. firedream Post author

      I think this is a good starting point for understanding EOS dapps.
      All the EOS development tutorials I have seen are freaking for noobs like me 🙂

      (1)
      1. Infosion

        Yeah, I get you 🙂 Some tutorials are really not good to understand and follow… You really made it in a good way that you can easily follow and do it step by step without having to research a lot – and then maybe get stuck. Looking really forward to test this out a little bit when I have some time.
        And compared to me (and maybe lots of thers who are interested) you’re not really a noob on all of this 😉

        (1)

Reviews

Login Message Here!

Average Review Rating

5 / 5

No more reviews to load.