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:
1 2 | <span class="token function">npm</span> i <span class="token operator">&&</span> <span class="token function">npm</span> run start |
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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <span class="token keyword">async</span> <span class="token function">componentDidMount</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">const</span> ocean <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token keyword">new</span> <span class="token class-name">Ocean <span class="token punctuation">.</span> getInstance</span> <span class="token punctuation">(</span> <span class="token punctuation">{</span> web3Provider <span class="token punctuation">:</span> web3 <span class="token punctuation">,</span> nodeUri <span class="token punctuation">:</span> <span class="token string">'https://nile.dev-ocean.com'</span> <span class="token punctuation">,</span> aquariusUri <span class="token punctuation">:</span> <span class="token string">'https://aquarius.marketplace.dev-ocean.com'</span> <span class="token punctuation">,</span> brizoUri <span class="token punctuation">:</span> <span class="token string">'https://brizo.marketplace.dev-ocean.com'</span> <span class="token punctuation">,</span> brizoAddress <span class="token punctuation">:</span> <span class="token string">'0x4aaab179035dc57b35e2ce066919048686f82972'</span> <span class="token punctuation">,</span> secretStoreUri <span class="token punctuation">:</span> <span class="token string">'https://secret-store.nile.dev-ocean.com'</span> <span class="token punctuation">,</span> <span class="token comment">// local Spree connection</span> <span class="token comment">// nodeUri: 'http://localhost:8545',</span> <span class="token comment">// aquariusUri: 'http://aquarius:5000',</span> <span class="token comment">// brizoUri: 'http://localhost:8030',</span> <span class="token comment">// brizoAddress: '0x00bd138abd70e2f00903268f3db08f2d25677c9e',</span> <span class="token comment">// secretStoreUri: 'http://localhost:12001',</span> verbose <span class="token punctuation">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> <span class="token function">setState</span> <span class="token punctuation">(</span> <span class="token punctuation">{</span> ocean <span class="token punctuation">}</span> <span class="token punctuation">)</span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> <span class="token string">'Finished loading contracts.'</span> <span class="token punctuation">)</span> <span class="token punctuation">}</span> |
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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <span class="token keyword">async</span> <span class="token function">registerAsset</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">try</span> <span class="token punctuation">{</span> <span class="token keyword">const</span> accounts <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> state <span class="token punctuation">.</span> ocean <span class="token punctuation">.</span> accounts <span class="token punctuation">.</span> <span class="token function">list</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token keyword">const</span> ddo <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> state <span class="token punctuation">.</span> ocean <span class="token punctuation">.</span> assets <span class="token punctuation">.</span> <span class="token function">create</span> <span class="token punctuation">(</span> asset <span class="token punctuation">,</span> accounts <span class="token punctuation">[</span> <span class="token number">0</span> <span class="token punctuation">]</span> <span class="token punctuation">)</span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> <span class="token string">'Asset successfully submitted.'</span> <span class="token punctuation">)</span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> ddo <span class="token punctuation">)</span> <span class="token comment">// keep track of this registered asset for consumption later on</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> <span class="token function">setState</span> <span class="token punctuation">(</span> <span class="token punctuation">{</span> ddo <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token function">alert</span> <span class="token punctuation">(</span> <span class="token string">'Asset successfully submitted. Look into your console to see the response DDO object.'</span> <span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token keyword">catch</span> <span class="token punctuation">(</span> <span class="token class-name">error</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> console <span class="token punctuation">.</span> <span class="token function">error</span> <span class="token punctuation">(</span> error <span class="token punctuation">.</span> message <span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> |
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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <span class="token keyword">const</span> AssetModel <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token comment">// OEP-08 Attributes</span> <span class="token comment">// https://github.com/oceanprotocol/OEPs/tree/master/8</span> main <span class="token punctuation">:</span> <span class="token punctuation">{</span> type <span class="token punctuation">:</span> <span class="token string">'dataset'</span> <span class="token punctuation">,</span> name <span class="token punctuation">:</span> <span class="token string">''</span> <span class="token punctuation">,</span> dateCreated <span class="token punctuation">:</span> <span class="token string">''</span> <span class="token punctuation">,</span> author <span class="token punctuation">:</span> <span class="token string">''</span> <span class="token punctuation">,</span> license <span class="token punctuation">:</span> <span class="token string">''</span> <span class="token punctuation">,</span> price <span class="token punctuation">:</span> <span class="token string">'0'</span> <span class="token punctuation">,</span> files <span class="token punctuation">:</span> <span class="token punctuation">[</span> <span class="token punctuation">]</span> <span class="token punctuation">}</span> <span class="token punctuation">,</span> additionalInformation <span class="token punctuation">:</span> <span class="token punctuation">{</span> description <span class="token punctuation">:</span> <span class="token string">''</span> <span class="token punctuation">,</span> copyrightHolder <span class="token punctuation">:</span> <span class="token string">''</span> <span class="token punctuation">,</span> categories <span class="token punctuation">:</span> <span class="token punctuation">[</span> <span class="token punctuation">]</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">;</span> |
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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <span class="token keyword">async</span> <span class="token function">searchAssets</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">try</span> <span class="token punctuation">{</span> <span class="token keyword">const</span> search <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> state <span class="token punctuation">.</span> ocean <span class="token punctuation">.</span> assets <span class="token punctuation">.</span> <span class="token function">search</span> <span class="token punctuation">(</span> <span class="token string">'10 Monkey Species Small'</span> <span class="token punctuation">)</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> <span class="token function">setState</span> <span class="token punctuation">(</span> <span class="token punctuation">{</span> results <span class="token punctuation">:</span> search <span class="token punctuation">.</span> results <span class="token punctuation">}</span> <span class="token punctuation">)</span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> search <span class="token punctuation">)</span> <span class="token function">alert</span> <span class="token punctuation">(</span> <span class="token string">'Asset successfully retrieved. Look into your console to see the search response.'</span> <span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token keyword">catch</span> <span class="token punctuation">(</span> <span class="token class-name">error</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> console <span class="token punctuation">.</span> <span class="token function">error</span> <span class="token punctuation">(</span> error <span class="token punctuation">.</span> message <span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> |
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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | <span class="token keyword">async</span> <span class="token function">consumeAsset</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">try</span> <span class="token punctuation">{</span> <span class="token comment">// get all accounts</span> <span class="token keyword">const</span> accounts <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> state <span class="token punctuation">.</span> ocean <span class="token punctuation">.</span> accounts <span class="token punctuation">.</span> <span class="token function">list</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token comment">// get our registered asset</span> <span class="token keyword">const</span> consumeAsset <span class="token operator">=</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> state <span class="token punctuation">.</span> ddo <span class="token comment">// get service we want to execute</span> <span class="token keyword">const</span> service <span class="token operator">=</span> consumeAsset <span class="token punctuation">.</span> <span class="token function">findServiceByType</span> <span class="token punctuation">(</span> <span class="token string">'access'</span> <span class="token punctuation">)</span> <span class="token comment">// order service agreement</span> <span class="token keyword">const</span> agreement <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> state <span class="token punctuation">.</span> ocean <span class="token punctuation">.</span> assets <span class="token punctuation">.</span> <span class="token function">order</span> <span class="token punctuation">(</span> consumeAsset <span class="token punctuation">.</span> id <span class="token punctuation">,</span> service <span class="token punctuation">.</span> index <span class="token punctuation">,</span> accounts <span class="token punctuation">[</span> <span class="token number">0</span> <span class="token punctuation">]</span> <span class="token punctuation">)</span> <span class="token comment">// consume it</span> <span class="token keyword">await</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> state <span class="token punctuation">.</span> ocean <span class="token punctuation">.</span> assets <span class="token punctuation">.</span> <span class="token function">consume</span> <span class="token punctuation">(</span> agreement <span class="token punctuation">,</span> consumeAsset <span class="token punctuation">.</span> id <span class="token punctuation">,</span> service <span class="token punctuation">.</span> index <span class="token punctuation">,</span> accounts <span class="token punctuation">[</span> <span class="token number">0</span> <span class="token punctuation">]</span> <span class="token punctuation">,</span> <span class="token string">''</span> <span class="token punctuation">,</span> <span class="token number">0</span> <span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token keyword">catch</span> <span class="token punctuation">(</span> <span class="token class-name">error</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> console <span class="token punctuation">.</span> <span class="token function">error</span> <span class="token punctuation">(</span> error <span class="token punctuation">.</span> message <span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> |
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.