Decentralized App development on Tezos for beginners part 5

Build a website to interact with our Tezos contract

Updated @ 2018.03.06 (outdated, waiting for the formal release of zeronet)

Series parts

1. Set up your own Tezos node and learn the basics concepts.
2. Meet the Tezos smart contract language — Michelson.
3. Use Liquidity to easily write Michelson contracts.
4. Let’s deploy our first Michelson contract on Tezos.
5. Build a website to interact with our Tezos contract.

— — — — — — — — — — — — — — — — — — — — — — — — — — — — —

Since we have already deployed a contract called my_demo1, the things left are all about the web part.

How website interact with the Tezos Blockchain?

A Tezos Blockchain is no more than a bunch of nodes, so we just need to pick one node(can be our own node raised in part 1) and write our client to set up the connection between them.

The RPC functionality of Tezos node is not exposed by default, so we need to enable it.

./alphanet.sh start --rpc-port 8888 --cors-origin '*' --cors-header 'Origin, X-Requested-With, Content-Type, Accept, Range'

Then the RPC service is listening on port 8888. By the way, if you want to establish a secure connection, you’d better use NGINX to proxy the RPC service with your certificate files.

Direct control of an RPC node

The most convenient way is to use a JS library called eztz.js. Though this JS library, you can easily run commands like those ones we’ve learned from Tezos client in the browser.

Using the third party plugin

One of the core problems of developing a Dapp is to use the web app without login into it directly. The private key is the most important thing that people don’t want it to be accessible to websites. That’s the reason MetaMask came out in the Ethereum community. But MetaMask cannot be used in any browser.

Do we have a better choice for Tezos?

Yes. Here I present TezBridge.

TezBridge uses iframe and local storage to interact with Dapp across browser windows. It works perfectly on mobile browsers and easy for users to use.

Integrating TezBridge to your Dapp just needs to add an iframe element and some adaptor-codes.

Build our web client by using TezBridge

1 ) Create an index.html and add the essential codes for TezBridge.

<iframe src="https://tezbridge.github.io/plugin.html" id="tezbridge"></iframe>

Add this line above in the index.html file.

;((window) => {
  const req_func = {}
  const req_reject_func = {}

  let id = 1
  const tezbridgeCreator = (iframe_window) => {
    return (param) => {
      return new Promise(function(resolve, reject){
        const ticket = id++
        param.tezbridge = ticket
        iframe_window.contentWindow.postMessage(param, '*')
        req_func[ticket] = resolve
        req_reject_func[ticket] = reject
      })
    }
  }

  window.addEventListener('message', function(e){
    if (e.data.tezbridge) {
      if (e.data.error) 
        req_reject_func[e.data.tezbridge] && req_reject_func[e.data.tezbridge](e.data.error)
      else
        req_func[e.data.tezbridge] && req_func[e.data.tezbridge](e.data.result)
    }
  })

  window.tezbridgeCreator = tezbridgeCreator
})(window)

Add this codes above in your JS file. It creates an object called tezbridgeCreator under the windowobject. Later we’ll use this creator to create a bridge for use by passing the iframe element.

const tezbridge = window.tezbridgeCreator(document.querySelector('#tezbridge'))

Then we use the codes above to get one instance of TezBridge.

document.querySelector('#tezbridge').onload = () => {
  tezbridge({method: 'get_balance'}).then(x => console.log(x))
  ...
  ...
  ... put any interaction with TezBridge here
  ...
}

Finally, we can interact with our contract now.

The GIF picture below shows how TezBridge works.

How TezExchange(A Tezos Dapp) interact with TezBridge

— — — — — — — — — — — — — — — — — — — — — — — — — — — — —

This series is still in progress and will be revised. If anything is unclear for you, please contact me though riot.im. I’m in the Tezos channel named catsigma.

Donation BTC: 1L7oCqy7GHx7EiQc9SPFputCWftfaoT3kB

Thanks for the reading.

View the next article…Q&A for Michelson and Liquidity instructions.