Tutorial 1 – Building an Email Application

If you want to skip the messy bits you can download the finished code. Edit this code or upload it directly to the network to learn how application deployment works.

Step 1: create a directory with the name of your application. Then create a javascript file inside this directory with the same name. Avoid spaces and special characters and keep everything lowercase. We will call our application “Tutorial01” so the name of our directory is “tutorial01” and the name of our file is “tutorial01.js”.

> mkdir tutorial01
> cd tutorial01
> touch tutorial01.js

Step 2. Open the javascript file you just created and add the following code:

const ModTemplate = require('../../lib/templates/modtemplate');
 
class Tutorial01 extends ModTemplate {
  constructor(app) {

    super(app);

    this.name            = "Tutorial01";
    this.description     = "Email module with a button that creates email transactions";
    this.categories      = "Tutorials";

    return this;
  } 

}

module.exports = Tutorial01;

You can change the name and description of your application. This creates a very simple application that will install and run, but doesn’t do anything useful. Let’s change this by having our application insert itself into the Email application list.

Step 3. Saito applications use the “respondTo” function to interact with each other. The Saito email client defines an “email-appspace” event type that modules should respond to in order to get listed.

If an event is supported this function should return an object with a reference to a render() function and an attachEvents() function. If an event is not supported it should return null. So the code below is what we need — add it to your file:

  respondTo(type) {
    if (type == 'email-appspace') {
      let obj = {};
      obj.render = this.renderEmailPlugin;
      obj.attachEvents = this.attachEventsEmailPlugin;
      return obj;
    }
    return null;
  }
 
  renderEmailPlugin(app, data) {}

  attachEventsEmailPlugin(app, data) {}

Step 4: Saito expects respondTo events to be named after the HTML elements they are expected to manipulate. So let’s have our render function add some HTML to the “email-appspace” element in the email application.

  renderEmailPlugin(app, data) {
    try {
      document.querySelector('.email-appspace').innerHTML = `When the email application asks us to draw the screen, we give it this button:<p></p><input type="button" id="tutorial01-email-btn" class="tutorial01-email-btn" value="Click me!" />`;
    } catch (err) {
      console.log("Error rendering tutorial01 email plugin: " + err);
    }
  } 
 
  attachEventsEmailPlugin(app, data) {
    try {
      document.querySelector('.tutorial01-email-btn').addEventListener('click', function(e) {
        alert("You have clicked on this button!"); 
      });
    } catch (err) {
      console.log("Error rendering tutorial01 email plugin: " + err);
    }
  } 

If you upload your application at this point, you will get a nice link in the Email sidebar, and a button that triggers an alert when you click it. You can obviously edit this HTML to do anything that a web application can do, creating sophisticated on-chain data management solutions in just a few lines of code.

Step 5: In order to make this a real blockchain application, we want to have our browser send a transaction into the blockchain when our button is clicked.

The following code upgrades our attachEvents function to create a transaction, add data to it, and send that transaction onto the network. In order to make things easy, we will format the data as an email message so it shows up in our inbox when it arrives (usually within about a minute).

  attachEventsEmailPlugin(app, data) {
    try {  
      document.querySelector('.tutorial01-email-btn').addEventListener('click', function(e) {
      
        let newtx = app.wallet.createUnsignedTransactionWithDefaultFee();
            newtx.transaction.msg.module  = "Email";
            newtx.transaction.msg.title   = "Tutorial button clicked!";
            newtx.transaction.msg.message = "When you clicked this button, your computer created and sent a transaction onto the blockchain. If you have received this transaction, it is already on the blockchain.";
        newtx = app.wallet.signTransaction(newtx);
        app.network.propagateTransaction(newtx);
         
        alert("Transaction Sent!");
        document.querySelector('.email-appspace').innerHTML = 'You have sent yourself a transaction. Check your inbox!';
       
      });
    } catch (err) {
      console.log("Error rendering tutorial01 email plugin: " + err);
    }
  } 

Now you’re ready to deploy your application to the Saito network. Visit this page to learn how.