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

move asset definition into its own file

Browse Source
This commit is contained in:
Matthias Kretschmann 2019-04-17 14:35:48 +02:00
parent ce249176fa
commit e2f35d5455
Signed by: m
GPG Key ID: 606EEEF3C479A91F
3 changed files with 60 additions and 179 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -14,6 +14,7 @@ Open `src/App.js` in your marketplace app.
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:
```js
// src/App.js
async retrieveAssets() {
this.dbAssets = await this.ocean.assets.search("10 Monkey Species Small")
console.log(this.dbAssets)
@ -23,6 +24,7 @@ async retrieveAssets() {
The last thing we need is 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>
```
@ -31,6 +33,7 @@ The last thing we need is a button to start our search inside the render functio
The retrieved assets can now be consumed so in this tutorial we consume the first one. The following code goes after the `async retrieveAssets()` function.
```js
// src/App.js
async consumeAsset() {
// get all accounts
const accounts = await this.ocean.accounts.list()
@ -58,6 +61,7 @@ async consumeAsset() {
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>
```
@ -76,83 +80,16 @@ If you have no errors in your `console.log` and can see your asset files listed,
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()
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'
}
}
class App extends Component {
async componentDidMount() {
this.ocean = await new Ocean.getInstance({

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

@ -13,118 +13,10 @@ Open `src/App.js` in your marketplace app from the [React App Setup](/tutorials/
First, let's add the [asset](/concepts/terminology/#asset-or-data-asset) that we want to publish.
To do that, we need to add the following code after `window.ethereum.enable()` line, defining our asset based on the [OEP-08](https://github.com/oceanprotocol/OEPs/tree/master/8) metadata structure:
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
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'
}
}
```
## 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
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
<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
import React, { Component } from 'react'
import './App.css'
import { Ocean } from '@oceanprotocol/squid'
import * as Web3 from 'web3'
const web3 = new Web3(window.web3.currentProvider)
window.ethereum.enable()
// src/asset.js
const asset = {
base: {
name: '10 Monkey Species Small',
@ -194,6 +86,54 @@ const asset = {
}
}
export default 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({

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

@ -47,6 +47,7 @@ At this point you can already run `npm start` which starts the app in your brows
Let's make it ours, open `src/App.js` and replace the whole source with:
```jsx
// src/App.js
import React, { Component } from 'react'
import './App.css'
@ -66,6 +67,7 @@ export default App
Below the `import './App.css'` line, let's import the packages we installed, set up web3 and unlock MetaMask accounts (if locked):
```js
// src/App.js
import { Ocean } from '@oceanprotocol/squid'
import * as Web3 from 'web3'
@ -87,6 +89,7 @@ Now that we are successfully connected with Web3, we can set up our Ocean instan
At the beginning of your component (i.e. right after the `class App extends Component {` line), create a new Ocean instance with all configuration within the `componentDidMount` lifecycle method. All Ocean Protocol operations can be executed from this Ocean instance.
```js
// src/App.js
async componentDidMount() {
this.ocean = await new Ocean.getInstance({
web3Provider: web3,
@ -110,6 +113,7 @@ That's it, if you have no errors in your `console.log` then you have successfull
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'