Guide to Apps on the Orbs Network, Part II: Writing a Front-End Part

Sergey Bolshchikov
Jun 17, 2019 · 6 min read
Image for post
Image for post

In the previous post, we’ve discussed how to write and deploy a smart contract on the Orbs Network. This part will be devoted to writing a front-end application, and interaction with the contract via orbs-client-sdk in JavaScript.

Scaffolding the app

Our application will contain only 3 components:

  • App — Higher-order component which will contain the state and the business login of our application
  • Messages — Presentational component that will render list of messages, and
  • MessageInput — Presentational component with </textarea> for composing a new message.

We would also need orbs-client-sdk to communicate with Orbs. It's an SDK that provides basic functionality like creating an account, querying and sending transactions, etc. For more documentation check out this repo.

We install it via npm: npm install orbs-client-sdk.

Creating a user

Orbs-client-sdk has a method for that:

Image for post
Image for post

Sender is an object with 3 fields: publicKey, privateKey and address. These fields uniquely identify our user. In order to avoid the generation of a new account every time the user enters the app, we will store it in the localStorage. Important! Storing privateKey in the localStorage is for demonstration purposes ONLY. Do not do this in the production environment.

Creating an SDK instance

We can create it by calling a constructor function:

Image for post
Image for post

The constructor of the client receives 3 parameters:

We will use this instance in the future for querying node and sending transaction.

Sending a message

MessageInput component renders a simple TextArea with the submit button. It gets a prop “onSend”, but its logic is implemented in the app. Then a user hits the Submit button or Enter, the callback is invoked passing the message as a parameter.

The more interesting part is sending a message to the contract. Let’s take a look.

Firstly, we need to create a transaction:

Image for post
Image for post

Transaction is like a write-to database, which is why we also need to pass our public and private key in order to sign the transaction. We specify the contract by its name and the method that we want to invoke (sendMessageToChannel in our case). Lastly, we pass the array of arguments that will be passed to the specified method during invocation.

Since the contract is implemented in Go language and it has different types from JavaScript, orbs-client-sdk provides utility function (e.g. argString) to normalize types between different languages.

With the transaction object in our hands, we can actually send it:

const response = await orbsClient.sendTransaction(tx);

At the end we can verify the response by reading transaction status and execution result. If the values are “COMMITTED” and “SUCCESS”, then out transaction has been executed successfully.

Fetching messages

Fetching the first batch

Image for post
Image for post

In order to create a query, we are calling the corresponding method of the orbs client and passing our public key, contract name and the method that we would like to invoke on the specified contract. Lastly, we pass the array of arguments, very similar to what we’ve seen in createTransaction. In our case we specify the channel name and range of messages, say we want to get the first 5 messages.

When we send the query, we should expect the array of messages in return in JSON format.

We have the Messages component whose purpose is to render the list of messages. As soon as get a response from our query and update the state of the App component, messages will be rendered on the page.

There are two flaws with our current implementation — when a user sends a new message, we need to refresh the page in order to see it; when we have more than 5 messages, we won’t see them too. We can solve it with pagination and polling mechanism.

Pagination

The method ‘getMessageForChannel’ supports from and to arguments that allows us to specify the chunk of messages that we want. We start with the first message, and going to fetch 5 messages every time.

As soon as we get a response, we update the value of the message cursor with the amount of messages received and append new messages to the ones that we loaded previously:

Image for post
Image for post

Polling

It means we will call our fetchMessages function at a constant rate to query the contract:

Image for post
Image for post

During the mount of our application, we firstly call fetchMessage to get the first batch and then we call setInterval. JavaScript event loop will invoke our fetch function at the given refresh rate. Thus, every 2 seconds we fetch a new batch and if it contains new messages, our state will be updated and messages are rendered.

Deploying the app

You can see the Conversation application running live here.

Conclusion

Sergey (@bolshchikov) is a passionate software engineer and manager who loves to solve complex problems. He previously worked as an engineering manager and developer at Wix.com and co-founded the biggest front-end conference in the Middle East — “YouGottaLoveFrontend”. Sergey holds an MSc in Industrial Engineering from the Technion.

Get involved with Orbs

  • Orbs is open-source! Review the code on Github and contribute
  • Start developing apps on Orbs, review the documentation

Originally published at https://www.orbs.com on June 17, 2019.

The Orbs Blog

The Orbs Project Blog

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store