How to Run IPFS with Embark Platform Demo

/*globals $, SimpleStorage, document*/

var addToLog = function(id, txt) {
  $(id + " .logs").append("<br>" + txt);
};

// ===========================
// Blockchain example
// ===========================
$(document).ready(function() {

  $("#blockchain button.set").click(function() {
    var value = parseInt($("#blockchain input.text").val(), 10);
    SimpleStorage.set(value);
    addToLog("#blockchain", "SimpleStorage.set(" + value + ")");
  });

  $("#blockchain button.get").click(function() {
    SimpleStorage.get().then(function(value) {
      $("#blockchain .value").html(value.toNumber());
    });
    addToLog("#blockchain", "SimpleStorage.get()");
  });

});

// ===========================
// Storage (IPFS) example
// ===========================
$(document).ready(function() {
  //var ipfs = window.IpfsApi('localhost', '5001');
  var ipfs = ipfsAPI({
    host: 'localhost',
    port: '5001',
    protocol: 'http'
  });
  // automatic set if config/storage.json has "enabled": true and "provider": "ipfs"
  EmbarkJS.Storage.setProvider('ipfs', {
    server: 'localhost',
    port: '5001'
  })

  $("#storage .error").hide();
  EmbarkJS.Storage.ipfsConnection.ping()
    .then(function() {
      $("#status-storage").addClass('status-online');
      $("#storage-controls").show();
    })
    .catch(function(err) {
      if (err) {
        console.log("IPFS Connection Error => " + err.message);
        $("#storage .error").show();
        $("#status-storage").addClass('status-offline');
        $("#storage-controls").hide();
      }
    });

  $("#storage button.setIpfsText").click(function() {
    var value = $("#storage input.ipfsText").val();
    EmbarkJS.Storage.saveText(value).then(function(hash) {
      $("span.textHash").html(hash);
      $("input.textHash").val(hash);
    });
    addToLog("#storage", "EmbarkJS.Storage.saveText('" + value + "').then(function(hash) { })");
  });

  $("#storage button.loadIpfsHash").click(function() {
    var value = $("#storage input.textHash").val();
    EmbarkJS.Storage.get(value).then(function(content) {
      $("span.ipfsText").html(content);
    });
    addToLog("#storage", "EmbarkJS.Storage.get('" + value + "').then(function(content) { })");
  });

  $("#storage button.uploadFile").click(function() {
    var input = $("#storage input[type=file]");
    EmbarkJS.Storage.uploadFile(input).then(function(hash) {
      $("span.fileIpfsHash").html(hash);
      $("input.fileIpfsHash").val(hash);
    });
    addToLog("#storage", "EmbarkJS.Storage.uploadFile($('input[type=file]')).then(function(hash) { })");
  });

  $("#storage button.loadIpfsFile").click(function() {
    var hash = $("#storage input.fileIpfsHash").val();
    var url = EmbarkJS.Storage.getUrl(hash);
    var link = '<a href="' + url + '" target="_blank">' + url + '</a>';
    $("span.ipfsFileUrl").html(link);
    $(".ipfsImage").attr('src', url);
    addToLog("#storage", "EmbarkJS.Storage.getUrl('" + hash + "')");
  });

});

// ===========================
// Communication (Whisper) example
// ===========================
$(document).ready(function() {

  $("#communication .error").hide();
  web3.version.getWhisper(function(err, res) {
    if (err) {
      $("#communication .error").show();
      $("#communication-controls").hide(); +
      $("#status-communication").addClass('status-offline');
    } else {
      EmbarkJS.Messages.setProvider('whisper');
      $("#status-communication").addClass('status-online');
    }
  });

  $("#communication button.listenToChannel").click(function() {
    var channel = $("#communication .listen input.channel").val();
    $("#communication #subscribeList").append("<br> subscribed to " + channel + " now try sending a message");
    EmbarkJS.Messages.listenTo({
      topic: [channel]
    }).then(function(message) {
      $("#communication #messagesList").append("<br> channel: " + channel + " message: " + message);
    });
    addToLog("#communication", "EmbarkJS.Messages.listenTo({topic: ['" + channel + "']}).then(function(message) {})");
  });

  $("#communication button.sendMessage").click(function() {
    var channel = $("#communication .send input.channel").val();
    var message = $("#communication .send input.message").val();
    EmbarkJS.Messages.sendMessage({
      topic: channel,
      data: message
    });
    addToLog("#communication", "EmbarkJS.Messages.sendMessage({topic: '" + channel + "', data: '" + message + "'})");
  });

});
      

        
        
        
      

    

<html>

<head>
  <title>Embark - SimpleStorage Demo</title>
  <link rel="stylesheet" href="css/app.css">
  <script src="js/app.js"></script>
</head>

<body class="container">
  <h3>Embark - Usage Example</h3>

  <ul class="nav nav-tabs" role="tablist" id="myTabs">
    <li role="presentation" class="active"><a href="#blockchain" aria-controls="blockchain" role="tab" data-toggle="tab">Blockchain</a></li>
    <li role="presentation"><a href="#storage" aria-controls="storage" role="tab" data-toggle="tab">Decentralized Storage (IPFS)<span class="pull-right" id="status-storage"></a></li>
    <li role="presentation"><a href="#communication" aria-controls="communication" role="tab" data-toggle="tab">P2P communication (Whisper/Orbit)<span class="pull-right" id="status-communication"></span></a></li>
  </ul>

  <div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="blockchain">
      <h3> 1. Set the value in the blockchain</h3>
      <div class="form-group form-inline">
        <input type="text" class="text form-control" value="10">
        <button class="set btn btn-primary">Set Value</button>
        <p>Once you set the value, the transaction will need to be mined and then the value will be updated on the blockchain.</p>
      </div>

      <h3> 2. Get the current value</h3>
      <div class="form-group">
        <div>
          current value is <span class="value"></span>
        </div>
        <button class="get btn btn-primary">Get Value</button>
        <p>Click the button to get the current value. The initial value is 100.</p>
      </div>

      <h3> 3. Contract Calls </h3>
      <p>Javascript calls being made: </p>
      <div class="logs">
      </div>
    </div>
    <div role="tabpanel" class="tab-pane" id="storage">
      <div class="error alert alert-danger" role="alert">The node you are using does not support IPFS. Please ensure <a href="https://github.com/ipfs/js-ipfs-api#cors" target="_blank">CORS</a> is setup for the IPFS node.</div>
      <div id="storage-controls">

        <h3>Save text to IPFS</h3>
        <div class="form-group form-inline">
          <input type="text" class="ipfsText text form-control" value="hello world!">
          <button class="setIpfsText btn btn-primary">Save</button>
          <p>generated Hash: <span class="textHash"></span></p>
        </div>

        <h3>Load text from IPFS given an hash</h3>
        <div class="form-group form-inline">
          <input type="text" class="textHash text form-control" size="60">
          <button class="loadIpfsHash set btn btn-primary">Load</button>
          <p>result: <span class="ipfsText"></span></p>
        </div>

        <h3>upload file to ipfs</h3>
        <div class="form-group form-inline">
          <input type="file" class="form-control">
          <button class="uploadFile set btn btn-primary">upload</button>
          <p>generated hash: <span class="fileIpfsHash"></span></p>
        </div>

        <h3>Get file or image from ipfs</h3>
        <div class="form-group form-inline">
          <input type="text" class="fileIpfsHash form-control" size="60">
          <button class="loadIpfsFile set btn btn-primary">Load</button>
          <p>file available at: <span class="ipfsFileUrl"></span></p>
          <p><img class="ipfsImage" src=""></p>
        </div>

        <p>Javascript calls being made: </p>
        <div class="logs">
          <br> EmbarkJS.Storage.setProvider('ipfs',{server: 'localhost', port: '5001'})
        </div>
      </div>
    </div>
    <div role="tabpanel" class="tab-pane" id="communication">
      <div class="error alert alert-danger" role="alert">The node you are using does not support Whisper</div>
      <div id="communication-controls">
        <h3>Listen To channel</h3>
        <div class="form-group form-inline listen">
          <input type="text" class="channel text form-control" placeholder="channel">
          <button class="listenToChannel set btn btn-primary">Start Listening</button>
          <div id="subscribeList"></div>
          <p>messages received:
            <p>
              <div id="messagesList"></div>
        </div>

        <h3>Send Message</h3>
        <div class="form-group form-inline send">
          <input type="text" class="channel text form-control" placeholder="channel">
          <input type="text" class="message text form-control" placeholder="message">
          <button class="sendMessage set btn btn-primary">Send Message</button>
        </div>

        <p>Javascript calls being made: </p>
        <div class="logs">
          <br> EmbarkJS.Messages.setProvider('whisper')
        </div>
      </div>
    </div>
  </div>

</body>

</html>
      

        
        
        
      

    

pragma solidity ^ 0.4 .7;
contract SimpleStorage {
  uint public storedData;

  function SimpleStorage(uint initialValue) {
    storedData = initialValue;
  }

  function set(uint x) {
    storedData = x;
  }

  function get() constant returns(uint retVal) {
    return storedData;
  }

}