Merge pull request #95 from oceanprotocol/react-tutorial-fixes

fixes from #92

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

@@ -5,80 +5,87 @@ description: Tutorial to add dataset publishing capabilities to a basic React ap
 
 ## 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
+This is a continuation of the [React App Setup](/tutorials/react-setup) tutorial, so make sure you have done all the steps described in there.
+
+Open `src/App.js` in your marketplace app from the [React App Setup](/tutorials/react-setup) tutorial.
+
+## Define Asset
+
+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, defining our asset based on the [OEP-08](https://github.com/oceanprotocol/OEPs/tree/master/8) metadata structure:
+
+```js
+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'
+  }
+}
+```
+
+## Handle Asset Publishing
+
+Now that we have an asset to submit, we need a function to handle it. Just before `render() {` let's add this function:
+
+```js
+async submitAsset() {
+  const accounts = await this.ocean.getAccounts()
+  const ddo = await this.ocean.registerAsset(asset, accounts[0])
+  alert('Asset successfully submited: ', JSON.stringify(ddo))
+}
+```
+
+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>
+```
+
+## Final Result
 
 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
+```jsx
 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',
@@ -113,6 +120,7 @@ const asset = {
     updateFrequency: 'yearly'
   }
 }
+
 class App extends Component {
   async componentDidMount() {
     this.ocean = await new Ocean.getInstance({
@@ -128,19 +136,22 @@ class App extends Component {
     })
     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))
+    alert('Asset successfully submited: ', JSON.stringify(ddo))
   }
+
   render() {
     return (
-      <div className="App">
+      <div className="App App-header">
         <h1>Marketplace app</h1>
         <button onClick={() => this.submitAsset()}>Register asset</button>
       </div>
     )
   }
 }
+
 export default App
 ```

content/tutorials/react-setup.md

@@ -1,83 +1,113 @@
 ---
 title: React App Setup
-description: Tutorial to set up a basic React app that uses squid-js.
+description: 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.
 ---
 
-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`
+- `Node.js` >= 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/).
+- Do the tutorial to [Set Up Azure Storage](/tutorials/azure-for-brizo/).
+- 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/).
 - 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.
+  - Run `./start_ocean.sh --no-pleuston --local-kovan-node`. This runs several Ocean services locally, including a local Parity Ethereum node connected to the Kovan Testnet.
+
+## New Create React App
+
+First, kick start your new React app by creating a boilerplate with Create React App:
+
+```bash
+npx create-react-app marketplace
+```
+
+This will create a folder named `marketplace` with a boilerplate React app. Go into that new folder and add the Ocean Protocol JavaScript library and Web3 packages to the app's dependencies:
+
+```bash
+cd marketplace/
+npm install @oceanprotocol/squid web3
+```
+
+At this point you can already run `npm start` which starts the app in your browser at [localhost:3000](http://localhost:3000):
+
+![React App 01](images/react-app-01.png)
+
+## Add Markup & Web3
+
+Let's make it ours, open `src/App.js` and replace the whole source with:
+
+```jsx
+import React, { Component } from 'react'
+import './App.css'
+
+class App extends Component {
+  render() {
+    return (
+      <div className="App App-header">
+        <h1>Marketplace app</h1>
+      </div>
+    )
+  }
+}
+
+export default App
+```
+
+Below the `import './App.css'` line, let's import the packages we installed, set up web3 and unlock MetaMask accounts (if locked):
+
+```js
+import { Ocean } from '@oceanprotocol/squid'
+import * as Web3 from 'web3'
+
+const web3 = new Web3(window.web3.currentProvider)
+window.ethereum.enable()
+```
+
+After those steps you should see this, and MetaMask should have asked you to allow access to your account:
+
+![React App 02](images/react-app-02.png)
+![React App 03](images/react-app-03.png)
+
+## Create Ocean instance
+
+Now that we are successfully connected with Web3, we can setup our Ocean instance.
+
+At the beginning of your component, create a new Ocean instance with all configuration within the `componentDidMount` lifecycle method. All Ocean Protocol operations can be executed from this Ocean instance.
+
+```js
+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!")
+}
+```
+
+## Final Result
+
+That's it, if you have no errors in your `console.log` then you have successfully initialized an Ocean instance in your brand new React app and you are ready for the [next part of this tutorial](/tutorials/react-publish-data-set/).
+
+![React App 04](images/react-app-04.png)
 
 Here is the full source of `src/App.js` that you should have if you followed this tutorial:
 
-```javascript
+```jsx
 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({
@@ -93,13 +123,17 @@ class App extends Component {
     })
     console.log('Finished loading contracts!')
   }
+
   render() {
     return (
-      <div className="App">
+      <div className="App App-header">
         <h1>Marketplace app</h1>
       </div>
     )
   }
 }
+
 export default App
 ```
+
+Move on to [Publish a Data Set](/tutorials/react-publish-data-set/).