mirror of
https://github.com/oceanprotocol/docs.git
synced 2024-11-26 19:49:26 +01:00
223 lines
6.6 KiB
Markdown
223 lines
6.6 KiB
Markdown
---
|
|
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 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:
|
|
|
|
```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: [
|
|
{
|
|
checksum: "2bf9d229d110d1976cdf85e9f3256c7f",
|
|
checksumType: "MD5",
|
|
contentLength: 12057507,
|
|
url: "https://s3.amazonaws.com/datacommons-seeding-us-east/10_Monkey_Species_Small/assets/training.zip"
|
|
},
|
|
{
|
|
checksum: "354d19c0733c47ef3a6cce5b633116b0",
|
|
checksumType: "MD5",
|
|
contentLength: 928,
|
|
url: "https://s3.amazonaws.com/datacommons-seeding-us-east/10_Monkey_Species_Small/assets/monkey_labels.txt"
|
|
},
|
|
{
|
|
url: "https://s3.amazonaws.com/datacommons-seeding-us-east/10_Monkey_Species_Small/assets/validation.zip"
|
|
}
|
|
],
|
|
checksum: "",
|
|
categories: [
|
|
"image"
|
|
],
|
|
tags: [
|
|
"image data",
|
|
"classification",
|
|
"animals"
|
|
],
|
|
type: "dataset",
|
|
description: "EXAMPLE ONLY ",
|
|
size: "3.1gb",
|
|
copyrightHolder: "Unknown",
|
|
encoding: "UTF-8",
|
|
compression: "zip",
|
|
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])
|
|
alert('Asset successfully submitted: ', JSON.stringify(ddo))
|
|
}
|
|
```
|
|
|
|
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()
|
|
|
|
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: [
|
|
{
|
|
checksum: "2bf9d229d110d1976cdf85e9f3256c7f",
|
|
checksumType: "MD5",
|
|
contentLength: 12057507,
|
|
url: "https://s3.amazonaws.com/datacommons-seeding-us-east/10_Monkey_Species_Small/assets/training.zip"
|
|
},
|
|
{
|
|
checksum: "354d19c0733c47ef3a6cce5b633116b0",
|
|
checksumType: "MD5",
|
|
contentLength: 928,
|
|
url: "https://s3.amazonaws.com/datacommons-seeding-us-east/10_Monkey_Species_Small/assets/monkey_labels.txt"
|
|
},
|
|
{
|
|
url: "https://s3.amazonaws.com/datacommons-seeding-us-east/10_Monkey_Species_Small/assets/validation.zip"
|
|
}
|
|
],
|
|
checksum: "",
|
|
categories: [
|
|
"image"
|
|
],
|
|
tags: [
|
|
"image data",
|
|
"classification",
|
|
"animals"
|
|
],
|
|
type: "dataset",
|
|
description: "EXAMPLE ONLY ",
|
|
size: "3.1gb",
|
|
copyrightHolder: "Unknown",
|
|
encoding: "UTF-8",
|
|
compression: "zip",
|
|
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({
|
|
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])
|
|
alert('Asset successfully submitted: ', JSON.stringify(ddo))
|
|
}
|
|
|
|
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/).
|