How to Create Updatable Dapps (ENG)

Yuriy Ivanov
4 min readMay 18, 2021

Dapps are written based on JS, HML, CSS and other web technologies. They consist of two parts — the Client part, the part that is responsible for the user interface and the Server part in the form of a smart contract for recording and verifying data in the blockchain. Each part has its own algorithm for creating updated code.

Updating the dapp client side

In other dapps, such as the Ethereum blockchain, the client part is understood as an ordinary website or an ordinary application (desktop or mobile) that can interact with a smart contract. Therefore, the problem with updates is not acute — it is updated in the usual way, for example, if it is a site, then the page files on the web server are rewritten. I.e., in fact, this is an ordinary centralized application with its own shortcomings, for example, the site can be blocked by the decision of state authorities.

Tera is resistant to censorship, Tera stores the client part of the code in the blockchain. But there is an urgent question about the possibility of updating such code by developers, for example, in such cases as fixing bugs or releasing new improved versions. Below is a way to do this.

Developers need to know that when a dapp is loaded, it is loaded into a separate secure frame (iframe)in sandbox mode, which isolates it from the rest of the application. The file is responsible for the download dapp-frame.html, which already contains the dapp number in its body (it is substituted by the server automatically). During initialization, it requests the dapp code, determines whether the special status fields of the main account of the smart contract are filled in. If there are any, it loads the code not from the database of dapps, but at the address specified in them. These fields have names: HTMLBlock and HTMLTr-they indicate the block number and the transaction number containing the new client code.

In order for the client part of the dapp to be updatable, it is necessary when creating a smart contract

  1. Specify special fields in “State storage format”, example: {HTMLBlock:uint, HTMLTr:uint16}
  2. Specify the procedure for filling them in when sending new updates, for example:
    function OnGet()
    {
    var lib=GetLib();
    if(lib.OnGet())
    return;
    }
    function GetLib()
    {
    return require(8);//List-lib
    }

Code comment: The fill-in library with code 8 is already present in the main and test network. It works as follows when on the main (Base)a transaction is sent to the smart contract account (including a zero-sum transaction), then the payment description checks for the presence of a JSON object with the HTMLBlock and HTMLTr fields, for example, it can be as follows: {“HTMLBlock”: 12345,”HTMLTr”: 0} When receiving this format and provided that it was sent from the creator (owner) of the smart contract, the status fields are updated.

This state value is then used at the system level when loading client code. You can learn more about downloading the code by opening the file dapp-frame.html

Tools

In Tera, it is already possible to create the above actions automatically when creating dapps using the integrated dapp development environment that comes with the full node code. To do this, open the page /dapp-edit.html

TERA DApp IDE

In it, create a new dapp (New button) and select the following template-Dapp:User list, as shown in the picture below:

As a result, the necessary fields will be filled in automatically and the necessary code will be created in the smart contract.

In order to update the client part, you need to do the following on the Upload to blockchain tab:

1. Upload the new version of HMTL to the blockchain (SEND HTML FILE button), wait for confirmation from the blockchain in the log as a string: /file/9183610/1

2. In the list of blockchain dapps, select the desired dapp (in the lower-left window)

3. Specify the line /file/9183610/1 in the window before the SEND VISIBLE FILE button and send the command.

See the picture below:

Acknowledgements

I express my gratitude to Yang Longyang, without whom this article would have been unwritten for a long time.

--

--