TUTORIAL - Create a Crypto Coin Comparison Bot - BASIC - Part 2

What Will I Learn?

Welcome to the second part of how to create cryptocurrency coin comparison automatic posting bot for steemit ! In todays episode I want to show you guys following things:

• Quick Introduction in mustache.js and example
• Creating Template Files
• Using mustache.js to fill these template files with example data
• Saving resulting template as output.html

Requirements

• Read the previous part (Click here)
• Now mustache.js (Click here)

Difficulty

• Basic

Tutorial Contents

Quick Introduction in mustache.js and example

A funny coincidence happened and I posted yesterday a tutorial about mustache.js (Which was of course not intended!). You guys can find it here and I would recommend it, since it is showing the basics for mustache.js.

Anyway if you don't have the time to read through it, here is a short introduction with basic examples!

Mustache is a logic-less template syntax. It can be used for HTML, config files, source code - anything.
It works by expanding tags in a template using values provided in a hash or object.
(Source)

To use Mustache.js you have two options: A) Use strings B) Use templates

A) Use strings

With mustache.js it is possible to modify / render simple template strings. To do so one need to use the function Mustache.render(template, data). Whereas template can be a string or a html template.

var data = {
  name: "Moonrise",
  sayHello: function () {
    return 'Hello World';
  }
};

var output = Mustache.render("{{name}} says: {{sayHello}}", data);
console.log(output);

Will output Moonrise says: Hello World. It is possible to provide functions and / or simple values in the data object.

B) Use templates

Using templates is kinda the same as using strings, the only different is that you need to load the template via (e.g) jQuery->get its html content(which is a string)->and render it

<script id="template" type="x-tmpl-mustache">
            {{name}} says: {{sayHello}} !
</script>

   var data = {
        name: "Moonrise",
        sayHello: function() {
            return 'Hello World';
        }
    }
    
    var template = $('#template').html();
    var output = Mustache.render(template, data);

Will return the same as above.

Install Mustache.js

To use mustache.js later please run npm install mustache --save inside your console!

Creating Template Files

But how does mustache.js work in our case ? First of all we need to create template files, which provide the basic layout we later want. The idea behind to fill later the templates just with data and save the rendered templates as a new HTML file.

I won't go into detail how our templates should exactly look like since we are creating the rendering logic right now. The only idea is that we need one template file. It is our main template which includes the basic page layout (header, footer, body and a table). Inside the table we want for each individual coin a single row, which provides the basic layout for a row (coin-name, price, etc...).

In summary we create a file inside our templates folder: main.html. It should look similar to this:

main.html

<div id="header">Crypto Coin Compare</div>
<hr>
<div id="body">
    <table>
        <th>Name</th>
        <th>Price</th>

        {{#coin_rows}}
            <tr>
                <td>{{name}}</td>
                <td>{{price}}</td>
            </tr>
        {{/coin_rows}}
    </table>
</div>
<hr>
<div id="footer">Auto Generated :O</div>

main.html uses mustache.js syntax! {{coin_rows}} will be replaced with each rendered row for each coin we want to present. (I refer here to Non-Empty-Lists on mustache.js). Basically {{coin_rows}} will be replaced with a list of items where each item gets rendered with the content inside {{coin_rows}}. You will see below how it works !

Using mustache.js to fill these template files with example data

Let's come to the interesting stuff, how does one use mustache.js with nodejs ? In my examples above we always used jQuery... which is not available on nodejs. The solution is the filesystem! That's why we created a seperated HTML file for our template.

In NodeJS we have access to our local filesystem, meaning we can access and read main.html content. So lets come right into it and edit our index.js as follows:

var fs = require('fs');
var Mustache = require('Mustache');

const coins = [
    {
        name: 'Bitcoin',
        price: '10000 $'
    }, {
        name: 'Ethereum',
        price: '900 $'
    }
];

fs.readFile('templates/main.html', 'utf8', function (err, content) {
  if (err) throw err;

  const data = {
      coin_rows: coins
  };
  const renderedMain = Mustache.render(content, data);


  console.log(renderedMain);
});

Run it and this will be the output:

Let's break it down:

First we include Mustache and the Filesystem Library in our index.js, then we set the example data we want to present.

fs.readFile('templates/main.html', 'utf8', function (err, content) {...}

Reads the file main.html and returns it content utf8-encoded. Then we use Non-Empty-Lists to render our rows inside the template via mustache.js

const data = {
      coin_rows: coins
  };
const renderedMain = Mustache.render(content, data);

The output is pretty impressing, since we can add as many coins as we want and each coin gets it own rendered row!

Saving resulting template as output.html

Now that we have rendered our template with example data we want to save it to our local filesystem. For that create inside your out folder, a file named out.html and edit your index.js:

var fs = require('fs');
var Mustache = require('Mustache');

const coins = [
    {
        name: 'Bitcoin',
        price: '10000 $'
    }, {
        name: 'Ethereum',
        price: '900 $'
    }
];

fs.readFile('templates/main.html', 'utf8', function (err, content) {
  if (err) throw err;

  const data = {
      coin_rows: coins
  };
  const renderedMain = Mustache.render(content, data);

  writeToDisk(renderedMain);
});

function writeToDisk(content) {
    fs.writeFile('out/out.html', content, function (err) {
      if (err) throw err;

      console.log('Done saving output!');
    });
}

After rendering is done we call a new created function called writeToDisk(data) to write the rendered template inside out.html. To do so we use fs.writeFile('out/out.html', content, function (err) {...}, which takes output_file_path, content, callback as parameter.

Run node index.js and you should see the content of out.html changed! Feel free to add new coins in the array and rerun the script. It will always generate a new content inside out.html !

I hope you guys liked and understand it ! Next up is designing + using request.js to get the latest coin data!

GitHub

Curriculum

• Part 1 - Setup

---

Posted on Utopian.io - Rewarding Open Source Contributors

---