2018-12-05 12:08:47 +01:00
---
2018-12-05 15:01:07 +01:00
title: Publish a Data Set
2018-12-06 10:46:27 +01:00
description: Tutorial to add dataset publishing capabilities to a basic React app.
2018-12-05 12:08:47 +01:00
---
2018-12-05 15:01:07 +01:00
## Requirements
2018-12-05 12:08:47 +01:00
2019-01-30 11:45:59 +01:00
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.
2018-12-05 12:08:47 +01:00
2019-01-30 11:45:59 +01:00
Open `src/App.js` in your marketplace app from the [React App Setup ](/tutorials/react-setup/ ) tutorial.
2018-12-06 16:38:22 +01:00
## Define Asset
2019-02-22 13:24:46 +01:00
First, let's add the [asset ](/concepts/terminology/#asset-or-data-asset ) that we want to publish.
2018-12-06 16:38:22 +01:00
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: {
2019-03-20 11:30:00 +01:00
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"
2018-12-06 16:38:22 +01:00
],
2019-03-20 11:30:00 +01:00
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",
2018-12-06 16:38:22 +01:00
links: [
{
2019-03-20 11:30:00 +01:00
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"
2018-12-06 16:38:22 +01:00
}
],
2019-03-20 11:30:00 +01:00
inLanguage: "en"
2018-12-06 16:38:22 +01:00
}
}
```
## 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() {
2019-04-01 12:27:52 +02:00
const accounts = await this.ocean.accounts.list()
const ddo = await this.ocean.assets.create(asset, accounts[0])
2019-03-20 11:30:00 +01:00
alert('Asset successfully submitted: ', JSON.stringify(ddo))
2018-12-06 16:38:22 +01:00
}
```
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 >
```
2018-12-05 15:01:07 +01:00
2018-12-06 14:43:27 +01:00
## Final Result
2018-12-05 12:08:47 +01:00
2018-12-06 10:46:27 +01:00
That's it. If you have no errors in your `console.log` and you receive an alert after you click `Register asset` then you have successfully registered an asset.
2018-12-05 12:08:47 +01:00
2018-12-06 10:46:27 +01:00
Here is the full source of `src/App.js` that you should have if you followed this tutorial:
2018-12-05 15:01:07 +01:00
2018-12-06 14:43:27 +01:00
```jsx
2018-12-05 15:01:07 +01:00
import React, { Component } from 'react'
import './App.css'
2018-12-06 10:53:54 +01:00
import { Ocean } from '@oceanprotocol/squid'
2018-12-05 15:01:07 +01:00
import * as Web3 from 'web3'
2018-12-06 14:43:27 +01:00
2018-12-05 15:01:07 +01:00
const web3 = new Web3(window.web3.currentProvider)
window.ethereum.enable()
2018-12-06 14:43:27 +01:00
2018-12-05 15:01:07 +01:00
const asset = {
base: {
2019-03-20 11:30:00 +01:00
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"
2018-12-05 15:01:07 +01:00
],
2019-03-20 11:30:00 +01:00
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",
2018-12-05 15:01:07 +01:00
links: [
{
2019-03-20 11:30:00 +01:00
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"
2018-12-05 12:08:47 +01:00
}
2018-12-05 15:01:07 +01:00
],
2019-03-20 11:30:00 +01:00
inLanguage: "en"
2018-12-05 15:01:07 +01:00
}
}
2018-12-06 14:43:27 +01:00
2018-12-05 15:01:07 +01:00
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',
parityUri: 'http://localhost:8545',
secretStoreUri: 'http://localhost:12001',
threshold: 0,
2019-02-20 15:11:48 +01:00
password: 'node0',
address: '0x00bd138abd70e2f00903268f3db08f2d25677c9e'
2018-12-05 15:01:07 +01:00
})
console.log('Finished loading contracts!')
}
2018-12-06 14:43:27 +01:00
2018-12-05 15:01:07 +01:00
async submitAsset() {
2019-04-01 12:27:52 +02:00
const accounts = await this.ocean.accounts.list()
const ddo = await this.ocean.assets.create(asset, accounts[0])
2019-03-20 11:30:00 +01:00
alert('Asset successfully submitted: ', JSON.stringify(ddo))
2018-12-05 15:01:07 +01:00
}
2018-12-06 14:43:27 +01:00
2018-12-05 15:01:07 +01:00
render() {
return (
2018-12-06 16:38:22 +01:00
< div className = "App App-header" >
2018-12-05 17:48:15 +01:00
< h1 > Marketplace app< / h1 >
2018-12-05 15:01:07 +01:00
< button onClick = {() = > this.submitAsset()}>Register asset< / button >
< / div >
)
}
}
2018-12-06 14:43:27 +01:00
2018-12-05 15:01:07 +01:00
export default App
```