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. 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 data set
- publish a compute service - 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 ### ## Requirements
- This is continuation of [React App / Setup](/tutorials/react-setup) so make sure you have all the steps running.
### 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) ## Adding Publishing
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 1. Open `src/App.js` in your marketplace dapp from the [React App Setup](/tutorials/react-setup) tutorial.
const asset = { 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.
base: {
name: "Office Humidity", ```javascript
description: "Weather information of UK including temperature and humidity", const asset = {
dateCreated: "2012-02-01T10:55:11+00:00", base: {
author: "Met Office", name: 'Office Humidity',
size: "3.1bg", description:
license: "Public Domain", 'Weather information of UK including temperature and humidity',
copyrightHolder: "Met Office", dateCreated: '2012-02-01T10:55:11+00:00',
contentUrls: ["https://testocnfiles.blob.core.windows.net/testfiles/testzkp.zip"], author: 'Met Office',
contentType: "text/csv", size: '3.1bg',
links: [{ license: 'Public Domain',
name: "Dataset sample", copyrightHolder: 'Met Office',
type: "sample", contentUrls: [
url: "http://data.ceda.ac.uk/badc/ukcp09/data/gridded-land-obs/gridded-land-obs-daily/" 'https://testocnfiles.blob.core.windows.net/testfiles/testzkp.zip'
}], ],
tags: "weather, uk, 2011, temperature, humidity", contentType: 'text/csv',
price: 5, links: [
type: "dataset" {
}, name: 'Dataset sample',
curation: { type: 'sample',
rating: 0, url:
numVotes: 0, 'http://data.ceda.ac.uk/badc/ukcp09/data/gridded-land-obs/gridded-land-obs-daily/'
schema: 'Binary Voting' }
}, ],
additionalInformation: { tags: 'weather, uk, 2011, temperature, humidity',
updateFrequency: "yearly" price: 5,
} type: 'dataset'
} },
``` curation: {
3. Now that we have asset to submit we need function to handle it. Just before `render() {` let's add: rating: 0,
```javascript numVotes: 0,
async submitAsset(){ schema: 'Binary Voting'
const accounts = await this.ocean.getAccounts() },
const ddo = await this.ocean.registerAsset(asset, accounts[0]) additionalInformation: {
alert("Asset successfully submited:", JSON.stringify(ddo)) updateFrequency: 'yearly'
} }
``` }
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> 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. 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: Here is full source of `src/App.js` that you should have if you followed this tutorial:
```javascript
import React, { Component } from 'react'; ```javascript
import './App.css'; import React, { Component } from 'react'
import { Ocean } from '@oceanprotocol/squid/dist/node/squid' import './App.css'
import * as Web3 from 'web3' import { Ocean } from '@oceanprotocol/squid/dist/node/squid'
const web3 = new Web3(window.web3.currentProvider) import * as Web3 from 'web3'
window.ethereum.enable() const web3 = new Web3(window.web3.currentProvider)
const asset = { window.ethereum.enable()
base: { const asset = {
name: "Office Humidity", base: {
description: "Weather information of UK including temperature and humidity", name: 'Office Humidity',
dateCreated: "2012-02-01T10:55:11+00:00", description: 'Weather information of UK including temperature and humidity',
author: "Met Office", dateCreated: '2012-02-01T10:55:11+00:00',
size: "3.1bg", author: 'Met Office',
license: "Public Domain", size: '3.1bg',
copyrightHolder: "Met Office", license: 'Public Domain',
contentUrls: ["https://testocnfiles.blob.core.windows.net/testfiles/testzkp.zip"], copyrightHolder: 'Met Office',
contentType: "text/csv", contentUrls: [
links: [{ 'https://testocnfiles.blob.core.windows.net/testfiles/testzkp.zip'
name: "Dataset sample", ],
type: "sample", contentType: 'text/csv',
url: "http://data.ceda.ac.uk/badc/ukcp09/data/gridded-land-obs/gridded-land-obs-daily/" links: [
}], {
tags: "weather, uk, 2011, temperature, humidity", name: 'Dataset sample',
price: 5, type: 'sample',
type: "dataset" url:
}, 'http://data.ceda.ac.uk/badc/ukcp09/data/gridded-land-obs/gridded-land-obs-daily/'
curation: {
rating: 0,
numVotes: 0,
schema: 'Binary Voting'
},
additionalInformation: {
updateFrequency: "yearly"
} }
} ],
class App extends Component { tags: 'weather, uk, 2011, temperature, humidity',
async componentDidMount() { price: 5,
this.ocean = await new Ocean.getInstance({ type: 'dataset'
web3Provider: web3, },
nodeUri: "http://localhost:8545", curation: {
aquariusUri: "http://localhost:5000", rating: 0,
brizoUri: "http://localhost:8030", numVotes: 0,
parityUri: "http://localhost:8545", schema: 'Binary Voting'
secretStoreUri: "http://localhost:12001", },
threshold: 0, additionalInformation: {
password: "secret", updateFrequency: 'yearly'
address: "0x068ed00cf0441e4829d9784fcbe7b9e26d4bd8d0", }
}) }
console.log("Finished loading contracts!") class App extends Component {
} async componentDidMount() {
async submitAsset(){ this.ocean = await new Ocean.getInstance({
const accounts = await this.ocean.getAccounts() web3Provider: web3,
const ddo = await this.ocean.registerAsset(asset, accounts[0]) nodeUri: 'http://localhost:8545',
alert("Asset successfully submited:", JSON.stringify(ddo)) aquariusUri: 'http://localhost:5000',
} brizoUri: 'http://localhost:8030',
render() { parityUri: 'http://localhost:8545',
return ( secretStoreUri: 'http://localhost:12001',
<div className="App"> threshold: 0,
<h1>Marketplace dapp</h1> password: 'secret',
<button onClick={()=>this.submitAsset()}>Register asset</button> address: '0x068ed00cf0441e4829d9784fcbe7b9e26d4bd8d0'
</div> })
); console.log('Finished loading contracts!')
} }
} async submitAsset() {
export default App; 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 ### 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.
- `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 ### ## Requirements
1. Run `npx create-react-app marketplace` in you terminal. This will create folder `marketplace` with boilerplate react app.
- `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. 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). 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 react spinning icon open `src/App.js` and modify the source to: 4. To clear the 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 ### ```javascript
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. 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: 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 React, { Component } from 'react'; ```javascript
import './App.css'; import { Ocean } from '@oceanprotocol/squid/dist/node/squid'
import { Ocean } from '@oceanprotocol/squid/dist/node/squid' import * as Web3 from 'web3'
import * as Web3 from 'web3' const web3 = new Web3(window.web3.currentProvider)
const web3 = new Web3(window.web3.currentProvider) window.ethereum.enable()
window.ethereum.enable() ```
class App extends Component {
async componentDidMount() { 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.
this.ocean = await new Ocean.getInstance({
web3Provider: web3, ```javascript
nodeUri: "http://localhost:8545", async componentDidMount() {
aquariusUri: "http://localhost:5000", this.ocean = await new Ocean.getInstance({
brizoUri: "http://localhost:8030", web3Provider: web3,
parityUri: "http://localhost:8545", nodeUri: "http://localhost:8545",
secretStoreUri: "http://localhost:12001", aquariusUri: "http://localhost:5000",
threshold: 0, brizoUri: "http://localhost:8030",
password: "secret", parityUri: "http://localhost:8545",
address: "0x068ed00cf0441e4829d9784fcbe7b9e26d4bd8d0", secretStoreUri: "http://localhost:12001",
}) threshold: 0,
console.log("Finished loading contracts!") password: "secret",
} address: "0x068ed00cf0441e4829d9784fcbe7b9e26d4bd8d0",
render() { })
return ( console.log("Finished loading contracts!")
<div className="App"> }
<h1>Marketplace dapp</h1> ```
</div>
); ## 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.
export default App;
``` 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 - title: Set Up Azure Storage
link: /tutorials/azure-for-brizo/ link: /tutorials/azure-for-brizo/
- group: Publish - group: React App Tutorial
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
items: items:
- title: Setup - title: Setup
link: /tutorials/react-setup/ link: /tutorials/react-setup/
- title: Publish a Data Set - title: Publish a Data Set
link: /tutorials/react-publish-data-set/ link: /tutorials/react-publish-data-set/
- title: Get & Use a 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; margin-left: 0;
} }
&:before { display: none;} &:before {
display: none;
}
} }
} }