Build applications with Ocean Protocol

Tram Ho

This article requires you to have a bit of knowledge about the Ocean Protocl platform. In case you do not know this platform, you can read through your previous article: Introducing Ocean Protocol – an ecosystem for data economy

In this article, I will not guide you to make a product but will analyze the source code of a demo product provided by the Ocean Protocol Foundation. In Ocean’s github, apart from their Open source modules of Aquarius, Barge or Squidjs, you will see there are 2 repos: react-tutorial and commons . These are the 2 sources that I think best suit to start playing about Ocean Protocol. In this article, I will analyze with source react-tutorial

Why is this react-tutorial?

The first reason I chose react-tutorial instead of commons is that it is a lot simpler than commons, to play around with commons, you’ll need more knowledge about Typescript and its flow will be much more complicated, As for source react-tutorial , you will simply need to grasp 3 basic actions of register asset , search asset , consuming asset .

Practice

To understand it is best to start scratching it

Set up metamask network

As introduced in the previous article, we can run a local emulator through opensource Barge, but in this article I will guide you to manipulate directly with testnet Nile (If there is a testnet, there is no need to simulate local). .

Because it is a separate chain, to interact with it via metamask, you need to reconfigure rpc for it:

First, customize rpc again in Metamask:

The input boxes above will fill in the format:

  • Network Name : Nile
  • RPC URL (required) : https://nile.dev-ocean.com
  • ChainID : 8995
  • Symbol : NILE ETH (Name of the coin in the network)

Basically, when we are done, we will have an address like this:

Except that you will only have 2 tokens which are both 0, as mentioned in the previous article, we will pay attention to 2 tokens that exist in Ocean Protocol are ETH (ETH in Ocean, not ETH of vitalik =) )) and OCEAN token, these two coins will have different effects:

  • ETH: pay fees for transactions like publish asset , consume asset
  • Ocean: Paying for assets when consuming

So how to get it ??? Simply go here and tap on:

https://commons.nile.dev-ocean.com/faucet

Clone source code

Basically, setting up the necessary conditions has been completed, now just get the code to run

You clone this project to: https://github.com/oceanprotocol/react-tutorial

Opened, there are only 2 simple files index.js and asset.js

To run is simple:

There are 3 buttons corresponding to exactly 3 main actions of OceanProtocol

You can test directly by clicking, the result will show in the console section, so remember to F12 to see the flow of activities.

Now it’s time to play around with the code

Init Ocean client

First, when the mounted component initiates the Ocean client (via the Squid package), an Ocean client needs to have the following values:

  • web3Provider: This is the provider nile we have previously configured for metamask
  • nodeUri: A fullnode
  • auquariusUri: Address aquarius node where metadata storage of assets for search
  • brizoUri: Address brizo node to get asset
  • brizoAddress: The address brizo used (actually, this address in the docs of Ocean they did not say clearly so I will add it when I find it out)
  • secretStoreUrl: The address of the secretStore node, which has been discussed in my previous article about the Ocean protocol.

More attention, you’ll see that the comment section is for config Ocean when using Barge to simulate local, so if you want to use the main chain of Ocean is Pacific, you only need enough node addresses is interoperable

Register asset

Basically, this section only calls properly the assets.create function, but if you pay attention, you will have to confirm a lot and sign authentication with metamask.

With ocean.accounts.list () function, we will get list account as well as balance ETH and OCEAN of addresses in provider.

The public asset will be an object – as in this sample, it is the file asset.js

If omitting the details part, the key of object asset will look like:

This object will have 2 main components: main and additionalInformation , which have the properties to note:

  • name: The name of the asset, this will be useful when searching for assets if we put a proper name
  • price: This will be the value of the Ocean token to be paid when someone wants to consume your assets, e.g. Asset price is set to 8 OCEAN, the price will get the value “800 billion000000000000” (10 ^ 18)
  • files: This is the url to be able to consume assets, as in this example the asset has been uploaded to amazone web3 and given a link to get (We can also use other clouds to upload files or via ipfs)
  • categories: This is also a useful part for querying, since DBs are usually MongoDB or Elasticsearch so it is possible to advance search by adding params, so in order to be able to find assets more easily, you should also pay attention to setting. category name so that reasonable.

Search asset

To search for assets, you can basically use this query method, it will query to search for assets with names close to the value you want to search – notice when clicking the Search Assets button, you will see it returns a lot of assets that have The name is equivalent to the value we are looking for, in case you want to combine with the category or custom results returned, you should take a look at the advance query section of the squid code: https://github.com/oceanprotocol/squid- js / blob / master / src / ocean / OceanAssets.ts # L438

ConsumeAsset

Read through the code, you will see this function that will demo for us to consume 1 asset that we have just published, these assets will be seen as DDOs:

With DDO, we can only see the metadata values ​​such as name, category, not the file values ​​because this is something to consume consumable assets. Thereby function ocean.assets.consume will penetrate the files value to get us the corresponding Asset.

Basically, we have mastered the main actions of Ocean Protocol, but the difficult thing here is how we can combine those three actions into one application.

Homework

You may find it quite basic but when you learn clearly through these 3 actions, it will be much easier to dive into commons.

Our homework here will be:

Publish an Asset with any Name and try here to search https://commons.nile.dev-ocean.com/

You will see that the assets I publish are the same as the Nile testnet and the same Nodes as we have setup for the Ocean client.

Additionally you can also test more by Publish an asset with price and use a different account to consume and view the results amount OCEAN her has dropped and then re-consume and note the time consume as well as the amount of Ocean lost -> You will find Ocean is quite optimal for this.

End

Above is the introduction of the simplest demo app with Ocean Protocol, then you can go to the commons line to see their association with Ipfs as well as upload assets to Ocean.

Our team also tried to build a demo product that provides a platform to place data labeling orders for raw data sets, you can refer to: https://dalama-sun.firebaseapp.com / .

Hope my article can help you.

Share the news now

Source : Viblo