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

unify requirements, make code snippets more clear

Browse Source
This commit is contained in:
Matthias Kretschmann 2019-04-17 15:37:28 +02:00
parent 059f17f7f2
commit 8e74f635ba
Signed by: m
GPG Key ID: 606EEEF3C479A91F
4 changed files with 35 additions and 193 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -5,9 +5,12 @@ description: Tutorial to get and use a data set in a basic React app.
## Requirements
This is a continuation of the React App Tutorial. Make sure you already did the [React App Setup](/tutorials/react-setup/) and the [Publish a Data Set](/tutorials/react-publish-data-set/) steps.
This is a continuation of the React App Tutorial. Make sure you already did the previous steps:
Open `src/App.js` in your marketplace app.
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.
## Retrieve Assets
@ -15,17 +18,21 @@ In the previous tutorial we added asset publishing. We can now search for publis
```js
// src/App.js
// ...
async retrieveAssets() {
this.dbAssets = await this.ocean.assets.search("10 Monkey Species Small")
console.log(this.dbAssets)
}
// ...
```
Now we need a button to start our search inside the render function just after `<button onClick={() => this.submitAsset()}>Register asset</button>`:
```jsx
// src/App.js
// ...
<button onClick={() => this.retrieveAssets()}>Retrieve assets</button>
// ...
```
## Consume Assets
@ -36,6 +43,7 @@ With the following code we start the consume process with the first search resul
```js
// src/App.js
// ...
async consumeAsset() {
// get all accounts
const accounts = await this.ocean.accounts.list()
@ -59,13 +67,16 @@ async consumeAsset() {
0
)
}
// ...
```
We still need a button to start consumption. In the render function, just after the `<button onClick={()=>this.retrieveAssets()}>Retrieve assets</button>` line, add:
```jsx
// src/App.js
// ...
<button onClick={() => this.consumeAsset()}>Consume asset</button>
// ...
```
With all these buttons in place, you should see this:

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

@ -7,7 +7,9 @@ description: Tutorial to add dataset publishing capabilities to a basic React ap
This is a continuation of the [React App Setup](/tutorials/react-setup/) tutorial, so make sure you have done all the steps described in there.
Open `src/App.js` in your marketplace app from the [React App Setup](/tutorials/react-setup/) tutorial.
1. [React App Setup](/tutorials/react-setup/)
Open `src/App.js` from your `marketplace/` folder.
## Define Asset
@ -94,31 +96,38 @@ export default asset
Then import this asset definition at the top of `src/App.js`:
```js
// src/App.js
// ...
import asset from './asset'
// ...
```
## 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:
```js
```jsx
// 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.'
)
}
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.'
)
}
// ...
```
The last thing we need is a button to start our registration inside the render function just after `<h1>Marketplace app</h1>`:
```jsx
// src/App.js
// ...
<button onClick={() => this.submitAsset()}>Register asset</button>
// ...
```
Tip: Before clicking the `Register asset` button, it might help to reload the page.

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

@ -90,6 +90,7 @@ At the beginning of your component (i.e. right after the `class App extends Comp
```js
// src/App.js
//...
async componentDidMount() {
this.ocean = await new Ocean.getInstance({
web3Provider: web3,
@ -100,8 +101,9 @@ async componentDidMount() {
parityUri: 'http://localhost:8545',
secretStoreUri: 'http://localhost:12001'
})
console.log("Finished loading contracts.")
console.log('Finished loading contracts.')
}
//...
```
## Final Result

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

@ -1,180 +0,0 @@
---
title: Publish a Data Set
description: Tutorial to add dataset publishing capabilities to a basic React app.
---
## Requirements
This is a continuation of the [React App Setup](/tutorials/react-setup/) tutorial, so make sure you have done all the steps described in there.
Open `src/App.js` in your marketplace app from the [React App Setup](/tutorials/react-setup/) tutorial.
## Define Asset
First, let's add the [asset](/concepts/terminology/#asset-or-data-asset) that we want to publish.
To do that, we need to define the asset based on the [OEP-08](https://github.com/oceanprotocol/OEPs/tree/master/8) metadata structure. Let's create a new file `src/asset.js` and fill it with:
```js
// src/asset.js
const asset = {
base: {
name: '10 Monkey Species Small',
dateCreated: '2012-02-01T10:55:11Z',
author: 'Mario',
license: 'CC0: Public Domain',
contentType: 'jpg/txt',
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'
}
}
export default asset
```
Then import this asset from the top of `src/App.js`:
```js
import asset from './asset'
```
## 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:
```js
// 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.'
)
}
```
The last thing we need is a button to start our registration inside the render function just after `<h1>Marketplace app</h1>`:
```jsx
// src/App.js
<button onClick={() => this.submitAsset()}>Register asset</button>
```
Tip: Before clicking the `Register asset` button, it might help to reload the page.
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.
If you have no errors in your `console.log`, then you have successfully registered an asset.
## Final Result
Here is the full source of `src/App.js` that you should have if you followed this tutorial:
```jsx
// src/App.js
import React, { Component } from 'react'
import './App.css'
import { Ocean } from '@oceanprotocol/squid'
import * as Web3 from 'web3'
import asset from './asset'
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/).