HoloWorld Tutorial: Adding a User Interface

Make sure that you've completed the last tutorial step before starting this one, sharing to the DHT.

So far, our HoloWorld app has no user interface. This tutorial will guide the most basic way to do that.

How to develop a web based user interface can be found elsewhere online, so we're going to keep that part really simple, copy-paste.

The first thing that we need to do, is allow a user interface to make calls to the right functions of the Holochain app.

To do this, we need to modify the configuration of holoTextRead and holoTextWrite in the dna.json file.

Add "Exposure": "public" to holoTextWrite so that it looks like this:

{
    "Name": "holoTextWrite",
    "CallingType": "string",
    "Exposure": "public"
}

Add "Exposure": "public"to holoTextRead in the same way.

Adding UI files

In your ui folder, modify hc.js to look like this:

hc.js

function holoTextWrite (message, callback) {
  var xhr = new XMLHttpRequest()
  var url = '/fn/readerWriter/holoTextWrite'
  xhr.open('POST', url, true)
  xhr.setRequestHeader('Content-type', 'application/json')
  xhr.onreadystatechange = function () {
    if (xhr.readyState === 4 && xhr.status === 200) {
      callback(xhr.responseText)
    }
  }
  xhr.send(message)
}

function holoTextRead (hash, callback) {
  var xhr = new XMLHttpRequest()
  var url = '/fn/readerWriter/holoTextRead'
  xhr.open('POST', url, true)
  xhr.setRequestHeader('Content-type', 'application/json')
  xhr.onreadystatechange = function () {
    if (xhr.readyState === 4 && xhr.status === 200) {
      callback(xhr.responseText)
    }
  }
  xhr.send(hash)
}

Modify index.html to look like this:

index.html

<html>

<head>

</head>

<body>

<form>

<p>Enter the text of the entry</p>

<p>This will be stored in Holochain and the hash key for the new entry will be shown</p>

<p>in the Hash text box below.</p>

<label for="entry">Entry</label>

<button type="submit" id="submitEntry">Submit</button>

</form>

<form>

<p>Press the Read button and the hash key will be used to retrieve the entry</p>

</form>

document.getElementById("submitEntry").addEventListener("click", function(event){

event.preventDefault()

holoTextWrite(document.getElementById('holoWorldEntry').value, function(hash){

document.getElementById('hash').value = hash

})

});

document.getElementById("readEntry").addEventListener("click", function(event){

event.preventDefault()

holoTextRead(document.getElementById('hash').value, function(task){

document.getElementById('entryContent').value = task

})

});

</script>

</body>

</html>

Run this command from the main directory of HoloWorld:

$ hcdev web

Open http://localhost:4141 in your web browser and try out the UI. Finally, "Hello World!"

This concludes our HoloWorld tutorial for now, but there will be plenty of other tutorials and content coming soon, with many more advanced topics.

Remember there is the HoloWorld repository on github where you can check out the code, with inline code comments as well: https://github.com/holochain/HoloWorld

Go back to the UI Development page.