Creating a Mac Application from Scratch Using Electron

Posted by:

Alex on June 25, 2016

This video tutorial and screencast covers building a complete Mac Application from beginning to end using the Electron system, which is built upon the NodeJS infrastructure. Creating an app this way gives us the ability to use common coding techniques and languages most web developers are already used to, such as JavaScript, CSS and HTML.

Within 25 minutes this video explains the basics of Electron, using the mac terminal app and Sublime Text to create and package up a full Mac Application that will show the current price of a stock market share.

Electron can also be used to create applications and packages for all other systems such as Windows and Linux.

Here’s the code if you’re in a copy/paste kind of mood:

The full index.html – you will still have to follow the video to install the NPM packages etc

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
</head>
<style>
  body {
    background: black;
    color: white;
    font-family: 'Source Code Pro','arial';
    text-align: center;
  }
  .the-price {
    font-size: 35px;
  }
  .up {
    color: green;
  }
  .noChange {
    color: grey;
  }
  .down {
    color: red;
  }
</style>
<body style="-webkit-app-region: drag">
  <h3>Current Share Price: DJI</h3>
  <div class="the-price" id="price"></div>
  <div class="up-down" id="priceHistory"></div>
  <script>
    var request = require('request');
    setInterval (function(){
      request("http://finance.google.com/finance/info?client=ig&q=.DJI", function(error, response, body) {
        body = body.slice(3);
        body = JSON.parse(body);
        console.log(body);
        newPrice(body);
      });
    }, 1000);
    var lastPrice;
    function newPrice(arr) {
      currentPrice = arr[0]["l"];
      var history = document.getElementById("priceHistory");
      if (lastPrice<currentPrice) {
        var newElText = "▲ ";
        var wrap = document.createElement("span");
        wrap.className="up";
      }
      else if (lastPrice==currentPrice) {
        var newElText = "▬ ";
        var wrap = document.createElement("span");
        wrap.className="noChange";
      }
      else {
        var newElText = "▼ ";
        var wrap = document.createElement("span");
        wrap.className="down";
      }
      history.appendChild(wrap);
      var textNode = document.createTextNode(newElText);
      wrap.appendChild(textNode);
      var nodeList = history.getElementsByTagName("SPAN").length;
      if (nodeList==6) {
        history.children[0].remove();
      }
      document.getElementById("price").innerHTML = currentPrice;
      lastPrice=currentPrice;
    }

  </script>
</body>
</html>