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

react tutorial, publish asset tutorial

Browse Source
This commit is contained in:
Jernej Pregelj 2018-12-05 12:08:47 +01:00
parent db01a5c94b
commit 7b6a55d35a
5 changed files with 240 additions and 92 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

105
content/tutorials/publish-data-set.md
View File

@ -3,97 +3,18 @@ title: Publish a Data Set
---
### Requirements ###
- `nodejs` >= 10 and `npm` >= 5.2 installed.
- [oceanprotocol/docker-images](https://github.com/oceanprotocol/docker-images) running.
- Browser with [Metamask](https://metamask.io/) and some ether in your account.
- Javascript frontend or nodejs app running
- Installed `@oceanprotocol/squid` and `web3` packages
- All required services running ([oceanprotocol/docker-images](https://github.com/oceanprotocol/docker-images))
### Steps ###
1. Run `npx create-react-app marketplace` in you terminal. This will create folder `marketplace` with empty basic react app.
2. Move to your app directory with `cd marketplace` and run `yarn add @oceanprotocol/squid web3`. This adds OceanProtocol and Web3 packages to the app.
3. At this point you can already run `yarn start` which starts app in your browser at [localhost:3000](http://localhost:3000).
4. To clear react spinning icon open `src/App.js` in your favourite editor and modify the source to:
### Publishing ###
```javascript
import React, { Component } from 'react';
import './App.css';
class App extends Component {
render() {
return (
<div className="App">
<h1>Marketplace dapp</h1>
</div>
);
}
}
export default App;
```
5. Below `import './App.css';` lets import packages we installed, setup web3 and unlock Metamask accounts if locked.
```javascript
import { Ocean } from '@oceanprotocol/squid/dist/node/squid'
import * as Web3 from 'web3'
const web3 = new Web3(window.web3.currentProvider)
window.ethereum.enable()
```
6. Below code that you just added create asset with all details that you want to submit:
```javascript
const asset = {
base: {
name: "Office Humidity",
description: "Weather information of UK including temperature and humidity",
dateCreated: "2012-02-01T10:55:11+00:00",
author: "Met Office",
size: "3.1bg",
license: "Public Domain",
copyrightHolder: "Met Office",
contentUrls: ["https://testocnfiles.blob.core.windows.net/testfiles/testzkp.zip"],
contentType: "text/csv",
links: [{
name: "Dataset sample",
type: "sample",
url: "http://data.ceda.ac.uk/badc/ukcp09/data/gridded-land-obs/gridded-land-obs-daily/"
}],
tags: "weather, uk, 2011, temperature, humidity",
price: 5,
type: "dataset"
},
curation: {
rating: 0,
numVotes: 0,
schema: "Binary Voting"
},
additionalInformation: {
updateFrequency: "yearly"
}
}
```
7. Next step is to initialize Squid. This starts loading all smart contracts so we will put alert in the end to let us know when it finishes. Code for this goes after the `class App extends Component {` line.
```javascript
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,
password: "secret",
address: "0x068ed00cf0441e4829d9784fcbe7b9e26d4bd8d0",
})
alert("Finished loading contracts!")
}
```
8. Below that add function that handles retrival of accounts from web3 and asset registration.
```javascript
async submitAsset(){
const accounts = await this.ocean.getAccounts()
const ddo = await this.ocean.registerAsset(asset, accounts[0])
alert("Asset successfully submited:", JSON.stringify(ddo))
}
```
9. Last thing missing is to add button that submits asset after the `<h1>Marketplace dapp</h1>` line.
```
<button onClick={()=>this.submitAsset()}>Register asset</button>
```
And that's it. You can now submit your asset to the network.
You can check final code src/App.js code at:??? and full repository at:???
// import package
import { Ocean } from '@oceanprotocol/squid/dist/node/squid'
// create ocean with configuration
const ocean = await new Ocean.getInstance({/* < your configuration > */})
// get accounts
const accounts = await ocean.getAccounts()
// register your asset
const ddo = await ocean.registerAsset(/* < your asset > */, accounts[0])
```

3
content/tutorials/react-get-use-data-set.md Normal file
View File

@ -0,0 +1,3 @@
---
title: React Get & Use a Data Set
---

126
content/tutorials/react-publish-data-set.md Normal file
View File

@ -0,0 +1,126 @@
---
title: React Publish a Data Set
---
### Requirements ###
- This is continuation of [React App / Setup](/tutorials/react-setup) so make sure you have all the steps running.
### Adding Publishing ###
1. Open `src/App.js` in your marketplace dapp from [React App / Setup](/tutorials/react-setup)
2. First lets add asset that we want to publish. To do that we need to add the following code after `window.ethereum.enable()` line.
```javascript
const asset = {
base: {
name: "Office Humidity",
description: "Weather information of UK including temperature and humidity",
dateCreated: "2012-02-01T10:55:11+00:00",
author: "Met Office",
size: "3.1bg",
license: "Public Domain",
copyrightHolder: "Met Office",
contentUrls: ["https://testocnfiles.blob.core.windows.net/testfiles/testzkp.zip"],
contentType: "text/csv",
links: [{
name: "Dataset sample",
type: "sample",
url: "http://data.ceda.ac.uk/badc/ukcp09/data/gridded-land-obs/gridded-land-obs-daily/"
}],
tags: "weather, uk, 2011, temperature, humidity",
price: 5,
type: "dataset"
},
curation: {
rating: 0,
numVotes: 0,
schema: 'Binary Voting'
},
additionalInformation: {
updateFrequency: "yearly"
}
}
```
3. Now that we have asset to submit we need function to handle it. Just before `render() {` let's add:
```javascript
async submitAsset(){
const accounts = await this.ocean.getAccounts()
const ddo = await this.ocean.registerAsset(asset, accounts[0])
alert("Asset successfully submited:", JSON.stringify(ddo))
}
```
4. Last thing we need is button to start our registration inside render function just after `<h1>Marketplace dapp</h1>`
```jsx
<button onClick={()=>this.submitAsset()}>Register asset</button>
```
### Finished ###
That's it, if you have no errors in your `console.log` and you receive alert after you click `Register asset` you have successfully registered an asset.
Here is full source of `src/App.js` that you should have if you followed this tutorial:
```javascript
import React, { Component } from 'react';
import './App.css';
import { Ocean } from '@oceanprotocol/squid/dist/node/squid'
import * as Web3 from 'web3'
const web3 = new Web3(window.web3.currentProvider)
window.ethereum.enable()
const asset = {
base: {
name: "Office Humidity",
description: "Weather information of UK including temperature and humidity",
dateCreated: "2012-02-01T10:55:11+00:00",
author: "Met Office",
size: "3.1bg",
license: "Public Domain",
copyrightHolder: "Met Office",
contentUrls: ["https://testocnfiles.blob.core.windows.net/testfiles/testzkp.zip"],
contentType: "text/csv",
links: [{
name: "Dataset sample",
type: "sample",
url: "http://data.ceda.ac.uk/badc/ukcp09/data/gridded-land-obs/gridded-land-obs-daily/"
}],
tags: "weather, uk, 2011, temperature, humidity",
price: 5,
type: "dataset"
},
curation: {
rating: 0,
numVotes: 0,
schema: 'Binary Voting'
},
additionalInformation: {
updateFrequency: "yearly"
}
}
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,
password: "secret",
address: "0x068ed00cf0441e4829d9784fcbe7b9e26d4bd8d0",
})
console.log("Finished loading contracts!")
}
async submitAsset(){
const accounts = await this.ocean.getAccounts()
const ddo = await this.ocean.registerAsset(asset, accounts[0])
alert("Asset successfully submited:", JSON.stringify(ddo))
}
render() {
return (
<div className="App">
<h1>Marketplace dapp</h1>
<button onClick={()=>this.submitAsset()}>Register asset</button>
</div>
);
}
}
export default App;
```

89
content/tutorials/react-setup.md Normal file
View File

@ -0,0 +1,89 @@
---
title: React setup
---
### Requirements ###
- `nodejs` >= 10 and `npm` >= 5.2 installed.
- [oceanprotocol/docker-images](https://github.com/oceanprotocol/docker-images) running.
- Browser with [Metamask](https://metamask.io/) and some ether in your account.
### Tutorial Steps ###
1. Run `npx create-react-app marketplace` in you terminal. This will create folder `marketplace` with boilerplate react app.
2. Move to your dapp directory with `cd marketplace` and run `yarn add @oceanprotocol/squid web3`. This adds OceanProtocol and Web3 packages to the dapp.
3. At this point you can already run `yarn start` which starts dapp in your browser at [localhost:3000](http://localhost:3000).
4. To clear react spinning icon open `src/App.js` and modify the source to:
```javascript
import React, { Component } from 'react';
import './App.css';
class App extends Component {
render() {
return (
<div className="App">
<h1>Marketplace dapp</h1>
</div>
);
}
}
export default App;
```
5. Below `import './App.css';` lets import packages we installed, setup web3 and unlock Metamask accounts if locked.
```javascript
import { Ocean } from '@oceanprotocol/squid/dist/node/squid'
import * as Web3 from 'web3'
const web3 = new Web3(window.web3.currentProvider)
window.ethereum.enable()
```
6. After line `class App extends Component {` add following ocean initialization with all configuration. All OceanProtocol operations can be executed from this ocean instance.
```javascript
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,
password: "secret",
address: "0x068ed00cf0441e4829d9784fcbe7b9e26d4bd8d0",
})
console.log("Finished loading contracts!")
}
```
### Finished ###
That's it, if you have no errors in your `console.log` then you have successfully initialized Ocean instance in you breand new react dapp and you are ready for next steps in this tutorial.
Here is full source of `src/App.js` that you should have if you followed this tutorial:
```javascript
import React, { Component } from 'react';
import './App.css';
import { Ocean } from '@oceanprotocol/squid/dist/node/squid'
import * as Web3 from 'web3'
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",
parityUri: "http://localhost:8545",
secretStoreUri: "http://localhost:12001",
threshold: 0,
password: "secret",
address: "0x068ed00cf0441e4829d9784fcbe7b9e26d4bd8d0",
})
console.log("Finished loading contracts!")
}
render() {
return (
<div className="App">
<h1>Marketplace dapp</h1>
</div>
);
}
}
export default App;
```

9
data/sidebars/tutorials.yml
View File

@ -20,3 +20,12 @@
link: /tutorials/get-use-data-set/
- title: Get & Use a Compute Service
link: /tutorials/get-use-compute-service/
- group: React app
items:
- title: Setup
link: /tutorials/react-setup/
- title: Publish a Data Set
link: /tutorials/react-publish-data-set/
- title: Get & Use a Data Set
link: /tutorials/react-get-use-data-set/