oceanprotocol/docs
1
0
Fork 0
mirror of https://github.com/oceanprotocol/docs.git synced 2024-11-26 19:49:26 +01:00
Code Releases Activity

update all react tutorial parts

Browse Source
This commit is contained in:
Matthias Kretschmann 2019-08-09 15:34:24 +02:00
parent 368df7824e
commit 064ae0ca4d
Signed by: m
GPG Key ID: 606EEEF3C479A91F
6 changed files with 32 additions and 209 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
content/tutorials/images/react-app-04.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 208 KiB

BIN
content/tutorials/images/react-app-05.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 302 KiB

BIN
content/tutorials/images/react-app-06.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 244 KiB

72
content/tutorials/react-get-use-data-set.md
View File

@ -10,86 +10,38 @@ This is a continuation of the React App Tutorial. Make sure you already did the
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.
Open `src/index.js` from your `marketplace/` folder.
## Retrieve Assets
## Search 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:
In the previous tutorial we added asset publishing. We can now search for published assets for consumption. Just after the `registerAsset()` function we can add a new `searchAssets` function that will handle search:
```js:title=src/App.js
// ...
async retrieveAssets() {
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.'
)
}
// ...
```
GITHUB-EMBED https://github.com/oceanprotocol/react-tutorial/blob/2765a7e6ae9a948d311d3949636cf832d2664900/src/index.js js 54-67 GITHUB-EMBED
Now we need a button to start our search inside the render function just after the _Register asset_ button:
Now we need a button to start our search inside the `render()` function, just after the _Register asset_ button:
```jsx:title=src/App.js
// ...
<button onClick={() => this.retrieveAssets()}>Retrieve assets</button>
// ...
```
GITHUB-EMBED https://github.com/oceanprotocol/react-tutorial/blob/2765a7e6ae9a948d311d3949636cf832d2664900/src/index.js js 114-115 GITHUB-EMBED
## Consume Assets
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:
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 `searchAssets()` function:
```js:title=src/App.js
// ...
async consumeAsset() {
// get all accounts
const accounts = await this.ocean.accounts.list()
// get first asset
const consumeAsset = this.search.results[0]
// get service we want to execute
const service = consumeAsset.findServiceByType('Access')
// order service agreement
const agreement = await this.ocean.assets.order(
consumeAsset.id,
service.serviceDefinitionId,
accounts[0]
)
// consume it
await this.ocean.assets.consume(
agreement,
consumeAsset.id,
service.serviceDefinitionId,
accounts[0],
'',
0
)
}
// ...
```
GITHUB-EMBED https://github.com/oceanprotocol/react-tutorial/blob/2765a7e6ae9a948d311d3949636cf832d2664900/src/index.js js 69-95 GITHUB-EMBED
We still need a button to start consumption. In the render function, just after the _Retrieve assets_ button, add:
We still need a button to start consumption. In the render function, just after the _Search assets_ button, add:
```jsx:title=src/App.js
// ...
<button onClick={() => this.consumeAsset()}>Consume asset</button>
// ...
```
GITHUB-EMBED https://github.com/oceanprotocol/react-tutorial/blob/2765a7e6ae9a948d311d3949636cf832d2664900/src/index.js js 116-118 GITHUB-EMBED
With all these buttons in place, you should see this:
![React App 05](images/react-app-05.png)
![React app with all actions in place](images/react-app-06.png)
> Tip: Before clicking the `Retrieve assets` button, it might help to reload the page.
Go ahead and click the _Retrieve assets_ button, and then the _Consume asset_ button. Approve all the MetaMask dialog boxes.
Go ahead and click the _Search assets_ button, and then the _Consume asset_ button. Approve all the MetaMask dialog boxes.
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.
> 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.
## Final Result
Here is the full source of `src/index.js` that you should have if you followed this tutorial:

167
content/tutorials/react-publish-data-set.md
View File

@ -9,7 +9,7 @@ This is a continuation of the [React App Setup](/tutorials/react-setup/) tutoria
1. [React App Setup](/tutorials/react-setup/)
Open `src/App.js` from your `marketplace/` folder.
Open `src/index.js` from your `marketplace/` folder.
## Define Asset
@ -19,167 +19,38 @@ To do that, we need to define the asset based on the [OEP-08](https://github.com
Let's create a new file `src/asset.js` and fill it with:
```js:title=src/asset.js
const asset = {
base: {
name: '10 Monkey Species Small',
dateCreated: '2012-02-01T10:55:11Z',
author: 'Mario',
license: 'CC0: Public Domain',
price: '10',
files: [
{
index: 0,
contentType: 'application/zip',
checksum: '2bf9d229d110d1976cdf85e9f3256c7f',
checksumType: 'MD5',
contentLength: 12057507,
compression: 'zip',
encoding: 'UTF-8',
url:
'https://s3.amazonaws.com/datacommons-seeding-us-east/10_Monkey_Species_Small/assets/training.zip'
},
{
index: 1,
contentType: 'text/txt',
checksum: '354d19c0733c47ef3a6cce5b633116b0',
checksumType: 'MD5',
contentLength: 928,
url:
'https://s3.amazonaws.com/datacommons-seeding-us-east/10_Monkey_Species_Small/assets/monkey_labels.txt',
resourceId: 'test'
},
{
index: 2
}
],
checksum: '',
categories: ['image'],
tags: ['image data', 'classification', 'animals'],
type: 'dataset',
description: 'EXAMPLE ONLY ',
copyrightHolder: 'Unknown',
workExample: 'image path, id, label',
links: [
{
name: 'example model',
url:
'https://drive.google.com/open?id=1uuz50RGiAW8YxRcWeQVgQglZpyAebgSM'
},
{
name: 'example code',
type: 'example code',
url: 'https://github.com/slothkong/CNN_classification_10_monkey_species'
},
{
url:
'https://s3.amazonaws.com/datacommons-seeding-us-east/10_Monkey_Species_Small/links/discovery/n5151.jpg',
name: 'n5151.jpg',
type: 'discovery'
},
{
url:
'https://s3.amazonaws.com/datacommons-seeding-us-east/10_Monkey_Species_Small/links/sample/sample.zip',
name: 'sample.zip',
type: 'sample'
}
],
inLanguage: 'en'
}
}
GITHUB-EMBED https://github.com/oceanprotocol/react-tutorial/blob/2765a7e6ae9a948d311d3949636cf832d2664900/src/asset.js js GITHUB-EMBED
export default asset
```
Then import this asset definition at the top of `src/index.js`:
Then import this asset definition at the top of `src/App.js`:
```js:title=src/App.js
// ...
import asset from './asset'
// ...
```
GITHUB-EMBED https://github.com/oceanprotocol/react-tutorial/blob/2765a7e6ae9a948d311d3949636cf832d2664900/src/index.js js 5 GITHUB-EMBED
## Handle Asset Publishing
Now that we have an asset to submit, we need a function to handle it. Just before `render() {` let's add this function:
Now that we have an asset to submit, we need a function to handle it. Just before `render() {` let's add this `registerAsset` function:
```jsx:title=src/App.js
// ...
async submitAsset() {
const accounts = await this.ocean.accounts.list()
const ddo = await this.ocean.assets.create(asset, accounts[0])
console.log('Asset successfully submitted.')
console.log(ddo)
alert(
'Asset successfully submitted. Look into your console to see the response DDO object.'
)
}
// ...
```
GITHUB-EMBED https://github.com/oceanprotocol/react-tutorial/blob/2765a7e6ae9a948d311d3949636cf832d2664900/src/index.js js 40-52 GITHUB-EMBED
The last thing we need is a button to start our registration inside the render function just after `<h1>Marketplace app</h1>`:
The last thing we need is a button to start our registration inside the `render()` function:
```jsx:title=src/App.js
// ...
<button onClick={() => this.submitAsset()}>Register asset</button>
// ...
```
GITHUB-EMBED https://github.com/oceanprotocol/react-tutorial/blob/2765a7e6ae9a948d311d3949636cf832d2664900/src/index.js js 111-113 GITHUB-EMBED
Tip: Before clicking the `Register asset` button, it might help to reload the page.
Note how we disable the button when Web3 is not available to reduce user confusion. Within the Ocean Protocol flow of registering, searching, and consuming, only searching is possible without Web3.
When you click on the `Register asset` button, you should get four separate dialog boxes from MetaMask, in a series, i.e. the second one only appears after you accept/approve the first one, and so on.
In your browser, you should now end up like this:
![React app with publish button](images/react-app-04.png)
When you click on the _Register asset_ button, you should get four separate dialog boxes from MetaMask, in a series, i.e. the second one only appears after you accept/approve the first one, and so on.
Have a look into `console.log` to see the various steps of the register process. If you have no errors in your `console.log`, then you have successfully registered an asset.
![Successful asset publishing](images/react-app-05.png)
## Final Result
Here is the full source of `src/App.js` that you should have if you followed this tutorial:
Here is the full source of `src/index.js` that you should have if you followed this tutorial:
```jsx:title=src/App.js
import React, { Component } from 'react'
import './App.css'
import { Ocean } from '@oceanprotocol/squid'
import Web3 from 'web3'
import asset from './asset'
GITHUB-EMBED https://github.com/oceanprotocol/react-tutorial/blob/2765a7e6ae9a948d311d3949636cf832d2664900/src/index.js js 1-5,6-16,18-27,34-38,96-113,119-124 GITHUB-EMBED
const web3 = new Web3(window.web3.currentProvider)
window.ethereum.enable()
class App extends Component {
async componentDidMount() {
this.ocean = await new Ocean.getInstance({
web3Provider: web3,
nodeUri: 'http://localhost:8545',
aquariusUri: 'http://localhost:5000',
brizoUri: 'http://localhost:8030',
brizoAddress: '0x00bd138abd70e2f00903268f3db08f2d25677c9e',
parityUri: 'http://localhost:8545',
secretStoreUri: 'http://localhost:12001'
})
console.log('Finished loading contracts.')
}
async submitAsset() {
const accounts = await this.ocean.accounts.list()
const ddo = await this.ocean.assets.create(asset, accounts[0])
console.log('Asset successfully submitted.')
console.log(ddo)
alert(
'Asset successfully submitted. Look into your console to see the response DDO object.'
)
}
render() {
return (
<div className="App App-header">
<h1>Marketplace app</h1>
<button onClick={() => this.submitAsset()}>Register asset</button>
</div>
)
}
}
export default App
```
Move on to [Get & Use a Data Set](/tutorials/react-get-use-data-set/).
**Move on to [Get & Use a Data Set](/tutorials/react-get-use-data-set/).**

2
content/tutorials/react-setup.md
View File

@ -104,7 +104,7 @@ Here is the full source of `src/index.js` that you should have if you followed t
GITHUB-EMBED https://github.com/oceanprotocol/react-tutorial/blob/2765a7e6ae9a948d311d3949636cf832d2664900/src/index.js js 1-4,6-16,18-27,34-38,96-109,119-124 GITHUB-EMBED
Move on to [Publish a Data Set](/tutorials/react-publish-data-set/).
**Move on to [Publish a Data Set](/tutorials/react-publish-data-set/).**
## Bonus: Connect against local Spree network