1
0
mirror of https://github.com/oceanprotocol/docs.git synced 2024-11-02 08:20:22 +01:00
docs/content/tutorials/react-get-use-data-set.md

98 lines
3.3 KiB
Markdown
Raw Normal View History

2018-12-05 12:08:47 +01:00
---
title: Get & Use a Data Set
description: Tutorial to get and use a data set in a basic React app.
2018-12-05 12:08:47 +01:00
---
2018-12-17 14:02:35 +01:00
## Requirements
This is a continuation of the React App Tutorial. Make sure you already did the previous steps:
2018-12-17 14:02:35 +01:00
1. [React App Setup](/tutorials/react-setup/)
2. [Publish a Data Set](/tutorials/react-publish-data-set/)
Open `src/App.js` from your `marketplace/` folder.
2018-12-17 14:02:35 +01:00
## Retrieve Assets
In the previous tutorial we added asset publishing. We can now search for published assets for consumption. Just after the `submitAsset()` function we can add a new function that will handle search:
2018-12-17 14:02:35 +01:00
2019-07-16 16:17:34 +02:00
```js:title=src/App.js
// ...
2019-01-30 11:45:59 +01:00
async retrieveAssets() {
2019-04-17 16:48:37 +02:00
this.search = await this.ocean.assets.search('10 Monkey Species Small')
console.log(this.search)
alert(
'Asset successfully retrieved. Look into your console to see the search response.'
)
2018-12-17 14:02:35 +01:00
}
// ...
2018-12-17 14:02:35 +01:00
```
2019-07-26 14:11:58 +02:00
Now we need a button to start our search inside the render function just after the _Register asset_ button:
2018-12-17 14:02:35 +01:00
2019-07-16 16:17:34 +02:00
```jsx:title=src/App.js
// ...
2019-01-30 11:45:59 +01:00
<button onClick={() => this.retrieveAssets()}>Retrieve assets</button>
// ...
2018-12-17 14:02:35 +01:00
```
## Consume Assets
2018-12-17 14:02:35 +01:00
2019-04-17 15:23:00 +02:00
Consuming means downloading one or multiple files attached to an asset. During that process the initial `url` value we added during the publish process for each file will be decrpyted and the file can be downloaded.
With the following code we start the consume process with the first search result, then go on to download its first attached file. Put it after the `retrieveAssets()` function:
2018-12-17 14:02:35 +01:00
2019-07-16 16:17:34 +02:00
```js:title=src/App.js
// ...
2019-01-30 11:45:59 +01:00
async consumeAsset() {
2018-12-17 14:02:35 +01:00
// get all accounts
2019-04-01 12:27:52 +02:00
const accounts = await this.ocean.accounts.list()
2018-12-17 14:02:35 +01:00
// get first asset
2019-04-17 16:48:37 +02:00
const consumeAsset = this.search.results[0]
2018-12-17 14:02:35 +01:00
// get service we want to execute
const service = consumeAsset.findServiceByType('Access')
2019-04-01 12:27:52 +02:00
// order service agreement
const agreement = await this.ocean.assets.order(
2019-04-17 16:48:37 +02:00
consumeAsset.id,
service.serviceDefinitionId,
accounts[0]
2019-04-01 12:27:52 +02:00
)
// consume it
await this.ocean.assets.consume(
2019-04-17 16:48:37 +02:00
agreement,
consumeAsset.id,
service.serviceDefinitionId,
accounts[0],
'',
0
2019-04-01 12:27:52 +02:00
)
2019-04-17 16:48:37 +02:00
}
// ...
2018-12-17 14:02:35 +01:00
```
2019-07-26 14:11:58 +02:00
We still need a button to start consumption. In the render function, just after the _Retrieve assets_ button, add:
2018-12-17 14:02:35 +01:00
2019-07-16 16:17:34 +02:00
```jsx:title=src/App.js
// ...
2019-01-30 11:45:59 +01:00
<button onClick={() => this.consumeAsset()}>Consume asset</button>
// ...
2018-12-17 14:02:35 +01:00
```
2019-01-30 11:45:59 +01:00
With all these buttons in place, you should see this:
![React App 05](images/react-app-05.png)
2019-07-26 14:11:58 +02:00
> Tip: Before clicking the `Retrieve assets` button, it might help to reload the page.
2019-07-26 14:11:58 +02:00
Go ahead and click the _Retrieve assets_ button, and then the _Consume asset_ button. Approve all the MetaMask dialog boxes.
2018-12-17 14:02:35 +01:00
2019-04-17 15:23:00 +02:00
Have a look into `console.log` to see the various steps of the search and consume process. If you have no errors in your `console.log` and can see your asset files listed, you have a working marketplace.
2019-07-26 14:11:58 +02:00
> Consuming an asset will throw an error `Requested did is not found in the keeper network`. We are currently [investigating why that is happening](https://github.com/oceanprotocol/barge/issues/144) in either squid-js or Brizo and will remove this note once we verified a fix is in place in one of those components.
2019-04-18 16:32:17 +02:00
## Final Result
2018-12-17 14:02:35 +01:00
2019-08-09 13:30:13 +02:00
Here is the full source of `src/index.js` that you should have if you followed this tutorial:
2018-12-17 14:02:35 +01:00
2019-08-09 13:30:13 +02:00
GITHUB-EMBED https://github.com/oceanprotocol/react-tutorial/blob/master/src/index.js js GITHUB-EMBED