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

Removed some tutorial stubs & started editing

Browse Source
This commit is contained in:
Troy McConaghy 2018-12-05 15:01:07 +01:00
parent 9d221294e7
commit c1609f283e
10 changed files with 239 additions and 246 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
content/tutorials/get-use-compute-service.md
View File

@ -1,3 +0,0 @@
---
title: Get & Use a Compute Service
---

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

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

2
content/tutorials/introduction.md
View File

@ -3,7 +3,7 @@ title: Overview of the Tutorials
description: What you can expect to find in these Ocean Protocol tutorials.
---
These tutorials give examples of how to use Pleuston (a demo marketplace app) and Python to:
These tutorials give examples of how to use squid-js (JavaScript) and squid-py (Python) to:
- publish a data set
- publish a compute service

3
content/tutorials/publish-compute-service.md
View File

@ -1,3 +0,0 @@
---
title: Publish a Compute Service
---

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

@ -1,20 +0,0 @@
---
title: Publish a Data Set
---
### Requirements ###
- 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))
### Publishing ###
```javascript
// 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
View File

@ -1,3 +1,4 @@
---
title: React Get & Use a Data Set
title: Get & Use a Data Set
description: Tutorial to get and use a data set in a basic React app.
---

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

@ -1,126 +1,146 @@
---
title: React Publish a Data Set
title: Publish a Data Set
description: Tutorial to add data set publishing capabilities to a basic React app.
---
### Requirements ###
- This is continuation of [React App / Setup](/tutorials/react-setup) so make sure you have all the steps running.
## Requirements
### Adding Publishing ###
This is continuation of the [React App Setup](/tutorials/react-setup) tutorial, so make sure you have all the steps running.
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>
```
## Adding Publishing
1. Open `src/App.js` in your marketplace dapp from the [React App Setup](/tutorials/react-setup) tutorial.
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
### 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"
```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/'
}
}
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;
```
],
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
```

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

@ -1,89 +1,102 @@
---
title: React setup
title: React App Setup
description: Tutorial to set up a basic React app that uses squid-js.
---
### 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.
This tutorial shows how you can build a basic [React](https://reactjs.org/) app that uses the squid-js JavaScript package to publish a data set, get a data set, and more.
### Tutorial Steps ###
1. Run `npx create-react-app marketplace` in you terminal. This will create folder `marketplace` with boilerplate react app.
## Requirements
- `nodejs` >= 10 installed. (You can check using `node -v`.)
- `npm` >= 5.2 installed. (You can check using `npm -v`.)
- [oceanprotocol/docker-images](https://github.com/oceanprotocol/docker-images) running, but with _Pleuston not running_. (Pleuston is another React app.)
- A browser with [MetaMask](https://metamask.io/) and some Ether in your account (for the network you're connected to). See [the tutorial about getting Ether and Ocean Tokens for testnets](/tutorials/get-ether-and-ocean-tokens/).
## Tutorial Steps
1. Run `npx create-react-app marketplace` in you terminal. This will create a folder named `marketplace` with a 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!")
}
```
3. At this point you can already run `yarn start` which starts the dapp in your browser at [localhost:3000](http://localhost:3000).
4. To clear the React spinning icon, open `src/App.js` and modify the source to:
### 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.
```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
```
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;
```
5. Below the `import './App.css'` line, let's import the packages we installed, set up 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 the line `class App extends Component {` add the 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 an Ocean instance in you brand new React dapp and you are ready for the next steps in this tutorial.
Here is the 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
```

18
data/sidebars/tutorials.yml
View File

@ -7,25 +7,11 @@
- title: Set Up Azure Storage
link: /tutorials/azure-for-brizo/
- group: Publish
items:
- title: Publish a Data Set
link: /tutorials/publish-data-set/
- title: Publish a Compute Service
link: /tutorials/publish-compute-service/
- group: Consume
items:
- title: Get & Use a Data Set
link: /tutorials/get-use-data-set/
- title: Get & Use a Compute Service
link: /tutorials/get-use-compute-service/
- group: React app
- group: React App Tutorial
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/
link: /tutorials/react-get-use-data-set/

4
src/templates/ApiSwagger.module.scss
View File

@ -19,7 +19,9 @@
margin-left: 0;
}
&:before { display: none;}
&:before {
display: none;
}
}
}