Merge pull request #92 from oceanprotocol/publish-data-set-react

Publish data set react

content/tutorials/get-use-compute-service.md

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

content/tutorials/get-use-data-set.md

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

content/tutorials/introduction.md

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

content/tutorials/publish-compute-service.md

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

content/tutorials/publish-data-set.md

@@ -1,3 +0,0 @@
----
-title: Publish a Data Set
----

content/tutorials/react-get-use-data-set.md

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

content/tutorials/react-publish-data-set.md

@@ -0,0 +1,146 @@
+---
+title: Publish a Data Set
+description: Tutorial to add dataset publishing capabilities to a basic React app.
+---
+
+## Requirements
+
+This is a 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 app from the [React App Setup](/tutorials/react-setup) tutorial.
+2. First let's add the 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 an 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. 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>
+   ```
+
+## Finished
+
+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.
+
+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'
+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 app</h1>
+        <button onClick={() => this.submitAsset()}>Register asset</button>
+      </div>
+    )
+  }
+}
+export default App
+```

content/tutorials/react-setup.md

@@ -0,0 +1,105 @@
+---
+title: React App Setup
+description: Tutorial to set up a basic React app that uses squid-js.
+---
+
+This tutorial shows how you can build a basic [React](https://reactjs.org/) app with [Create React App](https://github.com/facebook/create-react-app) that uses the squid-js JavaScript package to publish a data set, get a data set, and more.
+
+## Requirements
+
+- `nodejs` >= 10 is installed. You can check using `node -v`
+- `npm` >= 5.2 is installed. You can check using `npm -v`
+- Do [the tutorial to Set Up Azure Storage](/tutorials/azure-for-brizo/).
+- Git clone the [oceanprotocol/docker-images](https://github.com/oceanprotocol/docker-images) repository, then in that directory:
+  - Edit the `brizo.env` file and set all `AZURE_`... values.
+  - Run `./start_ocean.sh --no-pleuston --local-pond-node` in [oceanprotocol/docker-images](https://github.com/oceanprotocol/docker-images). This runs all services locally, including a local Parity Ethereum node.
+- Use a browser with [MetaMask](https://metamask.io/) and some Ether in your account. 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 app directory with `cd marketplace` and run `npm install @oceanprotocol/squid web3`. This adds the Ocean Protocol JavaScript library and Web3 packages to the app.
+3. At this point you can already run `npm start` which starts the app 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:
+
+   ```javascript
+   import React, { Component } from 'react'
+   import './App.css'
+   class App extends Component {
+     render() {
+       return (
+         <div className="App">
+           <h1>Marketplace app</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'
+   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 app 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'
+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 app</h1>
+      </div>
+    )
+  }
+}
+export default App
+```

data/sidebars/tutorials.yml

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

src/templates/ApiSwagger.module.scss

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