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.
--- ---

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

@ -1,34 +1,43 @@
--- ---
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.
## 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.
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 ```javascript
const asset = { const asset = {
base: { base: {
name: "Office Humidity", name: 'Office Humidity',
description: "Weather information of UK including temperature and humidity", description:
dateCreated: "2012-02-01T10:55:11+00:00", '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',
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, price: 5,
type: "dataset" type: 'dataset'
}, },
curation: { curation: {
rating: 0, rating: 0,
@ -36,11 +45,13 @@ title: React Publish a Data Set
schema: 'Binary Voting' schema: 'Binary Voting'
}, },
additionalInformation: { additionalInformation: {
updateFrequency: "yearly" updateFrequency: 'yearly'
} }
} }
``` ```
3. Now that we have asset to submit we need function to handle it. Just before `render() {` let's add:
3. Now that we have asset to submit we need function to handle it. Just before `render() {` let's add:
```javascript ```javascript
async submitAsset(){ async submitAsset(){
const accounts = await this.ocean.getAccounts() const accounts = await this.ocean.getAccounts()
@ -48,41 +59,50 @@ title: React Publish a Data Set
alert("Asset successfully submited:", JSON.stringify(ddo)) 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>`
4. Last thing we need is button to start our registration inside render function just after `<h1>Marketplace dapp</h1>`
```jsx ```jsx
<button onClick={()=>this.submitAsset()}>Register asset</button> <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()
const asset = {
base: { base: {
name: "Office Humidity", name: 'Office Humidity',
description: "Weather information of UK including temperature and humidity", description: 'Weather information of UK including temperature and humidity',
dateCreated: "2012-02-01T10:55:11+00:00", dateCreated: '2012-02-01T10:55:11+00:00',
author: "Met Office", author: 'Met Office',
size: "3.1bg", size: '3.1bg',
license: "Public Domain", license: 'Public Domain',
copyrightHolder: "Met Office", copyrightHolder: 'Met Office',
contentUrls: ["https://testocnfiles.blob.core.windows.net/testfiles/testzkp.zip"], contentUrls: [
contentType: "text/csv", 'https://testocnfiles.blob.core.windows.net/testfiles/testzkp.zip'
links: [{ ],
name: "Dataset sample", contentType: 'text/csv',
type: "sample", links: [
url: "http://data.ceda.ac.uk/badc/ukcp09/data/gridded-land-obs/gridded-land-obs-daily/" {
}], name: 'Dataset sample',
tags: "weather, uk, 2011, temperature, humidity", 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, price: 5,
type: "dataset" type: 'dataset'
}, },
curation: { curation: {
rating: 0, rating: 0,
@ -90,37 +110,37 @@ Here is full source of `src/App.js` that you should have if you followed this tu
schema: 'Binary Voting' schema: 'Binary Voting'
}, },
additionalInformation: { additionalInformation: {
updateFrequency: "yearly" updateFrequency: 'yearly'
} }
} }
class App extends Component { class App extends Component {
async componentDidMount() { async componentDidMount() {
this.ocean = await new Ocean.getInstance({ this.ocean = await new Ocean.getInstance({
web3Provider: web3, web3Provider: web3,
nodeUri: "http://localhost:8545", nodeUri: 'http://localhost:8545',
aquariusUri: "http://localhost:5000", aquariusUri: 'http://localhost:5000',
brizoUri: "http://localhost:8030", brizoUri: 'http://localhost:8030',
parityUri: "http://localhost:8545", parityUri: 'http://localhost:8545',
secretStoreUri: "http://localhost:12001", secretStoreUri: 'http://localhost:12001',
threshold: 0, threshold: 0,
password: "secret", password: 'secret',
address: "0x068ed00cf0441e4829d9784fcbe7b9e26d4bd8d0", address: '0x068ed00cf0441e4829d9784fcbe7b9e26d4bd8d0'
}) })
console.log("Finished loading contracts!") console.log('Finished loading contracts!')
} }
async submitAsset(){ async submitAsset() {
const accounts = await this.ocean.getAccounts() const accounts = await this.ocean.getAccounts()
const ddo = await this.ocean.registerAsset(asset, accounts[0]) const ddo = await this.ocean.registerAsset(asset, accounts[0])
alert("Asset successfully submited:", JSON.stringify(ddo)) alert('Asset successfully submited:', JSON.stringify(ddo))
} }
render() { render() {
return ( return (
<div className="App"> <div className="App">
<h1>Marketplace dapp</h1> <h1>Marketplace dapp</h1>
<button onClick={()=>this.submitAsset()}>Register asset</button> <button onClick={() => this.submitAsset()}>Register asset</button>
</div> </div>
); )
} }
} }
export default App; export default App
``` ```

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

@ -1,39 +1,50 @@
--- ---
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 ```javascript
import React, { Component } from 'react'; import React, { Component } from 'react'
import './App.css'; import './App.css'
class App extends Component { class App extends Component {
render() { render() {
return ( return (
<div className="App"> <div className="App">
<h1>Marketplace dapp</h1> <h1>Marketplace dapp</h1>
</div> </div>
); )
} }
} }
export default App; export default App
``` ```
5. Below `import './App.css';` lets import packages we installed, setup web3 and unlock Metamask accounts if locked.
5. Below the `import './App.css'` line, let's import the packages we installed, set up web3 and unlock MetaMask accounts (if locked):
```javascript ```javascript
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()
``` ```
6. After line `class App extends Component {` add following ocean initialization with all configuration. All OceanProtocol operations can be executed from this ocean instance.
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 ```javascript
async componentDidMount() { async componentDidMount() {
this.ocean = await new Ocean.getInstance({ this.ocean = await new Ocean.getInstance({
@ -51,39 +62,41 @@ title: React setup
} }
``` ```
### Finished ### ## 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: 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.
```javascript
import React, { Component } from 'react'; Here is the full source of `src/App.js` that you should have if you followed this tutorial:
import './App.css';
import { Ocean } from '@oceanprotocol/squid/dist/node/squid' ```javascript
import * as Web3 from 'web3' import React, { Component } from 'react'
const web3 = new Web3(window.web3.currentProvider) import './App.css'
window.ethereum.enable() import { Ocean } from '@oceanprotocol/squid/dist/node/squid'
class App extends Component { import * as Web3 from 'web3'
const web3 = new Web3(window.web3.currentProvider)
window.ethereum.enable()
class App extends Component {
async componentDidMount() { async componentDidMount() {
this.ocean = await new Ocean.getInstance({ this.ocean = await new Ocean.getInstance({
web3Provider: web3, web3Provider: web3,
nodeUri: "http://localhost:8545", nodeUri: 'http://localhost:8545',
aquariusUri: "http://localhost:5000", aquariusUri: 'http://localhost:5000',
brizoUri: "http://localhost:8030", brizoUri: 'http://localhost:8030',
parityUri: "http://localhost:8545", parityUri: 'http://localhost:8545',
secretStoreUri: "http://localhost:12001", secretStoreUri: 'http://localhost:12001',
threshold: 0, threshold: 0,
password: "secret", password: 'secret',
address: "0x068ed00cf0441e4829d9784fcbe7b9e26d4bd8d0", address: '0x068ed00cf0441e4829d9784fcbe7b9e26d4bd8d0'
}) })
console.log("Finished loading contracts!") console.log('Finished loading contracts!')
} }
render() { render() {
return ( return (
<div className="App"> <div className="App">
<h1>Marketplace dapp</h1> <h1>Marketplace dapp</h1>
</div> </div>
); )
} }
} }
export default App; export default App
``` ```

16
data/sidebars/tutorials.yml
View File

@ -7,21 +7,7 @@
- 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/

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

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